ArcGIS JS API 3D: 如何利用其功能进行三维地理空间分析？

ArcGIS JS 3D开发详解

ArcGIS API for JavaScript（简称ArcGIS JS）是Esri公司为Web二次开发提供的一项技术支持，其4.10版本功能强大，广泛应用于各种地理信息系统项目中，本文将详细介绍ArcGIS JS在3D开发中的应用，包括基本概念、关键步骤和具体实现方法。

一、基本概念与准备

ArcGIS JS简介

ArcGIS JS是Esri推出的一套基于JavaScript的API，用于开发Web地图应用，它支持多种类型的地图展示，包括二维和三维视图，通过这套API，开发者可以轻松地在网页中集成地图功能，并进行各种定制化操作。

3D地图加载基础

在ArcGIS JS中，3D地图的加载主要依赖于SceneView类，一个SceneView实例必须在WebGL中展示Map或WebScene的3D视图，并且需要一个非空的数据源，如operational layers或包含basemap的base layer。

二、创建基本场景

引入必要的模块

需要引入必要的模块，包括Map、SceneView等：

import Map from "@arcgis/core/Map";
import SceneView from "@arcgis/core/views/SceneView";
import esriConfig from "@arcgis/core/config";

设置API密钥

使用ArcGIS服务需要API密钥，可以从Esri开发人员仪表板获取：

esriConfig.apiKey = '你的API密钥';

创建场景和场景视图

创建一个基本的3D场景并展示：

const map = new Map({
  basemap: "hybrid", // 底图图层
  ground: "world-elevation" // 高程图层
});
const view = new SceneView({
  container: "viewDiv", // 地图容器id
  map: map,
  camera: {
    position: {
      x: -118.808, // 经度
      y: 33.961, // 纬度
      z: 2000 // 高度
    },
    tilt: 75 // 相机角度
  }
});

三、加载3D模型

支持的模型格式

从ArcGIS JS 4.11开始，可以直接在前端加载GLTF/GLB格式的3D模型[^2]，这种方式类似于Cesium开源三维框架的加载方式。

添加3D模型

将数据模型保存到项目文件夹后，使用以下代码创建Graphic并添加到SceneView中：

const point = new Point({
  x: 113.16231,
  y: 23.02195,
  z: 0
});
const symbol = {
  type: "point-3d",
  symbolLayers: [{
    type: "object",
    width: 800, // 模型宽度
    height: 300, // 模型高度
    resource: {
      href: "./gltf/file.glb" // 模型文件路径
    },
    heading: 88 // 朝向
  }]
};
const graphic = new Graphic({
  geometry: point,
  symbol: symbol
});
view.graphics.add(graphic);

四、距离和面积测量

添加测量控件

可以通过添加距离和面积测量控件来实现这些功能：

import DistanceMeasurement3D from "@arcgis/smartmapping/widgets/DistanceMeasurement3D";
import AreaMeasurement3D from "@arcgis/smartmapping/widgets/AreaMeasurement3D";
const distanceWidget = new DistanceMeasurement3D({
  view: view,
  strings: {
    tooltips: {
      start: "点击以开始测量距离",
      measure: "点击以继续测量距离",
      clear: "点击以清除距离测量",
      done: "点击完成距离测量"
    }
  }
});
const areaWidget = new AreaMeasurement3D({
  view: view,
  strings: {
    tooltips: {
      start: "点击以开始测量面积",
      measure: "点击以继续测量面积",
      clear: "点击以清除面积测量",
      done: "点击完成面积测量"
    }
  }
});

启动测量工具

将测量工具添加到视图中，并启动它们：

view.ui.add(distanceWidget, "top-right");
view.ui.add(areaWidget, "top-right");

五、光照和天气效果调整

添加光照控件

可以通过添加光照控件来调整场景中的光照效果：

import LightingController from "@arcgis/smartmapping/widgets/LightingController";
const lightingController = new LightingController({
  view: view,
  strings: {
    tooltips: {
      sun: "太阳光照",
      ambient: "环境光照"
    }
  }
});

启动光照工具

将光照工具添加到视图中：

view.ui.add(lightingController, "top-left");

添加天气变换控件

可以通过添加天气变换控件来模拟不同的天气效果：

import AtmosphereController from "@arcgis/smartmapping/widgets/AtmosphereController";
const atmosphereController = new AtmosphereController({
  view: view,
  strings: {
    tooltips: {
      clear: "晴天",
      fog: "雾天",
      stormy: "暴风雨"
    }
  }
});

启动天气工具

将天气工具添加到视图中：

view.ui.add(atmosphereController, "top-left");

六、相关问答与解答栏目

问题1：如何在ArcGIS JS中加载GLTF/GLB格式的3D模型？

答：在ArcGIS JS中加载GLTF/GLB格式的3D模型，可以按照以下步骤进行：

1、确保使用ArcGIS JS 4.11及以上版本。

2、将数据模型保存到项目文件夹。

3、使用以下代码创建Graphic并添加到SceneView中：

const point = new Point({
  x: 113.16231,
  y: 23.02195,
  z: 0
});
const symbol = {
  type: "point-3d",
  symbolLayers: [{
    type: "object",
    width: 800, // 模型宽度
    height: 300, // 模型高度
    resource: {
      href: "./gltf/file.glb" // 模型文件路径
    },
    heading: 88 // 朝向
  }]
};
const graphic = new Graphic({
  geometry: point,
  symbol: symbol
});
view.graphics.add(graphic);

这样即可在前端直接加载GLTF格式的3D模型，而无需通过ArcGIS Pro软件发布服务，需要注意的是，如果模型体积较大（超过50MB），可能会影响渲染效率，导致地图操作（如移动、缩放）不流畅。

小伙伴们，上文介绍了“arcgisjs3d”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。