Leaflet使用Glify加载海量点、线、面数据，可加载几百万数据

源代码地址Leaflet: https://gitee.com/SunBear/Leaflet效果如图vue中安装引入leaflet组件及相关插件npm i leafletnpm i leaflet.glify// vue中引入import * as L from leaflet;import leaflet/dist/leaflet.css;import glify from leaflet.glify;完整html代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 link hrefassets/css/map.css relstylesheet link hrefassets/css/leaflet.css relstylesheet titleleaflet/title /head body div styledisplay: flex;justify-content: space-between; div idmap1 stylewidth: 32%;height: 300px;/div div idmap2 stylewidth: 32%;height: 300px;/div div idmap3 stylewidth: 32%;height: 300px;/div /div script srcassets/js/leaflet.js/script script srcassets/js/glify-browser.js/script script loadingPoint(); loadingLines(); loadingPolygons(); // 加载海量多边形 async function loadingPolygons() { let map L.map(map3, { center: [50.5, 16, 0.2], zoom: 6, maxZoom: 18, }); L.tileLayer( https://webst01.is.autonavi.com/appmaptile?style6x{x}y{y}z{z} ).addTo(map) const res await fetch(data/polygons.json); const data await res.json() const layers L.glify.shapes({ map, data, size: 1, color: { r: 255, g: 2, b: 0, }, opacity: 0.2, border: true, borderOpacity: 0.8, click: (e, pointOrGeoJsonFeature) { // console.log(e, pointOrGeoJsonFeature) }, hover: (e, pointOrGeoJsonFeature, xy) { // console.log(e, pointOrGeoJsonFeature) }, }) layers.addTo(map); } // 加载海量线 async function loadingLines() { let map L.map(map2, { center: [50.5, 30.5, 0.2], zoom: 1, maxZoom: 18, }); L.tileLayer( https://webst01.is.autonavi.com/appmaptile?style6x{x}y{y}z{z} ).addTo(map) const res await fetch(data/lines.json); const data await res.json() const layers L.glify.lines({ map, data, size: 1, color: { r: 255, g: 0, b: 1, }, }) layers.addTo(map); } // 加载海量点 function loadingPoint() { let map L.map(map1, { center: [50.5, 30.5, 0.2], zoom: 4, maxZoom: 18, }); L.tileLayer( https://webst01.is.autonavi.com/appmaptile?style6x{x}y{y}z{z} ).addTo(map) const points [] for (let i 0; i 200000; i) { const lat Math.floor(Math.random() * 180) - 90; const lng Math.floor(Math.random() * 360) - 180; points.push([lat, lng]) } // 加载20万点数据 const layers L.glify.points({ map, data: points, // color: { // 点的颜色 // r: 255, // g: 0, // b: 1, // }, size: 10, // 设置点的大小 sensitivity: 10, //扩大可点击区域的大小以便更容易点击某个点 click: (e, pointOrGeoJsonFeature) { // console.log(e, pointOrGeoJsonFeature) }, hover: (e, pointOrGeoJsonFeature) { const index points.findIndex(item { return item pointOrGeoJsonFeature }) L.popup() .setLatLng(pointOrGeoJsonFeature) .setContent(索引 index) .openOn(map); }, }) layers.addTo(map); } /script /body /html相关api参考https://github.com/robertleeplummerjr/Leaflet.glify