天地图实现画点、线、面及编辑功能

近期项目上提了一个需求，在天地图上进行打点、画线、画面以及要求能编辑，趁着有空写了一个demo

首先先引入天地图

<scrip src="https://api.tianditu.gov.cn/api?v=4.0&tk=自己的key"
		type="text/javascript"
	></script>

然后准备一个div跟几个操作按钮

<div id="map"></div>
<div class="line-btn">
	<div class="operate" onclick="openMarkerTool()">点</div>
	<div class="operate" onclick="openPolylineTool()">线</div>
	<div class="operate" onclick="openPolygonTool()">面</div>
	<div class="btn" onclick="editClick()">编辑</div>
	<div class="btn" onclick="saveClick()">保存</div>
	<div class="btn" onclick="clearClick()">清除</div>
</div>

初始化地图

var map, zoom = 10, handler;
let isEdit = false // 是否启用编辑
let pointOriginalArr = [
	[120.2536, 30.27093]
] // 点原始数组
let lineOriginalArr = [
	[
		[119.86084, 30.41702],
		[119.96796, 30.47353],
		[119.98718, 30.36758],
	],
	[
		[119.91714, 30.1855],
		[120.10666, 30.27923],
	]
] // 线原始数组
let polygonOriginalArr = [
	[
		[119.5752, 30.35392],
		[119.72488, 30.35273],
		[119.65347, 30.26025],
	],
	[
		[120.49118, 30.29109],
		[120.70541, 30.30532],
		[120.50629, 30.20211],
		[120.69855, 30.22703]
	]
] // 面原始数组

//初始化地图对象
map = new T.Map("map");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(120.216329, 30.252589), zoom);
// 如果一进来地图就需要回显
showPoint()
showPolyLine()
showPolygon()

点、线、面回显

function showPoint() {
		let pointArr = []
		pointOriginalArr.forEach((item, index) => {
			let arr = []
			arr.push(new T.LngLat(item[0], item[1]))
			pointArr.push(arr)
		})
		pointArr.forEach((item, index) => {
			var marker = new T.Marker(item[0], {
				icon: new T.Icon({
				iconUrl: '../images/point.png',
				iconSize: new T.Point(24, 28), // 图标可视区域的大小
				}),
			});
			map.addOverLay(marker);
			if (!isEdit) return
			marker.enableDragging();
			marker.addEventListener('dragend', function (e) {
				updatePointOriginalList([e.lnglat.lng, e.lnglat.lat], index)
			})
		})
	}
	// 更新点位数据，用于最后保存
	function updatePointOriginalList(arr, index) {
		pointOriginalArr[index] = arr
	}
	function showPolyLine() {
		let lineArr = []
		lineOriginalArr.forEach((item, index) => {
			let arr = []
			item.forEach((item1) => {
				arr.push(new T.LngLat(item1[0], item1[1]))
			})
			lineArr.push(arr)
		})
		lineArr.forEach((item, index) => {
			var line = new T.Polyline(item, {
				color: '#ff0000',
				weight: 5,
			});
			map.addOverLay(line);
			if (!isEdit) return
			line.enableEdit();
			line.addEventListener('edit', function (e) {
				const ht = line.getLngLats()
				let arr = []
				ht.forEach((item, index) => {
					arr.push([item.lng, item.lat])
				})
				updateLineOriginalList(arr, index)
			})
		})
	}
	// 更新线的数据，用于最后保存
	function updateLineOriginalList(arr, index) {
		lineOriginalArr[index] = arr
	}
	function showPolygon() {
		let polygonArr = []
		polygonOriginalArr.forEach((item, index) => {
			let arr = []
			item.forEach((item1) => {
				arr.push(new T.LngLat(item1[0], item1[1]))
			})
			polygonArr.push(arr)
		})
		polygonArr.forEach((item, index) => {
			var polygon = new T.Polygon(item, {
				color: '#ff0000',
				weight: 5,
			});
			map.addOverLay(polygon);
			if (!isEdit) return
			polygon.enableEdit();
			polygon.addEventListener('edit', function (e) {
				// 注意这里用的是数组的第1项
				const ht = polygon.getLngLats()[0]
				let arr = []
				ht.forEach((item, index) => {
					arr.push([item.lng, item.lat])
				})
				updatePolygonOriginalList(arr, index)
			})
		})
	}
	// 更新面的数据，用于最后保存
	function updatePolygonOriginalList(arr, index) {
		polygonOriginalArr[index] = arr
	}

打点

function openMarkerTool() {
		if (handler) handler.close();
		handler = new T.MarkTool(map, {
			follow: true,
			icon: new T.Icon({
				iconUrl: '../images/point.png',
				iconSize: new T.Point(24, 28), // 图标可视区域的大小
			}),
		});
		handler.open();
		handler.addEventListener('mouseup', function (e) {
			// 这里可以获取到当前点位的坐标
			pointOriginalArr.push([e.currentLnglat.lng, e.currentLnglat.lat])
			// 画完之后重新绘制，不然编辑不了
			showPoint()
			handler.clear()
		})
	}

画线

function openPolylineTool() {
		if (handler) handler.close();
		handler = new T.PolylineTool(map, {
			color: '#ff0000',
			weight: 3,
		});
		handler.open();
		handler.addEventListener('draw', function (e) {
			console.log('228========画面', e, e.currentLnglats)
			const currentLnglats = e.currentLnglats
			let arr = []
			currentLnglats.forEach((item, index) => {
				arr.push([item.lng, item.lat])
			})
			lineOriginalArr.push(arr)
			// 画完之后重新绘制，不然编辑不了
			showPolyLine()
			handler.clear()
		})
	}

画面

function openPolygonTool() {
	if (handler) handler.close();
	handler = new T.PolygonTool(map, {
		color: '#ff0000',
		weight: 3,
	});
	handler.open();
	handler.addEventListener('draw', function (e) {
		const currentLnglats = e.currentLnglats
		let arr = []
		currentLnglats.forEach((item, index) => {
			arr.push([item.lng, item.lat])
		})
		polygonOriginalArr.push(arr)
		// 画完之后重新绘制，不然编辑不了
		showPolygon()
		handler.clear()
	})
}

点击编辑，保存和清除

function editClick() {
	isEdit = true
	map.clearOverLays()
	showPoint()
	showPolyLine()
	showPolygon()
}
function saveClick() {
	isEdit = false
	map.clearOverLays()
	showPoint()
	showPolyLine()
	showPolygon()
	console.log('saveClick========', pointOriginalArr, lineOriginalArr, polygonOriginalArr)
}
function clearClick() {
	isEdit = false
	map.clearOverLays()
	pointOriginalArr = []
	lineOriginalArr = []
	polygonOriginalArr = []
}

最后如果有需要修改线跟面顶点样式的话，因为天地图本身没有提供相关的属性，可以在每个顶点处打个点来变相实现效果