Google Maps不同GeoJSON图层多边形元素重叠遮挡问题如何解决

问题原因 #

Google Maps JavaScript API的多个Data图层实例默认不会按图层挂载顺序统一控制层级，不同图层的要素会根据内部渲染规则混合排序，因此出现部分网格图层元素覆盖上层黑色多边形的问题。

解决方案 #

通过给不同图层的要素统一设置样式中的zIndex属性控制层级，zIndex数值越大，显示层级越高：

1. 给底层网格图层（layer1）设置较低的zIndex值
2. 给上层黑色多边形图层（layer2）设置更高的zIndex值，同时配置黑色填充、描边样式

修改后核心代码 #

<div id='map_canvas' class='map-canvas' style='height:600px; width: 100%'></div>

var map; 

function initMap() {    
  map = new google.maps.Map(document.getElementById('map_canvas'), {   
    zoom: 11,       
    center: {lat: 42.917592, lng:  10.978387},      
    mapTypeId: 'satellite'      
  });     

  var layer1 = new google.maps.Data(); 
  layer1.addGeoJson({
    // 原有网格图层GeoJSON数据
    "type": "FeatureCollection",
    "features": [
      // 原有要素内容
    ] 
  });          

  var layer2 = new google.maps.Data(); 
  layer2.addGeoJson({
    // 原有黑色多边形图层GeoJSON数据
    "type": "FeatureCollection",
    "features": [
      // 原有要素内容
    ] 
  });

  // 网格图层样式：设置低层级
  layer1.setStyle((feature) => {       
    var colore = feature.getProperty("colore");                     
    return  {
      fillColor: colore,
      fillOpacity: 0.6,               
      strokeColor: "grey",
      strokeWeight: 0.8,
      zIndex: 1
    };
  });        

  // 黑色多边形图层样式：设置高层级
  layer2.setStyle({
    fillColor: "#000",
    fillOpacity: 1,
    strokeColor: "#000",
    strokeWeight: 1,
    zIndex: 10
  })

  layer1.setMap(map);   
  layer2.setMap(map);   
} 

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

内容的提问来源于stack exchange，提问作者peter