Skip to main content

Batch model singulation and identification

Models are loaded and updated in batches based on coordinate points, and model attributes can be updated based on unique identifiers, which is suitable for model singulation and identification.

show
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Batch model singulation and identification</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.16.0/mapmost-webgl-min.js"></script>
  </head>

  <body>
    <div id="map"></div>
  <div id="btn" class="btn">
    <button onclick="updateAll()">Overall replacement update</button>
    <button onclick="updateById()">Update attributes based on 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: '***', // Authorization code
    });

    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);
    });

    // Replace and update the model as a whole
    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,
      });
    }

    //Update attributes based on id
    function updateById() {
      let data = [
        {
          id: 'model1',
          color: '#aabb00',
          rotation: [90, 0, 0]
        },
      ];
      myLayer.updateInstancedModelById({
        model: myModel,
        data: data,
      });
    }
    </script>
  </body>
</html>