高德地图组件JSApi组件详解

<el-amap-layer-district-cluster ref="amapLayerDistrictClusterRef" :zIndex="101" :data="clusterData"
        :top-adcodes="[211400]" v-if="layerDistrictClusterVisible" :visible="layerDistrictClusterVisible"
        :get-position="getPosition" :renderOptions="clusterRenderOptions" @clusterMarkerClick="onClusterMarkerClick"
        @init="onDistrictClusterInit" @featureClick="onFeatureClick" @featureMouseover="onFeatureMouseover"
        @featureMouseout="onFeatureMouseout" />

1、  

:data="clusterData" 
onMounted(() => {
  fetch('https://a.amap.com/amap-ui/static/data/10w.txt').then(res => {
    return res.text()
  }).then(csv => {
    clusterData.value = csv.split('\n');
  })
})

https://a.amap.com/amap-ui/static/data/10w.txt---高德地图数据源列表写死即可

 2、
 :top-adcodes="[211400]" 
所有code地址https://webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/assets/d_v1/area_tree.json
要展示的行政区最高code，默认:top-adcodes="[100000]"展示全国，假如仅需要展示河北和北京，可以设置为[130000, 110000],比如展示葫芦岛市:top-adcodes="[211400]"

3、:visible="layerDistrictClusterVisible"
图层是否显示
:visible="true"显示
 4、:get-position="getPosition"
返回数据项中的经纬度信息
方法固定写死-官网写法

const getPosition = (item: any) => {
  if (!item) {
    return null
  }
  const parts = item.split(',')
  //返回经纬度
  return [parseFloat(parts[0]), parseFloat(parts[1])]
}

5、:renderOptions="clusterRenderOptions"
绘制的引擎的参数，参数列表见官网https://vue-amap.guyixi.cn/zh-cn/component/layer/data/district-cluster.html#%E5%9F%BA%E7%A1%80%E7%A4%BA%E4%BE%8B
 

// 绘制的引擎的参数
const clusterRenderOptions = computed(() => {
  return {
    clusterMarkerEventSupport: false,
    clusterMarkerClickToShowSub: false,
    zooms: [0, 20],
    renderClusterMarker: function (feature: any, dataItems: any) {
      let content = feature.properties.name
      // 处理数据
      //获取该code下的相关资源
      const countObj = getAreaCountsByProvinceId(feature.properties.adcode + '')
      if (
        selectedLevel.value === 0 ||
        selectedLevel.value === 1 ||
        selectedLevel.value === 2 ||
        selectedLevel.value === 3
      ) {
        //
      } else {
        if (selectedLevel.value) {
          return null
        } else {
          //面包屑未选择时
          //TODU
        }
      }
      let titlevalue = content
      if (countObj) {
        //有效数据区域
        //转换数据
        let marker_tmp = new AMap.Marker({
          position: feature.properties.center,
          anchor: 'bottom-left',
          offset: [0, 0],
          content: createMarkerTipContent(domId, content, countObj),
          topWhenClick: true,
          extraOptions: { name: content, data: feature },
          extData: { name: content, data: feature }
        })
        //绑定事件
        marker_tmp.on('click', () => {
          clickMakerEventCustom(feature, countObj)
        })
        //注册数据
        try {
          featureDataMap.value.set(feature.properties.adcode, countObj)
        } catch (error) {
          console.error(error)
        }
        return marker_tmp
      } else {
        //无效数据区域
        let marker_tmp = new AMap.Marker({
          position: feature.properties.center,
          anchor: 'bottom-left',
          offset: new AMap.Pixel(-20, -5),
          content: `<div class="cus-cluster-marker-content ${domId}">
                  <span class="cus-cluster-marker-content-title">${content}</span>
                  </div>`,
          title: `暂时无 " ${titlevalue} " 范围内数据.`,
          extraOptions: {}
        })
        //绑定事件
        marker_tmp.on('click', () => {
          ElMessage.warning('该区域内无数据.')
        })
        return marker_tmp
      }
    },
    // 特定区划级别的默认样式
    featureStyleByLevel: isDark.value
      ? {
        //深色模式下的样式
        country: {
          strokeColor: 'rgb(31, 119, 180)',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: 'rgb(49, 163, 84)',
          fillOpacity: 0.8,
          bubble: true
        },
        province: {
          strokeColor: 'rgb(31, 119, 180)',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: 'rgb(100, 209, 136)',
          fillOpacity: 0.7,
          bubble: true
        },
        city: {
          strokeColor: 'rgb(31, 119, 180)',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: 'rgb(122, 211, 150)',
          fillOpacity: 0.6,
          bubble: true
        },
        district: {
          strokeColor: 'rgb(31, 119, 180)',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: 'rgb(136, 223, 164)',
          fillOpacity: 0.3,
          bubble: true
        }
      }
      : {
        //浅色模式下的样式
        country: {
          strokeColor: 'rgb(31, 119, 180)',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: 'rgb(49, 163, 84)',
          fillOpacity: 0.8,
          bubble: true
        },
        province: {
          strokeColor: 'rgb(31, 119, 180)',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: 'rgb(116, 196, 118)',
          fillOpacity: 0.7,
          bubble: true
        },
        city: {
          strokeColor: 'rgb(31, 119, 180)',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: 'rgb(161, 217, 155)',
          fillOpacity: 0.6,
          bubble: true
        },
        district: {
          strokeColor: 'rgb(31, 119, 180)',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: 'rgb(199, 233, 192)',
          fillOpacity: 0.3,
          bubble: true
        }
      },
    //渲染固定区域(暂时取消)
    getFeatureStyle_unuse: function (feature: any, dataItems: any) {
      if (
        currentAreaLevel.value === 'province' ||
        currentAreaLevel.value === 'city' ||
        currentAreaLevel.value === 'district'
      ) {
        if (currentAreaCode.value) {
          if (feature.properties.adcode == currentAreaCode.value) {
            let tempColor = ''
            let tempOpacity = 1
            if (currentAreaLevel.value === 'province') {
              tempColor = 'rgb(116, 196, 118)'
              tempOpacity = 0.8
            }
            if (currentAreaLevel.value === 'city') {
              tempColor = 'rgb(161, 217, 155)'
              tempOpacity = 0.6
            }
            if (currentAreaLevel.value === 'district') {
              tempColor = 'rgb(199, 233, 192)'
              tempOpacity = 0.1
            }
            return {
              strokeColor: 'rgb(31, 119, 180)',
              strokeOpacity: 0.8,
              strokeWeight: 1,
              fillColor: tempColor,
              fillOpacity: tempOpacity,
              bubble: false
            }
          } else {
            return {
              fillOpacity: 0
            }
          }
        }
      }
      if (currentAreaLevel.value === 'project' || currentAreaLevel.value === 'organization') {
        return {
          fillOpacity: 0
        }
      }
      return {}
    }
  }
})

6、@clusterMarkerClick="onClusterMarkerClick"
鼠标点击聚合标注时触发
//鼠标点击聚合标注时触发(原生标注点的事件暂时关闭)
const onClusterMarkerClick = (e: any, { adcode, dataItems, feature }: any) => {
  return
}
7、@init="onDistrictClusterInit"
实例初始化结束

const amapLayerDistrictClusterRef = ref<any>(null)
const amapLayerDistrictClusterInstance = ref()
const layerDistrictClusterVisible = ref(true)
//实例初始化结束
const onDistrictClusterInit = () => {
  // 记载完成
  amapLayerDistrictClusterInstance.value = amapLayerDistrictClusterRef.value?.$$getInstance()
  if (amapLayerDistrictClusterInstance.value) {
    document.body.addEventListener('mousedown', allMousedown)
    document.body.addEventListener('mouseup', allMouseup)
  }
}

8、@featureClick="onFeatureClick"
鼠标点击feature对应的区域时触发
const onFeatureClick = (e: any, dataItems: any) => {
  return
}9、@featureMouseover="onFeatureMouseover"
鼠标移入feature对应的区域时触发
//鼠标移入feature对应的区域时触发

const onFeatureMouseover = (event: any, feature: any) => {
  // console.log(feature, "行政区域,国/省/市/县区");

  if (
    selectedLevel.value === 0 ||
    selectedLevel.value === 1 ||
    selectedLevel.value === 2 ||
    selectedLevel.value === 3
  ) {
    //显示区域
    showPolygon(feature.geometry.coordinates, feature)

  }
}

10、@featureMouseout="onFeatureMouseout"
鼠标移出feature对应的区域时触发
//鼠标移出feature对应的区域时触发
const onFeatureMouseout = (event: any, feature: any) => {
  // console.log("鼠标移出事件");
}