在 Web 地图上可视化遥感数据：以芜湖市为例

文章目录

[在 Web 地图上可视化遥感数据：以芜湖市为例](#在 Web 地图上可视化遥感数据：以芜湖市为例)
- 一、整体技术方案
- 二、数据准备
- - [1. 获取芜湖市行政区划（GeoJSON）](#1. 获取芜湖市行政区划（GeoJSON）)
  - [2. 准备遥感影像（PNG 格式）](#2. 准备遥感影像（PNG 格式）)
- 三、前端页面开发
- - [1. 项目结构](#1. 项目结构)
  - [2. HTML 结构（`index.html`）](#2. HTML 结构（index.html）)
  - [3. 样式（`style.css`）](#3. 样式（style.css）)
  - [4. 地图逻辑（`script.js`）](#4. 地图逻辑（script.js）)
- [四、部署到 GitHub Pages](#四、部署到 GitHub Pages)
- - [步骤 1：创建 GitHub 仓库](#步骤 1：创建 GitHub 仓库)
  - [步骤 2：推送代码](#步骤 2：推送代码)
  - [步骤 3：启用 GitHub Pages](#步骤 3：启用 GitHub Pages)
- 五、效果展示
- 六、进阶扩展建议
- 七、资源推荐

在 Web 地图上可视化遥感数据：以芜湖市为例

关键词 ：遥感可视化、Leaflet、GeoJSON、WebGIS、GitHub Pages
适用场景：科研展示、智慧城市、环境监测、教学演示

在地理信息科学与遥感应用中，将遥感影像叠加到城市地图上进行可视化，是分析土地利用、植被覆盖、城市热岛等现象的重要手段。本文将以安徽省芜湖市 为例，手把手教你如何使用开源技术栈，在网页上实现遥感数据的标绘与交互展示，并通过 GitHub Pages 免费部署上线。

一、整体技术方案

我们采用纯前端、零后端的轻量级方案：

组件	技术选型	说明
地图引擎	Leaflet.js	轻量、易用、社区活跃
底图服务	OpenStreetMap	免费、全球覆盖
遥感数据格式	PNG + 地理边界（Bounding Box）	由 GeoTIFF 预处理而来
行政区划	GeoJSON	从公开数据源获取
部署平台	GitHub Pages	免费、自动 HTTPS、一键发布

✅ 无需服务器、无需数据库、适合快速原型开发

二、数据准备

1. 获取芜湖市行政区划（GeoJSON）

推荐来源：

GADM → 搜索 "Wuhu, Anhui, China" → 下载 Level 2（区县）
或使用国家统计局数据自行构建

保存为 wuhu_boundary.geojson，结构示例：

json 复制代码

{
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": { "name": "芜湖市" },
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [[[ [117.9,29.8], [118.8,29.8], ... ]]]
    }
  }]
}

2. 准备遥感影像（PNG 格式）

假设你已通过 ENVI、QGIS 或 Google Earth Engine 生成了一幅芜湖市的遥感产品（如 NDVI、假彩色合成图），并裁剪为芜湖范围。

关键步骤：

导出为 PNG 图像 （如 wuhu_ndvi.png）
记录其地理范围（Bounding Box），单位为经纬度（WGS84）：

js 复制代码

const bounds = [
  [29.8, 117.9], // 西南角 [纬度, 经度]
  [31.5, 118.8]  // 东北角 [纬度, 经度]
];

💡 提示：在 QGIS 中可通过"图层属性 → 信息"查看范围；在 GDAL 中可用 gdalinfo your.tif 查看。

三、前端页面开发

1. 项目结构

复制代码

wuhu-rs-visualization/
├── index.html          # 主页面
├── style.css           # 样式
├── script.js           # 地图逻辑
├── wuhu_ndvi.png       # 遥感影像
└── wuhu_boundary.geojson  # 行政区划

2. HTML 结构（`index.html`）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>芜湖市遥感数据可视化</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="script.js"></script>
</body>
</html>

3. 样式（`style.css`）

css 复制代码

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}
#map {
  width: 100%;
  height: 100vh;
}

4. 地图逻辑（`script.js`）

javascript 复制代码

// 1. 初始化地图（中心定位芜湖）
const map = L.map('map').setView([31.3, 118.4], 10);

// 2. 添加底图
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 3. 叠加遥感影像
const imageBounds = [[29.8, 117.9], [31.5, 118.8]];
L.imageOverlay('./wuhu_ndvi.png', imageBounds, {
  opacity: 0.8,
  alt: '芜湖市遥感影像'
}).addTo(map);

// 4. 叠加行政区划边界
fetch('./wuhu_boundary.geojson')
  .then(res => res.json())
  .then(data => {
    L.geoJSON(data, {
      style: { color: '#ff0000', weight: 2, fillOpacity: 0 },
      onEachFeature: (feature, layer) => {
        layer.bindPopup(`<b>${feature.properties.name}</b>`);
      }
    }).addTo(map);
  });

四、部署到 GitHub Pages

步骤 1：创建 GitHub 仓库

仓库名建议：wuhu-rs-visualization
初始化时可勾选 README

步骤 2：推送代码

bash 复制代码

git init
git add .
git commit -m "Add遥感可视化页面"
git branch -M main
git remote add origin https://github.com/你的用户名/wuhu-rs-visualization.git
git push -u origin main

步骤 3：启用 GitHub Pages

进入仓库 → Settings → Pages
Source 选择 Deploy from a branch
Branch 选择 main，路径选 / (root)
点击 Save

✅ 几秒后，你会看到类似地址：

👉 https://你的用户名.github.io/wuhu-rs-visualization/

五、效果展示

打开部署后的链接，你将看到：

底图为 OpenStreetMap 的芜湖市区
上层半透明叠加遥感影像（如 NDVI 热力图）
红色轮廓线标出芜湖市行政边界
点击边界可弹出城市名称

📌 实际效果取决于你的遥感图像质量与地理配准精度

六、进阶扩展建议

需求	实现方式
多时相动画	加载多个 PNG，用控件切换或自动轮播
像素值查询	引入 GeoTIFF.js 解析原始 GeoTIFF
自定义着色	对 NDVI 使用色带（Color Ramp）渲染
移动端优化	添加响应式设计、触摸缩放支持
替换底图	使用天地图、高德、Google Maps（需 API Key）

七、资源推荐

🗺️ Leaflet 官方教程：https://leafletjs.com/examples.html
🌍 GADM 行政区划数据：https://gadm.org/
🛰️ 免费遥感数据平台 ：
- USGS EarthExplorer（https://earthexplorer.usgs.gov/）
- Google Earth Engine（https://code.earthengine.google.com/）
🧰 GeoTIFF 转 PNG 工具：QGIS（Raster → Export → Save As...）

在 Web 地图上可视化遥感数据：以芜湖市为例

文章目录

在 Web 地图上可视化遥感数据：以芜湖市为例

一、整体技术方案

二、数据准备

1. 获取芜湖市行政区划（GeoJSON）

2. 准备遥感影像（PNG 格式）

三、前端页面开发

1. 项目结构

2. HTML 结构（index.html）

3. 样式（style.css）

4. 地图逻辑（script.js）

四、部署到 GitHub Pages

步骤 1：创建 GitHub 仓库

步骤 2：推送代码

步骤 3：启用 GitHub Pages

五、效果展示

六、进阶扩展建议

七、资源推荐

2. HTML 结构（`index.html`）

3. 样式（`style.css`）

4. 地图逻辑（`script.js`）