Question

所以我正在使用带有许多基本地图的传单制作一个网站。我希望合并每个地图的信息，只有在用户需要时才能看到。为此，我想制作一个带弹出窗口的叠加图，但我希望弹出窗口能够根据用户选择的基本地图进行更改。我该怎么做呢？非常感谢你

Answer 1

你需要使用一个能够跟踪基本地图的插件（比如active layers），或者你需要自己动手。

如果您使用的是Leaflet图层控件，则可以订阅basemapchange事件以轻松完成此操作。

您需要两件事：活动基础层管理（简单）和动态弹出窗口（不太难）

即便：

首先，这是事件处理程序在更改时跟踪活动基础层。

map.on("baselayerchange",
  function(e) {
    // e.name has the layer name
    // e.layer has the layer reference
    map.activeBaseLayer = e.layer;
    console.log("base map changed to " + e.name);
  });

由于使用L.marker().bindPopup()会在那里创建弹出式内容并且不支持回调，因此您必须使用动态html调用click来动态创建弹出窗口以响应map.openPopup()事件（动态因为它使用变量：活动底图名称）

  marker.on("click", function(e) {
    var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>";
    map.openPopup(html,
      e.latlng, {
        offset: L.point(1, -24)
      });
  });

这是关于JS小提琴的一个工作示例：http://jsfiddle.net/4caaznsc/

下面的工作代码片段（依赖于Leaflet CDN）：

＆＃13;

// Create the map
var map = L.map('map').setView([39.5, -0.5], 5);

// Set up the OSM layer
var baseLayer1 = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    name: "Base layer 1"
  });

var baseLayer2 = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    name: "Base layer 2"
  });

// add some markers
function createMarker(lat, lng) {
  var marker = L.marker([lat, lng]);
  marker.on("click", function(e) {
    var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>";
    map.openPopup(html,
      e.latlng, {
        offset: L.point(1, -24)
      });
  });
  return marker;
}
var markers = [createMarker(36.9, -2.45), createMarker(36.9, -2.659), createMarker(36.83711, -2.464459)];

// create group to hold markers, it will be added as an overlay
var overlay = L.featureGroup(markers);

// show overlay by default
overlay.addTo(map);

// show features
map.fitBounds(overlay.getBounds(), {
  maxZoom: 11
});

// make up our own property for activeBaseLayer, we will keep track of this when it changes
map.activeBaseLayer = baseLayer1;
baseLayer1.addTo(map);

// create basemaps and overlays collections for the layers control
var baseMaps = {};
baseMaps[baseLayer1.options.name] = baseLayer1;
baseMaps[baseLayer2.options.name] = baseLayer2;

var overlays = {
  "Overlay": overlay
};

// create layers control
var layersControl = L.control.layers(baseMaps, overlays).addTo(map);

// update active base layer when changed
map.on("baselayerchange",
  function(e) {
    // e.name has the name, but it may be handy to have layer reference
    map.activeBaseLayer = e.layer;
    map.closePopup(); // any open popups will no longer be correct; take easy way out and hide 'em
  });

＆＃13;

#map {
  height: 400px;
}

＆＃13;

<script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>
<link href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" rel="stylesheet"/>
<div id="map"></div>

＆＃13;

用于特定基本映射的Leaflet弹出窗口

1 个答案: