今天解决地图热力图原使用的瓦片图,替换为高德地图
原瓦片图使用方式部分代码
地图瓦片下载工具:地图下载器: 使用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
按照提示安装部署
我就设置了两处便能正常展示地图
//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数据便可正常渲染
记下此文记录