使用Google Maps JavaScript API创建包含大量数据的多边形

时间:2019-07-15 14:49:27

标签: javascript google-maps google-maps-api-3

我想在Google Maps上显示有关土耳其的人口密度地图,并且我有GeoJson文件来创建多边形。将整个图层显示为一层非常简单且相当快。但是我确实需要使用多边形的名称填充这些多边形。我用来显示整个多边形的代码在下面。

provinces_of_turkey = new google.maps.Data(); // POLYGON FOR PROVINCES
        provinces_of_turkey.loadGeoJson(
          'https://gist.githubusercontent.com/oividioscaeremos/5905f9632a1c0ae92c5eb52d1cc40dce/raw/42accdc50510444017c52f3be141b70f706af8e3/provinces_of_turkey.json'
        );
        provinces_of_turkey.setStyle(function (feature) {
          return ({
            fillColor: '#FF8686',
            zIndex: 3,
            fillOpacity: .0,
            strokeColor: '#000000',
            strokeWeight: 1
          });
        });
        provinces_of_turkey.setMap(map);

到目前为止,我需要用不同的填充颜色分别显示这些多边形,我可以使用下面显示的代码显示一些多边形,但是以这种格式显示整个地图会使浏览器崩溃,因此我需要另一个解决方案。如果我可以将坐标数组快速转换为google.maps.LatLng数组,则可以解决我的问题。
我用来分别显示每个多边形的内容;

fetch(
      'https://gist.githubusercontent.com/oividioscaeremos/5905f9632a1c0ae92c5eb52d1cc40dce/raw/42accdc50510444017c52f3be141b70f706af8e3/provinces_of_turkey.json'
    )
    .then(function (response) {
      response.json().then(function (results) {
        for (var i = 0; i < results.features.length; i++) {
          if(results.features[i].geometry.type == "MultiPolygon"){
            continue;
          }
          var paths = [];
          for (var i = 0; i < results.features[i].geometry.coordinates[0].length; i++) {
            var coordinates = results.features[i].geometry.coordinates[0][i];
            var latLng = new google.maps.LatLng(coordinates[1], coordinates[0]);
            paths.push(latLng);
          }
          provinces_of_turkey = new google.maps.Polygon({
            paths: paths,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: '#FF0000',
            fillOpacity: 0.35
          });
          provinces_of_turkey.setMap(map);
        }
      });
    });

如何在不使浏览器崩溃的情况下为每个多边形填充颜色? (我需要使用Google Maps JavaScript API来完成此操作,因为在同一张地图上,我还要显示一些其他数据。)

0 个答案:

没有答案