如何在同一层显示谷歌地图和传单绘制多边形？答案

【问题标题】：How to show Google maps and leaflet draw polygons in a same layer?如何在同一层显示谷歌地图和传单绘制多边形？
【发布时间】：2016-09-14 10:35:54
【问题描述】：

我可以使用传单和谷歌地图显示标记和 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>

【问题讨论】：

标签： angularjs google-maps leaflet leaflet.draw

【解决方案1】：

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

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

编辑：几天前我刚刚创建了GoogleMutant Leaflet 插件，它应该有助于整个事件。

【讨论】：