在 google 地图 API 中显示多个多边形并设置其样式 - 每个多边形来自不同的外部 geojson 文件

问题描述 投票：0回答：1

我正在尝试在谷歌地图中渲染多个多边形，每个多边形都是从需要不同样式的外部单独geojson文件加载的。

关于该主题有一些类似的帖子，但没有似乎解决了加载多个独立的外部 json 文件的问题，其中它们需要采用不同的样式。

对于每个需要在地图上显示的多边形，我的JS代码如下。我在这里注意到，我尝试使用不同的方法进行显示（以下是多种方法中的两种）。虽然它们都仍然显示，但无论我为描边和填充设置的值如何，它们都带有黑色描边，并且似乎都是 50% 的填充不透明度。

// MSOA polygon
var pathmsoa = map.data.loadGeoJson("msoa.json");
        var msoaplot = {
            strokeColor: '#ffffff',
            strokeOpacity: 0.5,
            strokeWeight: 2,
            fillColor: '#800105',
            fillOpacity: 0.1,
            path: this.pathmsoa,
        }
msoa = new google.maps.Polygon(msoaplot);

// LSOA polygon
var pathlsoa = map.data.loadGeoJson("lsoa.json");
        var lsoa = new google.maps.Polygon({
            path: this.pathlsoa,
            strokeColor: '#ff0000',
            strokeOpacity: 0.5,
            strokeWeight: 1,
            fillColor: '#800105',
            fillOpacity: 0.8,
        });

以上两个多边形显示如下：

唯一的其他一点是控制台返回一个 

InvalidValueError: not an Array
值，但我无法理解为什么 - 考虑到我从不同来源和不同方法遵循的示例。

javascript google-maps google-maps-api-3
1个回答
0
投票

以不同方式设置多边形 

GeoJSON
的一个选项是为每个多边形创建不同的 
map.data
对象：

  var polygon1 = new google.maps.Data();
  polygon1.addGeoJson(geoJson1); // or loadGeoJson
  // style for polygon1
  // for options available see: 
  // 
 https://developers.google.com/maps/documentation/javascript/reference/data#Data.StyleOptions
  polygon1.setStyle({
    fillColor:"red", 
    fillOpacity: 0.5, 
    strokeColor:"green", 
    strokeWeight:2, 
    strokeOpacity:1.0
  })
  polygon1.setMap(map);

  var polygon2 = new google.maps.Data();
  polygon2.addGeoJson(geoJson2);
  // style for polygon2
  polygon2.setStyle({
    fillColor:"blue", 
    fillOpacity: 0.5, 
    strokeColor:"orange", 
    strokeWeight:2, 
    strokeOpacity:1.0
  });
  polygon2.setMap(map);

概念证明小提琴

代码片段：

let map;
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 51.295, lng: -0.105 },
  });

  var polygon1 = new google.maps.Data();
  polygon1.addGeoJson(geoJson1);
  polygon1.setStyle({fillColor:"red", fillOpacity: 0.5, strokeColor:"green", strokeWeight:2, strokeOpacity:1.0})
  polygon1.setMap(map);
  var polygon2 = new google.maps.Data();
  polygon2.addGeoJson(geoJson2);
  polygon2.setStyle({fillColor:"blue", fillOpacity: 0.5, strokeColor:"orange", strokeWeight:2, strokeOpacity:1.0});
  polygon2.setMap(map);
  
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode("Old Coulsdon")
}

function geocode(request) {
  console.log("request="+request)
  geocoder
    .geocode({address: request})
    .then((result) => {
      const { results } = result;
      if (!marker) marker = new google.maps.Marker();
      map.setCenter(results[0].geometry.location);
      marker.setPosition(results[0].geometry.location);
      marker.setMap(map);
      return results;
    })
    .catch((e) => {
      alert("Geocode was not successful for the following reason: " + e);
    });
}

window.initMap = initMap;

var geoJson1 = {"type": "FeatureCollection","name": "old coulsdon","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },"features": [{ "type": "Feature", "properties": { }, "geometry": { "type": "Polygon", "coordinates": [ [ [-0.100356,51.29494], [-0.103918,51.294457],[-0.103661,51.291424],[-0.098479,51.291941],[-0.100356,51.29494],  ] ] } },]};
var geoJson2 = {"type": "FeatureCollection","name": "old coulsdon","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },"features": [{ "type": "Feature", "properties": { }, "geometry": { "type": "Polygon", "coordinates": [ [ [-0.110356,51.29494], [-0.113918,51.294457],[-0.113661,51.291424],[-0.108479,51.291941],[-0.110356,51.29494],  ] ] } },]};
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!doctype html>
<html>
  <head>
    <title>Data Layer: Polygon</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.