项目优化
刀刀
0字
0分钟
2026/8/16
性能优化
点聚合 (MarkerClusterer)
当点位过多时，使用百度地图官方库进行聚合，避免页面卡顿与内存溢出。
javascript
import { MarkerClusterer } from '@baidu/marker-clusterer'
const clusterer = new MarkerClusterer(map, {
markers: markers,
gridSize: 60,
maxZoom: 18,
styles: [
/* 自定义不同层级的聚合图标 */
],
})
clusterer.addEventListener('clusterclick', (e) => {
map.centerAndZoom(e.target.getCenter(), map.getZoom() + 2)
})视口裁剪
核心思想：仅渲染可视区域内的点位。通过监听 moveend 和 zoomend 事件，结合防抖函数，动态计算 bounds 并过滤渲染。
javascript
class ViewportCulling {
// 监听地图移动/缩放，防抖后调用 renderVisiblePoints()
// 通过 bounds.getSouthWest() 和 getNorthEast() 过滤 allPoints
}数据抽稀 (Turf.js)
面对庞大的面数据（Polygon），使用 Turf.js 的 simplify 方法简化坐标点，大幅降低渲染耗时。
javascript
import { polygon, simplify } from '@turf/turf'
export const lessDataFn = (arr) => {
arr.forEach((item) => item.push(item[0])) // 首尾闭合
const option = { tolerance: 0.009, highQuality: false, mutate: true }
return arr.map((p) => {
if (p.length >= 4)
return simplify(polygon([p]), option).geometry.coordinates[0]
return p
})
}接口请求缓存
使用 Map 在内存中缓存庞大接口数据，避免重复请求。
javascript
import { polygon, simplify } from '@turf/turf'
export const lessDataFn = (arr) => {
arr.forEach((item) => item.push(item[0])) // 首尾闭合
const option = { tolerance: 0.009, highQuality: false, mutate: true }
return arr.map((p) => {
if (p.length >= 4)
return simplify(polygon([p]), option).geometry.coordinates[0]
return p
})
}细粒度响应式追踪
在 Vue3 中，地图实例等复杂对象应使用 shallowRef 替代 ref。shallowRef 仅追踪第一层属性变化，避免深层 Proxy 劫持带来的性能损耗。
体验优化
动画效果 (Animate.css)
使用 Animate.css 快速实现弹窗、悬停等交互动画，避免手写 CSS 耗时。
html
<h1 class="animate__animated animate__fadeIn">An animated element</h1>接口调用调整
微观二维场景下，将“点击筛选后重新请求接口”改为“初始化时获取全量数据，通过 filter 缓存，点击时通过 v-if 控制显隐”，提升交互流畅度。
贡献者
duyidao
v_duyilin 刀刀