vue 高德地图Loca.GeoJSONSource、Loca.PolygonLayer绘制3D楼房、AMap.LabelMarker文字标注、Loca.ScatterLayer绘制水波扩散效果

创建地图

假设已经正确引入了高德地图,这里使用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()
 }

你可能感兴趣的:(js,vue,vue,canvas,javascript)