- 3D 交互式地球:支持拖拽旋转、滚轮缩放。
- 多分辨率地图支持:可加载不同精度的 Shapefile 数据(如 1:110m 和 1:10m),并根据缩放级别自动切换以优化性能。
- 多图层管理:支持加载和独立控制国家、省/州、城市等多种地理图层。
- 事件和连接可视化:
- 通过特定格式的文本输入,批量创建事件。
- 在地点之间绘制连接线(支持大圆弧和抛物线两种模式)。
- 在特定位置创建可编辑的图钉标记。
- 丰富的交互体验:
- 双击连接线或图钉可添加和编辑标签。
- 拖拽标签可调整其位置,以避免重叠。
- 鼠标悬停在地理特征上可显示详细信息。
- 强大的搜索功能:
- 加载自定义的 JSON 数据库,支持按国家、州/省、城市进行层级搜索。
- 支持中英文及别名搜索。
- 搜索结果可直接在地球上定位并高亮显示其行政边界。
- 高度可定制化:
- 可自定义主题颜色、连接线样式(宽度、颜色)。
- 所有手动添加的标记(连接线、图钉、高亮边界)都在“编辑图层”中进行统一管理,可独立显隐或删除。
- 数据导入/导出:支持将创建的事件导出为 JSON 文件,并能重新导入,方便数据持久化和分享。
- 智能 UI/UX 设计:
- 可折叠的侧边栏和顶部菜单,最大化地图可视区域。
- 在进行耗时操作时(如批量添加事件),提供明确的用户反馈。
- 当自动地点匹配失败时,会弹出搜索面板让用户手动选择,确保流程不中断。
-
打开文件:在现代浏览器中直接打开
map_viewer.html文件。 -
加载地图数据 (Shapefile):
- 点击 "📁 加载 1:110m 地图" 按钮,选择基础的世界地图 Shapefile 文件(通常是
ne_110m_admin_0_countries等)。 - 为了获得更高精度的省/州边界,可点击 "📁 加载 1:10m 高精度地图" 并选择对应的文件(如
ne_10m_admin_1_states_provinces)。 - 应用会自动根据文件名匹配图层类型(国家、州/省、城市)。加载状态会显示在右侧的“图层管理”面板中。
- 点击 "📁 加载 1:110m 地图" 按钮,选择基础的世界地图 Shapefile 文件(通常是
-
加载位置数据库 (JSON):
- 点击 "📍 加载城市数据库" 按钮,选择一个预先准备好的、包含国家、州、城市层级信息的 JSON 文件。
- 加载成功后,左上角的搜索框将激活,可以开始搜索地点。
-
创建事件:
- 在右侧面板的“📅 事件管理”区域,找到文本输入框。
- 按照指定的格式输入事件信息(见下方“数据格式说明”)。支持多行粘贴以批量添加。
- 点击 "➕ 添加事件" 按钮。应用会自动解析输入,查找地点,并在地球上创建连接线或图钉。
-
与地球交互:
- 旋转:按住鼠标左键并拖拽。
- 缩放:滚动鼠标滚轮。
- 选择地点:在地图上单击国家或城市,可将其选为连接线的起点或终点。
- 编辑标签:双击连接线或图钉,会弹出输入框让您编辑其标签内容。
- 移动标签:按住并拖动标签的背景框,可以自由移动它,以解决遮挡问题。
应用通过一个简单而强大的分号分隔格式来解析和创建事件。
格式:时间;事件名;地点1;关系;地点2
- 时间: 事件发生的日期或时间 (例如
2023-10-26)。 - 事件名: 事件的简短描述 (例如
科技合作)。 - 地点1 / 地点2: 连接线的起点和终点。支持“国家, 州/省, 城市”的层级格式,也支持直接输入国家或城市名。
- 关系: 对两个地点关系的描述 (例如
访问或签署协议)。
示例:
2023-01-01;国事访问;美国,加利福尼亚;会见;中国,北京
2024-03-15;经贸合作;德国;协议;日本
格式:;时间;事件名;地点;描述
(注意:以分号开头)
- 时间: 事件发生的日期或时间。
- 事件名: 图钉所代表事件的名称。
- 地点: 图钉放置的位置。
- 描述: 对事件的详细描述。
示例:
;2024-05-20;科技峰会;美国,加利福尼亚;发布新AI模型
- D3.js: 用于数据驱动的 DOM 操作和核心的地理数据可视化。
- TopoJSON: 用于解析和处理 TopoJSON 地理数据。
- shapefile-js: 用于在浏览器端直接解析 Shapefile (.shp, .dbf) 文件。
- JSZip: 用于处理 ZIP 压缩包,支持从单个 ZIP 文件中批量加载 Shapefile。
- HTML5 / CSS3 / JavaScript (ES6+): 构建应用的基础。
- 各个板块角动量的速率不一导致的地图割裂
- 对于敏感地区的搜索内容的修改
- 对于导出内容以及读取内容的统一一致性
- 将事件为单位把连线与图钉进行保存与读取
- 设置可播放从最早事件开始的时间的地图播放功能演示功能