当前位置：首页 > news >正文

01、ArcGIS For JavaScript 4.29对3DTiles数据的支持

news 2026/2/9 17:20:37

综述

Cesium从1.99版本开始支持I3S服务的加载，到目前位置，已经支持I3S的倾斜模型、3D Object模型以及属性查询的支持。Cesium1.115又对I3S标准的Building数据实现了加载支持。而ArcGIS之前一直没有跨越对3DTiles数据的支持，所以在一些开发过程中不能完全的满足一些客户的需求。随着ArcGIS 4.29版本的发布，ArcGIS提供了IntegratedMesh3DTilesLayer的对象去支持3D Tiles数据格式的加载，从而丰富了ArcGIS数据类型，也实现了ArcGIS和Cesium两大Web GIS平台间的数据互通。

Cesium中I3S的支持

从Cesium官网的示例中我们可以看到，目前Cesium支持的I3S标准的数据，主要为倾斜、3d object、BIM、以及数据查看的功能。
在这里插入图片描述
从代码可以看到，Cesium提供了Cesium.I3SDataProvider.fromUrl的方法去加载I3S标准数据：

  // Create I3S data providerconst i3sProvider = await Cesium.I3SDataProvider.fromUrl(tours["San Francisco"],i3sOptions);

并且可是通过点击事件绑定，获取3d Object数据对象的属性信息：

// Pick a new featureconst pickedFeature = viewer.scene.pick(movement.position);if (!Cesium.defined(pickedFeature)) {return;}const pickedPosition = viewer.scene.pickPosition(movement.position);if (Cesium.defined(pickedFeature.content) &&Cesium.defined(pickedFeature.content.tile.i3sNode)) {const i3sNode = pickedFeature.content.tile.i3sNode;if (pickedPosition) {i3sNode.loadFields().then(function () {let description = "No attributes";let name;const fields = i3sNode.getFieldsForPickedPosition(pickedPosition);if (Object.keys(fields).length > 0) {description ='<table class="cesium-infoBox-defaultTable"><tbody>';for (const fieldName in fields) {if (i3sNode.fields.hasOwnProperty(fieldName)) {description += `<tr><th>${fieldName}</th><td>`;description += `${fields[fieldName]}</td></tr>`;if (!Cesium.defined(name) && isNameProperty(fieldName)) {name = fields[fieldName];}}}description += `</tbody></table>`;}if (!Cesium.defined(name)) {name = "unknown";}selectedEntity.name = name;selectedEntity.description = description;viewer.selectedEntity = selectedEntity;});}}
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);

ArcGIS对3DTiles的支持

访问ArcGIS Maps SDK For JavaScript官网，会找到IntegratedMesh3DTilesLayer的对象，这个是4.29版本新提供的图层类，用于支持3dtiles规范的数据加载。

在这里插入图片描述
从描述中看，目前ArcGIS对于3dTiles的加载支持，还是需要符合ArcGIS REST格式的url。这块我们可以将数据放到tomcat下去提供。

在这里插入图片描述

代码实现，其实和ArcGIS的其他图层加载方式类似，代码采用官网上的示例代码：

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><title>IntegratedMesh3DTilesLayer | Sample | ArcGIS Maps SDK for JavaScript 4.29</title><link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.29/"></script><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><script>require(["esri/WebScene","esri/views/SceneView","esri/layers/IntegratedMesh3DTilesLayer","esri/widgets/Expand","esri/widgets/LayerList","esri/widgets/Legend"], (WebScene, SceneView, IntegratedMesh3DTilesLayer, Expand, LayerList, Legend) => {/************************************** Load webscene with layer showing* building energy ratings*************************************/const webscene = new WebScene({portalItem: {id: "5b177c2579bf45159bb91e2a13b4218b"}});/************************************** Create IntegratedMesh3DTilesLayer layer* and add it to the webscene***********************************/const layer = new IntegratedMesh3DTilesLayer({url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Utrecht_3D_Tiles_Integrated_Mesh/3DTilesServer/tileset.json",title: "Utrecht Integrated Mesh 3D Tiles"});webscene.add(layer);/************************************** Create the View and add expandable* LayerList and Legend widgets to the UI***********************************/const view = new SceneView({container: "viewDiv",map: webscene,lighting: {directShadowsEnabled: true}});const expandLegend = new Expand({content: new Legend({view: view}),expanded: true,expandTooltip: "Expand Legend",group: "top-right",view: view});const expandLayerList = new Expand({content: new LayerList({view: view}),expandTooltip: "Expand Layer List",group: "top-right",view: view});view.ui.add([expandLegend, expandLayerList], "top-right");});</script></head><body><div id="viewDiv"></div></body>
</html>

从图层类的命名IntegratedMesh3DTilesLayer可以看出，这个3dtiles的数据加载其实和倾斜模型（IntegratedMeshLayer）的加载有相似性，示例中其实加载了一个要素图层，叠加在模型表面，这个功能和倾斜一样。

在这里插入图片描述

结语

3dTiles数据一般开发常用的生成工具为CesiumLab，ArcGIS对于3dtiles数据的支持，可以让原先使用cesium的开发者也可以借用arcgis的一些优势功能去开发自己的业务。

01、ArcGIS For JavaScript 4.29对3DTiles数据的支持

综述

Cesium中I3S的支持

ArcGIS对3DTiles的支持

结语

相关文章：

01、ArcGIS For JavaScript 4.29对3DTiles数据的支持

Spark_SparkSql写入Oracle_Undefined function.....将长字符串写入Oracle中方法..

2023数据要素白皮书（免费下载）

kafka学习记录

无线网络2.4和5G的区别

大模型笔记：Prompt tuning

【Ambari】Ansible自动化部署大数据集群

RTSP/Onvif视频安防监控平台EasyNVR调用接口返回匿名用户名和密码的原因排查

opencv基础图行展示

GIF在线生成器

使用JavaScript制作一个简单的天气应用

说说对WebSocket的理解？应用场景？

网路维护基础知识

【GD32】MQ-3酒精检测传感器

如何在极狐GitLab 启用依赖代理功能

ES6中 Promise的详细讲解

网站建设也会涉及商标侵权，需要注意些！

Leetcode算法训练日记 | day25

第23次修改了可删除可持久保存的前端html备忘录:增加了百度引擎

vue3中使用antv-S2表格（基础功能版）

React 第五十五节 Router 中 useAsyncError的使用详解

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

12.找到字符串中所有字母异位词

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

【Go语言基础【12】】指针：声明、取地址、解引用

招商蛇口 | 执笔CID，启幕低密生活新境

C# 表达式和运算符(求值顺序)