Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

高德地图2.0 点聚合 更新完成 

高德地图2.0 点聚合 更新完成
This commit is contained in:
TimSpan 2024-12-27 10:25:59 +08:00
parent 1de9dfe3ad
commit b723f2eaf1
1 changed files with 54 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/views/page/index.vue
View File

@ -631,7 +631,7 @@ const gettree4 = (data: any) => {
})
let data = [res.data]
data.forEach((tree) => {
console.log('tree______', tree)
// console.log('tree______', tree)
tree.children.reverse() // 长沙市排在前
printLeafs(tree, res1.data)
})
@ -723,23 +723,21 @@ const clickKz = (dat2a: any) => {
let count: any
let points: any[] = []
// @ts-ignore
let cluster: AMap.MarkerCluster | null = null
let markers: AMap.Marker[] = []
let cluster: any
var _renderClusterMarker = function (context: any) {
var factor = Math.pow(context.count / count, 1 / 18)
var div = document.createElement('div')
var Hue = 180 - factor * 180
var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)'
var fontColor = 'hsla(' + Hue + ',100%,20%,1)'
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'
var shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'
div.style.backgroundColor = bgColor
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 2)
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
div.style.width = div.style.height = size + 'px'
div.style.border = 'solid 1px ' + borderColor
div.style.borderRadius = size / 2 + 'px'
div.style.boxShadow = '0 0 1px ' + shadowColor
div.style.boxShadow = '0 0 5px ' + shadowColor
div.innerHTML = context.count
div.style.lineHeight = size + 'px'
div.style.color = fontColor
@ -748,6 +746,28 @@ var _renderClusterMarker = function (context: any) {
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
context.marker.setContent(div)
}
var _renderMarker = function (context: any) {
// console.log('🚀 ~ context:', context)
var offset = new AMap.Pixel(-9, -9)
context.marker.setIcon(
new AMap.Icon({
image: context.data[0].x.deviceType == '00' ? image3 : context.data[0].x.deviceType == '03' ? image1 : context.data[0].x.deviceType == '04' ? image2 : '',
size: new AMap.Size(40, 46.5),
imageSize: new AMap.Size(30, 30)
})
)
context.marker.setOffset(offset)
context.marker.on('click', function () {
// console.log('context.marker.on')
deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true,
content: createSubstanceInfowindow2(context.data[0].x, '1'),
offset: new AMap.Pixel(5, -13)
})
deviceInfoWindow.value.open(state.map, context.data[0].lnglat)
})
}
const createCluster = () => {
// cluster = null
if (cluster) cluster.setMap(null) // 避免重复创建
@ -755,23 +775,11 @@ const createCluster = () => {
cluster = new AMap.MarkerCluster(state.map, points, {
gridSize: 80,
maxZoom: 12,
renderClusterMarker: _renderClusterMarker
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker // 自定义非聚合点样式
})
}
// 清除 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', {
@ -787,94 +795,21 @@ const treedata = () => {
pagesize: res1.data.count
})
.then((res: JsonResult<any>) => {
console.log('🚀 ~ .then ~ res:', res)
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)
// 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)
}
})
// 在点击聚合点时创建Marker
cluster.on('click', function (e: any) {
// console.log('🚀 ~ e:', e)
const {clusterData, lnglat} = e
let currentZoom = state.map.getZoom()
console.log('🚀 ~ currentZoom:', currentZoom)
// 若当前缩放层级 <= 12，点击聚合点时放大到更高层级以展开
if (currentZoom < 12) {
state.map.setZoomAndCenter(currentZoom + 1, lnglat) // 放大2级，聚焦到点击位置
// console.log('🚀 ~ currentZoom:_____________________________', currentZoom)
if (clusterData?.length > 0) {
state.map.setZoomAndCenter(currentZoom + 1, lnglat) // 放大1级，聚焦到点击位置
}
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
})
})
})
@ -1032,18 +967,25 @@ const gettotal = () => {
let deviceInfoWindow = ref<any>()
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, true) // 这个过渡 不平滑
// }
// state.map.setZoomAndCenter(12, targetLangLat, true) // 这个过渡 不平滑
// state.map.setZoom(12, {animate: true})
// state.map.setCenter(targetLangLat, true)
state.map.setFitView(
new AMap.Marker({position: [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]}),
true,
[30, 30, 30, 30]
)
}
}
const createSubstanceInfowindow = (obj: any, type: any) => {