怎么做投票网站,深圳律师网站建设,内蒙古建筑信息平台,霸气的网络公司名字场景: 移动端h5中#xff0c;当我们需要在地图中展示很多marker点坐标的时候#xff0c;通常会使用 bm-marker #xff0c;去循环生成marker点#xff0c;在数量不多的情况下是没问题的#xff0c;但是随着数据量的增加#xff0c;地图就会变得卡顿#xff0c;以及渲染延…场景: 移动端h5中当我们需要在地图中展示很多marker点坐标的时候通常会使用 bm-marker 去循环生成marker点在数量不多的情况下是没问题的但是随着数据量的增加地图就会变得卡顿以及渲染延迟体验感极差解决办法第一个想到的就是海量点 BmPointCollection但是海量点明显的缺点就是不能自定义marker样式icon。但是业务是需要自定义图标 的那没办法就只能使用以下两种方式进行优化。 使用点聚合 BmlMarkerClusterer 这个没啥好说的缺点也很明显不方便查看。 baidu-map clickmapClick classbm-view :zoom12 :centercenterbml-marker-clusterer :averageCentertrue :stylesstylesbm-marker clickclickMarker(marker) v-formarker of pointList :keymarker:position{ lng: marker.lng, lat: marker.lat } :iconicon/bm-marker/bml-marker-clusterer
/baidu-map 2.根据当前可视区域进行渲染只渲染当前可视区域内的marker点 !-- 1 正常渲染 添加ready事件 / --
baidu-map clickmapClick classbm-view :zoom12 :centercenter readyreadyMapbm-marker clickclickMarker(marker) v-formarker of pointList :keymarker:position{ lng: marker.lng, lat: marker.lat } :iconicon/bm-marker
/baidu-map
let bounds ref(null) //可视区域
let map reactive(null) //地图实例
let sourceList [] //接口请求的marker点数据
let pointList [] //渲染的marker数据//地图ready事件
function readyMap({ map:data }) {map data//获取可视区域bounds.value map.getBounds()// 地图添加缩放和拖拽事件 动态获取地图可视区域map.addEventListener(dragend, getBounds)map.addEventListener(zoomend, getBounds)
}
//获取地图的可视区域
function getBounds() {if (!map) returnbounds.value map.getBounds()
}
//动态计算区域内的坐标 sourceList.value
watchEffect(() {if (!bounds.value || !sourceList.value.length) return []//获取可视区域左下角let SouthWest bounds.value.getSouthWest()//获取可视区域右上角 let NorthEast bounds.value.getNorthEast();let markerList [] // 筛选 获取区域内的点 sourceList.value.forEach(item {if (item.lon SouthWest.lng item.lon NorthEast.lng item.lat SouthWest.lat item.lat NorthEast.lat) {markerList.push(item)}})//赋值显示pointList.value markerList
})
//最后移除监听事件
onUnmounted(() {if (map) {map.removeEventListener(dragend, getBounds)map.removeEventListener(zoomend, getBounds)}
})//marker icon 样式
let icon ref({url: https://xxxxxxxxxxxxxxxx.png,size: { width: 18, height: 18 },opts: {imageSize: { width: 18, height: 18 },},
}) 如果还有其他更好的办法欢迎补充
