vue地圖可視化（3） ArcGIS篇

時間  2019-11-08
標籤 vue 地圖 可視化 arcgis 简体版
原文   原文鏈接

ArcGIS for javascript開發心得

本次實例中採用ArcGIS for javascript3.24版本，因爲版本3與4在API等存在較大區別，就不一一列舉，詳細區別看 [官方解釋]
 arcgis for js4.7版本可以自動建立layer、graphs等類，而不像3.24版本須要在圖形渲染前從新new 新的類。然而，查找大量文件資料，網上有關ArcGIS forjavascript的資料甚少，更不用說經過vueJS+arcGIS開發出一套可視化平臺，在不斷查看官方文檔和實際操做,總結本身的構思和使用心得。

技術採用：vueJS + vuetify + axios + arcGIS3.24 + echarts
javascript

clipboard.png

如圖所示：可視化界面採用三層三文治結構，從server（後臺，非online server）讀取數據，vueJS負責數據驅動，ArcGIS與echarts負責數據的圖形化。同時引入瀏覽器的web sql db本地數據庫進行海量數據緩存。css


 ArcGIS API for Javascript 是由美國 Esri 公司推出， 基於 dojo框架和 REST 格式的一套編程接口（目前最新版本爲 3.3， dojo1.8）經過 ArcGIS API for Javascript能夠對 ArcGIS for Server 進行訪問調用，並將 ArcGIS for Server 提供的地圖資源和其它資源online加載到Web應用中。
html


基礎知識

Dojo

Dojo是一個強大的面向對象 Javascript 框架。主要由三大模塊組成： Core、 Dijit、 DojoX。 其中 Core提供 Ajax、 events、 packaging、 CSS-based querying、 animations、 JSON 等相關操做 API。 Dijit 是一個可更換皮膚，基於模板的 WEB UI 控件庫。 DojoX 包括一些創新/新穎的代碼和控件： DateGrid、 charts、離線應用、 跨瀏覽器矢量繪圖等。 Dojo 的特色可從下面幾部分譸起：前端

一、 Dojo 是一個純 Javascript 庫，後臺只要提供相應的接口就可以將數據以 Json 的格式輸出給前臺。vue

二、 Dojo 自身定了完整的函數庫，屏蔽了瀏覽器的差別。java

三、 Dojo 自身定了界面組件庫，其組件代碼採用了面向對象的思想，便於繼承及擴展。ios

四、 對前端界面聯動需求較爲複雜的時候，基於 dojo 的頁面組件將是首選，由於其能夠將界面中 某一個具備共性的區域抽象出來，封裝返這一區域的界面行爲以及數據，採用模塊式的方式完成複雜頁面的開發。
web

熱力圖

1、實現地圖熱力圖操做 熱力圖，是以特殊高亮的形式顯示訪客熱衷的頁面區域或訪客所在的地理區域的圖示。經常使用的熱力圖統計分紅樣方計數法（Quadrate Analysis）和核密度法（Kernel Density Estimation）。 **核密度法**基於密度的點模式分析方法，所以事件之間的相對位置和距離具備決定做用
sql

clipboard.png

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

clipboard.png

例子裏，咱們採用第二種分析方法來展現區域性的人口密度
然而屢次嘗試發現，官方給出的熱力圖基於heatMap並不能知足咱們的需求，並且online service的解決方案不符合要求
最後，咱們經過esri提供FeatureLayer類建立圖層，以座標繪製圖形，權重區分色值來還原熱力圖

ArcGIS for javascript

效果圖

圖片描述

clipboard.png

涉及到arcgis 基礎地圖、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'
複製代碼

加載樣式 在加載地圖前，須要先加載對應版本的樣式表
@import url('js.arcgis.com/3.24/esri/c…');
or
esriLoader.loadCss('js.arcgis.com/3.24/esri/c…')

到這裏咱們解決完成vue項目引入arcgis的問題，但在實際開發過程，會發現國內使用arcgis有兩個嚴重不足的問題:
第一個是底圖地圖服務差，加載慢
第二個是arcgis for js的提供的api接口偶爾出現沒法加載的問題
所以，在開發階段，爲優化用戶體驗，經過切換國內地圖服務和本地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 => {})
複製代碼

到這裏咱們已經成功加載arcgis地圖

map

map:底圖，負責底圖渲染
Map類建立地圖容器和所需的DOM結構，用於添加圖層、圖形、信息窗口和其餘的導航控件

建立地圖是arcgis最基本的操做，在3.x中經過map建立地圖

new Map(YouMapDOM, option)
複製代碼

地圖打點操做，繪製圖形範圍等覆蓋物是地圖可視化的基本操做
clipboard.png

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

方法
map層做爲arcgis最重要的元素，繼承了衆多的方法，例如
addLayer 地圖添加Esri圖層
centerAndZoom（mapPoint，levelOrFactor） 居中並縮放地圖
destroy() 銷燬地圖實例
...

map.setBasemap(url)

複製代碼

clipboard.png

事件
咱們不單止經過map的方法進行必要層與層間操做，同時也能夠在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
...
經過監聽不一樣類型的鼠標鍵盤等事件來觸發咱們所需的操做，例如經過map綁定click事件，只要咱們點擊地圖，如提示、地點、graphic層等等，都能觸發。

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官網提供多種默認底圖地圖樣式（以下圖），然而引入官方地圖國內存在較爲嚴重的穩定性問題，所以後期能夠將地圖換成國內通用地圖，如天地圖等

注意：轉換地圖服務可能存在必定的誤差，具體參考問題3

clipboard.png

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'
    }
 複製代碼

clipboard.png

FeatureLayer

FeatureLayer：圖形圖層，可用於地圖服務或地圖要素服務中顯示單個圖層要素。也經過isEditable=true編輯圖層要素
FeatureLayer默認從ArcGIS Server中獲取圖層信息進行渲染，然鵝全文的例子不採用服務器渲染的模式，而是直接本地數據渲染圖層
熱力圖的渲染及操做

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()類添加網格圖層
featureLayer.on()綁定的事件，如click、dbl-click、graphic-add等事件類型進行圖層交互，如對圖層進行高亮、彈窗

featureLayers.on('click', (event) => {})
複製代碼

graphic

graphic圖形繪製

let geometry = new Polygon(rings)
let newGraphic = new Graphic(geometry)
map.graphics.add(newGraphic)
複製代碼

地圖上有多樣的覆蓋物能夠採用graphic繪製圖形，如高亮網格Polygon、圓形範圍Circle、打點point、標誌物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)
})
複製代碼

持續修改更新...


問題

一、4.7中WebMap、MapView的區別
4.0版本因爲加入3D元素，Map和Layers再也不處理圖形的繪製，而是交給Views完成
View視圖是4.0版本提出的概念，包括MapView(2D)和SceneView(3D)兩個類
在4.X中底圖和底圖操做層分離的
二、離線部署
（1）國內地圖服務
（2）JS-SDK本地部署
考慮到國內的用戶會出現地圖訪問慢甚至沒法正常加載的問題，所以ArcGIS for js 的離線部署是很是有必要的
一、註冊arcgis開發者帳號
二、進入官方api-sdk下載界面選擇你須要的版本
developers.arcgis.com/downloads/a…

clipboard.png稍等片刻後
三、須要準備一臺能夠正常訪問的服務器（以Linux-tomcat arcgis_js_api3.2.4爲例）
將下載的arcgis_js_api文件複製到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/
四、完成上面修改便可正常訪問本身服務器上的SDK接口

三、座標誤差
咱們經常使用的座標有三種，分別是國際座標系、火星座標系、百度座標系
地球座標系——WGS84：GCS_WGS_1984,常見於 GPS 設備，Google地圖、arcGIS地圖等國際標準的座標體系。
火星座標系——GCJ-02：中國國內使用的被強制加密後的座標體系，高德座標採用這種座標體系。
百度座標系——BD-09：百度地圖所使用的座標體系，是在火星座標系的基礎上又進行了一次加密處理。

clipboard.png

座標誤差依賴於地圖底圖服務，上面將默認的英文地圖轉化成國內經常使用的天地圖（默認火星座標），這裏就產生問題。
一、不建議底圖選擇中存在兩種不一樣座標體系，以下圖座標存在明顯的誤差，火星座標在採用WGS84座標系的地圖上位置偏上
彩色中國天地圖
clipboard.png

全球衛星地圖
clipboard.png

二、例如咱們使用arcGIS的search類進行查找，返回的數據都是國際座標，所以必須進行誤差糾正。
咱們可使用高德地圖提供的座標變換AMap.convertFrom()進行座標轉換

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);
     }
});複製代碼

或者也能夠自定義轉換方法
blog.csdn.net/Admin_yi/ar…（網上隨便搜的參考）

備註：本文中提到的總結可能存在不足和錯誤，多多包容

上一篇文章： vue 地圖可視化（2） mapbox篇

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程