首页地球可视化控件说明（MapLibre GL JS）
本文档说明首页右侧地球可视化小控件的来源、功能、文件位置及常见调整方式。
功能概述
- 显示地球底图，标注“广东·珠海”位置（经纬度：东经 113.583743、北纬 22.352113）。
- 叠加中国省级边界，支持：
- 悬停高亮（feature-state 实现）
- 点击弹出省名
- 小尺寸（约 180×140），移动端自动隐藏。
- 加载后如中心在中国范围内，以珠海为中心自动平滑至
zoom: 2（可调整）。
数据与底图来源（请保留致谢）
- 地图引擎：MapLibre GL JS（CDN via UNPKG）。
- 底图样式：MapLibre Demo Tiles（
https://demotiles.maplibre.org/globe.json）。 - 行政区划边界：本地中国省级 GeoJSON（镜像自阿里云 DataV）：
- 本地文件：
/assets/data/china-provinces-100000_full.json - 上游来源：
https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full
- 本地文件：
目前已改为使用本地 GeoJSON 文件，避免外网依赖，提高加载稳定性。
代码位置
- 依赖引入：
_layouts/default.html- 通过 UNPKG 引入
maplibre-gl.css与maplibre-gl.js。
- 通过 UNPKG 引入
- 页面与脚本：
index.html- 容器：
<div class="globe-container"><div id="globe-map"></div></div> - 初始化：以
zhuhai = [113.583743, 22.352113]为中心创建地图，添加 Marker + Popup。 - 省级边界：添加
china-provincesGeoJSON 源（已改为本地：/assets/data/china-provinces-100000_full.json）；填充与描边图层；悬停高亮与点击弹出省名。 - 自动缩放：在中国范围内时
easeTo({ center: zhuhai, zoom: 2 })。
- 容器：
- 样式：
assets/css/style.css.globe-container（绝对定位在右侧，不影响中间内容布局）。#globe-map（尺寸与卡片样式）。
常见调整
- 尺寸与位置
- 调整尺寸：修改
#globe-map的height（默认 140px）与.globe-container宽度（默认 180px）。 - 垂直对齐：修改
.globe-container { top: var(--globe-top, 8px); }，例如--globe-top: 12px。 - 移动端可见性：在媒体查询中移除
.globe-container { display: none; }即可在移动端显示。
- 调整尺寸：修改
- 视野与中心
- 初始缩放：在
index.html中调整自动easeTo的zoom值（例如 2.2/3.0/4.0）。 - 更改中心：修改
zhuhai坐标为目标地点经纬度即可。
- 初始缩放：在
- 省份交互
- 关闭悬停高亮：移除
feature-state相关逻辑与事件绑定。 - 只保留描边：移除/隐藏填充图层（
china-provinces-fill）。
- 关闭悬停高亮：移除
- 控件与交互
- 缩放控件：在
map初始化后添加map.addControl(new maplibregl.NavigationControl(), 'top-right')。 - 禁用拖拽/滚轮：参考 MapLibre 文档关闭对应交互。
- 缩放控件：在
CSP 与可替代方案
- 如启用严格 CSP 且禁用
worker-src blob:，需使用maplibre-gl-csp.js并设置maplibregl.setWorkerUrl('...-csp-worker.js')。 - 亦可改为本地引入 MapLibre 资源，或通过前端打包工具引入并处理 CSS。
已修改文件（概览）
_layouts/default.html：引入 MapLibre 依赖。index.html：新增容器与初始化脚本、珠海坐标、交互与自动缩放；将省级边界数据源改为本地文件。assets/data/china-provinces-100000_full.json：新增，省级边界 GeoJSON（镜像自阿里云 DataV）。assets/css/style.css：添加/调整.globe-container与#globe-map样式，并确保不影响中间内容与 Blog 按钮布局。README.md：新增“首页地球可视化（MapLibre GL JS）”章节（含来源说明与使用提示）。
数据更新（可选）
- 如需更新省级边界数据，可从上游链接下载最新 GeoJSON，替换本地文件：
assets/data/china-provinces-100000_full.json。 - 建议保留原文件名，或同步修改
index.html中map.addSource(...).data的路径。
注意事项
- 外部数据与底图可能有服务可用性与使用条款限制，请遵守相关条款。
- 小尺寸控件不适合承载复杂图层；若需更复杂的展示，建议单独页面或放大尺寸。
若需进一步自定义（颜色、图例、点击跳转、省份统计等），欢迎在 Issue 中描述需求或直接联系维护者。