地图与地理数据可视化

地理地图是数据问题不是画图：用真实 TopoJSON 几何配 d3-geo 渲染静态/导出图形，用 Leaflet + OpenStreetMap 做街级交互地图，拒绝手绘轮廓。Use when 生成世界地图与区域地图、渲染带哈希校验的固定版本库引用、或需要把地图导出为 PNG/PDF 交付物时使用。Triggers include 地图可视化、d3-geo 投影选择、Natural Earth 数据、topojson 要素转换、Leaflet 图层与版权声明、交互缩放地图等场景。淘宝搜索「AI灵匣」

地图与地理

地理地图是数据问题，不是手绘画：绝不要徒手画国界轮廓、海岸线或街道布局——手绘地理必定出错，用户一眼就能看出来。加载真实几何数据并渲染。

所有地图页都用纯 HTML 构建——一个带普通 <script> 标签的 .html 文件，绝不用 .dc.html Design Component，哪怕项目里其他设计都是 DC：DC 把脚本限制在 <helmet> 里，其挂载时机会与地图容器产生竞态——数据可视化和 3D 技能同样这么要求。

对幻灯片、文档、图形和动画——任何静态或需要导出的内容——用 d3-geo 渲染 TopoJSON 几何：抓取 https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json（Natural Earth 数据，公有领域；该 URL 锁定版本——原样使用），用 topojson.feature(topology, topology.objects.countries) 转换，再在为任务挑选的投影下用 d3.geoPath() 绘制（全世界用 d3.geoNaturalEarth1；局部放大用 d3.geoMercator().fitSize(...)）。d3-geo 包含在下面的 d3 包里。只能通过以下这些锁定版本、带哈希校验的标签加载库，放在 <head> 中。这些标签若被篡改会加载失败（fail closed）；你添加的任何其他脚本都是未验证的——所以不要改版本、URL 或哈希，也不要从 CDN 加任何别的东西：

d3 生成的内联 SVG 能干净地导出为 PNG 和 PDF，而实时地图瓦片不行——所以导出交付物一律用 d3 几何，绝不内嵌瓦片地图。

对街级交互地图——原型、网站、任何需要平移缩放的东西——用 Leaflet 配 OpenStreetMap 瓦片，且只能通过以下精确标签加载（样式表必须引入：缺了 leaflet.css 瓦片会渲染错乱）：

用 L.map(...) 创建地图，用 L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }) 加瓦片。版权字符串是 OpenStreetMap 的许可要求——绝不能省略。