跳到主要内容
版本：9.4.1

加载火焰效果

可根据图片生成动态火焰效果。

show
<!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.4.1/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.74325652916878, 31.309846027685396, 0],
      zoom: 16.810035105070947,
      pitch: 59.48725112156901,
      bearing: -54.10626584095007,
      userId: "***", // 授权码
    });

    map.on("load", function () {
      let options = {
        id: "model_id",
        type: "model",
        callback: function (group, layer) {
          // 添加火焰
          layer.addFlame(
            {
              coordinate: [120.74325652916878, 31.309846027685396, 0], // 火焰底部中心放置的位置
              size: [100, 100, 100], // 火焰大小
              imgUrl: "./Fire.png" // 火焰贴图路径
            }
          );
        },
      };
      map.addLayer(options);
    });
  </script>
</body>
</html>