Weather Radar

The SDK provides weather radar layer display functionality, supporting radar image loading, updating, and playback to help users view real-time weather information.

Features

Radar Image Display: Display weather radar images
Dynamic Updates: Support dynamic updates of radar images
Animation Playback: Support animation playback of radar image sequences
Layer Management: Complete layer add, update, delete functionality

Basic Usage

Get Radar Data

javascript

// Get radar data list
const response = await sdk.api.getRadarData();
const data = await response.json();

// data.data is an array containing multiple radar images
// Each object contains filePath property (image URL)
console.log("Radar data:", data.data);

Add Radar Layer

javascript

// 1. Get radar data
const response = await sdk.api.getRadarData();
const data = await response.json();
const radarData = data.data;

// 2. Set first radar image URL
sdk.rasterManager.rasterSourceUrl = radarData[0].filePath;

// 3. Add radar layer
await sdk.rasterManager.addRasterLayer(
  "radar-layer",      // Layer ID
  "radar-source",     // Source ID
  "radar"             // Type: radar
);

Update Radar Layer

javascript

// Update radar image
await sdk.rasterManager.updateRasterLayer(
  "radar-source",           // Source ID
  radarData[1].filePath,    // New image URL
  "radar"                   // Type
);

Delete Radar Layer

javascript

sdk.rasterManager.removeRasterLayer(
  "radar-layer",    // Layer ID
  "radar-source"    // Source ID
);

Complete Examples

Example 1: Basic Usage

javascript

let sdk;
let radarData = [];

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

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

async function setupRadar() {
  try {
    // 1. Get radar data
    const response = await sdk.api.getRadarData();
    const result = await response.json();
    radarData = result.data || [];

    if (radarData.length === 0) {
      console.warn("No radar data");
      return;
    }

    // 2. Set first radar image
    sdk.rasterManager.rasterSourceUrl = radarData[0].filePath;

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

    console.log("Radar layer added");
  } catch (error) {
    console.error("Failed to load radar data:", error);
  }
}

initMap();

Example 2: Radar Animation Playback

javascript

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

async function setupRadar() {
  // Get radar data
  const response = await sdk.api.getRadarData();
  const result = await response.json();
  radarData = result.data || [];

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

  // Add first radar image
  sdk.rasterManager.rasterSourceUrl = radarData[0].filePath;
  await sdk.rasterManager.addRasterLayer(
    "radar-layer",
    "radar-source",
    "radar"
  );
}

// Start animation playback
function startRadarAnimation() {
  if (playInterval) return;

  currentIndex = 0;
  playInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % radarData.length;
    
    sdk.rasterManager.updateRasterLayer(
      "radar-source",
      radarData[currentIndex].filePath,
      "radar"
    );
  }, 2000); // Switch every 2 seconds
}

// Stop animation playback
function stopRadarAnimation() {
  if (playInterval) {
    clearInterval(playInterval);
    playInterval = null;
  }
}

// Pause/resume playback
function toggleRadarAnimation() {
  if (playInterval) {
    stopRadarAnimation();
  } else {
    startRadarAnimation();
  }
}

Example 3: Radar Display with Control Panel

html

<!DOCTYPE html>
<html>
<head>
  <title>Weather Radar Example</title>
</head>
<body>
  <div id="map"></div>
  
  <!-- Control Panel -->
  <div class="controls">
    <button onclick="loadRadar()">Load Radar</button>
    <button onclick="startAnimation()">Start Playback</button>
    <button onclick="stopAnimation()">Stop Playback</button>
    <button onclick="previousFrame()">Previous Frame</button>
    <button onclick="nextFrame()">Next Frame</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("No radar data");
          return;
        }

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

        updateFrameInfo();
      } catch (error) {
        console.error("Failed to load radar:", 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 Reference

getRadarData()

Get radar data list.

Returns:

Promise<Response> - Response object containing radar data

Data Format:

javascript

{
  data: [
    {
      filePath: "https://example.com/radar/image1.png",
      timestamp: "2025-01-01T12:00:00Z",
      // ... other properties
    },
    // ... more radar images
  ],
}

Example:

javascript

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

addRasterLayer()

Add radar layer.

Parameters:

layerId (string): Layer ID
sourceId (string): Source ID
meteoType (string): Type, use "radar" for radar

Example:

javascript

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

updateRasterLayer()

Update radar layer image.

Parameters:

sourceId (string): Source ID
newUrl (string): New image URL
meteoType (string): Type, use "radar"

Example:

javascript

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

removeRasterLayer()

Delete radar layer.

Parameters:

layerId (string): Layer ID
sourceId (string): Source ID

Example:

javascript

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

rasterSourceUrl

Set or get radar image URL.

Example:

javascript

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

// Get URL
const url = sdk.rasterManager.rasterSourceUrl;

Radar Region

Radar images automatically position to China region:

Longitude Range: 73°E - 135°E
Latitude Range: 12.2°N - 54.2°N

This region is automatically set when adding radar layer.

Animation Playback Best Practices

1. Preload Images

javascript

// Preload all radar images
const images = [];
for (const radar of radarData) {
  const img = new Image();
  img.src = radar.filePath;
  images.push(img);
}

// Wait for all images to load
await Promise.all(images.map(img => {
  return new Promise((resolve) => {
    img.onload = resolve;
    img.onerror = resolve; // Continue even if fails
  });
}));

2. Control Playback Speed

javascript

let playSpeed = 2000; // 2 seconds

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

3. Loop Playback

javascript

function playLoop() {
  currentIndex = (currentIndex + 1) % radarData.length;
  
  if (currentIndex === 0) {
    // One cycle complete
    console.log("Playback complete, restarting");
  }
  
  updateRadarFrame();
}

Notes

Image Format: Ensure radar image URLs are accessible and format is correct
Cross-origin Issues: Pay attention to cross-origin access permissions for images
Performance Optimization: Consider preloading and caching for large numbers of images
Memory Management: Delete layers promptly when not needed
Region Limits: Radar images default to display within China region range

Common Questions

Q: Radar images not displaying?

A: Check the following:

Whether image URL is correct
Whether image is accessible (cross-origin issues)
Whether addRasterLayer() method was called
Whether map has finished loading

Q: How to customize radar display region?

A: Radar region is fixed (China region). If you need custom region, you can use other weather types:

javascript

// Using other types allows custom region
await sdk.rasterManager.addRasterLayer(
  "custom-layer",
  "custom-source",
  "other" // Non-radar type
);

Q: How to implement radar image opacity control?

A: Can modify layer style:

javascript

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

Q: What to do if animation playback is laggy?

A: Try the following optimizations:

Reduce number of images
Increase playback interval time
Preload images
Reduce image resolution

Weather Radar ​

Features ​

Basic Usage ​

Get Radar Data ​

Add Radar Layer ​

Update Radar Layer ​

Delete Radar Layer ​

Complete Examples ​

Example 1: Basic Usage ​

Example 2: Radar Animation Playback ​

Example 3: Radar Display with Control Panel ​

API Reference ​

getRadarData() ​

addRasterLayer() ​

updateRasterLayer() ​

removeRasterLayer() ​

rasterSourceUrl ​

Radar Region ​

Animation Playback Best Practices ​

1. Preload Images ​

2. Control Playback Speed ​

3. Loop Playback ​

Notes ​

Common Questions ​

Q: Radar images not displaying? ​

Q: How to customize radar display region? ​

Q: How to implement radar image opacity control? ​

Q: What to do if animation playback is laggy? ​

Weather Radar

Features

Basic Usage

Get Radar Data

Add Radar Layer

Update Radar Layer

Delete Radar Layer

Complete Examples

Example 1: Basic Usage

Example 2: Radar Animation Playback

Example 3: Radar Display with Control Panel

API Reference

getRadarData()

addRasterLayer()

updateRasterLayer()

removeRasterLayer()

rasterSourceUrl

Radar Region

Animation Playback Best Practices

1. Preload Images

2. Control Playback Speed

3. Loop Playback

Notes

Common Questions

Q: Radar images not displaying?

Q: How to customize radar display region?

Q: How to implement radar image opacity control?

Q: What to do if animation playback is laggy?