vue 高德地图Loca.GeoJSONSource、Loca.PolygonLayer绘制3D楼房、AMap.LabelMarker文字标注、Loca.ScatterLayer绘制水波扩散效果
创建地图假设已经正确引入了高德地图，这里使用2.0版本，注意了，1.4.x版本的使用和2.x版本的使用方式不一样。有很多地方不兼容哦。话说3D效果这一块，高德是真比不上百度地图哦，要不是项目一直用的高德地图，怕影响数据，就真想换百度地图了。百度地图有很多地方，地级市县都有3D效果了，但是高德没有。高德只有省会城市有3D楼引入高德地图还需要加上Loca版本，plugin插件里面也要包含Map3D插件
创建地图
假设已经正确引入了高德地图，这里使用2.0版本，注意了，1.4.x版本的使用和2.x版本的使用方式不一样。有很多地方不兼容哦。
话说3D效果这一块，高德是真比不上百度地图哦，要不是项目一直用的高德地图，怕影响数据，就真想换百度地图了。百度地图有很多地方，地级市县都有3D效果了，但是高德没有。高德只有省会城市有3D楼
引入高德地图还需要加上Loca版本，plugin插件里面也要包含Map3D插件。可以参考这里 vue 使用amap-jsapi-loader加载高德地图
然后我们创建地图。注意这次我们是要绘制3D楼房，所以初始化地图时必须指定 viewMode: ‘3D’
这里还加个小小的效果，旋转地图动画
友情提醒：水波效果图，高德地图里面叫呼吸图，不知道是哪位大佬起的名字。话说叫水波纹不是更形象吗？叫呼吸图，真的想不出来是者效果。
<template>
<div>
<el-switch v-model="isRotate" active-color="#FC982A" @change="rotateChange"/>
<div class="amap" id="amap"></div>
</div>
</template>
<script>
import reqMapList from '../../../api'
import transparentImg from '../../assets/transparent.svg'
import {mapState} from 'vuex'
import texture from "../../assets/images/breath_red.png";
export default{
data(){
return{
center:[116.438202,40.138265],
isRotate: false,//是否旋转
}
},
computed:{
...mapState(['lngLatArr'])
},
mounted() {
if(window.AMap && window.Loca){
this.loadMap()
return
}
this.awaitAmapLoading()
},
methods: {
//定时加递归，确保有AMap和Local实例后再加载地图
awaitAmapLoading(){
let interval=setInterval(()=>{
if(window.AMap&& window.Loca){
clearTimeout(interval)
this.loadMap()
}
},500)
},
async loadMap() { // 加载地图 需要在挂载后
let {center} = this
let map = new AMap.Map('amap', {
center,
zooms: [2, 20],
zoom: 16,
viewMode: '3D',
pitch: 50,
rotation: 35,
})
let loca = new Loca.Container({
map,
})
map.setRotation(395,false,4000)
this.map = map
let {mapAllList} = await reqMapList ()
this.add3DBuild(loca) //绘制3d楼函数
this.drawRipple(loca, mapAllList) //绘制水波
this.addLabelMarker(mapAllList)//绘制文字标注
},
//旋转切换
rotateChange(value) {
let {map} = this
if (!value) {
clearInterval(this.mapInterval)
let rotate = map.getRotation()
let remainderRotate = (rotate - 35) % 360
let backRotate = rotate - remainderRotate
map.setRotation(backRotate,false,8000*remainderRotate/360)
return
}
let n=0
map.setRotation(map.getRotation()+395,false,8000)
let currentRotation=map.getRotation()+395
this.mapInterval=setInterval(()=>{
n++
map.setRotation(currentRotation+395*n,false,8000)
},8000)
},
addLabelMarker(mapAllList){
let icon = {
// 图标类型，现阶段只支持 image 类型
type: 'image',
// 图片 url
image: transparentImg,
// 图片尺寸
size: [30, 30],
// 图片相对 position 的锚点，默认为 bottom-center
anchor: 'center',
}
let text = {
// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
direction: 'right',
// 在 direction 基础上的偏移量
// 文字样式
style: {
// 字体大小
fontSize: 12,
// 字体颜色
fillColor: '#248BFE',
}
}
this.addLabelMarker(mapAllList,icon,text)
},
//添加3d建筑物
add3DBuild(loca){
let {lngLatArr}=this
let features=lngLatArr.reduce((result,current)=>{
result.push({
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
current
]
}
})
return result
},[])
loca.pointLight = {
color: 'rgb(100,100,100)',
position: [112.053413,27.778557, 200],
intensity: 3,
// 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
distance: 50000,
}
let geo = new Loca.GeoJSONSource({
data:{
"type": "FeatureCollection",
features
}
})
let pl = new Loca.PolygonLayer({
zIndex: 120,
opacity:1,
shininess: 10,
hasSide: true,
})
pl.setSource(geo)
pl.setStyle({
topColor:'#dddddd',
sideColor: '#cccccc',
height:300,
altitude: 1,
})
loca.add(pl)
},
//绘制波纹
drawRipple(loca,mapAllList){
let geoFeatures=mapAllList.reduce((result,current)=>{
let {lon,lat,address}=current
if(lon && lat){
result.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [lon, lat]
},
"properties": {
"name": address,
}
})
}
return result
},[])
let geoLevelF = new Loca.GeoJSONSource({
data: {
"type": "FeatureCollection",
"features":geoFeatures
},
})
let breathRed = new Loca.ScatterLayer({
loca,
zIndex: 9130,
opacity: 1,
visible: true,
zooms: [2, 22],
})
breathRed.setSource(geoLevelF)
breathRed.setStyle({
unit: 'meter',
size: [100, 100],
borderWidth: 0,
texture,//动画图片，后面会做说明
duration: 500,
animate: true,
})
// 启动渲染动画
loca.animate.start()
},
//添加文字标注
addLabelMarker(mapAllList,icon,text){
let labelsMarkerArr=mapAllList.reduce((result,current)=>{
let {name,lon,lat}=current
if(lon && lat){
let labelMarker = new AMap.LabelMarker({
name: name, // 此属性非绘制文字内容，仅最为标识使用
position: [lon, lat],
zIndex: 16,
// 将第一步创建的 icon 对象传给 icon 属性
icon,
// 将第二步创建的 text 对象传给 text 属性
text:{
...text,
content:name
},
})
labelMarker.on('click', function(e){
console.log(e)
})
result.push(labelMarker)
}
return result
},[])
let labelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000000,
// 该层内标注是否避让
collision: true,
// 设置 allowCollision：true，可以让标注避让用户的标注
allowCollision: true,
})
// 批量添加 labelMarker
labelsLayer.add(labelsMarkerArr)
this.map.add(labelsLayer)
}
},
beforeDestroy() {
clearInterval(this.interval)
clearInterval(this.mapInterval)
this.map=null
}
}
</script>
这里说下lngLatArr的数据结构，这是楼房的经纬度，由于是自定义画的，因此需要自己去获取。
获取有一点规则，首先要顺时针获取四个点，然后需要画闭环的楼房，所以第五个点和第一个点是同一个坐标。
lngLatArr是一个三维数组。说道这里真忍不住吐槽下高德地图的文档，反正我没找到有关于数据结构的说明，做的时候全靠猜，靠试。
如果自己项目里没有配置有逝去经纬度的页面，可以搜索高德地图拾取经纬度，去高德地图相关页面获取，页面地址 https://lbs.amap.com/tools/picker
示例结构如下：
blLngLatArr:Object.freeze([
[
[116.42095,40.138003],
[116.445755,40.14148],
[116.422666,40.131703],
[116.441549,40.126584],
[116.42095,40.138003],
],
[
[116.463093,40.144236],
[116.476139,40.144761],
[116.465668,40.140234],
[116.476396,40.140168],
[116.463093,40.144236],
],
]),
绘制水波纹最后一定要启动动画，即loca.animate.start()，奇怪的是，不加这行也有动画，只不过，这动画怪怪的，运行两下就不动了。
texture 是动画图片，这里绘制的水波纹图效果，实际上是不断变化图片的位置形成的。我这里直接用了官方的示例图片，如下
优化
虽然这样是可以了，但是你会发现，切换页面以后，再切换回来，3D图没有了，水波图也没有了！！
这已经是一个很严重的bug了，但是官方问答貌似没有很明确的说明。
原因是：loca实例只能创建一个，虽然这里创建loca实例时只是使用了局部变量，但是高德地图生成了全局的loca实例。当我们切换页面再切回来时，又去创建一个实例，这时就有两个了，然后就是看到的效果，图出不来。
最终的解决方案是，当前页面离开时，销毁loca实例。销毁不是直接置为Null就可以，而是要调loca的destroy方法。
然后说下水波纹图，同样是，需要移除水波纹图层，不然会报错：cannot read property ‘getZoom’ of null。
最终解决方案如下：
先将loca和breathRed挂载到this上，然后销毁他们
beforeDestroy(){
this.loca.remove(this.breathRed)
this.loca.destroy()
}
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献17条内容
所有评论(0)