效果图
代码如下
/ 地图初始化
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 = null
map.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.lng
const cameralat = e.lnglat.lat
cameraLngInpt.value = cameralng
cameraLatInpt.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.1
const deltaLng =
(sideLength / (111300 * Math.cos(centerLat * (Math.PI / 180)))) * 1.1
const 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 = 0
let sumLat = 0
if (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].lng
sumLat += squareVertices.value[i].lat
}
}
const centerLng = sumLng / squareVertices.value.length
const 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
}
}