0

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

应用程序的使用

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

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

介绍

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

问题

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

主要问题

如果有办法我们可以看到绘图不是与图像绑定而是与地图容器绑定，我们如何将绘图和标记绑定到特定图层（图像覆盖）......（如果你觉得我在做，请原谅我一些愚蠢的事情，因为我对图层的了解有限，所以我在这里提出了我的问题....

如果有人知道如何解决这个问题，请提供帮助或任何形式的参考将不胜感激......感谢您的时间

工作脚本

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

            });
4

1 回答 1

1

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

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

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，两个 layergroups 添加为 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);
});

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

于 2015-09-03T17:13:45.723 回答