Question

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

直播申请

第一个视图：此应用程序从用户获取输入并设置距离相应的计算公式......

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

简介

我已经设置了将加载两个图像覆盖（图层）和脚本的脚本我们可以从右上角切换它们，我们可以绘制或测量左下角....

问题

当我们在图像上绘制形状或放置标记时，控件几乎可以工作完美，但当我们切换图层时，就会出现问题.... 所有形状都去背景或（似乎它们消失了）

主要问题

我们如何将图纸和标记绑定到特定的 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：

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

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

将绘制的形状/标记与特定的切换层绑定：Leaflet

1 个答案: