3D高斯溅射（3DGS）技术带来了前所未有的逼真三维场景，但在实际三维场景开发中，我们却常常遇到这样的困境：
-
性能瓶颈：大场景加载缓慢，无法流畅运行？
-
融合难题：多源数据格式不一，难以无缝整合？
-
交互薄弱：空间定位不准、测量不便，业务逻辑难实现？
......
Mapmost SDK for WebGL 提供了完整的解决方案。文中附有即用代码，让您从数据到应用，一步到位，高效构建企业级数字孪生应用！
轻松加载大场景3DGS数据
你要做一个城市级的三维项目，需要加载超大规模的3DGS数据，而市面上的开发引擎却只能处理小范围场景。
Mapmost SDK for WebGL可以轻松应对100平方公里的大场景！多分辨率表示与LOD（细节层次）技术能让大场景保持流畅的高精度渲染。
在二次开发中，开发者仅需简单几行代码，就能轻松实现数据加载功能。
go
//加载3DGS数据
map.addLayer({
id: 'gs-3d-layer',
type: '3DGS',
isLOD: true,//是否开启LOD
coord: [121.68, 30.67, 0], //建模原点坐标
url: 'http://ip:8080/3DGS/15-18_level_splat/', //Mapmost Studio发布的3DGS服务地址
});这段代码既支持单个3DGS模型加载也支持大场景下3DGS LOD服务的加载（Mapmost Studio提供一键服务发布能力）
添加图片注释，不超过 140 字（可选）
多源数据融合，构建全要素三维场景
三维场景通常需要多种数据的组合。 Mapmost SDK 支持将3DGS 与三维模型、倾斜摄影、影像地图、矢量数据等无缝融合，构建真正"全要素"的数字孪生场景。
详细代码如下：
php
//加载3DGS数据
map.addLayer({
id: 'gs-3d-layer',
type: '3DGS',
isLOD: true,//是否开启LOD
coord: [121.68, 30.67, 0], //建模原点坐标
url: 'http://ip:8080/demos/3DGS/models/15-18_level_splat/', //3DGS服务地址
});
//加载倾斜数据
map.addLayer({
id: 'tile-3d-layer',
type: '3DTiles',
data: 'http://ip:8000/ALL_3DTiles/tileset.json', //3DTiles服务地址
});
//加载3D模型数据
map.addLayer({
id: 'model_id',
type: 'model',
models: [{
type: 'glb',
url: "http://ip:8000/models/car.glb"
}],
center: [120.78493768705789, 31.413810498185043],
callback: function (group, layer) {
//添加地理围栏三维特效
modellayer.addGeoFencing({
type: "fade",
color: "#ffb520",
speed: 0.01,
opacity: 0.8,
height: 20.6,
data: {
coordinate: [[120.7312621924155, 31.306584013529033,], [120.73127297245611, 31.306360383210475], *** ,[120.7321516898217, 31.3065900469539]],
}
});
//添加特效圆
modellayer.addCircle({
type: "radar",
color: "#31ffff",
radius: 10,
isCW: true,
opacity: 0.8,
center: [120.73230705870971, 31.306262219878096, 5.978198955640408]
});
//添加POI
let bt_div = document.createElement('div');
bt_div.className = 'poi-layer div_bt';//POI标签样式
bt_div.innerHTML = '斜塘老街-二期';
modellayer.addMarker({
id: 'poi',
data: [{
element: bt_div,
position: [120.7317214588758, 31.306576289698263, 17.885578184139823],
}]
});
},
});Mapmost构建的场景实现了不同数据的位置匹配，不用担心数据打架、渲染错乱的问题，让你的场景更真实、更有层次。
添加图片注释，不超过 140 字（可选）
精准定位与兴趣点展示，让场景"说话"
在三维场景中，你可以轻松获取任意点的精确位置，并快速添加信息点（POI）。无论是旅游导览、设施管理，还是地块标注，都能轻松实现。
Step1：在二次开发中，通过监听鼠标点击事件，开发者能快速获取 3DGS 数据中用户点击位置的三维坐标：
javascript
map.on('click', (e) => {
const coor = e.coord;
console.log(e.coord);//输出[经度,维度,高度]数组
});Step2：获取坐标后，便能关联并展示该位置的 POI 信息。开发者可以自由定制 POI，从热门地标到小众景点，都能通过代码添加到基于 3DGS 数据构建的地图中：
ini
map.on('click', (e) => {
//获取拾取坐标
const coor = e.coord;
//放个小方块标注拾取位置
modelLayer.addPoints({
type: 'cube',
size: 0.4,
color: '#00ff00',
data: [{coordinate: coor}],
});
//飞行定位到拾取位置
map.flyTo({ center: coor, zoom: 20 });
//在拾取位置创建POI
let yc_div = document.createElement('div');
yc_div.className = 'div_bt';
yc_div.innerHTML = '您点击了这！';
modellayer.addMarker({
id: 'poi',
data: [{
element: yc_div,
position: [coor[0], coor[1], coor[2] + 1]
}],
});
});
添加图片注释，不超过 140 字（可选）
三维空间量测，轻松获取关键信息
在三维场景中快速测量距离、计算面积？ Mapmost SDK 内置三维量测工具，支持在 3DGS 数据、倾斜模型、矢量数据之间进行精准测量。
首先需要在标签引入三维量测插件。
xml
<head>
<script src="https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-measure3D/v1.1.0/mapmost-webgl-measure3D.js"></script>
</head> js模块里面添加如下代码，用户只需两行代码开启距离或者面积量测。
arduino
//量测工具初始化
let measure = new Measure3D(map);
// 开启距离测量
measure.setType("distance");
// measure.setType("area"); //开启面积测量量测结果实时显示，数据精确可靠，帮助用户快速获取 3DGS 数据中的关键空间信息，为基于 3DGS 数据的项目规划、资源分配等决策提供有力的数据支撑。
添加图片注释，不超过 140 字（可选）
至此，一个完整的三维应用场景即开发完成。从数据的无缝加载、多源融合，到精准的交互与量测，Mapmost SDK for WebGL 已将3DGS技术的应用门槛大幅降低，让您能更专注于业务逻辑与创新，驱动数字孪生价值真正落地。
添加图片注释，不超过 140 字（可选）
免费试用，开启3D开发新体验！
Mapmost SDK for WebGL 全面开放3DGS功能，并提供数据、服务、交互、模型、可视化、特效、分析共7⼤类400+API，现在申请即可免费体验！
👉申请免费试用：www.mapmost.com/#/layout/we...
👉查看详细操作文档：www.mapmost.com/mapmost\_do...