javascript - 在 google map api v3 中独立与 geojson 层交互

Question

我想将两个 geojson 图层加载到我的 map 中，并能够使用不同的规则独立地设置它们的样式。我可以使用下面的代码显示我的两个 geojson 文件，但由于它们都是同一个 map.data 对象的一部分，我只能对两者应用通用样式。有没有办法解决？最终(长期目标)我还希望能够使用复选框打开和关闭不同的图层(我首先关注独立样式，以免使问题过于复杂)

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
  zoom: 12,
  center: {lat: 39.218509,  lng: -94.563703}
});

map.data.loadGeoJson('https://url1');
map.data.loadGeoJson('https://url2');

map.data.setStyle(function(feature) { //styling rules here}

google.maps.event.addDomListener(window, 'load', initialize);

任何帮助将不胜感激。我看到一些看起来适用的线程(例如 Google maps GeoJSON- toggle marker layers? )，但我不确定如何专门将其应用于我的目的。

Answer 1

所以我只需要做类似的事情，并且需要添加 2 个 geojson 文件并以不同的方式设置它们的样式。您想要做的是初始化 map ，然后添加 2 个不同的图层。基本上为两者设置样式。下面是我的带有注释的代码。我实际上在服务中使用了这个 Angular 函数并返回了一个 promise 。

设置 map 选项

var mapOptions = {
            zoom: 4,
            scrollwheel: false,
            center: new google.maps.LatLng(40.00, -98),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

将 map 设置为变量。

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

初始化 2 个需要分层的变量。我做了州和县。

var countyLayer = new google.maps.Data();
var stateLayer = new google.maps.Data();

然后加载每层的 GeoJson 文件。

countyLayer.loadGeoJson('counties.json');
stateLayer.loadGeoJson('states.json');

之后设置每个图层的样式。

stateLayer.setStyle({
  strokeColor: 'red',
  strokeWeight: 5
 });

countyLayer.setStyle({
  strokeColor: 'black',
  strokeWeight: 1
});

最后一步是将图层设置到 map 。

countyLayer.setMap(map);
stateLayer.setMap(map);

在此之后我返回了一个 promise ，但你可以只返回 map 对象。这有意义/有助于回答您的问题吗？

此外，在每个层的 setStyle() 函数中，您可以通过函数添加动态样式。比如向 fillColor 添加一个函数，该函数将根据 GeoJson 文件中的数据更改颜色。