在 leaflet map 上添加带有选定覆盖层名称的文本框

Question

相对较新的 JavaScript 用户，第一个问题。

所以我有一个 choropleth leaflet map 使用 jQuery slider （通过https://github.com/dwilhelm89/LeafletSlider ）在年份之间移动。 map 包含大约 50 年的全球数据，每个叠加图层对应一个图层组，图层组包含每个国家/地区相应年份的数据。

slider 的目的是允许用户在年份之间快速切换。 但是，我想要一个视觉提示，让用户随时知道显示的是哪一年。 能不能在map上显示一个类似文本框的东西，显示当前覆盖层的名称，并在覆盖层切换时自动更新？ （每个图层组的名称是其各自的年份）

我知道文本框部分当然是可能的（ 在 leaflet.js map 上覆盖一个文本框），但我不确定如何使用必要的信息动态更新它。

谢谢。 让我知道您是否需要我的代码，我会发布它。

Answer 1

我在一些个人和商业项目中使用了 Leaflet、Mapbox 和 Google 地图，每当我想叠加一些信息时，我只会使用简单的 HTML 元素。 您需要做的就是以与通常相同的方式在屏幕上呈现您想要的任何元素，只需确保您使用正确position和适用的定位单位，并确保您要显示的元素具有更高的z-index ，即你的年份指标，比你在 map 元素上做的要好。 就像对待任何其他 HTML 一样对待它！

编辑：

这是一个示例屏幕截图： https://imgur.com/a/2fXf5CI 。 此外，如果您尚未在 Leaflet map 上使用position属性，则应在前面添加 go 并添加position: relative; 属性添加到 map 的选择器，以便您还可以为其分配一个z-index 。 然后，在你的年份指标 styles 中，给它一个比你给你的 Leaflet map 更高的z-index值。

Answer 2

好吧，我想了一下，这是一个快速的解决方案。

 var sliderControl = null; var map = L.map("map").setView([51.95, 7.6], 9); L.tileLayer("//{s}.tile.osm.org/{z}/{x}/{y}.png", { attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors', }).addTo(map); //Fetch some data from a GeoJSON file $.getJSON( "https://dwilhelm89.github.io/LeafletSlider/points.json", function (json) { var testlayer = L.geoJson(json); var sliderControl = L.control.sliderControl({ position: "topright", layer: testlayer, range: true, }); //Make sure to add the slider to the map;-) map.addControl(sliderControl); //An initialize the slider sliderControl.startSlider(); } ); map.on("layeradd", function () { map.eachLayer(function (layer) { if (layer instanceof L.Marker) { let desc = document.querySelector(".description"); // desc.textContent = JSON.stringify(layer.getLatLng()); desc.textContent = layer.feature.properties.time; } }); }); // create legend const legend = L.control({ position: "bottomleft" }); legend.onAdd = function () { let div = L.DomUtil.create("div", "description"); div.className = "description"; return div; }; legend.addTo(map);

 *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } html { height: 100%; } body, html, #map { width: 100%; height: 100%; margin: 0; padding: 0; }.description { border: 1px solid black; background: #fff; }

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /> <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css"> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script> <script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js" type="text/javascript"></script> <div id="map"></div>

我建议使用此插件的较新版本；）那里有方法事件和下载有关标记的数据的更简单方法。