该插件依赖turfjs
插件
用来判断两个区块是否相同
https://turfjs.fenxianglu.cn/docs/api/booleanEqual
<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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.