气象雷达

SDK 提供了气象雷达图层的显示功能，支持雷达图像的加载、更新和播放，帮助用户查看实时气象信息。

功能特性

雷达图像显示：显示气象雷达图像
动态更新：支持雷达图像的动态更新
动画播放：支持雷达图像序列的动画播放
图层管理：完整的图层添加、更新、删除功能

基础用法

获取雷达数据

javascript

// 获取雷达数据列表
const response = await sdk.api.getRadarData();
const data = await response.json();

// data.data 是一个数组，包含多个雷达图像
// 每个对象包含 filePath 属性（图像URL）
console.log("雷达数据:", data.data);

添加雷达图层

javascript

// 1. 获取雷达数据
const response = await sdk.api.getRadarData();
const data = await response.json();
const radarData = data.data;

// 2. 设置第一个雷达图像的URL
sdk.rasterManager.rasterSourceUrl = radarData[0].filePath;

// 3. 添加雷达图层
await sdk.rasterManager.addRasterLayer(
  "radar-layer",      // 图层ID
  "radar-source",     // 数据源ID
  "radar"             // 类型：radar
);

更新雷达图层

javascript

// 更新雷达图像
await sdk.rasterManager.updateRasterLayer(
  "radar-source",           // 数据源ID
  radarData[1].filePath,    // 新的图像URL
  "radar"                   // 类型
);

删除雷达图层

javascript

sdk.rasterManager.removeRasterLayer(
  "radar-layer",    // 图层ID
  "radar-source"    // 数据源ID
);

完整示例

示例1：基础使用

javascript

let sdk;
let radarData = [];

async function initMap() {
  sdk = new navMap.MapSDK({
    container: "map",
    center: [104, 35], // 中国中心位置
    zoom: 4,
  });

  sdk.on("loadComplete", () => {
    setupRadar();
  });
}

async function setupRadar() {
  try {
    // 1. 获取雷达数据
    const response = await sdk.api.getRadarData();
    const result = await response.json();
    radarData = result.data || [];

    if (radarData.length === 0) {
      console.warn("没有雷达数据");
      return;
    }

    // 2. 设置第一个雷达图像
    sdk.rasterManager.rasterSourceUrl = radarData[0].filePath;

    // 3. 添加雷达图层
    await sdk.rasterManager.addRasterLayer(
      "radar-layer",
      "radar-source",
      "radar"
    );

    console.log("雷达图层已添加");
  } catch (error) {
    console.error("加载雷达数据失败:", error);
  }
}

initMap();

示例2：雷达动画播放

javascript

let sdk;
let radarData = [];
let playInterval = null;
let currentIndex = 0;

async function setupRadar() {
  // 获取雷达数据
  const response = await sdk.api.getRadarData();
  const result = await response.json();
  radarData = result.data || [];

  if (radarData.length === 0) return;

  // 添加第一个雷达图像
  sdk.rasterManager.rasterSourceUrl = radarData[0].filePath;
  await sdk.rasterManager.addRasterLayer(
    "radar-layer",
    "radar-source",
    "radar"
  );
}

// 开始播放动画
function startRadarAnimation() {
  if (playInterval) return;

  currentIndex = 0;
  playInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % radarData.length;
    
    sdk.rasterManager.updateRasterLayer(
      "radar-source",
      radarData[currentIndex].filePath,
      "radar"
    );
  }, 2000); // 每2秒切换一次
}

// 停止播放动画
function stopRadarAnimation() {
  if (playInterval) {
    clearInterval(playInterval);
    playInterval = null;
  }
}

// 暂停/继续播放
function toggleRadarAnimation() {
  if (playInterval) {
    stopRadarAnimation();
  } else {
    startRadarAnimation();
  }
}

示例3：带控制面板的雷达显示

html

<!DOCTYPE html>
<html>
<head>
  <title>气象雷达示例</title>
</head>
<body>
  <div id="map"></div>
  
  <!-- 控制面板 -->
  <div class="controls">
    <button onclick="loadRadar()">加载雷达</button>
    <button onclick="startAnimation()">开始播放</button>
    <button onclick="stopAnimation()">停止播放</button>
    <button onclick="previousFrame()">上一帧</button>
    <button onclick="nextFrame()">下一帧</button>
    <span id="frame-info">0 / 0</span>
  </div>

  <script>
    let sdk;
    let radarData = [];
    let currentIndex = 0;
    let playInterval = null;

    async function initMap() {
      sdk = new navMap.MapSDK({
        container: "map",
        center: [104, 35],
        zoom: 4,
      });

      sdk.on("loadComplete", () => {
        loadRadar();
      });
    }

    async function loadRadar() {
      try {
        const response = await sdk.api.getRadarData();
        const result = await response.json();
        radarData = result.data || [];

        if (radarData.length === 0) {
          alert("没有雷达数据");
          return;
        }

        currentIndex = 0;
        sdk.rasterManager.rasterSourceUrl = radarData[0].filePath;
        await sdk.rasterManager.addRasterLayer(
          "radar-layer",
          "radar-source",
          "radar"
        );

        updateFrameInfo();
      } catch (error) {
        console.error("加载雷达失败:", error);
      }
    }

    function startAnimation() {
      if (playInterval) return;
      
      playInterval = setInterval(() => {
        nextFrame();
      }, 2000);
    }

    function stopAnimation() {
      if (playInterval) {
        clearInterval(playInterval);
        playInterval = null;
      }
    }

    async function nextFrame() {
      if (radarData.length === 0) return;
      currentIndex = (currentIndex + 1) % radarData.length;
      await updateRadarFrame();
    }

    async function previousFrame() {
      if (radarData.length === 0) return;
      currentIndex = (currentIndex - 1 + radarData.length) % radarData.length;
      await updateRadarFrame();
    }

    async function updateRadarFrame() {
      await sdk.rasterManager.updateRasterLayer(
        "radar-source",
        radarData[currentIndex].filePath,
        "radar"
      );
      updateFrameInfo();
    }

    function updateFrameInfo() {
      document.getElementById("frame-info").textContent = 
        `${currentIndex + 1} / ${radarData.length}`;
    }

    initMap();
  </script>
</body>
</html>

API 参考

getRadarData()

获取雷达数据列表。

返回：

Promise<Response> - 包含雷达数据的响应对象

数据格式：

javascript

{
  data: [
    {
      filePath: "https://example.com/radar/image1.png",
      timestamp: "2025-01-01T12:00:00Z",
      // ... 其他属性
    },
    // ... 更多雷达图像
  ],
}

示例：

javascript

const response = await sdk.api.getRadarData();
const data = await response.json();
const radarImages = data.data;

addRasterLayer()

添加雷达图层。

参数：

layerId (string): 图层ID
sourceId (string): 数据源ID
meteoType (string): 类型，使用 "radar" 表示雷达

示例：

javascript

await sdk.rasterManager.addRasterLayer(
  "radar-layer",
  "radar-source",
  "radar"
);

updateRasterLayer()

更新雷达图层图像。

参数：

sourceId (string): 数据源ID
newUrl (string): 新的图像URL
meteoType (string): 类型，使用 "radar"

示例：

javascript

await sdk.rasterManager.updateRasterLayer(
  "radar-source",
  "https://example.com/radar/new-image.png",
  "radar"
);

removeRasterLayer()

删除雷达图层。

参数：

layerId (string): 图层ID
sourceId (string): 数据源ID

示例：

javascript

sdk.rasterManager.removeRasterLayer(
  "radar-layer",
  "radar-source"
);

rasterSourceUrl

设置或获取雷达图像URL。

示例：

javascript

// 设置URL
sdk.rasterManager.rasterSourceUrl = "https://example.com/radar/image.png";

// 获取URL
const url = sdk.rasterManager.rasterSourceUrl;

雷达区域

雷达图像会自动定位到中国区域：

经度范围：73°E - 135°E
纬度范围：12.2°N - 54.2°N

这个区域会在添加雷达图层时自动设置。

动画播放最佳实践

1. 预加载图像

javascript

// 预加载所有雷达图像
const images = [];
for (const radar of radarData) {
  const img = new Image();
  img.src = radar.filePath;
  images.push(img);
}

// 等待所有图像加载完成
await Promise.all(images.map(img => {
  return new Promise((resolve) => {
    img.onload = resolve;
    img.onerror = resolve; // 即使失败也继续
  });
}));

2. 控制播放速度

javascript

let playSpeed = 2000; // 2秒

function setPlaySpeed(speed) {
  playSpeed = speed;
  if (playInterval) {
    stopAnimation();
    startAnimation();
  }
}

3. 循环播放

javascript

function playLoop() {
  currentIndex = (currentIndex + 1) % radarData.length;
  
  if (currentIndex === 0) {
    // 一轮播放完成
    console.log("播放完成，重新开始");
  }
  
  updateRadarFrame();
}

注意事项

图像格式：确保雷达图像URL可访问且格式正确
跨域问题：注意图像的跨域访问权限
性能优化：大量图像时考虑预加载和缓存
内存管理：不需要时及时删除图层
区域限制：雷达图像默认显示在中国区域范围内

常见问题

Q: 雷达图像不显示？

A: 检查以下几点：

图像URL是否正确
图像是否可以访问（跨域问题）
是否调用了 addRasterLayer() 方法
地图是否已加载完成

Q: 如何自定义雷达显示区域？

A: 雷达区域是固定的（中国区域），如果需要自定义区域，可以使用其他气象类型：

javascript

// 使用其他类型可以自定义区域
await sdk.rasterManager.addRasterLayer(
  "custom-layer",
  "custom-source",
  "other" // 非 radar 类型
);

Q: 如何实现雷达图像的透明度控制？

A: 可以通过修改图层样式：

javascript

sdk.setPaintProperty("radar-layer", "raster-opacity", 0.7);

Q: 动画播放卡顿怎么办？

A: 尝试以下优化：

减少图像数量
增加播放间隔时间
预加载图像
降低图像分辨率

气象雷达 ​

功能特性 ​

基础用法 ​

获取雷达数据 ​

添加雷达图层 ​

更新雷达图层 ​

删除雷达图层 ​

完整示例 ​

示例1：基础使用 ​

示例2：雷达动画播放 ​

示例3：带控制面板的雷达显示 ​

API 参考 ​

getRadarData() ​

addRasterLayer() ​

updateRasterLayer() ​

removeRasterLayer() ​

rasterSourceUrl ​

雷达区域 ​

动画播放最佳实践 ​

1. 预加载图像 ​

2. 控制播放速度 ​

3. 循环播放 ​

注意事项 ​

常见问题 ​

Q: 雷达图像不显示？ ​

Q: 如何自定义雷达显示区域？ ​

Q: 如何实现雷达图像的透明度控制？ ​

Q: 动画播放卡顿怎么办？ ​

气象雷达

功能特性

基础用法

获取雷达数据

添加雷达图层

更新雷达图层

删除雷达图层

完整示例

示例1：基础使用

示例2：雷达动画播放

示例3：带控制面板的雷达显示

API 参考

getRadarData()

addRasterLayer()

updateRasterLayer()

removeRasterLayer()

rasterSourceUrl

雷达区域

动画播放最佳实践

1. 预加载图像

2. 控制播放速度

3. 循环播放

注意事项

常见问题

Q: 雷达图像不显示？

Q: 如何自定义雷达显示区域？

Q: 如何实现雷达图像的透明度控制？

Q: 动画播放卡顿怎么办？