js前端加载WebScene_arcgisjswebscene用法资源-CSDN文库

共3个文件

html：2个

config：1个

4星 · 超过85%的资源需积分: 44 177 浏览量 2017-05-02 17:32:02 上传评论 5 收藏 4KB ZIP 举报

在JavaScript前端开发中，利用Esri的ArcGIS API for JavaScript（通常称为arcgis-js-api）可以实现丰富的地理信息系统（GIS）功能，其中包括加载和展示3D场景。ArcGIS API for js 4.x版本引入了许多增强的功能，使得在Web端创建交互式三维地图变得更为便捷。本文将深入探讨如何使用这个API加载WebScene，并展示3D效果。我们需要理解什么是WebScene。WebScene是Esri ArcGIS平台的一部分，它是一个包含3D地理数据和配置信息的文件，可以在Web浏览器中通过ArcGIS Online或ArcGIS Portal进行查看和共享。WebScene支持多种3D数据类型，如地形、影像、点云、3D对象和场景图层，为用户提供沉浸式的地图体验。加载WebScene的过程主要分为以下几个步骤： 1. **设置环境**：在HTML文件中引入arcgis-js-api库，并设置加载的版本。例如： ```html <script src="https://js.arcgis.com/4.x/init.js"></script> ``` 2. **初始化Map和View**：创建一个`Map`实例，指定WebScene的URL，然后创建一个`MapView`或`SceneView`来显示场景。例如： ```javascript require(["esri/Map", "esri/views/SceneView"], function(Map, SceneView) { var map = new Map({ basemap: "topo", ground: "world-elevation", load: function() { // 场景加载完成后执行的函数 } }); var view = new SceneView({ container: "viewDiv", // 指定用于显示场景的HTML元素ID map: map, camera: { // 可选的初始视角 position: { x: -118.2437, y: 34.0522, z: 1000 }, tilt: 30, heading: 0 } }); }); ``` 3. **加载SceneLayer**：如果需要在WebScene中添加自定义的3D图层，可以通过`SceneLayer`实现。例如，假设你有一个名为`test3DMap`的场景图层： ```javascript const sceneLayer = new SceneLayer({ url: "path/to/your/test3DMap/SceneLayer", }); map.add(sceneLayer); ``` 4. **交互与事件处理**：你可以监听`SceneView`上的事件，如点击、平移等，以实现与用户的交互。例如，监听鼠标点击事件： ```javascript view.on("click", function(event) { console.log("Clicked at:", event.mapPoint); }); ``` 5. **自定义功能**：根据需求，你还可以添加各种自定义功能，如图层控制、查询、分析等，这需要利用到API中的其他模块和方法。通过ArcGIS API for js 4.x，开发者可以轻松地在Web前端创建和控制3D场景，结合本地ArcGIS Portal资源，实现丰富的3D地图应用。这不仅增强了用户体验，也为地理数据分析和决策提供了直观的可视化工具。在实际项目中，需要根据具体需求调整代码，如调整视图设置、处理用户交互、优化性能等，以达到最佳的展示效果。

资源推荐

资源详情

资源评论

收起资源包目录

test3DMap.zip （3个子文件）

test3DMap

web.config 168B

Scene.html 5KB

3DMapIndex.html 6KB

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>3DMapIndex</title> <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css"> <link rel="stylesheet" type="text/css" href="js/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/customStyle.css"> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script src="https://js.arcgis.com/4.3/"></script> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script> require([ "esri/Map", "esri/WebScene", "esri/config", "esri/views/MapView", "esri/views/SceneView", "esri/widgets/Locate", "esri/widgets/LayerList", "esri/widgets/Expand", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/layers/MapImageLayer", "esri/layers/TileLayer", "esri/layers/FeatureLayer", "esri/layers/SceneLayer", "esri/geometry/Point", "esri/geometry/SpatialReference", "esri/tasks/support/ProjectParameters", "esri/tasks/GeometryService", "esri/tasks/support/PrintTemplate", "esri/symbols/PictureMarkerSymbol", "esri/geometry/Extent", "esri/core/Collection", "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/Deferred", "dojo/domReady!" ], function( Map, WebScene, esriConfig, MapView, SceneView, Locate, LayerList, Expand, Graphic, GraphicsLayer, MapImageLayer, TileLayer, FeatureLayer, SceneLayer, Point, SpatialReference, ProjectParameters, GeometryService, PrintTemplate, PictureMarkerSymbol, Extent, Collection, dom, on, domConstruct, Deferred ) { /** * 使用portal的URL * 注意换成你自己的portalUrl，id换成你发布的Scene的id */ esriConfig.portalUrl = "http://gis.cloud.com/arcgis"; var scene = new WebScene({ portalItem: { id: "c1857eade1d8481988ab22462bfd1542" } }); /** * 基于该webScene，添加新的SceneLayer * 此处涉及到layer的注意都换成你自己发布的layer */ var sceneLayer = new SceneLayer({ url: "http://gis.cloud.com/arcgis/rest/services/Hosted/Streetnetwork_ProcedurallyGeneratedMultipatches/SceneServer" }); scene.add(sceneLayer); //注意在全球场景中支持WGS84坐标系和Web墨卡托坐标系，WGS84对应的代号是4326 var mapLayer4326 = new MapImageLayer({ url: "https://gis.cloud.com/arcgis/rest/services/Buildings_4326/MapServer" }); scene.add(mapLayer4326); var view = new SceneView({ map: scene, container: "viewDiv" }); var grLayer = new GraphicsLayer(); //在scene上构建Graphic层 scene.add(grLayer); //显示图层 var layerList = new LayerList({ view: view, container: document.createElement("div"), createActionsFunction: defineActions }); layerListExpand = new Expand({ expandIconClass: "esri-icon-layer-list", view: view, content: layerList.domNode }); view.ui.add(layerListExpand, { position: "top-right", }); function defineActions(event) { var item = event.item; return [ [{ title: "Go to full extent", className: "esri-icon-zoom-out-fixed", id: "full-extent" }, { title: "Layer information", className: "esri-icon-description", id: "information" }], [{ title: "Increase opacity", className: "esri-icon-up", id: "increase-opacity" }, { title: "Decrease opacity", className: "esri-icon-down", id: "decrease-opacity" }] ]; } layerList.on("trigger-action", function(event) { var id = event.action.id; if (id === "full-extent") { console.log(scene.layers.items); var ptext = scene.layers.items[0].fullExtent.extent.clone(); //view.goTo(ptext); //对于矢量layer缩放定位，目前无法实现2364坐标，支持4326坐标 view.goTo(event.item.layer.fullExtent); } else if (id === "information") { window.open(event.item.layer.url); } else if (id === "increase-opacity") { if (event.item.layer.opacity && event.item.layer.opacity < 1) { event.item.layer.opacity += 0.25; } } else if (id === "decrease-opacity") { if (event.item.layer.opacity && event.item.layer.opacity > 0) { event.item.layer.opacity -= 0.25; } } }); }); </script> </head> <body> <div id="viewDiv"> <div id="viewDiv"> <div class="esri-ui-top-right esri-ui-corner" style="width:200px;height:100px;margin-right: 380px !important;margin-top:16px !important;"> </div> </div> </div> </body> </html>

评论收藏

内容反馈