javascript - 特定 basemap 的传单弹出窗口

Question

所以我正在使用带有数十张 basemap 的传单制作一个网站。我想合并有关每张 map 的信息，这些信息只有在用户需要时才可见。为此，我想制作一个带有弹出窗口的叠加 map ，但我希望弹出窗口根据用户选择的 basemap 进行更改。我该怎么做呢？非常感谢你

Answer 1

您需要使用一个插件来为您跟踪 basemap (例如 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 调用 map.openPopup() 来触发事件(动态是因为它使用变量:事件 basemap 名称)

  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 fiddle 的工作示例:http://jsfiddle.net/4caaznsc/

工作代码片段也在下面(依赖于 Leaflet CDN):

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

#map {
  height: 400px;
}

<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>