批量模型加载与更新
基于坐标点位批量加载与更新模型,支持属性信息绑定和拾取操作,可用于实时客流表达。

<!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.4.1/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
let map = new mapmost.Map({
container: 'map',
style: "<your style url>",
center: [120.67571452827622, 31.319585766803186], // starting position [lng, lat]
zoom: 16, // starting zoom
pitch: 60, // starting pitch
bearing: -90, // starting bearing
env3D: {
envMap:"<your hdr url>",
},
userId: '***', // 授权码
});
let modelLayer;
let modelObject;
map.on('load', function () {
let models_obj = ["jinji_plaza_eastern_door_building","jinji_plaza_bridge",······].map((item) => ({
type: "glb",
url: "../../../../static/example_data/jjh_Scene/" + item + ".glb",
}));
let options = {
id: "model_id",
type: "model",
models: models_obj,
center: [120.67727020663829, 31.31997024841401],
callback: function (group, layer) {
modelLayer = layer;
let coord = [
{
id:"model0",
coordinate:[120.67694935425429, 31.318967640976844, 5]
},
{
id:"model1",
coordinate:[120.6762874003819, 31.31844583004173, 5]
},
······
];
let model = {
type: "glb",
url: "../../../../static/example_data/R2_1.glb",
};
layer.addInstancedModel( {
model: model,
data: coord,
},
function (model) {
modelObject = model;
setInterval(function () {
let coordinates = [
{
id:"model00",
coordinate:[120.67694935425429, 31.318967640976844, 5]
},
{
id:"model01",
coordinate:[120.6762874003819, 31.31844583004173, 5]
},
······
];
layer.updateInstancedModel({
model: model,
data: coordinates,
});
}, 1000);
}
);
},
};
map.addLayer(options);
map.on('click', (e) => {
let uid = modelLayer.getInstancedModelId(e.point, modelObject);
console.log('点击模型属性id:', uid);
});
})
</script>
</body>
</html>