JavaScript api for ArcGIS 4.11交互三维编辑

1 简介
如何创建一个公民可以参与的规划应用？最简单的办法就是使用全新ArcGIS API for JavaScript 4.11，它将会快速的解决这个问题。通过本文你将会了解具体的实现细节，另外我们还给你提供了一个在线访问地址：https://esri.github.io/participatory-planning/和源码地址：https://github.com/Esri/participatory-planning。是不是很给力？还不快来体验一下！！！

2 规划区域的准备
首先需要对规划区域的三维场景进行配置，通过开源的三维城市数据，很快的制作好ArcGIS OnlineSceneLayer的三维服务。

但是，如何将划定的规划范围中的现有场景给去掉？难道要准备好几种不同的数据来达到适配效果？
强大的ArcGIS API for JavaScript提供空间过滤功能，为你轻松解决这个问题，你仅仅需要做：
1、 绘制你需要进行规划的区域
2、 将绘制的限制区域传递给FeatureFilter图层就搞定了（ps：核心代码如下）

3 更改底图
在设计属于你的规划方案的时候，你可能需要配置不同风格底图，这…不会需要重新一步一步去设计吧？为了方便你随时自定义底图，新的Vector Tile Editor工具将帮助你快速创建自定义底图，工具地址：https://developers.arcgis.com/vector-tile-style-editor/。
这里，我就根据自己的设计喜好设计出一版底图：

为了让显示的效果更好，将采用SketchViewModel（草图模式）进行三维绘图，对于街道将使用灰色的
线数据符号化表示，核心代码如下：

对于公园，湖泊或混凝土地面，使用Polygon来表示，核心代码如下：

4 创建建筑物
预备工作已经做好，现在需要创建建筑，这里准备了三种不同楼高的建筑物，通过绘制建筑基底加上三维符号化我们很快得到想要的建筑物，核心代码如下：

效果为：

5 放置真实的三维对象
虽然绘制出草图模式的三维建筑，但是在表现效果和规划设计上还是不够的。我们有时候仍然想放置一些自定义的模型，全新ArcGIS API for JavaScript 4.11中已经支持直接加载glTF（第三代通用三维格式），你只需要将你想要的三维模型转为glTF格式就可以直接在网页端使用了。此外，为了方便你的设计，常用的三维模型我们已经制作好一些你可以直接调用url使用或者你可以直接调用第三方的sketchfab模型库（地址：https://sketchfab.com/developers/download-api/downloading-models/javascript）
glTF加载核心代码为：

URL可以指向引用外部二进制资源(.bin文件和纹理)的glTF文件(. glTF)，也可以指向单个二进制文件(.glb)。注意： glTF模型有时以ZIP存档形式提供，在这种情况下，有必要在将它们传递给API之前将它们解压缩并加载为blob对象，源码地址：https://github.com/Esri/participatory-planning/blob/master/src/ts/widget/support/GlTFImport.ts
效果图:

此外当你点击物体时候将会显示高亮编辑的状态，你可以进行偏移、选择、缩放操作，仅仅需要几句代码：

6 提交属于你的规划设计
最后你可以点击提交，将自动调用屏幕截图功能将你设计的前后方案效果图显示出来：

技术交流qq群：984259835
如果觉得不错，记得点赞！！！