vue3 高德地图 点聚合无效
Marker点位生效
MarkerClusterer点聚合无效
<template>
<div id="container">div>
template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import { post, postId, postData } from '@/api/services'
import {
onBeforeUnmount,
ref,
reactive,
toRefs,
defineComponent,
computed
} from 'vue'
// 设备资源请求模型
const mapRequest = ref({
Str: '',
ProjectId: 0
})
// 地图模型
const map = shallowRef(null)
// 加载地图模型
const initMap = () => {
AMapLoader.load({
key: 'c14d1edfea8dcf94d61e199d9c6b9496', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.ControlBar', 'AMap.ToolBar', 'AMap.Marker'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
map.value = new AMap.Map('container', {
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
zoom: 5,
pitch: 0,
rotation: 0,
viewMode: '3D', //开启3D视图,默认为关闭
buildingAnimation: true, //楼块出现是否带动画
expandZoomRange: true,
zooms: [3, 20],
center: [116.333926, 39.997245]
})
// 添加 3D 罗盘控制
map.value.addControl(
new AMap.ControlBar({
showZoomBar: true,
showControlButton: true
// position: {
// right: '10px',
// top: '10px'
// }
})
)
// 添加 显示级别 按钮控制
map.value.addControl(
new AMap.ToolBar({
// position: {
// right: '40px',
// top: '110px'
// }
})
)
// 设置地图样式
map.value.setMapStyle('amap://styles/darkblue')
})
.catch((e) => {
console.log(e)
})
}
// 地图设备数据
const mpaDevice = ref([])
const markers = ref([])
const cluster = ref({})
// 图标
const Icons = [
require('../../../public/取水栓图标/取水栓_02.png'),
require('../../../public/取水栓图标/取水栓_03.png'),
require('../../../public/取水栓图标/取水栓_04.png')
]
// 加载地图设备数据
const initMpaDevice = async () => {
mpaDevice.value = await postData('/Home/GetMapAsync', mapRequest.value)
// console.log(mpaDevice.value)
AMapLoader.load({
key: 'c14d1edfea8dcf94d61e199d9c6b9496', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.Marker', 'AMap.Pixel', 'AMap.MarkerClusterer'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
markers.value = []
mpaDevice.value.forEach((item) => {
// 判断状态
let status = 0
if (item.deviceUploadData == undefined) {
status = 1
} else {
let todayDate = new Date().getTime() //现在的时间戳
let createTime = new Date(
Date.parse(item.deviceUploadData.createTime.replace(/-/g, '/'))
).getTime() //数据上传的时间戳
// 判断是否离线
if (
Math.abs(todayDate - createTime) >
item.deviceParameter.timeoutMinutes * 60 * 1000
) {
status = 1
} else {
status = item.deviceUploadData.valvStatus
if (status == 0) {
status = item.deviceUploadData.status
} else {
status = 3
}
}
}
let marker = new AMap.Marker({
position: new AMap.LngLat(
item.deviceState.longitude,
item.deviceState.latitude
),
offset: new AMap.Pixel(-33, -36),
icon: new AMap.Icon({
size: new AMap.Size(50, 50), // 图标尺寸
imageSize: new AMap.Size(50, 50),
image: Icons[status]
})
})
marker.id = item.id
markers.value.push(marker)
})
// map.value.add(markers.value)
cluster.value = new AMap.MarkerClusterer(map.value, markers.value, {
gridSize: 80
})
cluster.value.setMaxZoom(17)
map.value.add(cluster.value)
// console.log(cluster.value)
})
}
// 调用地图初始化函数：onMounted 函数会在 DOM 初始化完成后调用，建议在 mounted 函数中调用地图初始化方法
onMounted(() => {
initMap()
initMpaDevice()
})
script>
<style scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
style>
该回答引用ChatGPT
主要是将加载点聚合组件的代码移到了初始化地图完成后，然后再通过传入点的数组进行点聚合。
<template>
<div id="container"></div>
</template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import { post, postId, postData } from '@/api/services'
import {
onBeforeUnmount,
ref,
reactive,
toRefs,
defineComponent,
computed
} from 'vue'
const mapRequest = ref({
Str: '',
ProjectId: 0
})
const map = shallowRef(null)
const mpaDevice = ref([])
const markers = ref([])
const cluster = shallowRef(null)
const Icons = [
require('../../../public/取水栓图标/取水栓_02.png'),
require('../../../public/取水栓图标/取水栓_03.png'),
require('../../../public/取水栓图标/取水栓_04.png')
]
const initMap = () => {
AMapLoader.load({
key: 'c14d1edfea8dcf94d61e199d9c6b9496',
version: '2.0',
plugins: ['AMap.ControlBar', 'AMap.ToolBar', 'AMap.Marker']
})
.then((AMap) => {
map.value = new AMap.Map('container', {
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
zoom: 5,
pitch: 0,
rotation: 0,
viewMode: '3D',
buildingAnimation: true,
expandZoomRange: true,
zooms: [3, 20],
center: [116.333926, 39.997245]
})
map.value.addControl(
new AMap.ControlBar({
showZoomBar: true,
showControlButton: true
})
)
map.value.addControl(
new AMap.ToolBar()
)
map.value.setMapStyle('amap://styles/darkblue')
// 初始化完成后加载点聚合组件
AMapLoader.load({
key: 'c14d1edfea8dcf94d61e199d9c6b9496',
version: '2.0',
plugins: ['AMap.MarkerClusterer']
})
.then(() => {
// 点聚合组件初始化完成后再进行点的添加和聚合
initMpaDevice()
})
.catch((e) => {
console.log(e)
})
})
.catch((e) => {
console.log(e)
})
}
const initMpaDevice = async () => {
mpaDevice.value = await postData('/Home/GetMapAsync', mapRequest.value)
markers.value = []
mpaDevice.value.forEach((item) => {
let status = 0
if (item.deviceUploadData == undefined) {
status = 1
} else {
let todayDate = new Date().getTime()
let createTime = new Date(
Date.parse(item.deviceUploadData.createTime.replace(/-/g, '/'))
).getTime()
if (
Math.abs(todayDate - createTime) >
item.deviceParameter.timeoutMinutes * 60 * 1000
) {
status = 1
}
<template>
<div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import { post, postId, postData } from '@/api/services'
import {
onBeforeUnmount,
ref,
reactive,
toRefs,
defineComponent,
computed
} from 'vue'
// 设备资源请求模型
const mapRequest = ref({
Str: '',
ProjectId: 0
})
// 地图模型
const map = shallowRef(null)
// 加载地图模型
const initMap = () => {
AMapLoader.load({
key: 'c14d1edfea8dcf94d61e199d9c6b9496', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.ControlBar', 'AMap.ToolBar', 'AMap.Marker'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
map.value = new AMap.Map('container', {
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
zoom: 5,
pitch: 0,
rotation: 0,
viewMode: '3D', //开启3D视图,默认为关闭
buildingAnimation: true, //楼块出现是否带动画
expandZoomRange: true,
zooms: [3, 20],
center: [116.333926, 39.997245]
})
// 添加 3D 罗盘控制
map.value.addControl(
new AMap.ControlBar({
showZoomBar: true,
showControlButton: true
// position: {
// right: '10px',
// top: '10px'
// }
})
)
// 添加 显示级别 按钮控制
map.value.addControl(
new AMap.ToolBar({
// position: {
// right: '40px',
// top: '110px'
// }
})
)
// 设置地图样式
map.value.setMapStyle('amap://styles/darkblue')
})
.catch((e) => {
console.log(e)
})
}
// 地图设备数据
const mpaDevice = ref([])
const markers = ref([])
const cluster = ref({})
// 图标
const Icons = [
require('../../../public/取水栓图标/取水栓_02.png'),
require('../../../public/取水栓图标/取水栓_03.png'),
require('../../../public/取水栓图标/取水栓_04.png')
]
// 加载地图设备数据
const initMpaDevice = async () => {
mpaDevice.value = await postData('/Home/GetMapAsync', mapRequest.value)
// console.log(mpaDevice.value)
AMapLoader.load({
key: 'c14d1edfea8dcf94d61e199d9c6b9496', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.Marker', 'AMap.Pixel', 'AMap.MarkerClusterer'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
markers.value = []
mpaDevice.value.forEach((item) => {
// 判断状态
let status = 0
if (item.deviceUploadData == undefined) {
status = 1
} else {
let todayDate = new Date().getTime() //现在的时间戳
let createTime = new Date(
Date.parse(item.deviceUploadData.createTime.replace(/-/g, '/'))
).getTime() //数据上传的时间戳
// 判断是否离线
if (
Math.abs(todayDate - createTime) >
item.deviceParameter.timeoutMinutes * 60 * 1000
) {
status = 1
} else {
status = item.deviceUploadData.valvStatus
if (status == 0) {
status = item.deviceUploadData.status
} else {
status = 3