Skip to main content

Batch model loading and updating

Batch loading and updating of models based on coordinate points supports attribute information binding and picking operations, and can be used to express real-time passenger flow.

show
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Real-time customer flow</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>
    <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: '***', // Authorization code
      });

      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('Click model attribute id:', uid);
        });
      })
    </script>
  </body>
</html>