当前位置：服务支持 > 软件文章 > 第一话：3D地图加载——ArcGIS for JS 3D开发入门

第一话：3D地图加载——ArcGIS for JS 3D开发入门

阅读数 16

ArcGIS API for JS是ESRI公司对 WEB 二次开发的一项技术支持，现今的4.10版本功能相对强大。因公司项目所求，小爷扎根学习&开发中，稳扎稳打，逐步实现“三维辅助平台”功能，兹作此系列笔记，以备查看。

首先熟悉ArcGIS

官方参考手册：https://developers.arcgis.com/javascript/latest/api-reference/index.html

官方实例代码：https://developers.arcgis.com/javascript/latest/sample-code/index.html

要是网络连接比较慢，也可以选择把参考手册和实例代码下载下来，直接本地查看（有需要的可以留言）。

加载基本SceneView（SceneView介绍）：https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html

esri/views/SceneView        //class inherit                                                    //一个SceneView在WebGL中展示Map或者WebScene的3D视图，一个SceneView                             //必须包含一个地图的实例和一个宽高大于0并且可见的Dom元素。在view渲                             //染map之前，地图中必须有一个非空的数据，例如 operational layers 或                             //者 一个包含basemap的base layer。 // Create a basic SceneView instance with a basemap and world elevationvar view = new SceneView({  // An instance of Map or WebScene  map: new Map({    basemap: "hybrid"  }),   // The id of a DOM element (may also be an actual DOM element)  container: "viewDiv"});

A SceneView may not be immediately ready for display after it has been constructed. For example, map data may need to be loaded first to determine the spatialReference of the view, or the DOM container may not yet have a non-zero size. Many of the view methods (such as hitTest or goTo) need the view to be ready before they can be used.(一个SceneView在它被建立之后，不一定直接展示。例如，地图数据也许需要先展示，以方便决定view的空间参考，或者DOM元素还没有确定大小，但是很多View的方法（例如hitTest和goTo()方法)在使用之前，需要view已经准备好展示）。

// create a SceneView instance (for 3D viewing)var view = new SceneView({  map: new Map({    basemap: "topo"  }),   container: "viewDiv"});  view.when(function() {      // SceneView is now ready for display and can be used. Here we will      // use goTo to view a particular location at a given zoom level, camera      // heading and tilt.      view.goTo({        center: [-112, 38],        zoom: 13,        heading: 30,        tilt: 60      })    })    .catch(function(err) {      // A rejected view indicates a fatal error making it unable to display,      // this usually means that WebGL is not available, or too old.      console.error("SceneView rejected:", err);    });

加载实例示范：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="inital-scale=1,maximum-scale=1,user-scalable=no">  <title> test base web scene</title>  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">  <script src="https://js.arcgis.com/4.10/"></script>  <script>    require([            "esri/views/SceneView",            "esri/WebScene"    ],function (SceneView,WebScene) {      var titleDiv = document.getElementById("titleDiv");      var scene = new WebScene({        portalItem:{          id:"3a9976baef9240ab8645ee25c7e9c096"        }      });      var view = new SceneView({        map:scene,        container:"viewDiv",        padding:{         top:40        }      });      view.when(function () {        var title = scene.portalItem.title;        titleDiv.innerText = title;      });    });  </script>  <style>    html,body,#viewDiv{      padding: 0;      margin: 0;      width: 100%;      height: 100%;    }    #titleDiv{      background-color: lightgray;      color: black;      padding: 5px;      position: absolute;      z-index: 2;      top: 0;      right: 0;      font-size: 20pt;      font-weight: bolder;      width: 100%;      height: 30px;      text-align: center;      opacity: 0.1;    }  </style></head><body>  <div id="viewDiv">    <div id="titleDiv"></div>  </div></body></html>

加载自己发布的ArcGIS Pro发布的SceneServer服务

  // Create SceneLayer and add to the map    var sceneLayer = new SceneLayer({        url: "http://xxxxxxx.esrichina.com/server/rest/services/Hosted/xxxxxxxxxxxxxxxxxxxx/SceneServer",        popupEnabled: true    });

要想不被渲染，加载发布的原图形

    //不添加Symbol  // Create SceneLayer and add to the map    var sceneLayer = new SceneLayer({        url: "http://gao.esrichina.com/server/rest/services/Hosted/datac13_Import3DFiles2/SceneServer",        popupEnabled: true    });    map.add(sceneLayer);     // Create MeshSymbol3D for symbolizing SceneLayer/* var symbol = {// type: "mesh-3d", // autocasts as new MeshSymbol3D() type: "web-style", symbolLayers: [{ type: "fill", // autocasts as new FillSymbol3DLayer() // If the value of material is not assigned, the default color will be grey material: { color: [244, 247, 134] } }] };*/    // Add the renderer to sceneLayer    sceneLayer.renderer = {        type: "simple", // autocasts as new SimpleRenderer()    };
    
    

     加载自发布的SceneServer