跳到主要内容
版本:9.6.0

3DGS模型坐标拾取

通过鼠标单击事件返回值e.coord获取3DGS数据坐标。

show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>3DGS模型坐标拾取</title>
<style>
body {
margin: 0;
padding: 0;
}

#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}

.control-button:hover {
background-color: rgba(128, 128, 128, 0.8);
}

.info {
width: 120px;
height: 50px;
background: rgba(97, 93, 93, 0);
color: #ff0000;
border-radius: 4px;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}

</style>
<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.6.0/mapmost-webgl-min.js"></script>
</head>

<body>
<div id="map"></div>
<script>
var map = new mapmost.Map({
style: '<your style url>',
container: 'map',
center: [120.78575270115562, 31.41174980621166],
zoom: 16.9,
bearing: -9.598,
pitch: 52.989,
sky: 'light',
userId:'***', // 授权码
});

let modelLayer;
map.on('load', function () {

// 添加3DGS数据
map.addLayer({
id: 'gs-3d-layer',
type: '3DGS',
url: './building.splat',
coord: [121.6857884, 30.6702618, -30],
});

// 添加三维模型图层
let options = {
id: 'model_id',
type: 'model',
funcRender: function (gl, matrix) {
if (Layer) {
Layer.renderMarker(gl, matrix);
}
},
callback: function (group, layer) {
modelLayer = layer;
},
};
map.addLayer(options);
});

// 鼠标点击事件
map.on('click', (e) => {

// 获取拾取的坐标点
const coor = e.coord;

// 添加标记点
modelLayer.addPoints({
type: 'cube',
size: 0.4,
color: '#00ff00',
data: [
{
coordinate: coor,
},
],
});

// 添加标签
let dom = document.createElement('div');
dom.className = 'info';
dom.innerHTML = coor;
modelLayer.addMarker({
id: 'marker' + Math.random(10000),
data: [
{
name: 'coord',
element: dom,
position: [coor[0], coor[1], coor[2] + 1],
},
],
});
});
</script>
</body>
</html>