加载一个基本的网络场景

这个示例演示了如何从 ArcGIS for Portal item 加载网络场景到自定义的应用中。这个应用程序的场景展示了新西兰奥塔哥皇后镇周围群山在冬至时(2014年6月21日)投下的阴影。每条线表示在特定时间周围群山投射的阴影的边缘。

加载网络场景很容易,只需要 Portal item 的 ID 即可。

因为 WebScene 继承了 esri/Map ,所以可以将其设置到 SceneView 的 map 属性。

程序完整源代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Load a basic web scene - 4.5</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  <script src="https://js.arcgis.com/4.5/"></script>

  <script>
    require([
      "esri/views/SceneView",
      "esri/WebScene",
      "dojo/dom",
      "dojo/domReady!"
    ], function(
      SceneView, WebScene, dom
    ) {

      var titleDiv = dom.byId("titleDiv");

      /************************************************************
       * 创建一个 WebScene 实例. WebScene 必须引用一个
       * PortalItem ID ,这个 ID 代表保存在 arcgis.com 或其他内置门户网的网络场景。
       *
       ************************************************************/
      var scene = new WebScene({
        portalItem: {
          id: "3a9976baef9240ab8645ee25c7e9c096"
        }
      });

      /************************************************************
       * 设置网络场景(WebScene)实例为 SceneView 的map属性值
       ************************************************************/
      var view = new SceneView({
        map: scene,
        container: "viewDiv",
        padding: {
          top: 40
        }
      });

      view.then(function() {
        // 场景加载完成时显示标题
        var title = scene.portalItem.title;
        titleDiv.innerHTML = title;
      });
    });
  </script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 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.75;
    }
  </style>

</head>

<body>
  <div id="viewDiv">
    <div id="titleDiv"></div>
  </div>
</body>

</html>

程序运行效果:沙箱地址:https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webscene-basic

(完)

results matching ""

    No results matching ""