Question

我正在使用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]
                    ]
                ]
            ]
        }
    }]
};

Answer 1

I would suggest the following workaround. Instead of the js-map-label library and its MapLabel object you can use native google.maps.Marker object with custom icon and label. The trick is: as a custom icon URL you can provide an URL of empty png image and additionally you can specify a position where the label should appear.

Your code where you create the label should be changed to the following

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

The result that I got with this code is shown in screenshot

Have a look at complete example in plunker:

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

Hope this helps!

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

1 个答案: