你的3DGS数据为何难以用在项目里？Web端开发实战指南

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...