我正在参加「AdminJS·启航计划」
前两篇文章我们了解了 arcgis js 的基本信息以及常用模块的大致功能，这篇文章我们就从 demo 入手，把这些知识转换为实际的开发能力。
本篇会按照优先级对 DEMO 进行排序，你可以先大致浏览一遍内容，找到自己需要哪几个 DEMO，然后依次学习研究。如果遇到不熟悉的模块，也可以回头翻翻前两篇文章，或者直接通过 api 文档进行学习。
如果你没有读过前两篇的话，推荐先读一遍，会对你研究 DEMO 非常有帮助：
- arcgis js 入门：科普介绍与文档导读（上） - AdminJS (Admin.net)
- arcgis js 入门：科普介绍与文档导读（中） - AdminJS (Admin.net)
在开始之前先提一句，如果遇到卡住不动，或者不知道怎么操作、操作没反应的情况，就等一下，有可能是图层数据没加载出来，先去看其他的，过一会再回来说不定就好了。
基础开发
首先是下面三个基础示例：
-
第一个示例 Intro to MapView - Create a 2D map 介绍了如何在 html 上创建一个最基础的地图（vite + ts 项目也可以在这个例子里找到）
-
第二个示例 Intro to layers 介绍了如何在地图上管理和引入底图
-
第三个示例 Create a FeatureLayer with client-side graphics 是一个常用场景，就是 后端接口给点位数据，然后前端自己创建一个图层并显示。所以看完了这个你就可以着手和后端开始联调地图了。
这里顺带讲一下示例详情页，arcgis 很良心的一个地方在于每个示例里都有开发思路和介绍：
下面的开发思路可以先不看或者简单看个开头，主要还是看代码，代码有不懂的地方再回来搜介绍，事半功倍。
查询与展示
看完了这三个例子之后基本就能把基础地图开发好了，然后就是两个重头戏：查询（Query）和可视化（Visualization）：
其他的例子可以都不看，但是这两个是一定要看。Query 里边包含了 如何搜索数据，比如用户点一个图标，然后你展示这个点位的详情，或者用户框选了一个区域，你要搜索这个点位里的要素，然后展示或者进行数据分析。
而 Visualization 里边包含了 如何展示数据，比如怎么显示各种类型的数据，怎么实现地图效果，如何把数据转换成用户想要的地图样式。
这两部分里包含的内容非常常用，平时的地图开发工作有差不多一半时间都是在用这些例子里的代码排列组合。所以只要你看熟了这两块内容，那 arcgis js 对你来说就不在话下。
先说 Query 部分，大致可以分成两部分，server-side 和 client-side：
server-side 里包含的内容其实就是如何查询，就和从数据库查数据一样，你构造一个 sql，然后调用指定的方法就能拿到相关的结果，还可以进行分页或者其他的操作。注意这个并不是说只能查询 arcgis server，你在前端手动创建的 FeatureLayer 一样可以用这种方式查询。
client-side 就更直观一点，都是些通过用户在地图上的交互进行的查询。上图圈出来的三个就很有代表性，分别是：
根据鼠标点击位置进行范围查询：鼠标落哪就查对应范围内的要素。链接：Query statistics client-side by distance
根据几何信息查询，创建一个可拖动的中心点和半径，按照地理范围进行查询。链接：FeatureLayerView - query statistics by geometry
框选查询：用户画框，然后查询包含的要素。链接：Select features by rectangle
尤其是第二个和第三个，通过和地图交互进行要素查询是客户最想要的地图功能之一。所以非常推荐优先研究。
然后是 Visualization 可视化，这里的内容也比较多，我推荐优先研究下 Renderer 部分：
这里圈出来的三个都是比较常用的，分别是：
按要素属性显示指定的样式：指定具体的数值，匹配上了就显示为对应的样式，最常用。链接：Visualize features by type
按要素属性创建连续的颜色：比如指定一个颜色区间，渲染器就会根据某个属性的数值显示成对应的颜色（可以通过 step 设置多个颜色渐变）.链接：Data-driven continuous color
按照范围显示指定的颜色：指定几个范围，如果数值匹配到了某个范围就会显示对应的颜色。链接：Visualize data with class breaks
除了这三个之外，clustering 部分也可以优先研究下，这个专题里包含了相当多的点位聚合效果，这里就放一个最基础的（但也很有用）：Point clustering - basic configuration
地图交互与 UI 布局
看完了地图信息展示和搜索之后，最后再来看一下如何和地图进行交互。
首先要看的是这个例子 Using the view's UI，这个很常用，介绍了如何在地图上对组件进行布局和管理，也可以创建一些 dom 元素然后挂载到地图的指定位置，比如右上、左下等，arcgis js 会自动对这些角落的 ui 进行排列。
首先是 Editor 和 Sketch，两个地图交互的核心工具：
Editor 是一个 UI 组件，用于新增和编辑要素。侧重于 写，一般用于接收用户数据，比如地图标点，制定方案，规划区域等。链接：Edit features with the Editor widget
Sketch 可以监听各种事件，比如新建了一个矩形，移动了图形等，侧重于 读，一般用来更方便的获取地图上的数据，比如距离、范围内的点位、搜索位置，然后基于位置查附近元素等。链接：Sketch widget
其实 Sketch 在上面 query 小节里已经有用到了，框选查询和可动的圆圈查询就是用 Sketch 画出来的。而 Editor 的话看你的需求，如果没用到的话可以不看，优先级还是 Sketch 更高一点。
除了上面两个最常用的之外，还有一些用于实现特殊场景的功能，比如：
TimeSlider widget 时间轴：可以播放，用于展示连续数据，比如一段时间内的移动轨迹，气温变化等。
Swipe Widget 对比：通过拖动或者滚动的形式查看前后变化。多用于展示，比如某个区域的规划方案。
Print widget 导出保存：不多说了，很多客户都想要这个功能：“你这个地图要能导出，我要拿图片去写报告”。
其他示例
上面这几个例子学完基本就已经可以应付大多数 2D 地图的开发需求了，还有一些其他的示例可能会用到，这里简单列举一下：
- Popup 系列示例，这一组示例介绍了如何通过弹窗来展示地图信息，挨个看就行，如果你的项目里对 UI 和样式一致度要求比较高的话，用这个可能不太合适，不过如果要求不高的话我还是更推荐用 arcgis js 自带的弹窗功能，因为会自带一些很贴心的地图小功能，比如缩放窗口、停靠到地图边缘等。
- Label 系列示例：介绍了如何给要素添加文本标签，内容不多，有需要就看一下。
- 小组件系列示例：介绍了各式各样的小组件，推荐有时间了就挨个看看，因为小组件其实基本都是对 api 功能的视图封装，所以说不定可以节省很多开发工作量。
如何学习 arcgis js
最后再分享一下我平时是如何学习和使用 arcgis js 的，正如上篇开头说的那样，对于已经工作的人比较难挤出大片的空余时间去成体系的进行学习，所以更适合边用边学。
而我平时在接到地图相关的开发需求时一般都是按照下面的流程去走的：
- 确认都有哪些地理数据，是否需要处理，前端怎么获取
- 确认地图都要实现哪些功能，这些功能哪些示例里有现成的代码可以抄
- 把数据在前端组装好，把 DEMO 里的代码搬过来
- 微调细节，实现 DEMO 里没有的逻辑，遇到不熟的 api 或者属性再去查文档
- 多点点 api 文档里的链接，了解相关模块，遇到的次数多了就熟悉了
- 事后复盘、总结、记录
写在最后
至此，咱们算是把 API 文档和示例文档都过了一遍，写的有些杂乱请大家见谅。本来想着简单介绍一下，没想到啰里啰唆写了这么多。其实写本文的时候回想起当初自己刚接触 arcgis js 的时候，面对庞大的文档和数量众多的 DEMO，完全找不到下手的地方。所以现在回头写了这么一篇导读，希望可以帮到大家，如果本文可以起到一点目录的作用，那也算没有白写了。
即便用了 arcgis js 这么久，写这篇导读的时候也是压力很大，很多记不太清楚的地方只能回去再查文档。所以深知自己只是略懂皮毛，有错误的地方还请大家斧正。
虽然这一篇文章不如前两篇长，但是却更重要，毕竟前两篇都是在讲概念，概念学的再多也不如实际写点代码有用。 后续也可能会写点文章，更新一些常见场景的例子，大家有什么感兴趣的可以评论区留言，我也会在评论区和大家交流的。