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

如图所示：可视化界面采用三层三文治结构，从server（后台，非online server）读取数据，vueJS负责数据驱动，ArcGIS与echarts负责数据的图形化。同时引入浏览器的web sql db本地数据库进行海量数据缓存

ArcGIS API for Javascript 是由美国 Esri 公司推出， 基于 dojo框架和 REST 格式的一套编程接口（目前最新版本为 3.3， dojo1.8。 通过 ArcGIS API for Javascript可以对 ArcGIS for Server 进行访问调用，并将 ArcGIS for Server 提供的地图资源和其它资源online加载到Web应用中。

基础知识

Dojo

Dojo 是一个强大的面向对象 Javascript 框架。主要由三大模块组成： Core、 Dijit、 DojoX。 其中 Core提供 Ajax、 events、 packaging、 CSS-based querying、 animations、 JSON 等相关操作 API。 Dijit 是一个可更换皮肤，基于模板的 WEB UI 控件库。 DojoX 包括一些创新/新颖的代码和控件： DateGrid、 charts、离线应用、 跨浏览器矢量绘图等。
Dojo 的特点可从下面几部分诪起：
1、 Dojo 是一个纯 Javascript 库，后台只要提供相应的接口就能够将数据以 Json 的格式输出给前台。
2、 Dojo 自身定了完整的函数库，屏蔽了浏览器的差异。
3、 Dojo 自身定了界面组件库，其组件代码采用了面向对象的思想，便于继承及扩展。
4、 对前端界面联动需求较为复杂的时候，基于 dojo 的页面组件将是首选，因为其可以将界面中
某一个具有共性的区域抽象出来，封装返这一区域的界面行为以及数据，采用模块式的方式完成复杂页面的开发。

热力图

一、实现地图热力图操作
热力图，是以特殊高亮的形式显示访客热衷的页面区域或访客所在的地理区域的图示。常用的热力图统计分成样方计数法（Quadrate Analysis）和核密度法（Kernel Density Estimation）。
核密度法基于密度的点模式分析方法，因此事件之间的相对位置和距离具有决定作用

样方计数法其事件之间的绝对位置具有决定作用，单位面积的事件、数量在空间上具有比较明确的变化。如：空间对象的平均值/密度。

例子里，我们采用第二种分析方法来展示区域性的人口密度
然而多次尝试发现，官方给出的热力图基于heatMap并不能满足我们的需求，而且online service的解决方案不符合要求
最后，我们通过esri提供FeatureLayer类创建图层，以坐标绘制图形，权重区分色值来还原热力图

ArcGIS for javascript

效果图

涉及到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(‘https://js.arcgis.com/3.24/es...‘);
or
esriLoader.loadCss(‘https://js.arcgis.com/3.24/es...‘)


到这里我们解决完成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)

地图打点操作，绘制图形范围等覆盖物是地图可视化的基本操作

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

方法
map层作为arcgis最重要的元素，继承了众多的方法，例如
addLayer 地图添加Esri图层
centerAndZoom（mapPoint，levelOrFactor） 居中并缩放地图
destroy() 销毁地图实例
...

map.setBasemap(url)

事件
我们不单止通过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

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：图形图层，可用于地图服务或地图要素服务中显示单个图层要素。也通过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)
})

持续修改更新...

问题

1、4.7中WebMap、MapView的区别
4.0版本由于加入3D元素，Map和Layers不再处理图形的绘制，而是交给Views完成
View视图是4.0版本提出的概念，包括MapView(2D)和SceneView(3D)两个类
在4.X中底图和底图操作层分离的
2、离线部署
（1）国内地图服务
（2）JS-SDK本地部署
考虑到国内的用户会出现地图访问慢甚至无法正常加载的问题，因此ArcGIS for js 的离线部署是非常有必要的
1、注册arcgis开发者账号
2、进入官方api-sdk下载界面选择你需要的版本
https://developers.arcgis.com...


稍等片刻后
3、需要准备一台可以正常访问的服务器（以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/
4、完成上面修改即可正常访问自己服务器上的SDK接口

3、坐标偏差
我们常用的坐标有三种，分别是国际坐标系、火星坐标系、百度坐标系
地球坐标系——WGS84：GCS_WGS_1984,常见于 GPS 设备，Google地图、arcGIS地图等国际标准的坐标体系。
火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标采用这种坐标体系。
百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。

坐标偏差依赖于地图底图服务，上面将默认的英文地图转化成国内常用的天地图（默认火星坐标），这里就产生问题。
1、不建议底图选择中存在两种不同坐标体系，如下图坐标存在明显的偏差，火星坐标在采用WGS84坐标系的地图上位置偏上
彩色中国天地图

全球卫星地图

2、例如我们使用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);
     }
});

或者也可以自定义转换方法
https://blog.csdn.net/Admin_y...（网上随便搜的参考）

备注：本文中提到的总结可能存在不足和错误，多多包容

原文地址：https://www.cnblogs.com/zzsdream/p/11562296.html

时间： 2024-11-07 01:41:16

vue地图可视化 ArcGIS篇的相关文章

vue 地图可视化 maptalks 篇

Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发: - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了 上面是一段 maptalks 官方介绍,下面来创建工程.首先利用 vue-cli3 搭建一

react 地图可视化 cesium 篇

Vue Function-based API RFC 一出来,感觉 vue 越来越像 react 了.新立项目,决定尝试下 react.js.下面是 react 集成 cesium,核心部分是 webpack 的配置. 一.安装 create-react-app npm install -g create-react-app 二.react 工程创建 create-react-app cesium-react 三.cesium 安装 npm install cesium --save 四.cop

100行代码实现疫情地图可视化

前言 这个春节,大家都在密切关注着疫情的进展.不少人每天醒来打开手机的第一件事,便是查看家乡的疫情图.你所看到的可能是这样的: 又或者是这样的: 疫情进展牵动着我们的心.作为一名开发者,我们闭门在家为抗击疫情做贡献的同时,也可以继续深耕自己的技术.此文章旨在向大家介绍疫情地图可视化的原理,帮助大家深入理解echart. 核心思路 疫情图的核心在于疫情数据整理以及疫情数据可视化. 疫情数据整理 本文疫情数据是由网易新闻的公开数据整理而成,仅用于demo 展示.数据的具体地址已在代码中说明:此地址是

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

包学会之浅入浅出Vue.js：升学篇

上一篇<包学会之浅入浅出Vue.js:开学篇>中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧,Go~ 需求背景 组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用,调用方法只需直接写上<qui-button></qui-button>或者<qui-nav></qui-nav>这样的代码就可以,是不是很方便呢,接下来我们将要完成以下页面: 这是我们组件库的首页,包含三个子

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

包学会之浅入浅出Vue.js：结业篇

在第一篇<包学会之浅入浅出Vue.js:开学篇>和上一篇<包学会之浅入浅出Vue.js:升学篇>的学习中,我们首先了解了Vue环境的搭建以及两个重要思想--路由和组件的学习,通过组件库中的按钮组件和导航组件,相信大家也开始了解相应的知识点,接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件

Vue学习笔记进阶篇——Render函数

本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. <h1> <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>