ArcGIS API for JS 4.X学习
文章平均质量分 87
ArcGIS API for JS 4.X学习
优惠券已抵扣
余额抵扣
还需支付
¥29.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
X北辰北
坐标成都,专注于Web开发,主要技术栈为React。
展开
-
19 html2canvas实现ArcGIS API for JavaScript 4.X截图功能
html2canvas实现ArcGIS API for JavaScript 4.X截图功能原创 2021-12-26 10:15:53 · 1317 阅读 · 0 评论 -
全国行政区划数据处理及资源目录树实例化
写在前面在做WebGIS系统开发的时候,我们经常会遇到一个需求,就是要实例化一棵关于全国行政区划的目录树,方便组织管理用户数据平台上的一些资源数据,最终的示例效果图如下:上图就是通过实例化后的一棵全国行政区划目录树。由上图可看出,我们需要初始化这棵目录树之前需要首先进行数据处理,然后再进行实例化,所以接下来请看详细的操作步骤。具体操作步骤1、数据处理1.1、首先来看一下数据处理,关于原始数据的获取,大家可以百度下载,一般来说下载下来的数据基本是shp格式,所以我们只需要在..原创 2021-03-17 15:28:59 · 1139 阅读 · 0 评论 -
WebGIS学习资源推荐(包含学习路线、软件和数据资源推荐)
写在前面很多人对于WebGIS不是很熟悉,尤其是刚接触WebGIS的开发人员来说,感觉这东西漫无边际,不知道如何下手,所以本篇文章就结合自己的开发和学习经验,给大家推荐一下学习路线和相关的学习资源。首先直接上一张学习路线图,图中绿标的知识必须要掌握。学习资源推荐1、Web开发方面1.1、Web开发基础知识学习资源Web开发基础知识无非就是前端三剑客:HTML、CSS、JavaScript。对于这三块知识学习的话,其实重点和难点还是在CSS和JS这两块,以下是一些推荐的学习网站和资原创 2021-01-20 17:07:32 · 6277 阅读 · 1 评论 -
18 ArcGIS API for JavaScript 4.18绘制线段和面要素之后获取长度及面积
写在前面上一文中我们介绍了一下如何通过鼠标点击的形式绘制点、线、面要素,大家看了代码之后应该感觉其实很简单,就是使用了"esri/widgets/Sketch/SketchViewModel"这个API模块来实现的。大致实现流程如下:实例化SketchViewModel 设置点、线、面三种符号的样式 激活SketchViewModel相应的绘制工具 绘制以上就是通过鼠标点击的形式绘制点、线、面要素的整体流程,我们可以通过下面绘制一个点要素的代码来看一下这个流程,代码如下:// 绘制原创 2021-01-08 15:33:45 · 2034 阅读 · 1 评论 -
17 ArcGIS API for JavaScript 4.18通过鼠标绘制点、线、面
写在前面此处仅仅是用代码记录一下通过鼠标拖拽的方式绘制点、线、面要素的过程,代码很简单,就没必要写过多的介绍了。最终效果整体代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> ..原创 2020-12-22 10:53:34 · 2630 阅读 · 2 评论 -
16 ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgis/core
写在前面随着前端主流框架Vue和React的发展,大家在做WebGIS项目开发时是不是也在vue或者react项目里使用ArcGIS API for JavaScript呢,之前我们在vue或者react项目里使用ArcGIS API for JavaScript的时候一直给大家推荐"esri-loader"的AMD方式,示例代码如下所示(在这里仅仅演示React项目中的使用,Vue中的使用方式见文章后半部分)://直接使用esri-loader的then()方法链式回调import React原创 2020-12-18 16:12:00 · 9850 阅读 · 17 评论 -
15 ArcGIS JS API 4.17更改测量控件黄白相间的默认样式
问题描述在使用ArcGIS API for JavaScript 4.17开发项目时,有一个需求是需要在地图上添加距离测量和面积测量的控件,这其实很简单,直接调用ArcGIS JS API自带的测量控件就可以实现,但是客户对控件自带的黄白相间、并且略粗的默认样式不满意,所以需要修改ArcGIS JS API自带的测量控件默认样式。我们先来看看ArcGIS JS API自带的默认样式:然后再来看看客户想要的样式:其实说白了就是要更改默认样式的宽度和颜色。解决思路..原创 2020-12-17 09:01:31 · 772 阅读 · 2 评论 -
14 ArcGIS JS API 4.16实现三维场景中在天地图底图上加载2000坐标系的倾斜摄影数据
所需数据国家天地图官网数据服务作为底图 自己发布的GCS 2000地理坐标系的倾斜摄影数据服务,对应wkid为4490 ArcGIS JS API 4.16 最新版操作步骤1、利用"esri/layers/BaseTileLayer"这个JS API模块扩展出来一个天地图的图层类,具体代码如下: let TdtLayer = BaseTileLayer.createSubclass({ properties: {原创 2020-10-10 09:07:11 · 2563 阅读 · 7 评论 -
13 ArcGIS API for JavaScript开发入门文档
写在前面这篇文章写在我用ArcGIS API for JavaScript(后面统称为"ArcGIS JS API")开发了两年项目后的某一天夜里。写这篇文章主要是两个目的吧,第一个原因肯定是为后面越来越多的从事WebGIS开发的GISer提供一个学习路线,当然,我提供的这个学习路线仅仅是一个参考;第二个原因就是我想写文章了,八月份一直忙着做项目,忘记了更新博客。什么时候适合读这篇文章呢在校期间无聊想学WebGIS开发之前 当你参加Esri全国开发者大赛(目前最新的名称应该是"易智瑞全国.原创 2020-09-04 12:53:47 · 4837 阅读 · 15 评论 -
12 ArcGIS JS API 4.16控制地图的缩放大小
问题描述在WebGIS项目开发过程中,有时候我们的数据服务在某些级别下是没有数据的,比如一个切片服务,仅仅切了5-12级,所以当我们将地图缩放到0-4级或者12级往后的话,会看不到我们的切片图层。为了解决这个问题,我们就要控制地图的缩放级别,换句话说就是将地图的最大和最小比例控制在5-12级,这样一来不管用户怎么样去缩放地图,都会在不同级别看到我们的切片图层。搞懂了这样做的目的的话,那我们接下来看看具体怎么实现。操作步骤1、ArcGIS JS API 4.16,也就是ArcGIS JS.原创 2020-08-26 12:20:07 · 5563 阅读 · 1 评论 -
11 去除ArcGIS JS API 4.16实例化后的地图拖动时默认自带的5px的外边框
问题描述使用ArcGIS JS API 4.16实例化完地图后,当我们的鼠标拖动地图时发现地图的四周会默认自带一圈的外边框,这在我们的系统中看起来是很不协调的,大致样子如下所示:就像上图中的四周,有一圈黑色的外边框,但是当我们鼠标移除的时候它会自动消失,所以这就很不舒服,今天就给大家介绍下该如何去除这个烦人的外边框。解决方法1、通过在浏览器的控制台扑捉元素后发现,当我们的鼠标点击拖动地图时,我们存放地图的dom元素节点上会增加一个after的伪类,这个默认自带的外边框就是在这个伪类.原创 2020-08-13 10:12:02 · 2315 阅读 · 4 评论 -
10 ArcGIS JS API 4.15实现地图加载图片(优化版)
写在前面之前写了一篇关于在ArcGIS地图上添加图片的文章,关注度还可以,在项目中也用文章中提到的技术路线实现了地图叠加图片的需求。但是最近客户又有了新需求,因为我们在之前的文章中通过扩展图层来实现图片添加后,如果图片中某一处的信息比较丰富,在地图缩放的一瞬间如果我们拖动地图的话,那部分的图片会有卡顿。其实这情况不算严重,因为仅仅卡顿那么一秒钟左右而已,但是客户抓着这个点就要较劲,那没办法,来一波优化吧。之前文章的地址如下:《07 ArcGIS JS API 4.14实现地图加载图片》。最终的效原创 2020-06-09 14:33:29 · 2430 阅读 · 3 评论 -
09 ArcGIS JS API 4.15渲染后台接口返回的数据,并进行点选查询
问题描述出差的某一天晚上在宾馆没事干瞎想,突然想到白天做过的项目功能的时候,有个点选查询的功能引起了我的注意。在项目中为了实现点选查询,是在ArcGIS Server里面发布了一个要素服务,然后将其添加到地图上渲染,并实现了鼠标的点选查询功能,那这个功能可不可以不通过发布服务来实现呢?想到这,打开电脑仔细翻看了了一下ArcGIS JS API的官方文档,发现好像是可以,所以就立即动手了,幸运的是,我成功了,先给大家上一张效果图:上图中的鼠标点选查询,并出现弹窗的功能实现的数据来源并不是一个发布的原创 2020-06-07 21:10:03 · 2143 阅读 · 2 评论 -
【番外】Electron结合ArcGIS API for JavaScript的开发
概述写这篇文章主要是想折腾下,因为我看到JS可以通过Electron来做桌面应用程序,那么Electron能不能和ArcGIS API for JavaScript进行结合开发呢,这样一来是不是可以从某种意义上理解成我们的ArcGIS API for JavaScript可以做桌面应用了呢?带着这样的疑问,这篇文章就出来了。具体操作一、Electron环境搭建1、Electr...原创 2020-04-30 14:31:20 · 991 阅读 · 0 评论 -
08 ArcGIS JS API 4.15实现萤火虫效果
概述前几天在看帖子的时候发现有大佬使用ArcGIS Pro和Portal制作了萤火虫的渲染效果,感觉前端可视化的时候还不错,所以自己也将实例数据下载下来之后用ArcGIS JS API来实现了一下,我们先来看一下最终的效果:看完效果之后,我们来看看是怎么实现的。具体实现步骤1、实现萤火虫渲染效果其实就是用了JS API提供的图片符号这个API来实现的,所以接下来我们...原创 2020-04-19 20:28:57 · 1793 阅读 · 8 评论 -
07 ArcGIS JS API 4.14实现地图加载图片
需求描述将一张图片叠加到ArcGIS地图上是现在很多项目的一个广泛需求,通过查阅网上资料后发现这种需求目前只有四种方法可以实现,因为ArcGIS JS API官网并没有提供相应的图片类图层来让我们实例化图片图层,但是JS API官网有说明后期会增加这类API,就是不知道是什么时间了。既然目前没有这类API图层,那我们就自己来找找其他的路子吧,刚才提到过实现将图片叠加到地图上的方法目前有四种,分...原创 2020-04-01 15:49:44 · 4829 阅读 · 22 评论 -
【测评】 使用@arcgis/cli脚手架和esri-loader方式进行ArcGIS JS API开发的测评
概述当我既写了esri-loader方式来进行ArcGIS JS API的开发文章,又写了@arcgis/cli脚手架的方式来进行ArcGIS JS API的开发文章之后,相信很多小伙伴看到后会产生“选择纠结症”,我到底该用哪种方式来进行ArcGIS JS API的开发呢?不要着急,我给你一个可供选择的参考,简单又实用:如果项目已经在进行实施,中途可能需要用到ArcGIS JS API中的...原创 2020-03-02 18:18:35 · 1825 阅读 · 12 评论 -
【番外】 使用@arcgis/cli脚手架进行ArcGIS JS API开发
概述今天兴趣使然,在翻阅ArcGIS API for JavaScript官网的时候,发现了跟esri-loader方法不同的另外一种可以在Vue、React和Angular这种主流框架中使用JS API的开发方式,并将其操作过程记录下来,供有需要的伙伴参考。如果想了解如何通过esri-loader来在Vue、React和Angular这种主流框架中使用JS API的开发,请移步至另外两篇文章...原创 2020-03-02 18:13:57 · 1835 阅读 · 3 评论 -
06 使用WMTSLayer来实例化一个图层
问题描述:现有一个支持WMTS的服务地址,地址具体信息如下:以上信息展示此服务是一个地图服务,即MapServer结尾,然后此服务支持WMTS实例化。现有需求将此地图服务通过WMTSLayer实例化为一个图层,在前端渲染,下面介绍详细的操作步骤。大概思路:既然是实例化一个图层,其实大致流程和实例化其他类型图层都一致,就是通过相应的函数来实例化图层,然后通过map的a...原创 2020-02-03 09:17:10 · 1319 阅读 · 0 评论 -
【番外】 React中使用ArcGIS JS API 4.14开发
一、概述在之前很长的一段时间中,使用ArcGIS JS API(以下简称“JS API”)开发WebGIS系统的时候,还是基于传统的前端框架和各种前端技术来开发,这些框架和技术各位使用过的大概有这些:Dojo、jQuery、Bootstrap、CommonJS等。用这些传统的技术框架结合JS API去开发的时候,我们引入JS API是在系统的HTML页面中通过<script>和&l...原创 2020-01-16 13:53:23 · 2946 阅读 · 2 评论 -
【番外】 Vue中使用ArcGIS JS API 4.14开发
一、概述在之前很长的一段时间中,使用ArcGIS JS API(以下简称“JS API”)开发WebGIS系统的时候,还是基于传统的前端框架和各种前端技术来开发,这些框架和技术各位使用过的大概有这些:Dojo、jQuery、Bootstrap、CommonJS等。用这些传统的技术框架结合JS API去开发的时候,我们引入JS API是在系统的HTML页面中通过<script>和&l...原创 2020-01-16 11:13:36 · 10532 阅读 · 28 评论 -
05 ArcGIS JS API 4.12版本监听view-change事件
问题描述 在JS API 3.X版本下,我们监听视图范围变化、获取当前视图范围这些事情是很轻松的,但是到了4.X的版本,由于API文档里没有了这些事件监听的描述,我们要想实现上述事情,就变得比较困难。所幸在GeoNet上可以找到些答案,接下来我们主要介绍下如何监听view-change事件。解决方法1、MapViewimport React, { Comp...原创 2019-08-20 15:01:04 · 3786 阅读 · 0 评论 -
04 ArcGIS JS API 4.12加载天地图
平时开发过程中,如果我们调用arcgis js api官网的底图时,由于受网络的限制,调用就会变得很慢,此时我们可以考虑将我们的底图换为天地图,如下图所示:具体操作过程如下:1、加载arcgis api实例化地图时所需的样式文件和js代码包,如下:<link rel="stylesheet" href="https://js.a...原创 2019-08-09 16:56:17 · 3013 阅读 · 6 评论 -
03 三维地图添加切片图层
在介绍了创建二维、三维地图之后,我们接下来介绍三维地图如何添加切片图层。地图添加切片图层的最终结果如下图所示,在此过程中默认实现了将业务图层居中显示的效果: 具体操作如下所示:1 创建HTML基本架构,创建div和引入相关的文件,然后设置div的基本样式,如下:创建基本架构:<!DOCTYPE html><html lang="en"&...原创 2019-01-04 16:26:03 · 1669 阅读 · 2 评论 -
02 创建一个三维地图
三维地图的创建跟上文中的创建二维地图差不太多,只是所使用的地图视角不同而已,下面是最终效果图:接下来我们看看具体的实现过程:1 创建基本的HTML页面结构,创建div,然后设置基本样式,如下:<!DOCTYPE html><html> <head> <meta charset="utf-8">...原创 2018-10-12 17:31:58 · 1115 阅读 · 0 评论 -
01 创建一个二维地图
随着3.X系列版本新功能的不再增加,终于开始向4.X版本转变,其实说实话还是蛮不想转变的,因为相对于3.X版本的API,4.X版本里面的功能目前为止还是有点少的,但大势所趋,只能硬着头皮转了。 首先,4.X版本开发的基本套路和3.X版本相比是一致的,无非就是创建HTML页面,引用相关模板,然后实例化,最后实现与地图的交互,即操作地图。不过4.X版本的优点就是主打三维这一块...原创 2018-10-12 17:23:51 · 2511 阅读 · 0 评论