394 lines
9.9 KiB
Vue
394 lines
9.9 KiB
Vue
|
<template>
|
||
|
|
<view class="map-container">
|
||
|
|
<u-notice-bar mode="horizontal" :list="tipsList"></u-notice-bar>
|
||
|
|
<map
|
||
|
|
id="editMap"
|
||
|
|
class="map"
|
||
|
|
:latitude="latitude"
|
||
|
|
:longitude="longitude"
|
||
|
|
:polygons="polygons"
|
||
|
|
:markers="markers"
|
||
|
|
:show-location="true"
|
||
|
|
@tap="handleMapTap"
|
||
|
|
@markertap="handleMarkerTap"
|
||
|
|
@markerdragend="handleMarkerDrag"
|
||
|
|
scale="19"
|
||
|
|
></map>
|
||
|
|
|
||
|
|
<!-- 定位按钮 -->
|
||
|
|
<cover-image
|
||
|
|
class="location-btn"
|
||
|
|
src="https://lxnapi.ccttiot.com/bike/img/static/uoxanRjBrBrtcYwRGXKa"
|
||
|
|
@tap="moveToLocation"
|
||
|
|
></cover-image>
|
||
|
|
|
||
|
|
<!-- 提示文本 -->
|
||
|
|
<cover-view class="tip-text" v-if="isDrawing">
|
||
|
|
{{ editMode ? '点击锚点进行删除' : '点击地图添加锚点，拖动锚点可调整位置' }}
|
||
|
|
</cover-view>
|
||
|
|
|
||
|
|
<!-- 控制按钮组 -->
|
||
|
|
<cover-view class="controls">
|
||
|
|
<!-- 未开始绘制时显示开始按钮 -->
|
||
|
|
<cover-view class="control-btn" @tap="startDrawing" v-if="!isDrawing">
|
||
|
|
开始绘制
|
||
|
|
</cover-view>
|
||
|
|
|
||
|
|
<!-- 绘制过程中显示的按钮组 -->
|
||
|
|
<block v-else>
|
||
|
|
<cover-view class="control-btn-group">
|
||
|
|
<cover-view
|
||
|
|
class="control-btn"
|
||
|
|
:class="{'control-btn-active': !editMode}"
|
||
|
|
@tap="toggleEditMode('draw')"
|
||
|
|
>
|
||
|
|
绘制锚点
|
||
|
|
</cover-view>
|
||
|
|
|
||
|
|
<cover-view
|
||
|
|
class="control-btn"
|
||
|
|
:class="{'control-btn-active': editMode}"
|
||
|
|
@tap="toggleEditMode('delete')"
|
||
|
|
>
|
||
|
|
删除锚点
|
||
|
|
</cover-view>
|
||
|
|
</cover-view>
|
||
|
|
|
||
|
|
<cover-view class="control-btn-group">
|
||
|
|
<cover-view
|
||
|
|
class="control-btn"
|
||
|
|
@tap="finishDrawing"
|
||
|
|
:class="{'btn-disabled': points.length < 3}"
|
||
|
|
>
|
||
|
|
完成绘制
|
||
|
|
</cover-view>
|
||
|
|
|
||
|
|
<cover-view
|
||
|
|
class="control-btn control-btn-danger"
|
||
|
|
@tap="clearPolygon"
|
||
|
|
>
|
||
|
|
清除
|
||
|
|
</cover-view>
|
||
|
|
</cover-view>
|
||
|
|
</block>
|
||
|
|
</cover-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'EditMap',
|
||
|
|
props: {
|
||
|
|
boundaryStr: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
longitude: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
latitude: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// latitude: parseFloat(this.latitude),
|
||
|
|
// longitude: parseFloat(this.longitude),
|
||
|
|
points: [],
|
||
|
|
polygons: [],
|
||
|
|
markers: [],
|
||
|
|
isDrawing: false,
|
||
|
|
editMode: false,
|
||
|
|
mapContext: null,
|
||
|
|
tipsList: [
|
||
|
|
'提示：点击"开始绘制"按钮开始绘制区域',
|
||
|
|
'点击地图添加锚点',
|
||
|
|
'点击锚点可删除',
|
||
|
|
'至少需要3个锚点才能形成有效区域'
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.mapContext = uni.createMapContext('editMap', this)
|
||
|
|
this.initBoundary()
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
boundaryStr: {
|
||
|
|
handler() {
|
||
|
|
this.initBoundary()
|
||
|
|
},
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 初始化边界数据
|
||
|
|
initBoundary() {
|
||
|
|
if (!this.boundaryStr) return
|
||
|
|
|
||
|
|
try {
|
||
|
|
const points = JSON.parse(this.boundaryStr)
|
||
|
|
if (Array.isArray(points) && points.length > 0) {
|
||
|
|
this.points = points.map(point => ({
|
||
|
|
longitude: Number(point[0]),
|
||
|
|
latitude: Number(point[1])
|
||
|
|
})).filter(point =>
|
||
|
|
!isNaN(point.latitude) && !isNaN(point.longitude)
|
||
|
|
)
|
||
|
|
|
||
|
|
// 设置地图中心点
|
||
|
|
|
||
|
|
|
||
|
|
this.updateMarkers()
|
||
|
|
this.updatePolygonWithNearestNeighbor()
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('解析边界数据失败:', error)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 更新标记点
|
||
|
|
updateMarkers() {
|
||
|
|
this.markers = this.points.map((point, index) => ({
|
||
|
|
id: index,
|
||
|
|
latitude: point.latitude,
|
||
|
|
longitude: point.longitude,
|
||
|
|
width: 20,
|
||
|
|
height: 20,
|
||
|
|
draggable: true
|
||
|
|
}))
|
||
|
|
},
|
||
|
|
|
||
|
|
// 移动到当前位置
|
||
|
|
async moveToLocation() {
|
||
|
|
try {
|
||
|
|
const [err, res] = await uni.getLocation({ type: 'gcj02' })
|
||
|
|
if (err) throw new Error('获取位置失败')
|
||
|
|
|
||
|
|
this.latitude = res.latitude
|
||
|
|
this.longitude = res.longitude
|
||
|
|
|
||
|
|
await new Promise(resolve => setTimeout(resolve, 100))
|
||
|
|
this.mapContext.moveToLocation({
|
||
|
|
latitude: res.latitude,
|
||
|
|
longitude: res.longitude
|
||
|
|
})
|
||
|
|
} catch (error) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '定位失败,请检查定位权限',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 开始绘制
|
||
|
|
startDrawing() {
|
||
|
|
this.isDrawing = true
|
||
|
|
this.editMode = false
|
||
|
|
if (this.points.length === 0) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '请点击地图添加锚点',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 切换编辑模式
|
||
|
|
toggleEditMode(mode) {
|
||
|
|
this.editMode = mode === 'delete'
|
||
|
|
uni.showToast({
|
||
|
|
title: this.editMode ? '请点击锚点进行删除' : '请点击地图添加锚点',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
// 处理地图点击
|
||
|
|
handleMapTap(e) {
|
||
|
|
if (!this.isDrawing || this.editMode) return
|
||
|
|
|
||
|
|
const { latitude, longitude } = e.detail
|
||
|
|
this.points.push({ latitude, longitude })
|
||
|
|
this.updateMarkers()
|
||
|
|
this.updatePolygonWithNearestNeighbor()
|
||
|
|
},
|
||
|
|
|
||
|
|
// 处理标记点击（删除）
|
||
|
|
handleMarkerTap(e) {
|
||
|
|
if (!this.editMode) return
|
||
|
|
|
||
|
|
const markerId = e.detail.markerId
|
||
|
|
this.points = this.points.filter((_, index) => index !== markerId)
|
||
|
|
this.updateMarkers()
|
||
|
|
this.updatePolygonWithNearestNeighbor()
|
||
|
|
},
|
||
|
|
|
||
|
|
// 处理标记拖动
|
||
|
|
handleMarkerDrag(e) {
|
||
|
|
const { markerId, latitude, longitude } = e.detail
|
||
|
|
this.points[markerId] = { latitude, longitude }
|
||
|
|
this.updateMarkers()
|
||
|
|
this.updatePolygonWithNearestNeighbor()
|
||
|
|
},
|
||
|
|
|
||
|
|
// 更新多边形
|
||
|
|
updatePolygonWithNearestNeighbor() {
|
||
|
|
if (this.points.length < 3) {
|
||
|
|
this.polygons = []
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
// 计算中心点
|
||
|
|
const centerLat = this.points.reduce((sum, p) => sum + p.latitude, 0) / this.points.length
|
||
|
|
const centerLng = this.points.reduce((sum, p) => sum + p.longitude, 0) / this.points.length
|
||
|
|
|
||
|
|
// 按角度排序
|
||
|
|
let sortedPoints = [...this.points].sort((a, b) => {
|
||
|
|
let angleA = Math.atan2(a.latitude - centerLat, a.longitude - centerLng)
|
||
|
|
let angleB = Math.atan2(b.latitude - centerLat, b.longitude - centerLng)
|
||
|
|
return angleA - angleB
|
||
|
|
})
|
||
|
|
|
||
|
|
// 闭合多边形
|
||
|
|
sortedPoints.push(sortedPoints[0])
|
||
|
|
|
||
|
|
this.polygons = [{
|
||
|
|
points: sortedPoints,
|
||
|
|
strokeWidth: 2,
|
||
|
|
strokeColor: '#FF0000',
|
||
|
|
fillColor: '#FF000050',
|
||
|
|
zIndex: 1
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
|
||
|
|
// 完成绘制
|
||
|
|
finishDrawing() {
|
||
|
|
if (this.points.length < 3) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '至少需要3个锚点才能形成区域',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
// 计算中心点
|
||
|
|
const centerLat = this.points.reduce((sum, p) => sum + p.latitude, 0) / this.points.length
|
||
|
|
const centerLng = this.points.reduce((sum, p) => sum + p.longitude, 0) / this.points.length
|
||
|
|
|
||
|
|
// 按角度排序
|
||
|
|
let sortedPoints = [...this.points].sort((a, b) => {
|
||
|
|
let angleA = Math.atan2(a.latitude - centerLat, a.longitude - centerLng)
|
||
|
|
let angleB = Math.atan2(b.latitude - centerLat, b.longitude - centerLng)
|
||
|
|
return angleA - angleB
|
||
|
|
})
|
||
|
|
|
||
|
|
// 返回排序后的坐标点数组
|
||
|
|
const coordinates = sortedPoints.map(point => [
|
||
|
|
point.longitude,
|
||
|
|
point.latitude
|
||
|
|
])
|
||
|
|
|
||
|
|
this.$emit('on-complete', JSON.stringify(coordinates))
|
||
|
|
|
||
|
|
// 清除绘制状态但保留图形
|
||
|
|
this.isDrawing = false
|
||
|
|
this.editMode = false
|
||
|
|
},
|
||
|
|
|
||
|
|
// 清除绘制
|
||
|
|
clearPolygon() {
|
||
|
|
this.points = []
|
||
|
|
this.markers = []
|
||
|
|
this.polygons = []
|
||
|
|
this.isDrawing = false
|
||
|
|
this.editMode = false
|
||
|
|
|
||
|
|
uni.showToast({
|
||
|
|
title: '已清除绘制',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.map-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.location-btn {
|
||
|
|
position: fixed;
|
||
|
|
right: 30rpx;
|
||
|
|
bottom: 300rpx;
|
||
|
|
width: 80rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tip-text {
|
||
|
|
position: fixed;
|
||
|
|
top: 40rpx;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background-color: rgba(0, 0, 0, 0.7);
|
||
|
|
color: #ffffff;
|
||
|
|
padding: 16rpx 30rpx;
|
||
|
|
border-radius: 30rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.controls {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 60rpx;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 30rpx;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-btn-group {
|
||
|
|
display: flex;
|
||
|
|
gap: 20rpx;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-btn {
|
||
|
|
min-width: 200rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
line-height: 80rpx;
|
||
|
|
background-color: #ffffff;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
text-align: center;
|
||
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
|
|
margin: 0 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-btn-active {
|
||
|
|
background-color: #007AFF;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-btn-danger {
|
||
|
|
background-color: #ff4444;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
background-color: #cccccc;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
</style>
|