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并将它们绘制到谷歌地图。有什么帮助吗？

4

4 回答 4

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 回答
10

您可以使用开源库 Wicket将 WKT 字符串直接转换为 Google Maps API 几何对象。这是一个演示：

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

于 2013-08-07T19:44:55.987 回答
2

@astupidname 几乎是正确的，但会让你感到困惑的是空间数据库使用经度、纬度，而地图系统使用纬度、经度。因此，WKT 输入为 x,y（经度、纬度）。

lat = Number(tmp[j]);
lng = Number(tmp[j + 1]);

应该

lng = Number(tmp[j]);
lat = Number(tmp[j + 1]);
于 2015-11-01T09:41:50.820 回答
1

除了 Wicket（正如 Arthur 所提到的） ， Mapbox中还有一个众所周知的，它在客户端 JavaScript 中处理此类 Well Known Text。

于 2016-01-13T13:01:14.320 回答