diff --git a/src/assets/marker/alarm.png b/src/assets/marker/alarm.png new file mode 100644 index 0000000..dd75d3d --- /dev/null +++ b/src/assets/marker/alarm.png Binary files differ diff --git a/src/assets/marker/alarm.png b/src/assets/marker/alarm.png new file mode 100644 index 0000000..dd75d3d --- /dev/null +++ b/src/assets/marker/alarm.png Binary files differ diff --git a/src/components/aMap/index.vue b/src/components/aMap/index.vue index c2284dc..0aed883 100644 --- a/src/components/aMap/index.vue +++ b/src/components/aMap/index.vue @@ -3,6 +3,7 @@ import AMapLoader from '@amap/amap-jsapi-loader' import dogUrl from '../../assets/tempImages/dog.png' import markerUrl from '../../assets/marker/marker.png' +import alarmUrl from '../../assets/marker/alarm.png' const props = defineProps({ patrolInfoList: Array as any, }) @@ -11,10 +12,12 @@ const mapContainer = ref(null) const map: any = ref(null) // 地图实例 -const markerLayer = ref(null) -const dogLayer = ref(null) +const markerLayer = ref(null) // 巡检路线点图层 +const dogLayer = ref(null) // 狗实时位置图层 +const alarmLayer = ref(null) // 报警点图层 const dogMarker = ref(null) const dogMarkerPosition = ref() // 狗的当前位置 +const markersList: any = ref([]) // 初始化地图 const initMap = async () => { if (!mapContainer.value) { return } @@ -61,7 +64,6 @@ const createMarkers = () => { if (!map.value) { return } removeMarkerLayer() - const markers: AMap.Marker[] = [] // 创建marker图层 if (!markerLayer.value) { markerLayer.value = new AMap.OverlayGroup() @@ -78,24 +80,6 @@ else { labelText = `${index + 1}` } - - // 自定义标记内容 - // const markerContent = ` - //
- // ${labelText} - //
- // ` - const markerContent = `
@@ -127,12 +111,11 @@ infoWindow.open(map.value, marker.getPosition()) }) // map.value.setView(cruisePoints.value[cruisePoints.value.length - 1].point) - markers.push(marker) + markersList.value.push(marker) markerLayer.value.addOverlay(marker) - map.value.setFitView(markers) + map.value.setFitView(markersList.value) }) - map.value.add(markerLayer) - return markers + map.value.add(markerLayer.value) } // 创建连线 @@ -161,7 +144,7 @@ map.value.add(markerLayer.value) } -// --------------------------------------------dog------------------------------------------------ +// --------------------------------------------dog图层------------------------------------------------ // 移除狗图层 const removeDogLayer = () => { if (map.value && dogLayer.value) { @@ -211,6 +194,94 @@ dogMarkerPosition.value = endPoint } } +// --------------------------------------------报警点图层------------------------------------------------ +const alarmInfoWindow = ref() // 报警信息窗口 +// 创建报警点图层 +const createAlarmLayer = () => { + if (!alarmLayer.value) { + alarmLayer.value = new AMap.OverlayGroup() + map.value.add(alarmLayer.value) + } +} +// 移除报警点图层 +const removeAlarmLayer = () => { + if (map.value && alarmLayer.value) { + map.value.remove(alarmLayer.value) + alarmLayer.value = null + } +} + +// 绘制报警点 +const createAlarmMarkers = (pointInfo: any) => { + if (!map.value) { return } + removeAlarmLayer() + createAlarmLayer() + const alarmPoint = [pointInfo.gpsX, pointInfo.gpsY] + const alarmMarkerContent = ` +
+ +
+ ` + + const alarmMarker = new AMap.Marker({ + position: alarmPoint, + content: alarmMarkerContent, + offset: new AMap.Pixel(-15, -15), // 调整标记的偏移量，使其居中显示 + }) + const contentNoImg = '
报警信息
' + + `
${pointInfo.communityName}
` + + `
${pointInfo.communityAddress}
` + + `
${pointInfo.routeNumber}
` + + `
${pointInfo.patrolContent}
` + + `
${pointInfo.gas}ppm.m
` + + `
${pointInfo.gpsX}, ${pointInfo.gpsY}
` + + '
' + + const contentImg = ` +
+
+
报警信息
+
${pointInfo.communityName}
+
${pointInfo.communityAddress}
+
${pointInfo.routeNumber}
+
${pointInfo.patrolContent}
+
${pointInfo.gas}ppm.m
+
${pointInfo.gpsX}, ${pointInfo.gpsY}
+
+
+ 报警图片 +
+
+ ` + + const content = pointInfo.picture ? contentImg : contentNoImg + // 创建 InfoWindow 并设置内容 + const infoWindow = new AMap.InfoWindow({ + content, + offset: new AMap.Pixel(0, -30), + }) + alarmInfoWindow.value = infoWindow + infoWindow.open(map.value, alarmMarker.getPosition()) // 自动打开InfoWindow + + // 绑定点击事件，点击 marker 显示 + alarmMarker.on('click', () => { + infoWindow.open(map.value, alarmMarker.getPosition()) + }) + alarmLayer.value.addOverlay(alarmMarker) + map.value.setCenter(alarmPoint) + map.value.setZoom(17) // 设置合适的缩放级别 + map.value.add(alarmLayer.value) +} + +// 关闭报警信息窗口 +function closeAlarmInfoWindow() { + if (alarmInfoWindow.value) { + alarmInfoWindow.value.close() + if (markersList.value.length && map.value) { + map.value.setFitView(markersList.value) + } + } +} // ----------------------------------------------------------------------------------------------- watch(() => props.patrolInfoList, async (newVal) => { @@ -234,7 +305,16 @@ await initMap() }) // ----------------------- 以下是暴露的方法内容 ---------------------------- -defineExpose({ createMarkers, createPolylines, removeMarkerLayer, createDogMarker, startMoving }) +defineExpose({ + createMarkers, + createPolylines, + removeMarkerLayer, + createDogMarker, + startMoving, + createAlarmMarkers, + closeAlarmInfoWindow, // 关闭报警信息窗口 + removeAlarmLayer, // 移除报警图层 +})