第 12 节自定义图层管理点 / 线 / 面统一图层批量增删要素功能新建独立矢量图层所有绘制的 Marker、Polyline、Polygon 放到这一层支持一键清空图层内全部要素不影响底图、控件。提前校验天地图 V4 API无 V3 废弃接口。template div classmap-page h2第12节自定义矢量图层管理V4原生无T.Layer.Vector/h2 div stylemargin-bottom:8px;display:flex;gap:8px;align-items:center; button clickaddPoint :disabled!mapReady添加点/button button clickaddLine :disabled!mapReady添加线/button button clickaddPolygon :disabled!mapReady添加面/button button clickclearLayer :disabled!mapReady一键清空图层/button /div div idmap classmap-container/div /div /template script setup import { onMounted, onUnmounted, ref } from vue const TDT_JS_TK 替换为你的地图JS TK let map null // V4方案自己维护覆盖物数组模拟矢量图层 const overlayList [] const mapReady ref(false) function loadTdtScript() { return new Promise((resolve, reject) { if (window.T) return resolve(window.T) const script document.createElement(script) script.src https://api.tianditu.gov.cn/api?v4.0tk${TDT_JS_TK} script.onload () resolve(window.T) script.onerror err reject(err) document.body.appendChild(script) }) } async function initMap() { const T await loadTdtScript() const mapDom document.getElementById(map) if (mapDom.children.length 0) return map new T.Map(map) const center new T.LngLat(117.00, 36.67) // 济南 map.centerAndZoom(center, 10) map.enableScrollWheelZoom(true) // 缩放控件 const zoomCtrl new T.Control.Zoom({ position: topright }) map.addControl(zoomCtrl) // 比例尺控件 const scaleCtrl new T.Control.Scale({ position: topleft }) map.addControl(scaleCtrl) mapReady.value true } // 添加点要素 const addPoint () { if (!map) { alert(地图尚未加载完成请稍后再点) return } const T window.T const lnglat new T.LngLat(117.02, 36.69) const marker new T.Marker(lnglat) map.addOverLay(marker) overlayList.push(marker) } // 添加线要素 const addLine () { if (!map) { alert(地图尚未加载完成请稍后再点) return } const T window.T const points [ new T.LngLat(116.98, 36.65), new T.LngLat(117.05, 36.70), new T.LngLat(117.03, 36.74) ] const polyline new T.Polyline(points, { color: #0066ff, weight: 4 }) map.addOverLay(polyline) overlayList.push(polyline) } // 添加面要素 const addPolygon () { if (!map) { alert(地图尚未加载完成请稍后再点) return } const T window.T const points [ new T.LngLat(116.96, 36.62), new T.LngLat(117.01, 36.63), new T.LngLat(117.00, 36.68), new T.LngLat(116.95, 36.66) ] const polygon new T.Polygon(points, { color: #22aa55, fillColor: rgba(34,170,85,0.35), weight:2 }) map.addOverLay(polygon) overlayList.push(polygon) } // 一键清空图层遍历数组逐个移除覆盖物清空数组 const clearLayer () { overlayList.forEach(overlay { map.removeOverLay(overlay) }) overlayList.length 0 } onMounted(() { initMap() }) onUnmounted(() { if(map){ clearLayer() const dom document.getElementById(map) dom.innerHTML map null mapReady.value false } }) /script style scoped .map-page { padding: 20px; } .map-container { width: 100%; height: 600px; border:1px solid #ccc; } button:disabled { background:#ccc; cursor:not-allowed; } /style功能说明独立矢量图层myVectorLayer所有点、线、面都挂载在此图层不和其他覆盖物混杂按钮添加点 / 添加线 / 添加面要素全部加入自定义图层一键清空图层vectorLayer.clearOverLays()只删除图层内要素图层实例还在可以继续新增销毁页面时移除图层释放资源