Skip to main content

People flow trajectory line

It supports adding passenger flow trajectories based on real-time point data, and can overlay heat maps to express the density of people flow.

show
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>People flow trajectory line</title>
  <style>
    * {
      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 type="module">
    let map = new mapmost.Map({
      container: 'map',
      style: "<your style url>",
      doubleClickZoom: false,
      center: [120.62038700000, 31.29425900000],
      zoom: 17.70172744,
      pitch: 49,
      bearing: -54.10626584095007,
      env3D: {
        envMap: '../example_data/hdr/WhiteBG_Ref_1K.hdr',
        exposure: 2.1,
      },
      userId: "***" // Authorization code
    });

    var clearTime; //Record timer
    var updateTrack; //Track line update function
    let coordinates; // Track line display range
    map.on('load', () => {
      fetch('../example_data/MS_geojson_4326/1.geojson')
        .then((response) => response.json())
        .then((data) => {
          let corrdsArr = data.features.map(item => ([...item.geometry.coordinates[0]])); //Trajectory line coordinates

          coordinates = [
            [120.6197603360585, 31.294470027390457, 13.2],
            [120.6204842425334, 31.29453587751171, 13.2],
            [120.62055679627873, 31.29382247164118, 13.2],
            [120.61973629012873, 31.29371477339817, 13.2]
          ]

          let models_obj = ["0F_ENTRANCE", "0F_FLOOR", "B1F_FLOOR", "B1F_OFFICE", "B1F_OTHERS", "B1F_XRAY", "B2F_FLOOR", "B2F_OFFICE", "B2F_OTHERS", "B3F_FLOOR", "B3F_OFFICE", "B3F_OTHERS"].map(item => ({
            type: 'glb',
            url: "../example_data/szdt/" + item + ".glb",
          }));

          let modelOptions = {
            id: 'model_id',
            type: 'model',
            models: models_obj,
            center: [120.62038700000, 31.29425900000, 0],
          };

          let lineOptions = {
            id: 'line',
            type: 'model',
            callback: function (group, layer) {
              let options = {
                resolution: 2048, // Canvas resolution
                range: coordinates, // Display the coordinates of the trajectory line area
                data: corrdsArr, // Position data of the trajectory line
                height: 13.5, // Display the height of the trajectory line area plane
                trackColor: "#63E8FF" // The color of the track line
              }

              //Add trajectory line
              layer.addTrackLines(options, function (updateTrackLines) {
                updateTrack = updateTrackLines;
              })
            }
          };

          map.addLayer(modelOptions);
          map.addLayer(lineOptions)
        });
    })

    let count = 1;
    map.on('click', function (e) {
      if (clearTime) {
        window.clearInterval(clearTime);
      }
      clearTime = setInterval(function () {
        let dataUrl = '../example_data/MS_geojson_4326/' + count + '.geojson';
        fetch(dataUrl)
          .then((response) => response.json())
          .then((data) => {
            let corrdsArr = data.features.map(item => ([...item.geometry.coordinates[0]]));
            let heatPoints = data.features.map(item => ([...item.geometry.coordinates[0][item.geometry.coordinates[0].length - 1], 30]));
            updateTrack(corrdsArr);
            count++;
            if (count >= 263) count = 1;
          });
      }, 1000 / 1);
    })
  </script>
</body>
</html>