用途
Map Generator 是一个技能,用于创建基于 Leaflet JavaScript 库的交互式地图,并以 MicroSim 形式用于使用 MkDocs Material 主题构建的智能教材。当用户需要地理可视化、位置数据展示、校园或设施地图、旅行路线可视化,或带标记、图层、高亮边界的自定义地图时,可使用该技能。它也适用于教育地理内容。
主要能力
该技能可以创建包含标记、弹窗、图层控件和 GeoJSON 边界/区域的地图。支持多种底图,例如 OpenStreetMap、卫星影像和地形图,并可通过图层控件切换。支持自定义标记图标、区域高亮以及响应式布局,适合嵌入 iframe。技能还提供 metadata.json 与 Dublin Core 字段,以及地图类型、中心坐标、缩放级别、标记数量、相关概念和 Bloom 分类法等地图专属字段。
使用方式
工作流程分为十步:
- 收集地图需求,包括地图用途、地理区域、标记/点、地图图层、边界/区域、缩放级别、交互功能和教育背景。
- 创建 MicroSim 目录:docs/sims/[map-name]/,命名使用 kebab-case。
- 可选创建 map-data.json,包含中心坐标、缩放、标题、副标题和标记数组;复杂几何使用 GeoJSON。
- 使用模板 assets/template-iframe-main.html 创建 main.html,包含 Leaflet CDN、id="map" 的容器、可选控件区和 script.js 引用。
- 使用模板 assets/template-iframe-style.css 创建 style.css,要求 body 无外边距、#map 固定高度、移动端响应式断点,并使用 aliceblue 背景。
- 使用模板 assets/template-script.js 创建 script.js,初始化地图、添加瓦片图层、标记与弹窗,可选 GeoJSON 图层和图层控件。
- 使用模板 assets/template-index.md 创建 index.md,包含概述、iframe 嵌入、全屏链接、功能、自定义指南、技术细节、用例和参考。
- 使用模板 assets/template-metadata.json 创建 metadata.json。
- 在 mkdocs.yml 导航中添加新地图。
- 测试与验证:直接打开 main.html 在浏览器中测试,运行 mkdocs serve 验证 iframe 嵌入、边距、全屏链接和导航链接,并在 Chrome、Firefox、Safari 及移动设备上测试响应式行为。
常见地图模式
包括简单标记地图、GeoJSON 高亮区域、图层控件和自定义标记图标。代码示例展示了如何使用 L.marker、L.geoJSON、L.control.layers 和 L.icon。
适用场景
适用于教育地理内容、校园或设施地图、旅行路线可视化、位置数据展示、区域或国家可视化等。也可用于历史遗址、地标等基于位置的数据展示。
限制
为获得最佳性能,建议标记数量少于 100;大型数据集可使用标记聚类。地图不显示时需检查 Leaflet CDN 链接、#map 固定高度和坐标格式。标记不显示时需检查经纬度顺序和范围。iframe 不适配时需检查 body 边距和 iframe 高度。该技能未提供收费、价格或平台信息。