本页目标

当点、线、面或图层数量变大时，地图会变卡、内存上涨。本页给出从“数据规模判断”到“具体优化手段”的实践清单。

1. 先判断数据规模

数据量	典型表现	推荐方案
千级以内	基本流畅	普通 GraphicLayer + 矢量对象
几千 ~ 几万	首次加载慢、平移略卡	GeoJsonLayer 批量加载、减少 DivGraphic、按视野分层
十万级以上	明显卡顿、内存高	聚合 / 矢量简化 / 服务端切片 / 只渲染可视区域

2. 矢量数据：少对象、批量加载

• 优先用 GeoJsonLayer 一次性加载，不要循环 new Marker 逐个添加。
• 少用 DivGraphic（每个都是一个 DOM 节点），大量文本/图标优先用 Marker、Label。
• 按图层分组，不在视野内的图层直接 removeLayer 或 show: false，而不是留在内存里。

// 推荐：一条 GeoJSON 数据 + 一次 addLayer
const geoJsonLayer = new mars2d.layer.GeoJsonLayer({
  url: "https://data.mars2d.cn/file/geojson/sheng-line.json",
  symbol: { type: "polyline", styleOptions: { color: "#ff0000", width: 2 } }
})
map.addLayer(geoJsonLayer)

大量点数据建议使用聚合图层 mars2d.layer.ClusterLayer（支持 clusterEnabled 聚合开关），可参阅功能示例中的聚合示例。

3. 栅格瓦片：控制层级与缓存

• 通过 minZoom / maxZoom 限制瓦片层级，避免无意义的深层请求。
• 瓦片服务本身要做好缓存（静态切片可直接用 Nginx，见发布二维数据服务）。

const tileLayer = new mars2d.layer.TileLayer({
  url: "https://data.mars2d.cn/map/xxx/{z}/{x}/{y}.png",
  minZoom: 3,
  maxZoom: 18
})
map.addLayer(tileLayer)

4. 交互事件：避免高频触发

地图 move、zoom 等事件在拖动时会连续触发，回调查询/渲染要加节流或防抖：

function debounce(fn, wait = 200) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), wait)
  }
}

map.on(mars2d.EventType.moveend, debounce(() => {
  // 只在停止拖动后再查询/渲染
  console.log("当前视角", map.getView())
}, 300))

5. 内存：及时释放

• 不再使用的图层 map.removeLayer(layer) 或 layer.destroy()。
• 矢量数据可 layer.clear() 批量清空。
• 单页应用卸载组件时销毁地图，详见生命周期与资源释放。

// 清空图层上的所有矢量
graphicLayer.clear()

// 彻底销毁图层
graphicLayer.destroy()

6. 优化清单

• 大量数据用 GeoJsonLayer / 聚合，而不是逐个 Marker
• 减少 DivGraphic 数量
• 瓦片设置合理的 minZoom / maxZoom
• 高频事件加节流/防抖
• 不可见图层 remove 或隐藏
• 页面卸载时 map.destroy()

相关

• 相关示例：功能示例
• 相关 API：GraphicLayer、TileLayer
• 下一篇：生命周期与资源释放