高德地图绘图，点标记，并计算中心点

效果图

代码如下

/ 地图初始化
const map: any = ref(null)
const marker: any = ref(null)
const polyEditor: any = ref(null)
const view: any = ref(false)
const squareVertices: any = ref([])
const init = () => {workSpacesCurrent(workspaceId, {}).then((res) => {console.log('地图呢', res.data)map.value = new AMap.Map('container6', {center: [res.data.longitude, res.data.latitude],// center://   ['118.622184', '32.096262'],layers: [// 卫星new AMap.TileLayer.Satellite(),// 路网new AMap.TileLayer.RoadNet(),],zoom: 17, // 地图显示的缩放级别zooms: [0, 19], // 设置缩放级别范围为3至16})pointMark()})
}// 点标记
function pointMark () {if (cameraId.value !== 0) {console.log('你是多少', cameraId.value)console.log('cameraLngInpt', cameraLngInpt.value)console.log('cameraLatInpt', cameraLatInpt.value)setTimeout(() => {marker.value = new AMap.Marker({icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',position: [cameraLngInpt.value, cameraLatInpt.value],})map.value.add(marker.value)}, 5000)} else {if (squareVertices.value.length === 0) {map.value.on('click', (e) => {if (view.value) {polyEditor.value.close()polyEditor.value = nullmap.value.clearMap()}console.log('地图点击进来啦吗')console.log('e', e)marker.value = new AMap.Marker({icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',position: [e.lnglat.lng, e.lnglat.lat],})map.value.add(marker.value)// marker.value.setMap(map.value)console.log('地图点击点标记', marker.value)const cameralng = e.lnglat.lngconst cameralat = e.lnglat.latcameraLngInpt.value = cameralngcameraLatInpt.value = cameralat// 绘图drawMark(e)})} else {// centerPointFn()}}
}// 绘图
function drawMark (e: any) {squareVertices.value = calculateSquareVertices(e.lnglat.lat,e.lnglat.lng,1000)console.log('squareVertices.value', squareVertices.value)markerQure()
}// 监听绘图变化
const markerQure = () => {console.log('进来了没有地图渲染')console.log('squareVertices.value', squareVertices.value)if (view.value) {// polyEditor.value.close()// polyEditor.value = null// map.value.clearMap()}const path: any = []if (cameraId.value !== 0) {squareVertices.value.forEach((i) => {path.push([i[0], i[1]])})} else {squareVertices.value.forEach((i) => {path.push([i.lng, i.lat])})}console.log('path', path)const polygon = new AMap.Polygon({path: path,strokeColor: '#FF33FF',strokeWeight: 6,strokeOpacity: 0.2,fillOpacity: 0.4,fillColor: '#1791fc',zIndex: 50,bubble: true,})console.log('polygon', polygon)map.value.add([polygon])map.value.setFitView()centerPointFn()polyEditor.value = new AMap.PolygonEditor(map.value, polygon)polyEditor.value.addAdsorbPolygons([polygon])polyEditor.value.open()// 监听坐标点的变化polyEditor.value.on('addnode', function (event) {squareVertices.value = []event.target.getPath().forEach((i) => {squareVertices.value.push({lng: i.lng,lat: i.lat,})})console.log('这里有吗', squareVertices.value)clearMarker()setTimeout(() => {pointMark()}, 500)centerPointFn()})view.value = true// 监听拖动变化polyEditor.value.on('adjust', function (event) {squareVertices.value = []event.target.getPath().forEach((i) => {squareVertices.value.push({lng: i.lng,lat: i.lat,})})console.log('坐标参数', squareVertices.value)clearMarker()pointMark()centerPointFn()})polyEditor.value.on('removenode', function (event) {squareVertices.value = []event.target.getPath().forEach((i) => {squareVertices.value.push({lng: i.lng,lat: i.lat,})})console.log('坐标参数2', squareVertices.value)clearMarker()pointMark()centerPointFn()})
}// 画图各个点标记
const calculateSquareVertices = (centerLat, centerLng, sideLength) => {// 将长度从米转换为经度差值const deltaLat = (sideLength / 111300) * 1.1const deltaLng =(sideLength / (111300 * Math.cos(centerLat * (Math.PI / 180)))) * 1.1const vertices = [{ lat: centerLat + deltaLat, lng: centerLng - deltaLng }, // 右上角{ lat: centerLat - deltaLat, lng: centerLng - deltaLng }, // 右下角{ lat: centerLat - deltaLat, lng: centerLng + deltaLng }, // 左下角{ lat: centerLat + deltaLat, lng: centerLng + deltaLng }, // 左上角]return vertices
}// 中心点坐标
function centerPointFn () {let sumLng = 0let sumLat = 0if (cameraId.value !== 0) {console.log('是否进来')for (let i = 0; i < squareVertices.value.length; i++) {sumLng += squareVertices.value[i][0]sumLat += squareVertices.value[i][1]}} else {for (let i = 0; i < squareVertices.value.length; i++) {sumLng += squareVertices.value[i].lngsumLat += squareVertices.value[i].lat}}const centerLng = sumLng / squareVertices.value.lengthconst centerLat = sumLat / squareVertices.value.length// 创建多边形的中心点坐标对象const centerPoint = new AMap.LngLat(centerLng, centerLat)const centerPointInpp = [centerLng, centerLat]centerPointInpt.value = centerPointInpp.toString()addMarker(centerLng, centerLat)console.log('参数3', centerPointInpt.value)console.log('多边形的中心点经度：' +centerPoint.getLng() +'，纬度：' +centerPoint.getLat())// const marker = new AMap.Marker({//   icon: '/src/assets/center.png',//   position: [centerLng, centerLat],//   offset: new AMap.Pixel(-13, -30),// })// map.value.add(marker)
}// 添加标记点
function addMarker (lng, lat) {if (marker.value) {console.log('添加点坐标更新')marker.value.setPosition([lng, lat]) // 更新点坐标} else {marker.value = new AMap.Marker({// icon: '/src/assets/center.png',map: map.value,position: [lng, lat],offset: new AMap.Pixel(-13, -30),})}
}// 清除标记点
function clearMarker () {console.log('清除打点位置', marker.value)if (marker.value) {marker.value.setMap(null)marker.value = null}
}