同一頁面上具有相同選項的多個 Leaflet 地圖

Question

我是 leaflet.js 的新手，我正在嘗試弄清楚如何將具有相同選項和層的相同 map 分配給不同的 HTML 容器，而不是每次都必須刪除和添加一個新容器？

我曾經處理 Open 層 2.13，我有 map.render(div); 每次我想將 map 設置為另一個 div 時的選項。 是否有類似的解決方案？ 非常感謝！

Answer 1

你可以，但你必須復制圖層

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// add the same OpenStreetMap tile layer to the second map
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map2);

http://jsfiddle.net/FranceImage/aj44r7v2/

Answer 2

復制硬代碼的解決方案並不令人滿意，你當然必須通過一個forEach循環 go 。 這是一個完整的示例（使用 CDN 文件）：

'use strict'

const getLeaflet = (() => {
  const script = document.createElement('script')
  script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js')
  document.head.appendChild(script)
})()

const getMapStyles = (() => {
  const styles = document.createElement('link')
  styles.setAttribute('rel', 'stylesheet')
  styles.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css')
  document.head.appendChild(styles)
})()

const maps = (() => {
  document.querySelectorAll('.map').forEach(function(item){
    const id = item.id
    const map = () => {
      const el = document.getElementById(id),
            coords = JSON.parse(el.dataset.coords),
            map = L.map(id).setView(coords, el.dataset.zoom)
      L.tileLayer(
        el.dataset.tileserver,
        {attribution: el.dataset.attribution}
      ).addTo(map)
      let icon = L.icon({
        iconUrl: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 512 512'%3E%3Cpath fill='%23E74C3C' d='M256 14C146 14 57 102 57 211c0 172 199 295 199 295s199-120 199-295c0-109-89-197-199-197zm0 281a94 94 0 110-187 94 94 0 010 187z'/%3E%3Cpath fill='%23C0392B' d='M256 14v94a94 94 0 010 187v211s199-120 199-295c0-109-89-197-199-197z'/%3E%3C/svg%3E", // @see https://codepen.io/tigt/post/optimizing-svgs-in-data-uris @see https://codepen.io/jakob-e/pen/doMoML
        iconSize: [40, 40],
        iconAnchor: [20, 40],
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
        shadowSize: [50, 70],
        shadowAnchor: [15, 70],
        popupAnchor: [0, -60]
      })
      L.marker(coords, {
        icon: icon
      })
        .bindPopup(el.dataset.name)
        .openPopup()
        .addTo(map)
    }
    window.addEventListener('load', function() {
      map()
    })
  })
})()

html 目標：

<div class="map" id="map" style="height: 50vh" data-name="Map 1" data-coords="[48.853133,2.349747]" data-zoom="15" data-color="#ff654f" data-tileserver="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoib2xpdmllcmMiLCJhIjoiY2s5dnNnZWoyMDIzNDNzb2Y1dmQ4MGNtMCJ9.m4U-wYcS4EPcKe9nVXIbUA" data-attribution="&lt;a href=&quot;//www.openstreetmap.org/&quot;&gt;OSM&lt;/a&gt; | &lt;a href=&quot;//www.mapbox.com/&quot;&gt;Mapbox&lt;/a&gt;"></div>
<div class="map" id="map2" style="height: 50vh" data-name="Map 2" data-coords="[48.886719,2.343076]" data-zoom="10" data-color="#ff654f" data-tileserver="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoib2xpdmllcmMiLCJhIjoiY2s5dnNnZWoyMDIzNDNzb2Y1dmQ4MGNtMCJ9.m4U-wYcS4EPcKe9nVXIbUA" data-attribution="&lt;a href=&quot;//www.openstreetmap.org/&quot;&gt;OSM&lt;/a&gt; | &lt;a href=&quot;//www.mapbox.com/&quot;&gt;Mapbox&lt;/a&gt;"></div>

在線示例： CodePen