在google maps api v3中独立地与geojson图层交互

Question

我想将两个geojson图层加载到我的地图中,并能够使用不同的规则独立地设置它们.我可以使用下面的代码显示我的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);

任何帮助将非常感谢.我看到一些看起来适用的线程(例如谷歌地图GeoJSON-切换标记图层？)但我不确定如何专门为我的目的应用它.

Answer 1

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

设置地图选项

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

将地图设置为变量.

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
});

最后一步是将图层设置为地图.

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

在此之后我返回了一个承诺,但你可以返回地图对象.这是否有意义/帮助回答您的问题？

此外,在每个图层setStyle()函数中,您可以通过函数添加动态样式.就像添加一个fillColor函数一样,它会根据GeoJson文件中的数据改变颜色.