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'

这里还加个小小的效果，旋转地图动画

友情提醒：水波效果图，高德地图里面叫呼吸图，不知道是哪位大佬起的名字。话说叫水波纹不是更形象吗？叫呼吸图，真的想不出来是者效果。

这里说下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 是动画图片，这里绘制的水波纹图效果，实际上是不断变化图片的位置形成的。我这里直接用了官方的示例图片，如下!

breath_red.png

优化

虽然这样是可以了，但是你会发现，切换页面以后，再切换回来，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()
 }