还未完成 地图点聚合改造
This commit is contained in:
parent
fcfee709b6
commit
1de9dfe3ad
|
|
@ -11,10 +11,10 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script
|
|
||||||
src="https://webapi.amap.com/maps?v=1.4.15&key=ca549d915cb38803582ca7e85c5f972c&plugin=AMap.MarkerClusterer"></script>
|
|
||||||
<!-- <script
|
<!-- <script
|
||||||
src="https://webapi.amap.com/maps?v=2.0&key=ca549d915cb38803582ca7e85c5f972c&plugin=AMap.MarkerClusterer"></script> -->
|
src="https://webapi.amap.com/maps?v=1.4.15&key=ca549d915cb38803582ca7e85c5f972c&plugin=AMap.MarkerClusterer"></script> -->
|
||||||
|
<script
|
||||||
|
src="https://webapi.amap.com/maps?v=2.0&key=ca549d915cb38803582ca7e85c5f972c&plugin=AMap.MarkerCluster"></script>
|
||||||
<!-- &plugin=AMap.MarkerClusterer -->
|
<!-- &plugin=AMap.MarkerClusterer -->
|
||||||
|
|
||||||
<script src="/haikang/h5player.min.js"></script>
|
<script src="/haikang/h5player.min.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -406,7 +406,7 @@ var state = {
|
||||||
id: 'indexx',
|
id: 'indexx',
|
||||||
map: null as any
|
map: null as any
|
||||||
}
|
}
|
||||||
var cluster: any
|
|
||||||
import {LoadingOutlined} from '@ant-design/icons-vue'
|
import {LoadingOutlined} from '@ant-design/icons-vue'
|
||||||
|
|
||||||
const indicator = h(LoadingOutlined, {
|
const indicator = h(LoadingOutlined, {
|
||||||
|
|
@ -720,8 +720,12 @@ const clickKz = (dat2a: any) => {
|
||||||
})
|
})
|
||||||
visible.value = true
|
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 _renderClusterMarker = function (context: any) {
|
||||||
var factor = Math.pow(context.count / count, 1 / 18)
|
var factor = Math.pow(context.count / count, 1 / 18)
|
||||||
var div = document.createElement('div')
|
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.setOffset(new AMap.Pixel(-size / 2, -size / 2))
|
||||||
context.marker.setContent(div)
|
context.marker.setContent(div)
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
const createCluster = () => {
|
||||||
getAiCount()
|
// cluster = null
|
||||||
gettotal()
|
if (cluster) cluster.setMap(null) // 避免重复创建
|
||||||
initMap()
|
// @ts-ignore
|
||||||
gettree4('')
|
cluster = new AMap.MarkerCluster(state.map, points, {
|
||||||
getAi()
|
gridSize: 80,
|
||||||
getjingqing()
|
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 = () => {
|
const treedata = () => {
|
||||||
api
|
api
|
||||||
.post('/multialarm/client/alarm_point/count', {
|
.post('/multialarm/client/alarm_point/count', {
|
||||||
|
|
@ -769,53 +788,94 @@ const treedata = () => {
|
||||||
})
|
})
|
||||||
.then((res: JsonResult<any>) => {
|
.then((res: JsonResult<any>) => {
|
||||||
console.log('🚀 ~ .then ~ res:', res)
|
console.log('🚀 ~ .then ~ res:', res)
|
||||||
|
points = res.data.map((x: any) => {
|
||||||
res.data.map((x: any) => {
|
return {lnglat: [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude], x: x}
|
||||||
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)
|
|
||||||
})
|
})
|
||||||
count = points.length
|
count = points.length
|
||||||
// console.log('___________________________points', points)
|
console.log('points___________________________', points)
|
||||||
// 聚合点样式
|
|
||||||
cluster = new AMap.MarkerClusterer(state.map, points, {
|
createCluster() // 初始化聚合点
|
||||||
gridSize: 80,
|
state.map.on('zoomend', () => {
|
||||||
maxZoom: 12,
|
let zoom = state.map.getZoom()
|
||||||
renderClusterMarker: _renderClusterMarker
|
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()
|
let zoom = state.map.getZoom()
|
||||||
console.log('当前地图的缩放级别是：' + zoom)
|
console.log('当前地图的缩放级别是：' + zoom)
|
||||||
cluster
|
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<any>()
|
let deviceInfoWindow = ref<any>()
|
||||||
const selectA = (selectedKeys: any, e: any) => {
|
const selectA = (selectedKeys: any, e: any) => {
|
||||||
console.log('selectedKeys', selectedKeys, e)
|
console.log('selectedKeys', selectedKeys, e)
|
||||||
if (selectedKeys[0].length >= 13) {
|
// 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]
|
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({
|
deviceInfoWindow.value = new AMap.InfoWindow({
|
||||||
isCustom: true, //使用自定义窗体
|
isCustom: true, //使用自定义窗体
|
||||||
content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
|
content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
|
||||||
offset: new AMap.Pixel(5, -13)
|
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.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)
|
state.map.setZoomAndCenter(12, targetLangLat, true) // 这个过渡 不平滑
|
||||||
|
// }
|
||||||
// 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()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const createSubstanceInfowindow = (obj: any, type: any) => {
|
const createSubstanceInfowindow = (obj: any, type: any) => {
|
||||||
|
|
@ -1406,9 +1440,15 @@ const initMap = () => {
|
||||||
getdayline()
|
getdayline()
|
||||||
// stationWebsocket();
|
// stationWebsocket();
|
||||||
}
|
}
|
||||||
// state.map.on('zoomend', () => {
|
|
||||||
// console.log(11111)
|
onMounted(() => {
|
||||||
// })
|
getAiCount()
|
||||||
|
gettotal()
|
||||||
|
initMap()
|
||||||
|
gettree4('')
|
||||||
|
getAi()
|
||||||
|
getjingqing()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue