GeoJSON图层搭配Map Label时zIndex属性无效问题问询

我看了你的示例代码和问题描述，核心问题在于Google Maps Data图层与MapLabel的层级归属不同——直接给MapLabel设置zIndex无法生效，因为二者默认处于同一个绘制层级，Data图层会覆盖在MapLabel之上。

问题根源 #

Google Maps的map.data（也就是你加载GeoJSON的图层）是绘制在overlayLayer这个内置Pane上的，而MapLabel默认也会被添加到overlayLayer。即便你给MapLabel设置更高的zIndex，由于Data图层的绘制优先级，标签还是会被深色的GeoJSON区域遮挡。

解决方案：将MapLabel移到更高层级的Pane #

我们需要把MapLabel放到比overlayLayer层级更高的Pane中，比如overlayMouseTarget（这个Pane专门用于处理鼠标交互，位于所有普通地图图层之上）。修改代码中创建MapLabel的逻辑即可：

vm.map.data.forEach(function (feature) {
  var centroid = feature.getProperty('centroid');
  var myLatlng = new google.maps.LatLng(centroid.coordinates[1], centroid.coordinates[0]);
  
  // 创建MapLabel时不指定map参数
  var mapLabel = new MapLabel({
    text: feature.getProperty('Shale_play'),
    position: myLatlng,
    fontSize: 16,
    align: 'center',
    minZoom: 5,
    fontColor: '#0000ff',
    zIndex: 5000
  });
  
  mapLabel.setMap(vm.map);
  // 关键：将标签放到更高层级的Pane，确保显示在GeoJSON图层上方
  mapLabel.setPane(vm.map.getPane('overlayMouseTarget'));
  
  mapLabel.set('position', myLatlng);
});

额外说明 #

• 你原来给Data图层设置的zIndex:1000可以保留，但它不影响MapLabel的层级关系，因为二者不在同一个Pane体系里。
• overlayMouseTarget是Google Maps内置的顶层Pane之一，除了这个，你也可以选择floatPane（用于控件和弹窗），不过overlayMouseTarget更适合地图标签这类需要在图层上方显示的元素。

修改后的完整代码 #

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
  <script src="geojson.js"></script> 
  <script src="https://maps.google.com/maps/api/js?libraries=places,visualization,drawing,geometry"></script> 
  <script src="https://code.angularjs.org/1.3.15/angular.js"></script> 
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
  <script src="https://googlemaps.github.io/js-map-label/src/maplabel-compiled.js"></script> 
  <script> 
    var app = angular.module('myApp', ['ngMap']); 
    app.controller('MyCtrl', function(NgMap) { 
      var vm = this; 
      NgMap.getMap().then(function(map) { 
        vm.map = map; 
        vm.map.data.setStyle(function(feature) { 
          return({ 
            fillColor: feature.getProperty('fill') ? feature.getProperty('fill') : 'transparent', 
            strokeWeight: 0.5, 
            fillOpacity: feature.getProperty('fillOpacity') ? feature.getProperty('fillOpacity') : 0.5, 
            zIndex: 1000 
          }); 
        }); 
        vm.map.data.addGeoJson(geojson); 
        vm.map.data.forEach(function (feature) { 
          var centroid = feature.getProperty('centroid'); 
          var myLatlng = new google.maps.LatLng(centroid.coordinates[1], centroid.coordinates[0]); 
          var mapLabel = new MapLabel({ 
            text: feature.getProperty('Shale_play'), 
            position: myLatlng, 
            fontSize: 16, 
            align: 'center', 
            minZoom: 5, 
            fontColor: '#0000ff', 
            zIndex: 5000 
          }); 
          mapLabel.setMap(vm.map);
          // 关键：将标签移到更高层级的Pane
          mapLabel.setPane(vm.map.getPane('overlayMouseTarget'));
          mapLabel.set('position', myLatlng); 
        }); 
      }); 
    }); 
  </script> 
</head> 
<body ng-controller="MyCtrl as vm"> 
  <ng-map zoom="8" center="35.3944545,-92.78723"></ng-map> 
</body> 
</html>

geojson.js文件保持不变：

var geojson = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "id": "geology_tightOilGas_eia20160311", "fillOpacity": "0.8", "fill": "#00aa22", "Basin": "Arkoma", "Lithology": "Shale", "Shale_play": "Fayetteville", "Source": "EIA", "Area_sq_mi": 5852.69474734, "Area_sq_km": 15158.4098071, "Age_shale": "Mississippian", "centroid": { "type": "Point", "coordinates": [-92.78723, 35.3944545] } }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [-94.277701, 35.202423], [-94.382715, 35.322647], [-94.393411, 35.533806], [-94.36331599899995, 35.638342], [-94.24130399899997, 35.682679], [-94.023528, 35.690577], [-93.875907, 35.691057], [-93.491065, 35.684045], [-92.952118, 35.658092], [-92.664754, 35.666656], [-92.30350699899998, 35.677098], [-91.918848, 35.628261], [-91.475479, 35.601242], [-91.181049, 35.59428500100006], [-91.274519, 35.529656], [-91.388323, 35.449603], [-91.544307, 35.31595599900004], [-91.73661700099996, 35.176988], [-91.867632, 35.102377], [-92.012094, 35.097852], [-92.29381300099999, 35.102714], [-92.709335, 35.13337], [-93.396545, 35.153332], [-94.01489300099996, 35.168451], [-94.277701, 35.202423] ] ] ] } }] };

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