Question

我能够显示标记＆amp;使用小叶和谷歌地图的geojson多边形。但是当你放大，缩小或拖动时，地图和多边形会出现在不同的层中，这看起来不太好。如何在同一层中显示它们？这是plunker！

<!DOCTYPE html>
<html>
<style>
  .leaflet-google-layer {
    z-index: 0 !important;
  }  
  .leaflet-map-pane {
    z-index: 100;
  }
</style>

<head>
  <title>Leaflet Draw</title>

  <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css" />
  <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />

  <!--[if lte IE 8]>
        <link rel="stylesheet" href="lib/leaflet/leaflet.ie.css" />
        <link rel="stylesheet" href="leaflet.draw.ie.css" />
    <![endif]-->

  <script src="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.js"></script>
  <script src="https://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://maps.google.com/maps/api/js?v=3.25"></script>
  <script src="script.js"></script>

</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {

      var map = new L.Map('map', {
        center: new L.LatLng(-37.7772, 175.2756),
        zoom: 9
      });
      var googleLayer = new L.Google('ROADMAP');
      map.addLayer(googleLayer);

      var drawnItems = new L.FeatureGroup();
      map.addLayer(drawnItems);

      var drawControl = new L.Control.Draw({
        draw: {
          position: 'topleft',
          polygon: {
            title: 'Draw a sexy polygon!',
            allowIntersection: false,
            drawError: {
              color: '#b00b00',
              timeout: 1000
            },
            shapeOptions: {
              color: '#bada55'
            },
            showArea: true
          },
          polyline: {
            metric: false
          },
          circle: {
            shapeOptions: {
              color: '#662d91'
            }
          }
        },
        edit: {
          featureGroup: drawnItems
        }
      });


      map.addControl(drawControl);
      map.on('draw:created', function(e) {
        var type = e.layerType,
          layer = e.layer;

        if (type === 'marker') {
          layer.bindPopup('A popup!');
        }

        drawnItems.addLayer(layer);
        var geoPoints = layer.toGeoJSON();
        console.log(geoPoints);
      });



      map.on('draw:edited', function(e) {
        var layers = e.layers;
        layers.eachLayer(function(layer) {
          var geoPoints = layer.toGeoJSON();
          console.log(geoPoints);
        });
      });

      map.on('draw:deleted', function(e) {
        var layers = e.layers;
        layers.eachLayer(function(layer) {
          var geoPoints = layer.toGeoJSON();
          console.log(geoPoints);
        });
      });



      L.geoJson($scope.geojsonFeatures, {
        onEachFeature: onEachFeature
      });



      $scope.geojsonFeatures = {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Point",
            "coordinates": [
              175.2756, -37.7772
            ]
          }
        }, {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  175.27364730834958, -37.77322501372662
                ],
                [
                  175.27849674224854, -37.776617142149554
                ],
                [
                  175.28351783752439, -37.784486280685925
                ],
                [
                  175.28879642486572, -37.781365860467126
                ],
                [
                  175.2824878692627, -37.7707486617024
                ],
                [
                  175.27364730834958, -37.77322501372662
                ]
              ]
            ]
          }
        }]
      };
      console.log($scope.geojsonFeatures);
      L.geoJson($scope.geojsonFeatures, {
        onEachFeature: onEachFeature
      });




      function onEachFeature(feature, layer) {
        drawnItems.addLayer(layer);
      }
    });
  </script>
</body>

</html>

Answer 1

无法完成。用于显示Google地图的Leaflet插件的当前实现意味着创建GMaps实例，并且尝试以使其视图（中心和缩放）与Leaflet的视图保持同步。

这是hackish，但目前是唯一的方法 - 并且明显的缺点是没有同步平移和缩放过渡（在两个库中使用不同的惯性，速度曲线和插值）。

编辑：我刚刚在几天前创建了GoogleMutant Leaflet插件，这应该对整个事件有所帮助。

如何在同一图层中显示Google地图和传单多边形？

1 个答案: