如何在谷歌地图中只更改一些多边形样式

时间:2015-04-03 10:26:05

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

我试图让两组多边形表现为不同的图层,允许独立切换图层的可见性。例如,当从geojson中添加多边形时,这些多边形不是' rgb'属性我不想重新定义已经绘制的多边形的样式。

我尝试不为多边形指定任何返回值,我不想更改它,但它保留了多边形的默认谷歌地图样式,尽管它们的初始样式。

var mapFrame = frames.getAtcMap(index);
// load the geojson
var file = "Council_Districts_2016.geojson";
$.get(file, function(data){
    var geojson = GetParsedForGoogleMaps(data);
    mapFrame.googleMap.data.addGeoJson(geojson);
    mapFrame.googleMap.data.setStyle(function(feature) {
        if(typeof feature.getProperty('rgb')==="undefined"){
            return {
                fillColor: "white",
        fillOpacity:0,
        strokeColor:"blue",
        strokeOpacity: 0.8,
        strokeWeight: 2.5,
        zIndex:11
            };
        };
    });
});

我理解setStyle重新定义了整个地图的风格,但无论如何重新定义一组多边形的样式?

1 个答案:

答案 0 :(得分:3)

谷歌搜索我发现主要有两种可能性。

使用不同的图层

更一般和永久的解决方案。它只是为第二组多边形定义了一个新的独立层。这是如何在谷歌地图上定义多个图层的一个很好的例子:

// global name of the layer to allow later reference
var layerCouncilDistricts = {};
function addOnTopCouncilDistricts(elem){
    // identification of the map in my multiple maps environment
    var index = elem.id.replace("addCouncilDistrict","");
    var mapFrame = frames.getAtcMap(index);
    // construct the new layer
    layerCouncilDistricts = new google.maps.Data(mapFrame);
    // attach it to a google map
    layerCouncilDistricts.setMap(mapFrame.googleMap);
    // load the geojson
    var file = "Council_Districts_2016.geojson";
    $.get(file, function(data){
        // parse the geojson
        var geojson = GetParsedForGoogleMaps(data);
        // add the geojson to the layer
        layerCouncilDistricts.addGeoJson(geojson);
        // set the style of the layer
        layerCouncilDistricts.setStyle(function(feature){
                return {
                    fillColor: "white",
            fillOpacity:0,
            strokeColor:"blue",
            strokeOpacity: 0.8,
            strokeWeight: 2.5,
            zIndex:11
        }});
    });
}

暂时更改

第二种方法适用于临时更改,但不会将这组功能与其他功能分开。可以使用foreach() of the data class查看所有功能并覆盖样式。在我的例子中,例如:

// examine each feature
mapFrame.googleMap.data.forEach(function(feature) {
  // is feature to be changed
  if(typeof feature.getProperty('rgb')==="undefined") {
    // override existing style for this feature
    overrideStyle(feature,{
      fillColor: "white",
      fillOpacity:0,
      strokeColor:"blue",
      strokeOpacity: 0.8,
      strokeWeight: 2.5,
      zIndex:11
    });
  }
}

效果很好,可以完全独立于其他项目与图层进行进一步交互。