三维地图前端arcgis_vue地图可视化 ArcGIS篇(3)

本文介绍了使用VueJS、vuetify、axios和ArcGIS 3.24进行地图可视化的经验,探讨了VueJS在数据驱动、ArcGIS在图形化中的作用,以及如何结合Echarts进行数据展示。文章讨论了ArcGIS 3与4版本的区别,并分享了在3.24版本中创建图层和图形的挑战。内容涵盖了数据获取、前端框架、地图服务的选择与优化,以及热力图的实现。此外,还涉及到了Dojo框架、Web SQL DB本地数据库和坐标系统的转换问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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类创建图层,以坐标绘制图形,权重区分色值来还原热力图</

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值