[內部項目]3D大屏功能梳理,基於高德地圖的大屏展現項目

時間 2019-11-09

標籤內部項目 3d 功能梳理基於地圖展現简体版

原文原文鏈接

蘭陵美酒鬱金香，玉碗盛來琥珀光。但使主人能醉客，不知何處是他鄉。javascript

項目開發中遇到須要 3D 展現，遇到一些問題,此爲刨坑指南.如今放出來,但願能夠幫助有須要的人css

vue 項目引進地圖html
地圖的定位插件vue
事件及其處理html5
經常使用的方法java

高德地圖的引入(以 vue 爲主)

高德地圖開發者官網webpack
對地圖的引入：git

通常用使用 vue-cli webpack 最簡單粗暴的引入地圖 api 的方法就是，在入口 index.html 的頭部直接引入，記得必定要帶上 key,若是沒有的話去高德地圖 api 的官網申請一個。傳送門以下：申請 key 傳送門github

<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 地圖web

在 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 能夠傳自定義的值

項目基本處理邏輯

存在三種系統狀態

當不存在報警時

| 所在頁 | 操做 | 效果 | 備註 |

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

| 首頁 | 點擊彈出的報警列表 | 進到報警模式 |

當存在報警時

| 所在頁 | 操做 | 效果 | 備註 |

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

| 首頁 | 點擊彈出的報警列表 | 進到報警模式 |

神交

GitHub
blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。