生命周期与资源释放

528字约2分钟

2026-10-20

本页目标

搞清楚地图的“创建 → 使用 → 销毁”全过程，尤其是单页应用（Vue / React）中如何避免内存泄漏和“地图失效”。

1. 创建

const map = new mars2d.Map("mars2dContainer", {
  zoom: 13,
  center: { lng: 117.240601, lat: 31.827107 }
})

容器 DIV 必须有有效高度（0 高度会导致地图不显示）。
一个容器只应创建一个地图实例，重复创建前先销毁旧实例。

2. 使用中的增删

对象	添加	移除	清空
图层	`map.addLayer(layer)`	`map.removeLayer(layer)`	—
矢量	`layer.addGraphic(graphic)`	`layer.removeGraphic(graphic)`	`layer.clear()`
控件	`map.addControl(c)`	`map.removeControl(c)`	—
分析	`map.addThing(t)`	`map.removeThing(t)`	—

只是临时隐藏用 show: false 或 layer.hide()，数据仍占内存；确定不再使用才用 remove。

3. 销毁与释放

Leaflet 和 Mars2D 的类都提供 remove / destroy 方法：

// 销毁单个图层（同时移除其上的矢量、解绑事件）
graphicLayer.destroy()

// 销毁整个地图（移除所有图层、控件、事件监听）
map.destroy()

4. 单页应用中的正确姿势

在组件卸载时销毁地图，否则切路由后地图容器残留、事件泄漏：

import { onMounted, onUnmounted } from "vue"

let map = null

onMounted(() => {
  map = new mars2d.Map("mars2dContainer", { zoom: 13 })
})

onUnmounted(() => {
  if (map) {
    map.destroy()
    map = null
  }
})

React

import { useEffect, useRef } from "react"

export default function MapView() {
  const mapRef = useRef(null)

  useEffect(() => {
    const map = new mars2d.Map("mars2dContainer", { zoom: 13 })
    mapRef.current = map
    return () => {
      map.destroy()
      mapRef.current = null
    }
  }, [])

  return <div id="mars2dContainer" style={{ width: "100%", height: "100%" }} />
}

5. 常见内存泄漏原因

只 removeLayer 了图层，却忘了 destroy 或解绑事件。
地图 move / zoom 等高频事件里没有节流（见性能优化）。
反复 new Map 却没销毁旧实例。
组件里保存了地图对象的闭包引用，导致无法回收。

注意事项

注意

map.destroy() 之后不要再调用该地图的任何方法，否则会报错。需要重新显示请重新 new mars2d.Map。