绑定绘制 shapes/markers 与特定切换层：Leaflet

Question

我正在使用使用传单插件的应用程序 Beta_Here，所有库都是本地的，除了少数（css 相关）

实时应用程序的使用情况

第一个 View:This 应用程序从用户那里获取输入并设置距离相应的计算公式....

第二个视图：输入输入后，例如 9，将加载第二个视图我们可以在哪里绘制形状....

简介

我已经设置了脚本，它将加载两个 imageoverlays（层）和我们可以从右上角切换它们，我们可以从左下....

问题

当我们在图像上绘制形状或放置标记时，控件几乎可以正常工作完美，但是当我们切换图层时，问题就开始了…… 所有形状都进入背景或（似乎它们消失了）

主要问题

如何将绘图和标记绑定到特定的 layer(imageoverlay) 如果有一种方法，我们可以看到绘图是不与图像绑定，而是与地图容器绑定.....（请原谅我，如果你觉得我在做一些愚蠢的事情，因为我的知识有限关于图层，所以我在这里提出了我的问题....

如果有人知道如何解决这个问题，请帮忙或任何类型的参考将不胜感激...感谢您的宝贵时间

工作脚本

var map = L.map('map', {
                    minZoom: 1,
                    maxZoom: 4,
                    center: [0, 0],
                    zoom: 0,
                    crs: L.CRS.Simple
                });

                // dimensions of the image
                var w = 3200,
                    h = 1900,
                    mainurl = 'assets/img/isbimg.jpg';
                childurl = 'assets/img/fjmap.png';
                // calculate the edges of the image, in coordinate space
                var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
                var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
                var bounds = new L.LatLngBounds(southWest, northEast);

                var featureGroup = L.featureGroup().addTo(map);

                var drawControl = new L.Control.Draw({
                    edit: {
                        featureGroup: featureGroup
                    },
                    draw: {
                        polygon: true,
                        polyline: true,
                        rectangle: true,
                        circle: true,
                        marker: true
                    }
                }).addTo(map);

                map.on('draw:created', showPolygonArea);
                map.on('draw:edited', showPolygonAreaEdited);
                // add the image overlay,so that it covers the entire map
                L.control.layers({
                    Main: L.imageOverlay(mainurl, bounds),
                    Child: L.imageOverlay(childurl, bounds)
                }, null, { collapsed: false }).addTo(map);

                L.control.nanomeasure({ nanometersPerPixel: 10000 }).addTo(map);

                // tell leaflet that the map is exactly as big as the image
                map.setMaxBounds(bounds);

                L.tileLayer({
                    attribution: '<a href="http://smartminds.co">SmartMinds</a>',
                    maxZoom: 18
                }).addTo(map);

                //polygon area customization
                function showPolygonAreaEdited(e) {
                    e.layers.eachLayer(function (layer) {
                        showPolygonArea({ layer: layer });
                    });
                }
                function showPolygonArea(e) {
                    var userInputCustom = prompt("Please enter image name : choose between a to f");
                    featureGroup.addLayer(e.layer);
                    e.layer.bindPopup("<div style='width:200px;height:200px;background-image: url(assets/img/" + userInputCustom + ".png);background-size: 195px 195px;;background-repeat: no-repeat;'></div>");
                    e.layer.openPopup();
                }

            });

Answer 1

我会将 FeatureGroup 和 ImageOverlay 对包含在 L.LayerGroup 中。然后您可以在这些组之间切换。然后您可以跟踪当前选定的组，并将您的要素添加到该组的要素层。我可以通过注释用代码更好地解释它：

基本地图，没什么特别的：

var map = L.map('map', {
  'center': [0, 0],
  'zoom': 1,
  'layers': [
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data &copy; OpenStreetMap contributors'
    })
  ]
});

// Bounds for the map and imageoverlays    
var bounds = L.latLngBounds([[40.712216, -74.22655],[40.773941, -74.12544]]);

// Set bounds on the map
map.fitBounds(bounds);

分组部分：

// New layergroup, note it's not added to the map yet
var layerGroup = new L.LayerGroup(),
    imageOverlayUrl = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Overlay 1&w=294&h=238',
    // New imageoverlay added to the layergroup
    imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup),
    // New featuregroup added to the layergroup
    featureGroup = new L.FeatureGroup().addTo(layerGroup);

// Second layergroup not added to the map yet
var layerGroup2 = new L.LayerGroup(),
    imageOverlayUrl2 = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Overlay 2&w=294&h=238',
    // New imageoverlay added to the second layergroup
    imageOverlay2 = new L.imageOverlay(imageOverlayUrl2, bounds).addTo(layerGroup2),
    // New featuregroup added to the second layergroup
    featureGroup2 = new L.FeatureGroup().addTo(layerGroup2);

默认 drawcontrol 和 layercontrol，两个图层组都添加为 baselayers：

var layerControl = new L.control.layers({
  'Group 1': layerGroup,
  'Group 2': layerGroup2
}).addTo(map);

var drawControl = new L.Control.Draw().addTo(map);

神奇的地方就在这里 ;) :

// Variable to hold the selected layergroup's featuregroup.
var currentFeatureGroup;

// Catch the layer change event
map.on('baselayerchange', function (layersControlEvent) {
  // Loop over the layers contained in the current group
  layersControlEvent.layer.eachLayer(function (layer) {
    // If it's the imageoverlay make sure it's in the background
    if (layer instanceof L.ImageOverlay) {
      layer.bringToBack();
    // If not then it's the featuregroup, reference with variable.
    } else {
      currentFeatureGroup = layer;
    }
  });
});

// Catch draw created event    
map.on('draw:created', function (e) {
    // Store created feature into the current featuregroup
    currentFeatureGroup.addLayer(e.layer);
});

就是这样。非常基本只是作为一个例子，但它可以做你想做的事。一个真正的实现看起来会有所不同，带有错误处理，因为例如当你绘制并且没有选择 baselayer/overlay 时它会失败等。这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/6cGceX?p=preview

绑定绘制 shapes/markers 与特定切换层：Leaflet

Binding drawn shapes/markers with specific toggling layer : Leaflet

javascript

jquery

leaflet

angular-leaflet-directive