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

我建議使用此插件的較新版本；）那里有方法事件和下載有關標記的數據的更簡單方法。