Sive
Leaflet 世界地图可视化
可视化

Leaflet 世界地图可视化

当用户需要构建轻量、可扩展的通用交互式 Web 地图，或明确要求 Leaflet 时，使用此 Skill。该库擅长：瓦片地图、点标记图、比例符号图、圆形覆盖图、路线图、轨迹图、折线图、多边形区域图、矩形区域图、GeoJSON 点线面专题图、图片覆盖图、视频覆盖图、SVG 覆盖图、矢量图层、标记聚合图。不要用于依赖中国 POI、实时路况及驾车公交路径规划的高德地图场景，也不要用于非地理统计图表。

去使用
yvonneyx
yvonneyx
浏览739
使用58

Skill 文件

SKILL.md
name
leaflet-map
title
Leaflet 世界地图可视化
description
当用户需要构建轻量、可扩展的通用交互式 Web 地图，或明确要求 Leaflet 时，使用此 Skill。该库擅长：瓦片地图、点标记图、比例符号图、圆形覆盖图、路线图、轨迹图、折线图、多边形区域图、矩形区域图、GeoJSON 点线面专题图、图片覆盖图、视频覆盖图、SVG 覆盖图、矢量图层、标记聚合图。不要用于依赖中国 POI、实时路况及驾车公交路径规划的高德地图场景，也不要用于非地理统计图表。

Leaflet 世界地图可视化

在单个 HTML 文件中使用 Leaflet 创建交互式世界地图。轻量 (~42KB gzip)，插件丰富，移动端友好。

约束条件

  • 仅适用于世界地图：该 skill 专用于展示全球视图和各大洲、国家区域的可视化
  • 缩放限制到国家级别：最大缩放级别限制为国家级（zoom 6-8 左右），不支持城市、街道、建筑级别的详细视图
  • 不适合城市/街道级场景：请勿用于展示特定城市的街道、商圈、POI 点位等需要精细底图的场景

核心依赖 (CDN 内联)

html
<​link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/leaflet@1.9.4/dist/leaflet.min.css" /​><​script src="https://cdn.jsdmirror.com/npm/leaflet@1.9.4/dist/leaflet.min.js"​><​/script​>

加载后全局可用：L 对象（Leaflet 命名空间）

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​>Leaflet 地图<​/title​>  <​link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/leaflet@1.9.4/dist/leaflet.min.css" /​>  <​script src="https://cdn.jsdmirror.com/npm/leaflet@1.9.4/dist/leaflet.min.js"​><​/script​>  <​style​>    * { margin: 0; padding: 0; box-sizing: border-box; }    #map { width: 100vw; height: 100vh; }  <​/style​><​/head​><​body​>  <​div id="map"​><​/div​>  <​script​>    // 1. 创建地图，设置初始中心点和缩放级别（世界视图）    const map = L.map('map', {      minZoom: 2,   // 最小缩放到世界视图      maxZoom: 6    // 最大缩放到国家级别（限制：不支持城市/街道级）    }).setView([20, 0], 2); // 全球视图中心
    // 2. 添加瓦片图层（OpenStreetMap）    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {      minZoom: 2,      maxZoom: 6,      attribution: '&copy; OpenStreetMap contributors'    }).addTo(map);
    // 3. 添加国家标记示例（中国）    const marker = L.marker([35.8617, 104.1954]).addTo(map);    marker.bindPopup('<​b​>中国<​/b​><​br​>亚洲国家');  <​/script​><​/body​><​/html​>

核心 API

地图初始化

javascript
const map = L.map('container', {  center: [lat, lng],    // 中心点 [纬度, 经度]  zoom: 2,               // 缩放级别 (本 skill 限制: 2-6，世界到国家级别)  minZoom: 2,            // 最小缩放：世界视图  maxZoom: 6,            // 最大缩放：国家级别（约束限制，不支持城市街道级）  zoomControl: true,     // 缩放控件  dragging: true,        // 拖拽});

瓦片图层

javascript
// OpenStreetMap（免费，无需 key）L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {  minZoom: 2,  maxZoom: 6,            // 限制到国家级别（约束：不支持更精细的缩放）  attribution: '&copy; OpenStreetMap'}).addTo(map);
// 高德地图瓦片（中国境内推荐）L.tileLayer('https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {  minZoom: 2,  maxZoom: 6,            // 限制到国家级别（约束：不支持更精细的缩放）}).addTo(map);
// 卫星图L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {  minZoom: 2,  maxZoom: 6,            // 限制到国家级别（约束：不支持更精细的缩放）}).addTo(map);

标记 (Marker)

javascript
const marker = L.marker([lat, lng]).addTo(map);marker.bindPopup('弹窗内容 HTML');marker.bindTooltip('悬停提示');

自定义图标

javascript
const customIcon = L.icon({  iconUrl: 'marker-icon.png',  iconSize: [25, 41],  iconAnchor: [12, 41],  popupAnchor: [0, -41],});L.marker([lat, lng], { icon: customIcon }).addTo(map);

圆形标记

javascript
L.circleMarker([lat, lng], {  radius: 8,  fillColor: '#4A90E2',  color: '#fff',  weight: 2,  fillOpacity: 0.8,}).addTo(map);

常见场景示例

绘制路线/折线

javascript
const route = [  [39.9042, 116.4074],  [39.9142, 116.4174],  [39.9242, 116.3974],];L.polyline(route, { color: '#4A90E2', weight: 4 }).addTo(map);map.fitBounds(L.polyline(route).getBounds()); // 自动缩放适配

绘制多边形/区域

javascript
const polygon = L.polygon([  [39.92, 116.38],  [39.92, 116.43],  [39.89, 116.43],  [39.89, 116.38],], {  color: '#E74C3C',  fillColor: '#E74C3C',  fillOpacity: 0.3,}).addTo(map);

GeoJSON 数据

javascript
const geojsonData = {  type: 'FeatureCollection',  features: [    {      type: 'Feature',      properties: { name: '区域A', value: 42 },      geometry: {        type: 'Polygon',        coordinates: [[[116.38, 39.92], [116.43, 39.92], [116.43, 39.89], [116.38, 39.89], [116.38, 39.92]]]      }    }  ]};
L.geoJSON(geojsonData, {  style: (feature) => ({    fillColor: '#4A90E2',    weight: 2,    opacity: 1,    color: '#fff',    fillOpacity: 0.6,  }),  onEachFeature: (feature, layer) => {    layer.bindPopup(`<​b​>${feature.properties.name}<​/b​><​br​>值: ${feature.properties.value}`);  }}).addTo(map);

图层切换控件

javascript
const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png');const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
const baseMaps = { '街道': osm, '卫星': satellite };L.control.layers(baseMaps).addTo(map);osm.addTo(map); // 默认图层

批量标记 + 聚合（需插件）

html
<​link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" /​><​script src="https://cdn.jsdmirror.com/npm/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.min.js"​><​/script​>
javascript
const markers = L.markerClusterGroup();data.forEach(point => {  markers.addLayer(L.marker([point.lat, point.lng]));});map.addLayer(markers);

注意事项

约束强制

  1. 此 skill 仅适用于世界地图：仅用于展示全球视图和国家级别的区域数据，不适用于城市级地图
  2. 缩放级别限制 (minZoom: 2, maxZoom: 6)：必须设置此限制，确保用户无法缩放到城市街道级别
  3. 不适合的场景：
    • 展示特定城市的街道、商圈地图
    • 需要建筑物级别的精细标注
    • 需要显示道路细节、POI 点位的导航类应用

技术注意

  1. 容器必须有明确高度：#map 需要 CSS 设置具体高度（100vh 或固定 px），否则不渲染。
  2. CSS 必须引入：Leaflet 需要同时加载 CSS 和 JS，缺少 CSS 会导致瓦片错位。
  3. 坐标顺序是 [纬度, 经度]：与 GeoJSON 的 [经度, 纬度] 相反，注意区分。
  4. GeoJSON 坐标是 [lng, lat]：Leaflet 的 L.geoJSON() 会自动处理转换。
  5. 瓦片来源：OpenStreetMap 免费但有使用政策限制，生产环境建议用专业瓦片服务。
  6. 跨域问题：本地 file:// 协议可能加载瓦片失败，建议用本地 HTTP 服务器打开。
Ln 1, Col 1MarkdownSpaces: 2
No errors