将天地图变成奇景：动态波纹效果揭示地理奥秘

2024-01-18 21:48:10

天地图动态波纹效果：让您的地图栩栩如生

天地图是中国重要的地理信息服务平台，为各行各业提供丰富的数据和服务。为了增强地图的可视化效果，添加动态波纹效果是一个妙招，它能模拟水波流动，让地图更逼真，更利于理解地形和水系分布。

波纹效果的实现步骤

准备工作

安装天地图 SDK
使用支持 WebGL 的浏览器（如 Chrome、Firefox、Edge）
准备文本编辑器

创建 HTML 文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="天地图SDK.js"></script>
  <script src="波纹效果.js"></script>
</head>
<body>
  <div id="map"></div>
  <script>
    // 创建地图对象
    var map = new T.Map('map');
    // 设置地图中心和缩放级别
    map.centerAndZoom(new T.LatLng(39.9042, 116.4074), 12);
    // 创建波纹效果对象
    var waveEffect = new WaveEffect(map);
    // 启用波纹效果
    waveEffect.enable();
  </script>
</body>
</html>

创建波纹效果脚本

// 波纹效果类
class WaveEffect {
  constructor(map) {
    this.map = map;
    // 创建画布
    this.canvas = document.createElement('canvas');
    // 设置画布样式
    this.canvas.style.position = 'absolute';
    this.canvas.style.top = '0';
    this.canvas.style.left = '0';
    this.canvas.style.width = '100%';
    this.canvas.style.height = '100%';
    // 获取画布上下文
    this.ctx = this.canvas.getContext('2d');
    // 添加画布到地图容器
    map.getContainer().appendChild(this.canvas);
    // 绑定事件监听器
    map.on('moveend', this.onMoveEnd.bind(this));
    map.on('zoomend', this.onZoomEnd.bind(this));
  }
  // 启用波纹效果
  enable() {
    this.enabled = true;
    this.draw();
  }
  // 禁用波纹效果
  disable() {
    this.enabled = false;
  }
  // 地图移动结束时触发
  onMoveEnd() {
    this.draw();
  }
  // 地图缩放结束时触发
  onZoomEnd() {
    this.draw();
  }
  // 绘制波纹效果
  draw() {
    // 获取地图中心点和缩放级别
    var center = this.map.getCenter();
    var zoom = this.map.getZoom();
    // 设置波纹效果参数
    this.waveParams = {
      center: center,
      zoom: zoom,
      radius: 100,
      speed: 0.5,
      amplitude: 0.1
    };
    // 清空画布
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    // 绘制波纹
    this.drawWave();
    // 循环调用 draw 方法
    if (this.enabled) {
      requestAnimationFrame(this.draw.bind(this));
    }
  }
  // 绘制波纹
  drawWave() {
    // 设置画笔样式
    this.ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
    // 绘制圆形波纹
    this.ctx.beginPath();
    this.ctx.arc(this.waveParams.center.lng, this.waveParams.center.lat, this.waveParams.radius, 0, 2 * Math.PI);
    this.ctx.fill();
    // 更新波纹效果参数
    this.waveParams.radius += this.waveParams.speed;
    this.waveParams.amplitude *= 0.99;
    // 判断波纹效果是否消失
    if (this.waveParams.amplitude < 0.01) {
      this.enabled = false;
    }
  }
}