高德地图amap热力图替换瓦片热力图

今天解决地图热力图原使用的瓦片图，替换为高德地图

原瓦片图使用方式部分代码

地图瓦片下载工具：地图下载器: 使用Java开发的地图瓦片图下载工具，支持OpenStreetMap、天地图、谷歌地图、高德地图、腾讯地图、必应地图的XYZ瓦片图下载与合并。 (gitee.com)

       <div>
           <div class="positionMap" id="hotMap"></div>
       </div>

// 地图引入
import L from 'leaflet'
import 'leaflet-canvas-marker'
import 'leaflet/dist/leaflet.css'
import 'heatmap.js'
// 热力图引入
import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'

            // 瓦片图热力图数据
            initMap() {
            // 初始化热力图数据数组
            let heatmapData = [];
            // 发送GET请求以获取热力图数据
            this.$axios
                //调用接口获取热力图数据
                .get(BASE_URL + "/statisticsMy/getReceiveByCoordinate")
                .then((res) => {
                    // 检查响应状态码是否为200
                    if (res.data.code == 200) {
                        // 遍历响应数据并将每个点添加到热力图数据数组中
                        res.data.result.forEach((item) => {
                            heatmapData.push({
                                lat: item.latitude,
                                lng: item.longitude,
                                count: 0.01
                            });
                        });
                        this.dataSet.data = heatmapData;
                        console.log(heatmapData, "热力图数据");
                        let map = L.map('hotMap').setView([24.328789, 109.434002], 13)
                        // // 创建地图实例，并设置初始视图为指定的经纬度和缩放级别
                        // let map = new L.map('hotMap').setView([36.062687, 120.384599], 13);
                        // // 添加瓦片图层到地图
                        // L.tileLayer(require('@/assets/dating/big-bg.png'), {
                        //将下载的瓦片图部署线上环境展示
                        L.tileLayer('https://xxxxxx/mapImg/{z}/{x}/{y}.png', {
                            minZoom: 5,
                            maxZoom: 15,
                        }).addTo(map);
                        // 创建热力图层实例
                        let heatmaplayer = new HeatmapOverlay(this.cfg);
                        // 将热力图层添加到地图
                        heatmaplayer.addTo(map);
                        // 创建包含最大值和数据的对象
                        let newObj = {
                            max: 5,
                            data: heatmapData
                        };
                        // 设置热力图层的数据
                        heatmaplayer.setData(newObj);
                    } else {
                        // 如果响应状态码不是200，则清空热力图数据数组
                        heatmapData = [];
                    }
                });
        },

因为瓦片图只能展示下载好的地图，可以用于内网设置，代码原先也是为了内网访问才设置的瓦片图，现不需要我为了展示更快全面些故使用了高德地图

首先要在高德开放平台注册，创建应用生成key

另外使用的是基于vue2和高德api开发的三方组件amap

组件 | vue-amap (guyixi.cn)

按照提示安装部署

我就设置了两处便能正常展示地图

//main.js

import VueAMap from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '申请的key',
});

在展示页展示热力图

<template>
  <div class="amap-page-container">
    <el-amap  :zoom="zoom" :center="center" class="amap-demo">
      <el-amap-layer-heat-map :visible="visible" :data-set="dataSet"></el-amap-layer-heat-map>
    </el-amap>
    <div class="toolbar">
      <button type="button" name="button" @click="toggleVisible">{{visible ? '隐藏图层' : '显示图层'}}</button>
    </div>
  </div>
</template>

<style>
  .amap-demo {
    height: 300px;
  }
</style>

<script>
  module.exports = {
    name: 'amap-page',
    data() {
      return {
        zoom: 11,
        center: [116.418261, 39.921984],
        visible: true,
        dataSet: {
          data: [{"lng":116.191031,"lat":39.988585,"count":10},{"lng":116.389275,"lat":39.925818,"count":11},{"lng":116.191031,"lat":39.988585,"count":10},{"lng":116.389275,"lat":39.925818,"count":11},{"lng":116.191031,"lat":39.988585,"count":10},{"lng":116.389275,"lat":39.925818,"count":11},{"lng":116.191031,"lat":39.988585,"count":10},{"lng":116.389275,"lat":39.925818,"count":11},{"lng":116.191031,"lat":39.988585,"count":10},{"lng":116.389275,"lat":39.925818,"count":11},{"lng":116.191031,"lat":39.988585,"count":10},{"lng":116.389275,"lat":39.925818,"count":11},{"lng":116.191031,"lat":39.988585,"count":10},{"lng":116.389275,"lat":39.925818,"count":11},{"lng":116.191031,"lat":39.988585,"count":10},{"lng":116.389275,"lat":39.925818,"count":11},{"lng":116.191031,"lat":39.988585,"count":10},{"lng":116.389275,"lat":39.925818,"count":11},{"lng":116.191031,"lat":39.988585,"count":10},{"lng":116.389275,"lat":39.925818,"count":11},],
          max: 100
        }
      };
    },
    methods: {
      toggleVisible(){
        this.visible = !this.visible;
      }
    }
  };
</script>

在项目中将瓦片图转高德时，地图能正常展示，热力图却展示不了

后经过排除后发现原项目中继承了旧版本vue-amap与当前版本有冲突，遂隐藏了旧版的引入分别在public/index.html中引入的三方api的js和main.js中引入的旧版本vue-amap更换为了新版本vue-amap，因目前使用热力图貌似不用在public中配置故只是隐藏重复调用的三方api，若不隐藏public/index中的引入的js则也无法正常展示地图提示

最后使用vue-amap展示热力图比较简单，按照文档中的示例即可正常展示

  <!-- 热力图 -->
        <el-amap vid="hotMap" ref="hotMap" style="height: 545px;":center="center" :zoom="zoom">
            <el-amap-layer-heat-map :visible="isShowHeat" :data-set="dataSet" /> 
        </el-amap>

            center: [109.434002, 24.328789], // 地图默认展示中心
            zoom: 13,//层级
            // 热力图数据
            dataSet: {
                data: [],
                max: 5
            },

获得dataSet数据便可正常渲染

记下此文记录