ArcGIS API for JavaScript 三维地图开发入门：从数据准备到立体图生成全流程解析

1次阅读

共计 3594 个字符，预计需要花费 9 分钟才能阅读完成。

三维 GIS 在城市规划、应急管理、智慧园区等领域有广泛应用。相比传统二维地图，它能直观展示地形起伏、建筑高度等空间信息，为决策提供更真实的场景还原。ArcGIS API for JavaScript 是 Esri 官方推出的 WebGIS 开发库，其三维模块基于 WebGL 实现，支持在浏览器中高效渲染大规模三维数据。

注册开发者账号：
访问 ArcGIS 开发者网站注册账号
获取 API 密钥（用于解除试用提示和水印）

项目初始化：

npm init vite@latest arcgis-3d-demo --template vanilla
cd arcgis-3d-demo
npm install @arcgis/core

基础 HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1">
  <title> 三维地图演示 </title>
  <style>
    html, body, #viewDiv {padding: 0; margin: 0; height: 100%; width: 100%;}
  </style>
</head>
<body>
  <div id="viewDiv"></div>
  <script type="module" src="/main.js"></script>
</body>
</html>

// main.js
import Map from '@arcgis/core/Map';
import SceneView from '@arcgis/core/views/SceneView';
import esriConfig from '@arcgis/core/config';

// 配置 API 密钥
esriConfig.apiKey = 'YOUR_API_KEY';

const map = new Map({
  basemap: 'streets-navigation-vector',
  ground: 'world-elevation'
});

const view = new SceneView({
  container: 'viewDiv',
  map: map,
  camera: {position: [116.4, 39.9, 5000], // 经度, 纬度, 高度
    tilt: 65,
    heading: 0
  }
});

import ElevationLayer from '@arcgis/core/layers/ElevationLayer';

// 添加自定义地形
const customElevation = new ElevationLayer({url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'});

map.ground.layers.add(customElevation);

import BuildingSceneLayer from '@arcgis/core/layers/BuildingSceneLayer';

const buildings = new BuildingSceneLayer({
  url: 'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Buildings_Brest/SceneServer/layers/0',
  title: '三维建筑'
});

map.add(buildings);

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1">
  <title> 三维城市展示 </title>
  <style>
    html, body, #viewDiv {padding: 0; margin: 0; height: 100%; width: 100%;}
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.25/@arcgis/core/assets/esri/themes/light/main.css">
</head>
<body>
  <div id="viewDiv"></div>
  <script src="main.js" type="module"></script>
</body>
</html>

// main.js
import Map from '@arcgis/core/Map';
import SceneView from '@arcgis/core/views/SceneView';
import esriConfig from '@arcgis/core/config';
import ElevationLayer from '@arcgis/core/layers/ElevationLayer';
import BuildingSceneLayer from '@arcgis/core/layers/BuildingSceneLayer';

// API 配置
esriConfig.apiKey = 'YOUR_API_KEY';
esriConfig.assetsPath = './assets';

// 初始化地图
const map = new Map({
  basemap: "topo-vector",
  ground: "world-elevation"
});

// 创建视图
const view = new SceneView({
  container: "viewDiv",
  map: map,
  qualityProfile: "high",
  camera: {position: [116.4, 39.9, 2000],
    tilt: 75,
    heading: 0
  }
});

// 添加自定义地形
const elevationLayer = new ElevationLayer({url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"});

map.ground.layers.add(elevationLayer);

// 加载三维建筑
const buildingsLayer = new BuildingSceneLayer({url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Buildings_Brest/SceneServer/layers/0"});

map.add(buildingsLayer);

// 视图加载完成事件
view.when(() => {console.log("SceneView ready");
});

按需加载：
使用 FeatureFilter 实现数据筛选
对大型数据集启用 LOD 分级加载

缓存策略：

esriConfig.request.interceptors = [{
  urls: /world-elevation/,
  before: function(params) {params.requestOptions.cache = 'force-cache';}
}];

WebGL 优化：
减少实时阴影计算
合并相同材质的 3D 对象
使用 view.environment.lighting.directShadowsEnabled = false 关闭阴影

坐标系问题：
中国地区建议使用 WKID: 4490 坐标系

转换方法：

import projection from '@arcgis/core/geometry/projection';
await projection.load();
const point = projection.project(geometry, new SpatialReference({ wkid: 4490}));