企业官网建设流程全解析

第 12 节：自定义图层管理（点 / 线 / 面统一图层，批量增删要素）

功能：新建独立矢量图层，所有绘制的 Marker、Polyline、Polygon 放到这一层；支持一键清空图层内全部要素，不影响底图、控件。
提前校验天地图 V4 API，无 V3 废弃接口。

<template> <div class="map-page"> <h2>第12节：自定义矢量图层管理（V4原生，无T.Layer.Vector）</h2> <div style="margin-bottom:8px;display:flex;gap:8px;align-items:center;"> <button @click="addPoint" :disabled="!mapReady">添加点</button> <button @click="addLine" :disabled="!mapReady">添加线</button> <button @click="addPolygon" :disabled="!mapReady">添加面</button> <button @click="clearLayer" :disabled="!mapReady">一键清空图层</button> </div> <div id="map" class="map-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?v=4.0&tk=${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>

功能说明

1. 独立矢量图层myVectorLayer，所有点、线、面都挂载在此图层，不和其他覆盖物混杂
2. 按钮：添加点 / 添加线 / 添加面，要素全部加入自定义图层
3. 一键清空图层：vectorLayer.clearOverLays()，只删除图层内要素，图层实例还在，可以继续新增
4. 销毁页面时，移除图层，释放资源