vue+ts使⽤⾼德地图（vue-amap）实现热⼒图、动态标记及多
边形覆盖物
前⾔：⾼德地图⼼得总结。
在 vue-amap 中使⽤⾼德 SDK 获取 map = new _window.AMap.Map('amap-vue', {}) （map在⼿,⾼德我有）
地图相关需求可在⾼德地图开放平台到相关⽰例，⾃⾏按照配置项去配置
再也不⽤去百度⾥⼀样的需求了
1.安装并引⼊
下载包并在mian.ts中引⼊ vue-amap
npm install vue-amap --save
import VueAMap from 'vue-amap'
Vue.use(VueAMap );
VueAMap .initAMapApiLoader({
key: '**********', //需要先去⾼德地图注册申请⼀个key
v:'1.4.4',
plugin: ["AMap.Heatmap"], //使⽤的插件
});
2.vue⽂件中引⼊
在template中
<el-amap :center="center" :vid="'amap-vue'" :zoom="zoom" id="container" mapStyle="dark" ></el-amap>
在script中
import { lazyAMapApiLoaderInstance } from 'vue-amap'
//在定制化程度较⾼的项⽬中，开发者可能只想通过 vue-amap 引⼊⾼德地图，
//⽽部分实例化的操作直接基于⾼德地图的 sdk 完成。这个时候就需要 lazyAMapApiLoaderInstance。
data(){
vue json字符串转数组return {
center: [116.388419, 39.9144], //地图中⼼
zoom: 12, //缩放⽐例
}
}
热⼒图配置项链接
mapSpot() {
var params = {acceptDateMin,acceptDateMax} as OrderPhraseCondition
this.SuqiuAllService.postSuqiuallMapSpot(params).then((res: RListMapSpotDto) => {
/
/接⼝返回的热⼒图数据格式为 [{lat: 39.90011837136141,lng: 116.36113770967947,value: 1},{lat: 39.901766750339455,lng: 116.45168695988188,value: 1}...] this.potList = res.data as any
//接⼝请求成功后初始化地图
lazyAMapApiLoaderInstance.load().then(() => {
this.initMap()
})
})
},
initMap() {
var that = this
var _window: any = window //使⽤window ts 报错
let map = new _window.AMap.Map('amap-vue', {
resizeEnable: false, //调整⼤⼩启⽤
center: [116.388419, 39.9144], //初始化成功后的中⼼点
zoom: 12 //缩放⽐例
})
//在初始化成功后 vue-amap 的mapStyle="dark" 会失效所以要使⽤⾃定义样式
// 在⾼德地图开发者平台个⼈中⼼可以⾃定义地图颜⾊路线等链接 lbs.amap/dev/mapstyle/index
map.setMapStyle('amap://styles/284dccc7f1aad8e1d3930127a268f2f2')
//热⼒图
let heatmap
//使⽤插件
map.plugin(['AMap.Heatmap'], function() {
//初始化heatmap对象
heatmap = new _window.AMap.Heatmap(map, {
radius: 10, //给定半径
opacity: [0.2, 1.0],
// 颜⾊范围
color: {
0.45: 'rgb(255,0,0)',
0.55: 'rgb(255,0,0)',
0.65: 'rgb(255,0,0)',
0.95: 'rgb(255,0,0)',
}
})
//设置数据集
heatmap.setDataSet({
data: that.potList, //坐标数据集即之前请求到的热⼒图数据
max: 1 //权重的最⼤值 max不填则取数据集count最⼤值 (该值影响热⼒图颜⾊)
})
})
//⽓泡
//绘制矩形
},
动态⽓泡 marker 配置项链接
getStream(map: any) {
var params = {
acceptDateMin,
acceptDateMax
} as OrderPhraseCondition
this.SuqiuAllService.postSuqiuallMapStream(params).then((res: RListMapStreamDto) => {
/*
获取接⼝返回的marker数据格式为
[{lat: 39.90011837136141,lng: 116.36113770967947,info: "⼴安门外街道 91"},
{lat: 39.901766750339455,lng: 116.45168695988188,info: "展览路街道 65"}
...]
*/
var arr: any = []
var _window: any = window
res.data.forEach((item, index) => {
/⽣成
var obj = new _window.AMap.Marker({
id: index,
position: [item.lng, item.lat],
content: ` <div class="markers">${item.info}</div>`
/
*
重点 ---content
显⽰内容，可以是HTML要素字符串或者HTML DOM对象。content有效时，icon属性将被覆盖然后可以在style中设置点的样式，背景⾊等等
*/
})
arr.push(obj)
})
this.markerMax = il(arr.length / this.markerNumber)
this.markers = arr
setInterval(() => {
this.showMarkers(map)
}, 2000)
})
},
//动态展⽰及定时切割数组，移除现有marker 添加新marker
showMarkers(map: any) {
if (this.currentArr) {
}
//下⾯这部分在6个⼀组截取数据
if (this.markerCurrent < this.markers.length) {
this.currentArr = this.markers.slice(this.markerCurrent, this.markerCurrent + 6)
this.markerCurrent = this.markerCurrent + 6
} else {
this.markerCurrent = 0
this.currentArr = this.markers.slice(this.markerCurrent, this.markerCurrent + 6)
}
map.add(this.currentArr) //添加新marker
},
矩形覆盖物 marker 配置项链接
//地图轮廓
getPolygon(map: any) {
//获取本地的json⽂件格式还是坐标点
let dongchengJson = require('@/utils/json/dongcheng.json')
var path = dongchengJson.features[0].dinates[0]
//配置多边形
var _window: any = window
var polygon = new _window.AMap.Polygon({
path: path, //路径
strokeColor: '#1EE621', //轮廓线颜⾊
strokeWeight: 4, //轮廓线宽度
strokeOpacity: 0.2, //轮廓线透明度
fillOpacity: 0.2, //矩形内部填充颜⾊透明度
fillColor: '#fff', //矩形内部填充颜⾊透明度
zIndex: 50 //多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时，通过该属性使级别较⾼的多边形覆盖物在上层显⽰ })
map.add(polygon) //添加到地图上
}
展⽰成果
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论