vue3 高德地图api加载热力图及关闭 JSAPI v1.4.15

高德地图api加载天地图和2D热力图及关闭 JSAPI v1.4.15

地图API地址
[http://lbs.tianditu.gov.cn/server/MapService.html](http://lbs.tianditu.gov.cn/server/MapService.html)

高德地图2D热力图地址
[https://lbs.amap.com/demo/loca-api/demos/loca_heatmap/loca_heatmap_3d](https://lbs.amap.com/demo/loca-api/demos/loca_heatmap/loca_heatmap_3d)

// 初始化地图
AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    //version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Weather', 'AMap.MouseTool'], // 需要使用的的插件列表， 天气，鼠标工具， 导入geojson文件，
    AMapUI: {
      version: '1.1',
      plugins: ['misc/PathSimplifier']
    },
    Loca: {} // 热立图必须加
  }).then((AMap) => {
    let wms = tileLayerUrl('img')
    state.AMap = AMap   //  方便后续操作
    state.map = new AMap.Map("container", { //设置地图容器id
      //rotateEnable:true,
      //pitchEnable:true,
      //mask: mask,
      //pitch: 45, // 地图俯仰角度，有效范围 0 度- 83 度
      //viewMode: "3D", //是否为3D地图模式
      //terrain: true, // 开启地形图
      zoom: 11.1, //初始化地图级别  11.1
      zooms: [5, 20], // 缩放范围
      expandZoomRange: true,
      center: state.center2D, //初始化地图中心点位置
      //mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
      layers: [ //使用多个图层
        wms
      ],
    });

// 天地图地图url
function tileLayerUrl(layer, id) {
  let wms = new AMap.TileLayer.WMTS({
      url: `http://t1.tianditu.gov.cn/${layer}_w/wmts`,
      blend: false,
      tileSize: 256,
      zIndex: 2,
      params: {
        Layer: 'img',
        Version: '1.0.0',
        Format: 'tiles',
        TileMatrixSet: 'w',
        STYLE: 'default',
        tk: ''    //  天地图申请的token
        // 注意参数中的LAYER:'vec'和TILEMATRIXSET:'w',这两个要与链接中的vec_w对应
      }
    })
  return wms
}

// 热力图
let heatmapLayer = ref(null)
function peopleVisualMap(heatmapData) {
  heatmapLayer.value = new Loca.HeatmapLayer({
        map: state.map,
    });
    if (heatmapData) {
      let list = [];
      let i = -1, length = heatmapData.length;
      while (++i < length) {
        let item = heatmapData[i];
          list.push({
              coordinate: [item.lng, item.lat],
              count: item.count
          })
      }
      heatmapLayer.value.setData(list, {
          lnglat: 'coordinate',
          value: 'count'
      });
      heatmapLayer.value.setOptions({
          style: {
              radius: 40,
              color: {
                  0.5: '#2c7bb6',
                  0.65: '#abd9e9',
                  0.7: '#ffffbf',
                  0.9: '#fde468',
                  1.0: '#d7191c'
              }
          }
      });
    }
    heatmapLayer.value.render();
}


// 关闭热力图
function clearPeopleVisual() {
  // 隐藏热力图
  heatmapLayer.value.hide();
}