多个传单地图在同一页与相同的选项

Multiple Leaflet maps on same page with same options

本文关键字：一页 选项 单地图 地图      更新时间：2023-09-26

我对leaflet.js很陌生，我想弄清楚如何将相同的地图与相同的一组选项和图层分配给不同的HTML容器，而不是每次都要删除和添加一个新的?

我曾经处理开放图层2.13，我有map.render(div);选项，每次我想设置映射到另一个div。有类似的解决方案吗?很多谢谢!

可以，但是你必须复制图层

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

复制硬代码的解决方案并不令人满意，您当然必须通过forEach循环。下面是一个完整的示例(使用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

相关文章：