ArcGIS JSAPI 学习教程 - 可视域分析图层介绍-创建与编辑

在这里插入图片描述

本文主要介绍一下可视域分析图层介绍。

arcgis js 新版本更新了可视域分析图层类，相对于之前的用法，操作起来更加方便。

本文主要介绍一下，可视域图层的创建、编辑与创建可视域分析。

本文包括 完整代码以及在线示例。

完整代码

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>
      可视域分析多图层 | ArcGIS API for JavaScript 4.33
    </title>
    <style>
      html,
      body {
      padding: 0;
      margin: 0;
      height: 100%;
      }
      #viewDiv .esri-attribution {
      display: none;
      }
      #myCustomGroup {
      position: absolute;
      top: 150px;
      left: 64px;
      }
    </style>
  <script type="module" src="https://openlayers.vip/arcgis_api/calcite-components/2.8.1/calcite.esm.js"></script>
    <link rel="stylesheet" href="https://openlayers.vip/arcgis_api/4.33/esri/themes/light/main.css"/>
  <script src="https://openlayers.vip/arcgis_api/4.33/init.js"></script>
    <script>
      var _hmt = _hmt || [];
      (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <script>
      require([
      "esri/Map",
      "esri/views/SceneView",
      'esri/layers/IntegratedMeshLayer',
      'esri/layers/ViewshedLayer',
      'esri/analysis/ViewshedAnalysis',
      'esri/analysis/Viewshed',
      "esri/geometry/Point",
      'esri/widgets/LayerList'], (
      Map,
      SceneView,
      IntegratedMeshLayer,
      ViewshedLayer,
      ViewshedAnalysis,
      Viewshed,
      Point,
      LayerList
      ) => {
      // 创建倾斜摄影
      var layer = new IntegratedMeshLayer({
      title: '倾斜摄影图层',
      url: "https://gs3d.geosceneonline.cn/server/rest/services/Hosted/hk1/SceneServer",
      });
      // 创建场景
      const map = new Map({
      layers: [layer],
      });
      // 创建可视域分析对象
      const viewshedAnalysis = new ViewshedAnalysis({
      viewsheds: [
      // 可视域对象
      new Viewshed({
      // 观察点
      observer: new Point({
      spatialReference: {
      latestWkid: 3857,
      wkid: 102100,
      },
      x: 12710561.590172164,
      y: 2541654.800844678,
      z: 80.210722059971886,
      }),
      // 可视域参数
      farDistance: 300,
      heading: 64,
      tilt: 84,
      // 可视域观察角度
      horizontalFieldOfView: 360,
      verticalFieldOfView: 180,
      })
      ]
      });
      // 创建可视域图层
      const viewshedLayer = new ViewshedLayer({
      // 可视域分析对象
      title: '可视域分析',
      });
      // 创建可视域图层
      const viewshedLayerSphere = new ViewshedLayer({
      // 可视域分析对象
      source: viewshedAnalysis,
      title: '球形可视域分析',
      });
      // 添加到地图汇总
      map.add(viewshedLayer);
      map.add(viewshedLayerSphere);
      const view = new SceneView({
      container: "viewDiv",
      map: map
      });
      view.when(function () {
      view.extent = layer.fullExtent;
      })
      // 开启编辑
      view.whenLayerView(viewshedLayerSphere).then(
      // 可视域图层视图
      function (viewshedLayerView_) {
      // 开启交互编辑
      viewshedLayerView_.interactive = true;
      }
      )
      let viewshedLayerView;
      view.whenLayerView(viewshedLayer).then(
      // 可视域图层视图
      function (viewshedLayerView_) {
      viewshedLayerView = viewshedLayerView_;
      }
      )
      let activateCreateViewsheds = true;
      // Toggle button to enable/disable the custom render node
      const renderNodeToggle = document.getElementById("renderNodeToggle");
      renderNodeToggle.addEventListener("calciteSwitchChange", () => {
      // 开启标绘创建可视域
      if (activateCreateViewsheds) {
      viewshedLayerView?.createViewsheds();
      } else {
      viewshedLayerView.interactive = false;
      }
      activateCreateViewsheds = !activateCreateViewsheds;
      });
      const layerList = new LayerList({
      view: view
      });
      view.ui.add(layerList, {
      position: "top-left",
      index: 0
      });
      });
    </script>
  </head>
  <body>
      <div id="viewDiv" style="float: left; width: 100%; height: 100%">
    </div>
      <div id="myCustomGroup">
        <calcite-block open heading="是否开启可视域绘制" id="renderNodeUI">
          <calcite-label layout="inline">
          关闭
        <calcite-switch id="renderNodeToggle"></calcite-switch>
          开启
        </calcite-label>
      </calcite-block>
    </div>
  </body>
</html>

在这里插入图片描述

在线示例

ArcGIS Maps SDK for JavaScript 在线示例：可视域分析图层介绍