ArcGIS for javascript開發(fā)心得

本次實(shí)例中采用ArcGIS for javascript3.24版本，由于版本3與4在API等存在較大區(qū)別，就不一一列舉，詳細(xì)區(qū)別看官方解釋
arcgis for js4.7版本能夠自動創(chuàng)建layer、graphs等類，而不像3.24版本需要在圖形渲染前重新new 新的類。然而，查找大量文件資料，網(wǎng)上有關(guān)ArcGIS forjavascript的資料甚少，更不用說通過vueJS+arcGIS開發(fā)出一套可視化平臺，在不斷查看官方文檔和實(shí)際操作,總結(jié)自己的構(gòu)思和使用心得。

技術(shù)采用：vueJS + vuetify + axios + arcGIS3.24 + echarts

如圖所示：可視化界面采用三層三文治結(jié)構(gòu)，從server（后臺，非online server）讀取數(shù)據(jù)，vueJS負(fù)責(zé)數(shù)據(jù)驅(qū)動，ArcGIS與echarts負(fù)責(zé)數(shù)據(jù)的圖形化。同時引入瀏覽器的web sql db本地數(shù)據(jù)庫進(jìn)行海量數(shù)據(jù)緩存

ArcGIS API for Javascript 是由美國 Esri 公司推出， 基于 dojo框架和 REST 格式的一套編程接口（目前最新版本為 3.3， dojo1.8。 通過 ArcGIS API for Javascript可以對 ArcGIS for Server 進(jìn)行訪問調(diào)用，并將 ArcGIS for Server 提供的地圖資源和其它資源online加載到Web應(yīng)用中。

基礎(chǔ)知識

Dojo

Dojo是一個強(qiáng)大的面向?qū)ο?Javascript 框架。主要由三大模塊組成： Core、 Dijit、 DojoX。 其中 Core提供 Ajax、 events、 packaging、 CSS-based querying、 animations、 JSON 等相關(guān)操作 API。 Dijit 是一個可更換皮膚，基于模板的 WEB UI 控件庫。 DojoX 包括一些創(chuàng)新/新穎的代碼和控件： DateGrid、 charts、離線應(yīng)用、 跨瀏覽器矢量繪圖等。
Dojo 的特點(diǎn)可從下面幾部分诪起：
1、 Dojo 是一個純 Javascript 庫，后臺只要提供相應(yīng)的接口就能夠?qū)?shù)據(jù)以 Json 的格式輸出給前臺。
2、 Dojo 自身定了完整的函數(shù)庫，屏蔽了瀏覽器的差異。
3、 Dojo 自身定了界面組件庫，其組件代碼采用了面向?qū)ο蟮乃枷?，便于繼承及擴(kuò)展。
4、 對前端界面聯(lián)動需求較為復(fù)雜的時候，基于 dojo 的頁面組件將是首選，因?yàn)槠淇梢詫⒔缑嬷?br />某一個具有共性的區(qū)域抽象出來，封裝返這一區(qū)域的界面行為以及數(shù)據(jù)，采用模塊式的方式完成復(fù)雜頁面的開發(fā)。

熱力圖

一、實(shí)現(xiàn)地圖熱力圖操作
熱力圖，是以特殊高亮的形式顯示訪客熱衷的頁面區(qū)域或訪客所在的地理區(qū)域的圖示。常用的熱力圖統(tǒng)計分成樣方計數(shù)法（Quadrate Analysis）和核密度法（Kernel Density Estimation）。
核密度法基于密度的點(diǎn)模式分析方法，因此事件之間的相對位置和距離具有決定作用

樣方計數(shù)法其事件之間的絕對位置具有決定作用，單位面積的事件、數(shù)量在空間上具有比較明確的變化。如：空間對象的平均值/密度。

例子里，我們采用第二種分析方法來展示區(qū)域性的人口密度
然而多次嘗試發(fā)現(xiàn)，官方給出的熱力圖基于heatMap并不能滿足我們的需求，而且online service的解決方案不符合要求
最后，我們通過esri提供FeatureLayer類創(chuàng)建圖層，以坐標(biāo)繪制圖形，權(quán)重區(qū)分色值來還原熱力圖

ArcGIS for javascript

效果圖

涉及到arcgis 基礎(chǔ)地圖、geometry、FeatureLayer、graphic等API的使用

模塊引入

vue引入arcgis for js模塊
Install

npm install --save esri-loader

or

yarn add esri-loader

在文件中引入ersi

import * as esriLoader from 'esri-loader'

加載樣式在加載地圖前，需要先加載對應(yīng)版本的樣式表
@import url('https://js.arcgis.com/3.24/es...');
or
esriLoader.loadCss('https://js.arcgis.com/3.24/es...')

---

到這里我們解決完成vue項目引入arcgis的問題，但在實(shí)際開發(fā)過程，會發(fā)現(xiàn)國內(nèi)使用arcgis有兩個嚴(yán)重不足的問題:
第一個是底圖地圖服務(wù)差，加載慢
第二個是arcgis for js的提供的api接口偶爾出現(xiàn)無法加載的問題
因此，在開發(fā)階段，為優(yōu)化用戶體驗(yàn)，通過切換國內(nèi)地圖服務(wù)和本地JS-SDK部署解決上述的問題（后面會介紹這兩個方案的解決過程）

加載需要的地圖模塊
1.通過DOJO loader 加載地圖api類
2.通過map加載地圖（4.7中將地圖渲染分成WebMap和MapView/SceneView視圖）

const options = {
    url: 'https://js.arcgis.com/3.24/'
}
esriLoader.loadModules([
    'esri/map',
     'dojo/domReady!'
], options).then(([Map]) => {
    let map = new Map('YouMapDOM', {
        basemap: 'topo',
        center: [113.3209952545166, 23.090055306224895],
        zoom: 15
    })
}).catch (err => {})

到這里我們已經(jīng)成功加載arcgis地圖

map

map:底圖，負(fù)責(zé)底圖渲染
Map類創(chuàng)建地圖容器和所需的DOM結(jié)構(gòu)，用于添加圖層、圖形、信息窗口和其他的導(dǎo)航控件

創(chuàng)建地圖是arcgis最基本的操作，在3.x中通過map創(chuàng)建地圖

new Map(YouMapDOM, option)

地圖打點(diǎn)操作，繪制圖形范圍等覆蓋物是地圖可視化的基本操作

屬性
map屬性是可以自定義配置，如backgroundColor、height、width等

方法
map層作為arcgis最重要的元素，繼承了眾多的方法，例如
addLayer地圖添加Esri圖層
centerAndZoom（mapPoint，levelOrFactor）居中并縮放地圖
destroy()銷毀地圖實(shí)例
...

map.setBasemap(url)

事件
我們不單止通過map的方法進(jìn)行必要層與層間操作，同時也可以在map上綁定事件，官方解釋如下

All On Style event listeners receive a single event object.
Additionally, the event object also contains a 'target' property whose
value is the object which fired the event.

常用的如
basemap-change
click
dbl-click
key-down / key-up
load
mouse-down/drag/move
zoom
...
通過監(jiān)聽不同類型的鼠標(biāo)鍵盤等事件來觸發(fā)我們所需的操作，例如通過map綁定click事件，只要我們點(diǎn)擊地圖，如提示、地點(diǎn)、graphic層等等，都能觸發(fā)。

map.on('click', (event) => {
    if (event.graphic.symbol && event.graphic.symbol.type === 'simplefillsymbol') {}
    if (event.graphic.symbol && event.graphic.symbol.type === 'textsymbol') {}
    if (event.graphic.symbol && event.graphic.symbol.type === 'simplemarkersymbol') {}
}

ersi官網(wǎng)提供多種默認(rèn)底圖地圖樣式（如下圖），然而引入官方地圖國內(nèi)存在較為嚴(yán)重的穩(wěn)定性問題，因此后期可以將地圖換成國內(nèi)通用地圖，如天地圖等

注意：轉(zhuǎn)換地圖服務(wù)可能存在一定的偏差，具體參考問題3

this.map.setBasemap(baseMap)

  {
    name: '中國灰色版',
    url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer'
  },
  {
    name: '中國午夜版',
    url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
  },
  {
    name: '中國彩色版',
    url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer'
  },
  {
    name: '中國彩色POI版',
    url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
    }
 

FeatureLayer

FeatureLayer：圖形圖層，可用于地圖服務(wù)或地圖要素服務(wù)中顯示單個圖層要素。也通過isEditable=true編輯圖層要素
FeatureLayer默認(rèn)從ArcGIS Server中獲取圖層信息進(jìn)行渲染，然鵝全文的例子不采用服務(wù)器渲染的模式，而是直接本地數(shù)據(jù)渲染圖層
熱力圖的渲染及操作

      let featureLayers = new FeatureLayer(featureCollection, {
        id: 'flickrLayer',
        outFields: ['*'],
        opacity: 0.5,
        showLabels: true
      })
      map.on('layers-add-result', (results) => {
        loading.close()
        let features = []
        res.forEach(function (item, i) {
          let arrt = {
            title: item.cellId,
            flowCount: item.flowCount,
            groupCount: item.groupCount,
            cellId: item.cellId,
            cityId: item.cityId,
            distId: item.distId
          }
          let geometry = new Polygon(item.rings)
          let graphic = new Graphic(geometry)
          graphic.setAttributes(arrt)
          features.push(graphic)
        })
        featureLayers.applyEdits(features, null, null)
      })
      map.addLayers([featureLayers])

通過featureLayers.applyEdits()類添加網(wǎng)格圖層
featureLayer.on()綁定的事件，如click、dbl-click、graphic-add等事件類型進(jìn)行圖層交互，如對圖層進(jìn)行高亮、彈窗

featureLayers.on('click', (event) => {})

graphic

graphic圖形繪制

let geometry = new Polygon(rings)
let newGraphic = new Graphic(geometry)
map.graphics.add(newGraphic)

地圖上有多樣的覆蓋物可以采用graphic繪制圖形，如高亮網(wǎng)格Polygon、圓形范圍Circle、打點(diǎn)point、標(biāo)志物createSymbol等

let gl = new GraphicsLayer({ id: 'circles2' })
map.addLayer(gl)
let symbol = new SimpleFillSymbol().setColor().outline.setColor([0, 142, 255])
centerPoints.forEach(e => {
   let circleGeometry = new Circle({
       center: e,
       radius: radius,
       geodesic: true
   })
   let circleGraphics = new Graphic(circleGeometry, symbol)
   gl.add(circleGraphics)
})

持續(xù)修改更新...

問題

1、4.7中WebMap、MapView的區(qū)別
4.0版本由于加入3D元素，Map和Layers不再處理圖形的繪制，而是交給Views完成
View視圖是4.0版本提出的概念，包括MapView(2D)和SceneView(3D)兩個類
在4.X中底圖和底圖操作層分離的
2、離線部署
（1）國內(nèi)地圖服務(wù)
（2）JS-SDK本地部署
考慮到國內(nèi)的用戶會出現(xiàn)地圖訪問慢甚至無法正常加載的問題，因此ArcGIS for js 的離線部署是非常有必要的
1、注冊arcgis開發(fā)者賬號
2、進(jìn)入官方api-sdk下載界面選擇你需要的版本
https://developers.arcgis.com...

稍等片刻后
3、需要準(zhǔn)備一臺可以正常訪問的服務(wù)器（以Linux-tomcat arcgis_js_api3.2.4為例）
將下載的arcgis_js_api文件復(fù)制到tomcat的/usr/local/example/webapps目錄下
修改arcgis_js_api/library/3.24/3.24/init.js文件中[HOSTNAME_AND_PATH_TO_JSAPI]為<myserver>/arcgis_js_api/library/3.24/3.24/
修改arcgis_js_api/library/3.24/3.24/dojo/dojo.js 文件中[HOSTNAME_AND_PATH_TO_JSAPI]為<myserver>/arcgis_js_api/library/3.24/3.24/
4、完成上面修改即可正常訪問自己服務(wù)器上的SDK接口

3、坐標(biāo)偏差
我們常用的坐標(biāo)有三種，分別是國際坐標(biāo)系、火星坐標(biāo)系、百度坐標(biāo)系
地球坐標(biāo)系——WGS84：GCS_WGS_1984,常見于 GPS 設(shè)備，Google地圖、arcGIS地圖等國際標(biāo)準(zhǔn)的坐標(biāo)體系。
火星坐標(biāo)系——GCJ-02：中國國內(nèi)使用的被強(qiáng)制加密后的坐標(biāo)體系，高德坐標(biāo)采用這種坐標(biāo)體系。
百度坐標(biāo)系——BD-09：百度地圖所使用的坐標(biāo)體系，是在火星坐標(biāo)系的基礎(chǔ)上又進(jìn)行了一次加密處理。

坐標(biāo)偏差依賴于地圖底圖服務(wù)，上面將默認(rèn)的英文地圖轉(zhuǎn)化成國內(nèi)常用的天地圖（默認(rèn)火星坐標(biāo)），這里就產(chǎn)生問題。
1、不建議底圖選擇中存在兩種不同坐標(biāo)體系，如下圖坐標(biāo)存在明顯的偏差，火星坐標(biāo)在采用WGS84坐標(biāo)系的地圖上位置偏上
彩色中國天地圖

全球衛(wèi)星地圖

2、例如我們使用arcGIS的search類進(jìn)行查找，返回的數(shù)據(jù)都是國際坐標(biāo)，因此必須進(jìn)行偏差糾正。
我們可以使用高德地圖提供的坐標(biāo)變換AMap.convertFrom()進(jìn)行坐標(biāo)轉(zhuǎn)換

AMap.convertFrom(lnglat, type, function (status, result) {
    if (result.info === 'ok') {
        var resLnglat = result.locations[0];
        m = new AMap.Marker({
            position: resLnglat,
        });
        map.add(m);
     }
});

或者也可以自定義轉(zhuǎn)換方法
https://blog.csdn.net/Admin_y...（網(wǎng)上隨便搜的參考）

備注：本文中提到的總結(jié)可能存在不足和錯誤，多多包容

總結(jié)

以上是生活随笔為你收集整理的vue地图可视化 ArcGIS篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。