地图标签的zIndex如果与GeoJSON图层一起使用则无效答案

【问题标题】：zIndex of map label has no effect if it's used with GeoJSON layer地图标签的zIndex如果与GeoJSON图层一起使用则无效
【发布时间】：2018-06-12 00:04:20
【问题描述】：

我正在使用Google map label 在 GeoJSON 层上显示来自 GeoJSON 数据的一些属性。该图层有一些深色，并且由于地图标签看起来模糊，因此在 GeoJSON 数据图层后面创建了标签。我尝试为标签应用比数据层更大的 zIndex，但它没有效果。在 plunker 中查看问题。

https://plnkr.co/edit/KvhIoRoibsbKk9e4k1Ch?p=preview

<!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=placeses,visualization,drawing,geometry,places"></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,
          map: vm.map,
          fontSize: 16,
          align: 'center',
          minZoom: 5,
          fontColor: '#0000ff',
          zIndex: 5000
      });

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

【问题讨论】：

标签： javascript angularjs google-maps google-maps-api-3 geojson

【解决方案1】：

我建议以下解决方法。除了js-map-label 库及其MapLabel 对象，您可以使用带有自定义图标和标签的本机google.maps.Marker 对象。诀窍是：作为自定义图标 URL，您可以提供空 png 图像的 URL，此外，您可以指定标签应出现的位置。

您创建标签的代码应更改为以下内容

vm.map.data.forEach(function (feature) {
    var centroid = feature.getProperty('centroid');
    var myLatlng = new google.maps.LatLng(centroid.coordinates[1], centroid.coordinates[0]);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: vm.map,
        title: feature.getProperty('Shale_play'),
        icon: {
            labelOrigin: new google.maps.Point(0,0),
            url: "https://upload.wikimedia.org/wikipedia/commons/d/d2/Blank.png"
        },
        label: {
            text: feature.getProperty('Shale_play'),
            color: '#0000ff',
            fontWeight: "bold",
            fontSize: "16px"
        }
    });
});

我用这段代码得到的结果显示在屏幕截图中

查看 plunker 中的完整示例：

https://plnkr.co/edit/ciuPVzjNcVIuqmqq9ZC6?p=preview

希望这会有所帮助！

【讨论】：

感谢人的解决方案，唯一缺少的是最小缩放级别。我想在一定的缩放级别后显示文本。 Marker 类不提供 minZoom 属性。另一种方法是使用zoom_changed 事件并使用setMap(...) 隐藏/显示它。你身边有没有更好的办法？
我相信使用zoom_changed事件来控制带有标签的标记的可见性是个好主意，您可以使用setVisible()标记方法而不是setMap()。
谢谢 xomena。我将使用您的解决方案。