在Google地图api v3中独立地与geojson图层进行互动 [英] interact with geojson layers independently in google maps api v3

问题描述

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

 函数初始化（）{
 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）{//此处的样式规则} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
  

任何帮助都会非常感谢，我看到一些看起来很适用的线程（比如 Google地图GeoJSON-切换标记图层？）但我不确定如何应用它特别为我的目的。

解决方案

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

设置您的地图选项

  var mapOptions = {
 zoom：4， 
滚轮：假，
 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文件中的数据改变颜色。

I would like to load two geojson layers to my map and be able to style them independently with different rules. I can display both my geojson files with the below code, but since they are both part of the same map.data object I have only been able to apply universal styling to both. Is there any way around this? Ultimately(longer term goal) I would also like to be able to toggle the different layers on and off with a checkbox as well (I am focusing on independent styling first so as not to overcomplicate the problem)

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

any help would be very much appreciated. I saw some threads that looked applicable (such as Google maps GeoJSON- toggle marker layers?) but I wasn't sure how to apply it specifically for my purposes.

解决方案

So I just had to do something similar and needed to add 2 geojson files and style them differently. What you want to do is initialize the map and then add 2 different layers. Basically set the styling for both. Below is my code with notes. I actually used this function Angular in a service and returned a promise.

Set up your map options

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

Set your map to a variable.

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

Initialize 2 variable that will take layers. I did state and county.

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

Then load the GeoJson files for each layer.

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

After that set the style for each layer.

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

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

The last step is to set the layer to the map.

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

After this I returned a promise but you could just return the map object. Does this make sense / help answer your question?

Also, within each layer setStyle() function you can add dynamic styling through functions. Like add a function to fillColor that would change the color based on data in the GeoJson file.

这篇关于在Google地图api v3中独立地与geojson图层进行互动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！