Skip to main content

Add 3D label

It can construct a three-dimensional label effect expression and make the label face the screen in real time according to the needs.

The picture on the right shows the effect of using the label always facing the screen function.

showshow

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Three-dimensional label</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>
  <script src="https://delivery.mapmost.com/cdn/sdk/lib/html2canvas.min.js"></script>
</head>

<body>
  <div id="map"></div>
  <script>
    let map = new mapmost.Map({
      container: "map",
      style: "<your style url>",
      center: [120.67727020663829, 31.31997024841401],
      zoom: 16.810035105070947,
      pitch: 59.48725112156901,
      bearing: -54.10626584095007,
      env3D: {
        envMap: '../example_data/hdr/WhiteBG_Ref_1K.hdr',
        exposure: 2,
      },
      userId:"***", //Authorization code
    });

    let modelLayer;
    let allMesh = [];
    map.on("load", function () {
      let options = {
        id: "model_id",
        type: "model",
        funcRender: function (gl, matrix) {
          // Label always faces the camera
          // if (modelLayer) {
          //   modelLayer.renderMarker3D(allMesh)
          // }
        },
        callback: function (group, layer) {
          modelLayer = layer;
          let num = 1000;
          let points = getRandomPoints(num);

          let data = [];
          for (let j = 0; j < num; j++) {
            data.push({
              id: j,
              coordinate: points[j],
              rotationOffset: parseInt(Math.random() * 360 - 180) // Valid when the renderMarker3D() interface is not called
            });
          }

          //Add 3D label
          layer.addMarker3D(
            {
              width: 10,
              height: 10,
              element: createDom( "../example_data/pic/people.png"),
              data: data,
            },
            function (group) {
              allMesh.push(group);
            }
          );

          map.on("click", (e) => {

            // Get the attribute information bound to the label
            let info = layer.getMarker3DId(e.point, allMesh);
            new mapmost.Popup({ closeOnClick: false })
              .setLngLat([e.lngLat.lng, e.lngLat.lat])
              .setHTML('The person’s number is:' + info)
              .addTo(map);
          });
        },
      };
      map.addLayer(options);
    });

    //Get the location randomly
    function getRandomPoints(num) {
      let points = [];
      for (let i = 0; i < num; i++) {
        let lng = 120.67724161128183 + Math.random() / 100 - 0.0025;
        let lat = 31.319971739078824 + Math.random() / 100 - 0.0025;
        points.push([lng, lat, 6.5]);
      }
      return points;
    }

    //Create dom element
    function createDom(imageUrl) {
      const container = document.createElement("div");
      container.style.width = "300px";
      container.style.height = "200px";
      container.style.display = "flex";
      container.style.alignItems = "center";
      container.style.flexDirection = "row";
      // picture dom
      const element = document.createElement("div");
      element.style.width = "70%";
      element.style.height = "100%";
      element.style.backgroundImage = "url(" + imageUrl + ")";
      element.style.backgroundRepeat = "no-repeat";
      element.style.backgroundSize = "100% 100%";
      element.style.margin = "0px";
      element.style.backgroundPosition = "center 0";
      element.style.zIndex = -999;
      container.appendChild(element);
      return container;
    }
  </script>
</body>
</html>