[内部项目]3D大屏功能梳理,基于高德地图的大屏展示项目1. 新建一个 3D 模型 2. 新建海量点 MassMarks

兰陵美酒郁金香，玉碗盛来琥珀光。但使主人能醉客，不知何处是他乡。

项目开发中遇到需要 3D 展示，遇到一些问题,此为刨坑指南.现在放出来,希望可以帮助有需要的人

vue 项目引进地图
地图的定位插件
事件及其处理
常用的方法

高德地图的引入(以 vue 为主)

高德地图开发者官网
对地图的引入：

一般用使用 vue-cli webpack 最简单粗暴的引入地图 api 的方法就是，在入口 index.html 的头部直接引入，记得一定要带上 key,如果没有的话去高德地图 api 的官网申请一个。传送门如下：申请 key 传送门

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=************" />

创建一个地图组件：

let mapObj = new AMap.Map('map-location', {

  //'map-location'是对应页面盒子的id

  resizeEnable: true, //自适应大小

  zoom: 13 //初始视窗

})

// AMap是高德地图的构造函数，这里.Map是创建地图，.Marker是创建坐标点

初始化一个 3D 地图

在 mounted 里面进行初始化

this.cloudMap = new AMap.Map(this.$refs.dataMaps, {

  resizeEnable: true,

  // layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],

  mapStyle: 'amap://styles/def937553c471693ab838e31fdbc6d82',

  viewMode: '3D', // 模式

  showBuildingBlock: true,

  pitch: 55, // 仰角

  zoom: 17 // 缩放

})

地图的定位插件

第一步当然是创建地图实例，由于定位不需要展示地图，所以可以将地图挂载的盒子 css 样式设置为宽高都设置为 0，这样就不影响页面的布局，可以直接获取到地图经纬度，当然此项目中是需要加载地图的

let mapObj = new AMap.Map('iCenter') //iCenter是id容器名称

需要添加定位插件Geolocation用 plugin 方法调用

mapObj.plugin('AMap.Geolocation', function() {})

实例化一个实例进行配置

var geolocation = new AMap.Geolocation({

  // 是否使用高精度定位，默认：true

  enableHighAccuracy: true,

  // 设置定位超时时间，默认：无穷大

  timeout: 10000,

  // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)

  buttonOffset: new AMap.Pixel(10, 20),

  // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

  zoomToAccuracy: true,

  // 定位按钮的排放位置, RB表示右下

  buttonPosition: 'RB'

})

监听定位是否成功还是失败，成功则可以得到当前位置的经度和纬度

AMap.event.addListener(geolocation, 'complete', function(data) {

  data.position.getLng() //定位成功返回的经度

  data.position.getLat() //定位成功返回的纬度

}) //返回定位信息

AMap.event.addListener(geolocation, 'error', function(data) {

  if (data.info == 'FAILED') {

    alert('获取您当前位置失败！')

  }

})

地图的事件及处理

1. 新建一个 3D 模型

注：3D 模型暂时不支持事件及其操作

添加 Object3DLayer

Object3DLayer 为专门承载 Object3D对象的图层，一个 Object3DLayer 可以承载多个Object3D实例对象，绘制 Object3D 对象前先给地图添加一个 Object3DLayer图层：

var object3Dlayer = new AMap.Object3DLayer()

map.add(object3Dlayer)

创建 Object3D 类型的实例

var bounds = [new AMap.LngLat(116, 39), new AMap.LngLat(117, 39), new AMap.LngLat(117, 40), new AMap.LngLat(116, 40)]

var height = 50000

var color = '#0088ff' //rgba

var prism = new AMap.Object3D.Prism({ path: bounds, height: height, color: color })

添加 Object3D 实例到 Object3DLayer

再将Object3D实例添加在上面添加的Object3DLayer之中就可以了

object3Dlayer.add(prism) //添加

//object3Dlayer.remove(prism);//移除

2. 新建海量点 `MassMarks`

当需要在地图展示数量为十万以内的点并且需要较好的性能表现时，可以使用 AMap.MassMarks 类。AMap.MassMarks 并不是普通的覆盖物，它实际上是由海量点组成的一个地图图层，目前仅适用于 html5 浏览器。

创建海量点对象

// 创建样式对象

var styleObject = new AMap.StyleObject({

url: '//vdata.amap.com/icons/b18/1/2.png', // 图标地址

size: new AMap.Size(11,11), // 图标大小

anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角 });

 var massMarks = new AMap.MassMarks({ zIndex: 5, // 海量点图层叠加的顺序

 zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层 style: styleObject // 设置样式对象 });

设置 `MassMarks` 展现的数据集

var data = [

  {

    lnglat: [116.405285, 39.904989], //点标记位置

    name: 'beijing',

    id: 1

  }

  // {}, …,{}, …

]

massMarks.setData(data) // 将海量点添加至地图实例 massMarks.setMap(map);

自定义事件

DOM 事件addDomListener
点击事件 addListener
海量点事件

AMap.event.addListener(marker, 'click', e => this.clickHandler(e, item))

其中e为点击点的信息包含经纬度和地理位置信息，item 可以传自定义的值

项目基本处理逻辑

存在三种系统状态

当不存在报警时

| 所在页 | 操作 | 效果 | 备注 |

| ---------- | ------------------ | ---------------------: | -----------------------: |

| 首页 | 点击弹出的报警列表 | 进到报警模式 |

当存在报警时