11

私はネット全体を検索しましたが、これに対する解決策は見つかりませんでした...見つけた解決策はどれもうまくいきません... VARCHARSの行とこれらのGEOMETRYタイプの行があります。

POLYGON((23.953261 37.733372,23.953623 37.733202,23.953572 37.733132,23.954075 37.732896,23.954126 37.732966,23.954550 37.732767,23.954566 37.732698,23.954467 37.732603,23.954258 37.732476,23.953007 37.733041,23.953207 37.733303,23.953261 37.733372),(23.953695 37.732771,23.954243 37.732524,23.954427 37.732635, 23.954496 37.732702,23.954484 37.732757,23.954133 37.732921,23.954087 37.732859,23.953525 37.733122,23.953577 37.733192,23.953292 37.733326,23.953080 37.733050,23.953695 37.732771))

と

MULTIPOLYGON(((23.949134 37.734540,23.948811 37.734215,23.948775 37.734238,23.949077 37.734541,23.948689 37.734820,23.948809 37.734747,23.949134 37.734540)),((23.948536 37.734531,23.948449 37.734447,23.948414 37.734470,23.948472 37.734526,23.948420 37.734560,23.948449 37.734588,23.948536 37.734531) )))

外輪のない単純な多角形....

したいこと: mysql 解析データを照会し、それらを js に渡し、Google マップに描画します。それについて何か助けはありますか？

4

4 に答える 4

10

オープンソース ライブラリ Wicketを使用して、 WKT 文字列を Google Maps API ジオメトリ オブジェクトに直接変換できます。ここにデモがあります：

http://arthur-e.github.io/Wicket/sandbox-gmaps3.html

于 2013-08-07T19:44:55.987 に答える
10

これらの文字列からすべての座標セットを正しく引き出す方法がわからないため、これは本当に正規表現の質問に帰着するように思えますね。正規表現はここでの友達です。ここでのみ説明するように、理解するためにグーグルで検索してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Some Title</title>
</head>
<body>
<div id="map_canvas" style="width:800px; height:600px;">
</div>
<?php

$polyString1 = 'POLYGON((23.953261 37.733372,23.953623 37.733202,23.953572 37.733132,23.954075 37.732896,23.954126 37.732966,23.954550 37.732767,23.954566 37.732698,23.954467 37.732603,23.954258 37.732476,23.953007 37.733041,23.953207 37.733303,23.953261 37.733372),(23.953695 37.732771,23.954243 37.732524,23.954427 37.732635,23.954496 37.732702,23.954484 37.732757,23.954133 37.732921,23.954087 37.732859,23.953525 37.733122,23.953577 37.733192,23.953292 37.733326,23.953080 37.733050,23.953695 37.732771))';

$polyString2 = 'MULTIPOLYGON(((23.949134 37.734540,23.948811 37.734215,23.948775 37.734238,23.949077 37.734541,23.948689 37.734820,23.948809 37.734747,23.949134 37.734540)),((23.948536 37.734531,23.948449 37.734447,23.948414 37.734470,23.948472 37.734526,23.948420 37.734560,23.948449 37.734588,23.948536 37.734531)))';

echo '<script type="text/javascript">';
//note the quote styles below, Important!
echo "var polys=['$polyString1','$polyString2'];";
echo '</script>';

?>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">

function parsePolyStrings(ps) {
    var i, j, lat, lng, tmp, tmpArr,
        arr = [],
        //match '(' and ')' plus contents between them which contain anything other than '(' or ')'
        m = ps.match(/\([^\(\)]+\)/g);
    if (m !== null) {
        for (i = 0; i < m.length; i++) {
            //match all numeric strings
            tmp = m[i].match(/-?\d+\.?\d*/g);
            if (tmp !== null) {
                //convert all the coordinate sets in tmp from strings to Numbers and convert to LatLng objects
                for (j = 0, tmpArr = []; j < tmp.length; j+=2) {
                    lat = Number(tmp[j]);
                    lng = Number(tmp[j + 1]);
                    tmpArr.push(new google.maps.LatLng(lat, lng));
                }
                arr.push(tmpArr);
            }
        }
    }
    //array of arrays of LatLng objects, or empty array
    return arr;
}

function init() {
    var i, tmp,
        myOptions = {
            zoom: 16,
            center: new google.maps.LatLng(23.9511, 37.7337),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    for (i = 0; i < polys.length; i++) {
        tmp = parsePolyStrings(polys[i]);
        if (tmp.length) {
            polys[i] = new google.maps.Polygon({
                paths : tmp,
                strokeColor : '#FF0000',
                strokeOpacity : 0.8,
                strokeWeight : 2,
                fillColor : '#FF0000',
                fillOpacity : 0.35
            });
            polys[i].setMap(map);
        }
    }
}

init();

</script>
</body>
</html>
于 2013-05-11T22:29:42.043 に答える
1

Wicket (Arthur が言及) と同様に、クライアント側 JavaScript でそのような Well Known Text を処理する Mapbox の wellknown もあります。

于 2016-01-13T13:01:14.320 に答える