在传单中以较低缩放级别加载多边形的低分辨率版本

Question

Leaflet采用了根据缩放级别加载地图图块的原理，即地图图像的分辨率取决于缩放级别。我们可以将相同的原理应用于多边形吗？

我的网站主页加载了一张带有多个高分辨率多边形的宽地图，但它们需要大量时间来加载（大约7MB，〜2秒，这对于主页来说是很多）。有没有办法只加载多边形的低分辨率版本，并根据缩放级别加载更高分辨率的版本，就像使用光栅图块所做的那样？

Answer 1

var map = L.map('map');

var cartodbAttribution = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
  attribution: cartodbAttribution,
  opacity: 1
}).addTo(map);

fetch('https://geoapi.pt/distritos?json=1').then(r => r.json()).then(districts => {
  const geojsonFeatures = districts.filter(d => d.geojson).map(d => {
    const geojson = d.geojson
    Object.keys(d).forEach(key => {
      if (key.startsWith('censos')) {
        geojson.properties[key] = d[key]
      }
    })
    return geojson
  })

  const geoJsonFeatureCollection = {
    type: 'FeatureCollection',
    features: geojsonFeatures
  }

  // console.log(geoJsonFeatureCollection)

var vectorGrid = L.vectorGrid.slicer( geoJsonFeatureCollection, {
  rendererFactory: L.svg.tile
}).addTo(map);

})



map.setView({ lat: 39.230022343470175, lng: -8.396909834716356 }, 5);

#map {
  width: 100%;
  height: 300px;
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script type="text/javascript"  src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script type="text/javascript"  src="https://unpkg.com/[email protected]"></script>

<div id="map"></div>