晨曦1434 2023-02-18 21:47 采纳率: 100%
浏览 374
已结题

vue3 高德地图 点聚合无效

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>


  • 写回答

3条回答 默认 最新

  • CodeBytes 2023-02-18 21:56
    关注

    该回答引用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
          }
    
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    1人已打赏
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月26日
  • 已采纳回答 2月18日
  • 赞助了问题酬金100元 2月18日
  • 创建了问题 2月18日

悬赏问题

  • ¥15 我需要全国每个城市的最新小区名字等数据。
  • ¥15 开发一个小区生态的小程序
  • ¥15 MddBootstrapInitialize2失败
  • ¥15 LCD Flicker
  • ¥15 Spring MVC项目,访问不到相应的控制器方法
  • ¥15 esp32在micropython环境下使用ssl/tls连接mqtt服务器出现以下报错Connected on 192.168.154.223发生意外错误: 5无法连接到 MQTT 代理,如何解决?
  • ¥15 关于#genesiscsheel#的问题,如何解决?
  • ¥15 Android aidl for hal
  • ¥15 STM32CubeIDE下载程序报错
  • ¥15 微信好友如何转变为会员系统?(相关搜索:小程序)