跳到主要内容
版本:9.3.0

批量模型单体化和标识

基于坐标点位批量加载与更新模型,可根据唯一标识符更新模型属性,适用于模型单体化和标识。

show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>批量模型单体化和标识</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<style>
body {
margin: 0;
padding: 0;
}

#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.3.0/mapmost-webgl-min.js"></script>
</head>

<body>
<div id="map"></div>
<div id="btn" class="btn">
<button onclick="updateAll()">整体替换更新</button>
<button onclick="updateById()">根据id更新属性</button>
</div>
<script>
let map = new mapmost.Map({
container: 'map',
style: '<your style url>',
center: [120.6788256229782, 31.32104136961786],
zoom: 20.855798540767896,
pitch: 70.87150991394864,
bearing: -92.94586066611498,
userId: '***', // 授权码
});

let groups = [];
let myLayer,myModel;

map.on('load', function () {

let options = {
id: 'model_id',
type: 'model',
center: [120.67727020663829, 31.31997024841401],
callback: function (group, layer) {
myLayer = layer;

let model = {
type: 'glb',
url: '../example_data/models/camera-sj/QJ01_1.glb',
};

let data = [
{
id: 'model0',
coordinate: [120.67887550366743, 31.321024496000874, 0],
},
{
id: 'model1',
coordinate: [120.67887550366743, 31.321024496000874, 5],
},
······
];

layer.addInstancedModel(
{
model: model,
data: data,
},
function (model) {
myModel = model;
groups.push(model);
}
);
},
};

map.addLayer(options);
});

// 整体替换更新模型
function updateAll() {
let data = [
{
id: 'model0',
coordinate: [120.67887550366743, 31.321024496000874, 0],
rotation:[0,90,0],
color:'#ee0000'
},
{
id: 'model1',
coordinate: [120.67887550366743, 31.321024496000874, 5],
rotation:[90,0,0],
},
······
];

myLayer.updateInstancedModel({
model: myModel,
data: data,
});
}

// 根据id更新属性
function updateById() {
let data = [
{
id: 'model1',
color: '#aabb00',
rotation: [90, 0, 0]
},
];
myLayer.updateInstancedModelById({
model: myModel,
data: data,
});
}
</script>
</body>
</html>