diff --git a/index.html b/index.html
index b2a5ef55..553c228f 100644
--- a/index.html
+++ b/index.html
@@ -11,10 +11,10 @@
-
+ src="https://webapi.amap.com/maps?v=1.4.15&key=ca549d915cb38803582ca7e85c5f972c&plugin=AMap.MarkerClusterer"> -->
+
diff --git a/src/views/page/index.vue b/src/views/page/index.vue
index 2f2b426e..337e5387 100644
--- a/src/views/page/index.vue
+++ b/src/views/page/index.vue
@@ -406,7 +406,7 @@ var state = {
id: 'indexx',
map: null as any
}
-var cluster: any
+
import {LoadingOutlined} from '@ant-design/icons-vue'
const indicator = h(LoadingOutlined, {
@@ -720,8 +720,12 @@ const clickKz = (dat2a: any) => {
})
visible.value = true
}
-var count: any
-var points: any[] = []
+
+let count: any
+let points: any[] = []
+// @ts-ignore
+let cluster: AMap.MarkerCluster | null = null
+let markers: AMap.Marker[] = []
var _renderClusterMarker = function (context: any) {
var factor = Math.pow(context.count / count, 1 / 18)
var div = document.createElement('div')
@@ -744,15 +748,30 @@ var _renderClusterMarker = function (context: any) {
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
context.marker.setContent(div)
}
-onMounted(() => {
- getAiCount()
- gettotal()
- initMap()
- gettree4('')
- getAi()
- getjingqing()
-})
-//
+const createCluster = () => {
+ // cluster = null
+ if (cluster) cluster.setMap(null) // 避免重复创建
+ // @ts-ignore
+ cluster = new AMap.MarkerCluster(state.map, points, {
+ gridSize: 80,
+ maxZoom: 12,
+ renderClusterMarker: _renderClusterMarker
+ })
+}
+// 清除 Marker 函数（避免重复）
+function clearMarkers() {
+ const overlays = state.map.getAllOverlays('marker')
+ overlays.forEach((marker: any) => {
+ if (!marker.isCluster) {
+ state.map.remove(marker) // 仅移除非聚合 Marker
+ }
+ })
+}
+// 清除所有散点
+// const clearMarkers = () => {
+// markers.forEach((marker) => state.map.remove(marker))
+// markers = []
+// }
const treedata = () => {
api
.post('/multialarm/client/alarm_point/count', {
@@ -769,53 +788,94 @@ const treedata = () => {
})
.then((res: JsonResult) => {
console.log('🚀 ~ .then ~ res:', res)
-
- res.data.map((x: any) => {
- const marker = new AMap.Marker({
- position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
- offset: new AMap.Pixel(-15, -15),
- icon: new AMap.Icon({
- image: x.deviceType == '00' ? image3 : x.deviceType == '03' ? image1 : x.deviceType == '04' ? image2 : '',
- size: new AMap.Size(40, 46.5),
- imageSize: new AMap.Size(30, 30) //图标大小
- }),
- title: ''
- })
- marker.on('click', function () {
- deviceInfoWindow.value = new AMap.InfoWindow({
- isCustom: true, //使用自定义窗体
- content: createSubstanceInfowindow2(x, '1'),
- offset: new AMap.Pixel(5, -13)
- })
- deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
- })
- state.map.add(marker)
- points.push(marker)
+ points = res.data.map((x: any) => {
+ return {lnglat: [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude], x: x}
})
count = points.length
- // console.log('___________________________points', points)
- // 聚合点样式
- cluster = new AMap.MarkerClusterer(state.map, points, {
- gridSize: 80,
- maxZoom: 12,
- renderClusterMarker: _renderClusterMarker
+ console.log('points___________________________', points)
+
+ createCluster() // 初始化聚合点
+ state.map.on('zoomend', () => {
+ let zoom = state.map.getZoom()
+ console.log('zoom等级____________________________', zoom)
+
+ clearMarkers() // 清除现有 Marker 保留点聚合
+ if (zoom > 12) {
+ points.forEach((item: any) => {
+ // console.log('🚀 ~ points.forEach ~ p:', item)
+ const marker = new AMap.Marker({
+ position: item.lnglat,
+ icon: new AMap.Icon({
+ image: item.x.deviceType == '00' ? image3 : item.x.deviceType == '03' ? image1 : item.x.deviceType == '04' ? image2 : '',
+ size: new AMap.Size(40, 46.5),
+ imageSize: new AMap.Size(30, 30)
+ })
+ })
+ marker.on('click', function () {
+ deviceInfoWindow.value = new AMap.InfoWindow({
+ isCustom: true,
+ content: createSubstanceInfowindow2(item.x, '1'),
+ offset: new AMap.Pixel(5, -13)
+ })
+ deviceInfoWindow.value.open(state.map, item.lnglat)
+ })
+ state.map.add(marker)
+ })
+
+ cluster?.setMap(null) // 清除聚合点，避免默认聚合样式覆盖
+ } else {
+ createCluster() // 缩小时重新创建点聚合
+ // cluster.setMap(state.map)
+ // 缩小时重新添加聚合点
+ // cluster.setMap(state.map)
+ }
})
- state.map.plugin(['AMap.MarkerClusterer'], () => {
+
+ // 在点击聚合点时创建Marker
+ cluster.on('click', function (e: any) {
+ const {clusterData, lnglat} = e
+ let currentZoom = state.map.getZoom()
+ console.log('🚀 ~ currentZoom:', currentZoom)
+
+ // 若当前缩放层级 <= 12，点击聚合点时放大到更高层级以展开
+ if (currentZoom < 12) {
+ state.map.setZoomAndCenter(currentZoom + 1, lnglat) // 放大2级，聚焦到点击位置
+ }
+ clearMarkers() // 先清除地图上已有的 Marker，保留点聚合
+ let markers: any[] = []
+ console.log('🚀 ~ e:', e)
+
+ clusterData.forEach((item: any) => {
+ console.log('🚀 ~ clusterData.forEach ~ item:', item)
+
+ const marker = new AMap.Marker({
+ position: item.lnglat,
+ offset: new AMap.Pixel(-15, -15),
+ icon: new AMap.Icon({
+ image: item.x.deviceType == '00' ? image3 : item.x.deviceType == '03' ? image1 : item.x.deviceType == '04' ? image2 : '',
+ size: new AMap.Size(40, 46.5),
+ imageSize: new AMap.Size(30, 30)
+ })
+ })
+ marker.on('click', function () {
+ deviceInfoWindow.value = new AMap.InfoWindow({
+ isCustom: true,
+ content: createSubstanceInfowindow2(item.x, '1'),
+ offset: new AMap.Pixel(5, -13)
+ })
+ deviceInfoWindow.value.open(state.map, item.lnglat)
+ })
+ markers.push(marker)
+ state.map.add(marker)
+ })
+ // 自动调整视角，保证所有 Marker 可见
+ state.map.setFitView(markers)
+ })
+ state.map.plugin('AMap.MarkerCluster', () => {
let zoom = state.map.getZoom()
console.log('当前地图的缩放级别是：' + zoom)
cluster
})
-
- // var cluster = new AMap.MarkerCluster(state.map, points, {
- // gridSize: 80,
- // maxZoom: 12,
- // renderClusterMarker: _renderClusterMarker
- // })
- // state.map.plugin('AMap.MarkerCluster', () => {
- // let zoom = state.map.getZoom()
- // console.log('当前地图的缩放级别是：' + zoom)
- // cluster
- // })
})
})
}
@@ -972,44 +1032,18 @@ const gettotal = () => {
let deviceInfoWindow = ref()
const selectA = (selectedKeys: any, e: any) => {
console.log('selectedKeys', selectedKeys, e)
- if (selectedKeys[0].length >= 13) {
- let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
+ // if (selectedKeys[0].length >= 13) {
+ let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
- deviceInfoWindow.value = new AMap.InfoWindow({
- isCustom: true, //使用自定义窗体
- content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
- offset: new AMap.Pixel(5, -13)
- })
- deviceInfoWindow.value.open(state.map, [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude])
+ deviceInfoWindow.value = new AMap.InfoWindow({
+ isCustom: true, //使用自定义窗体
+ content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
+ offset: new AMap.Pixel(5, -13)
+ })
+ deviceInfoWindow.value.open(state.map, [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude])
- state.map.setZoomAndCenter(12, targetLangLat)
-
- // cluster = new AMap.MarkerClusterer(state.map, points, {
- // gridSize: 80,
- // maxZoom: 12,
- // renderClusterMarker: _renderClusterMarker
- // })
- // state.map.plugin(['AMap.MarkerClusterer'], () => {
- // let zoom = state.map.getZoom()
- // console.log('当前地图的缩放级别是：' + zoom)
- // cluster
- // })
- // state.map.setCenter(targetLangLat)
- // state.map.on('moveend', () => {
- // console.log(11111)
- // })
- // state.map.on('zoomend', () => {
- // console.log(22222)
- // })
- // state.map.on('moveend', () => {
- // console.log(33333)
- // })
-
- // if (cluster) {
- // cluster.draw()
- // }
- // treedata()
- }
+ state.map.setZoomAndCenter(12, targetLangLat, true) // 这个过渡 不平滑
+ // }
}
const createSubstanceInfowindow = (obj: any, type: any) => {
@@ -1406,9 +1440,15 @@ const initMap = () => {
getdayline()
// stationWebsocket();
}
-// state.map.on('zoomend', () => {
-// console.log(11111)
-// })
+
+onMounted(() => {
+ getAiCount()
+ gettotal()
+ initMap()
+ gettree4('')
+ getAi()
+ getjingqing()
+})