跳到主要内容
版本：9.2.0

添加三维立体标签

可构建具有三维立体感的标签效果表达，并可根据需求使标签实时面向屏幕。

右侧图片为使用标签始终面向屏幕功能的效果。

showshow

<!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.2.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:"***", // 授权码
    });

    let modelLayer;
    let allMesh = [];
    map.on("load", function () {
      let options = {
        id: "model_id",
        type: "model",
        funcRender: function (gl, matrix) {
          // 标签始终面向相机
          // 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) // 不调用 renderMarker3D() 接口时生效
            });
          }

          // 添加三维立体标签
          layer.addMarker3D(
            {
              width: 10,
              height: 10,
              element: createDom( "../example_data/pic/people.png"),
              data: data,
            },
            function (group) {
              allMesh.push(group);
            }
          );

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

            // 获取标签绑定的属性信息
            let info = layer.getMarker3DId(e.point, allMesh);
            new mapmost.Popup({ closeOnClick: false })
              .setLngLat([e.lngLat.lng, e.lngLat.lat])
              .setHTML('该人员编号为：' + info)
              .addTo(map);
          });
        },
      };
      map.addLayer(options);
    });

    // 随机获取位置
    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;
    }

    // 创建dom元素
    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";
      // 图片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>