ArcGIS API for JavaScript 4.x中的3D部分（4）

来源：互联网发布：文字特效制作软件编辑：程序博客网时间：2024/06/15 19:44

（4）js前端加载WebScene

五一假期结束后，又是一个新的开始，打起精神来认真学习吧！

接着上一篇，今天重点介绍js前端加载WebScene，使用SceneLayer服务，展示3D效果。

1、新建项目文件，在IIS上发布。

如图所示，新建项目文件，命名为test3DMap，新建html文件，命名为3DMapIndex，在IIS中进行发布。注意设置项目的权限为everyone。

当项目文件中出现web.config时，在浏览器中进行访问，我在本地将项目文件放在桌面，所以我的访问路径为：“IP地址/test3DMap/”。

2、写界面

2.1 自行发布Scene和SceneLayer

先进入arcgis Portal（还记得如何使用嘛，忘记的同学翻看上一篇），找到新建好的名为scenespk的Scene，打开后，添加SceneLayer，如下所示，复制下地址栏“webscene=”后面的一串id值。

注意：记得添加引用的包：

贴一段调用的代码（关于Scene和SceneLayer的使用在第2篇中有介绍）

        //使用自己账号portal的URL        esriConfig.portalUrl = "http://gis.cloud.com/arcgis";        var scene = new WebScene({            portalItem: {                id: "c1857eade1d8481988ab22462bfd1542"            }        });        //基于该webScene，添加新的SceneLayer        var sceneLayer = new SceneLayer({            url: "http://gis.cloud.com/arcgis/rest/services/Hosted/Streetnetwork_ProcedurallyGeneratedMultipatches/SceneServer"        });        scene.add(sceneLayer);

在Scene中也能添加其他类型的Layer，方法类似，举个例子：

        //注意在全球场景中支持WGS84坐标系和Web墨卡托坐标系，WGS84对应的代号是4326        var mapLayer4326 = new MapImageLayer({            url: "https://gis.cloud.com/arcgis/rest/services/Buildings_4326/MapServer"        });        scene.add(mapLayer4326);

若有图层绘画上的需求，可在Scene中添加graphicLayer，方法类似，举个例子：

        var grLayer = new GraphicsLayer(); //在scene上构建Graphic层        scene.add(grLayer);

界面基本效果如下，也可使用官网的一些widget来丰富界面效果，在该demo中，右上角使用了LayerList组件来显示图层列表，使用Expand组件折叠LayerList组件。

2.2 使用官网提供的Scene

打开esri官网提供的API，找到WebScene（https://developers.arcgis.com/javascript/latest/api-reference/esri-WebScene.html），示例讲解提供了一个id，可以拿过来直接使用。

贴下添加图层的代码，如下：

         var scene = new WebScene({            portalItem: {                id: "affa021c51944b5694132b2d61fe1057"            }        });        //基于该webScene，添加新的SceneLayer        var sceneLayer = new SceneLayer({            url: "http://scene.arcgis.com/arcgis/rest/services/Hosted/Building_Hamburg/SceneServer/layers/0"        });        scene.add(sceneLayer);        var view = new SceneView({            map: scene,            container: "viewDiv"        });        var grLayer = new GraphicsLayer(); //在scene上构建Graphic层        scene.add(grLayer);

界面效果如下：

2.3 简单对比

初步学习时，可多看看官网给的示例代码和Sample，相对来说比较全面了。在实际项目中，需要使用自己发布的Layer时，就需要借助arcgis Portal了。

目前为止，arcgis for js API版本更新到了4.3，其中还有很多包还处于开发中，没能从3.x迁移过来（对比在https://developers.arcgis.com/javascript/latest/guide/functionality-matrix/index.html），例如esri/toolbars，这个包涉及到绘制图层的操作，还在开发中，还有一些包已经不再支持（可能换了用法或者路径或被替换）。

那么这就提示我们，在实际项目需求中，做到有的放矢，有针对性地使用该类工具。

3、附上项目下载地址

注意：在使用3DMapIndex.html该文件时，记得将esriConfig.portalUrl换成你自己的portal地址，里面涉及到layer服务的都得换成你自己的服务才能使用。

点击下载

0 0