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

创建地图

假设已经正确引入了高德地图，这里使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

这里说下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],
        ],   
    ]),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

绘制水波纹最后一定要启动动画，即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()
 }
1
2
3
4