Leaflet按需加载多个Marker和Polygon

该插件依赖turfjs 插件

用来判断两个区块是否相同
https://turfjs.fenxianglu.cn/docs/api/booleanEqual

js 复制代码
<template>
    <Map ref="mapRef" />
</template>

<script setup lang='ts'>
import { onMounted, ref, toRaw } from 'vue'
import * as L from 'leaflet'
import * as turf from "@turf/turf"

onMounted(() => {
    mapRef.value.map.on('moveend', () => {
        drawMarker()
        drawPolygon()
    })
    mapRef.value.map.fire('moveend')
})

const mapRef = ref()

// 绘制锚点
const addedMarkers: any[] = []
const drawMarker = () => {
    // 模拟后台数据
    const arr = [
        { id: 1, marker: [22.542800, 114.058000] },
        { id: 2, marker: [22.54, 114.05] }
    ]
    const markerIcon = L.icon({ iconUrl: getAssetsFile('images/qf.png'), iconSize: [40, 40] })
    const bounds = mapRef.value.map.getBounds()
    for (let item of arr) {
        const marker = L.marker(item.marker as unknown as L.LatLngExpression, { icon: markerIcon })
        const latLng = L.latLng(item.marker[0], item.marker[1])
        L.Util.extend(marker, { params: item })
        // 判断在当前可见视图并且没有绘制过的
        if (bounds.contains(marker.getLatLng()) && !addedMarkers.some(m => m.getLatLng().equals(latLng))) {
            marker.addTo(toRaw(mapRef.value.map))
            addedMarkers.push(marker)
        }
    }
}


// 绘制区块
const addedPolygons: any[] = []
const drawPolygon = () => {
    const arr = [
        {
            id: 1,
            polygon: [[22.548728, 114.061196], [22.546925, 114.059222], [22.540107, 114.064929], [22.546806, 114.068127], [22.548728, 114.061196]]
        },
        {
            id: 2,
            polygon: [[22.550096, 114.056904], [22.548986, 114.056818], [22.549937, 114.058599], [22.550096, 114.056904]]
        }
    ]
    const bounds = mapRef.value.map.getBounds()
    for (let item of arr) {
        const polygon = new L.Polygon(item.polygon as unknown as L.LatLngExpression[][], { color: greenColor })
        L.Util.extend(polygon, { params: item }) //携带自定义参数
        if (bounds.contains(polygon.getBounds()) && !addedPolygons.some(p => turf.booleanEqual(p.toGeoJSON(), polygon.toGeoJSON()))) {
            // 使用 toRaw 处理popup关闭后伸缩地图报错:Cannot read properties of null (reading '_latLngToNewLayerPoint')
            polygon.addTo(toRaw(mapRef.value.map))
            addedPolygons.push(polygon)
        }
    }
}
</script>
相关推荐
IT_陈寒几秒前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
岛风风22 分钟前
关于手机的设备信息
前端
ReturnTrue86835 分钟前
nginx性能优化之Gzip
前端
w_y_fan1 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇1 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort1 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手1 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码1 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码1 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
南雨北斗1 小时前
VS Code 中手动和直接运行TS代码
前端