Skip to content

ismism-learner/World-situation-analysis-map

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 

Repository files navigation

✨ 功能概览

  • 3D 交互式地球:支持拖拽旋转、滚轮缩放。
  • 多分辨率地图支持:可加载不同精度的 Shapefile 数据(如 1:110m 和 1:10m),并根据缩放级别自动切换以优化性能。
  • 多图层管理:支持加载和独立控制国家、省/州、城市等多种地理图层。
  • 事件和连接可视化
    • 通过特定格式的文本输入,批量创建事件。
    • 在地点之间绘制连接线(支持大圆弧和抛物线两种模式)。
    • 在特定位置创建可编辑的图钉标记。
  • 丰富的交互体验
    • 双击连接线或图钉可添加和编辑标签。
    • 拖拽标签可调整其位置,以避免重叠。
    • 鼠标悬停在地理特征上可显示详细信息。
  • 强大的搜索功能
    • 加载自定义的 JSON 数据库,支持按国家、州/省、城市进行层级搜索。
    • 支持中英文及别名搜索。
    • 搜索结果可直接在地球上定位并高亮显示其行政边界。
  • 高度可定制化
    • 可自定义主题颜色、连接线样式(宽度、颜色)。
    • 所有手动添加的标记(连接线、图钉、高亮边界)都在“编辑图层”中进行统一管理,可独立显隐或删除。
  • 数据导入/导出:支持将创建的事件导出为 JSON 文件,并能重新导入,方便数据持久化和分享。
  • 智能 UI/UX 设计
    • 可折叠的侧边栏和顶部菜单,最大化地图可视区域。
    • 在进行耗时操作时(如批量添加事件),提供明确的用户反馈。
    • 当自动地点匹配失败时,会弹出搜索面板让用户手动选择,确保流程不中断。

🚀 如何使用

  1. 打开文件:在现代浏览器中直接打开 map_viewer.html 文件。

  2. 加载地图数据 (Shapefile)

    • 点击 "📁 加载 1:110m 地图" 按钮,选择基础的世界地图 Shapefile 文件(通常是 ne_110m_admin_0_countries 等)。
    • 为了获得更高精度的省/州边界,可点击 "📁 加载 1:10m 高精度地图" 并选择对应的文件(如 ne_10m_admin_1_states_provinces)。
    • 应用会自动根据文件名匹配图层类型(国家、州/省、城市)。加载状态会显示在右侧的“图层管理”面板中。
  3. 加载位置数据库 (JSON)

    • 点击 "📍 加载城市数据库" 按钮,选择一个预先准备好的、包含国家、州、城市层级信息的 JSON 文件。
    • 加载成功后,左上角的搜索框将激活,可以开始搜索地点。
  4. 创建事件

    • 在右侧面板的“📅 事件管理”区域,找到文本输入框。
    • 按照指定的格式输入事件信息(见下方“数据格式说明”)。支持多行粘贴以批量添加。
    • 点击 "➕ 添加事件" 按钮。应用会自动解析输入,查找地点,并在地球上创建连接线或图钉。
  5. 与地球交互

    • 旋转:按住鼠标左键并拖拽。
    • 缩放:滚动鼠标滚轮。
    • 选择地点:在地图上单击国家或城市,可将其选为连接线的起点或终点。
    • 编辑标签:双击连接线或图钉,会弹出输入框让您编辑其标签内容。
    • 移动标签:按住并拖动标签的背景框,可以自由移动它,以解决遮挡问题。

📋 数据格式说明

应用通过一个简单而强大的分号分隔格式来解析和创建事件。

1. 创建连接线

格式:时间;事件名;地点1;关系;地点2

  • 时间: 事件发生的日期或时间 (例如 2023-10-26)。
  • 事件名: 事件的简短描述 (例如 科技合作)。
  • 地点1 / 地点2: 连接线的起点和终点。支持“国家, 州/省, 城市”的层级格式,也支持直接输入国家或城市名。
  • 关系: 对两个地点关系的描述 (例如 访问签署协议)。

示例:

2023-01-01;国事访问;美国,加利福尼亚;会见;中国,北京
2024-03-15;经贸合作;德国;协议;日本

2. 创建图钉

格式:;时间;事件名;地点;描述 (注意:以分号开头)

  • 时间: 事件发生的日期或时间。
  • 事件名: 图钉所代表事件的名称。
  • 地点: 图钉放置的位置。
  • 描述: 对事件的详细描述。

示例:

;2024-05-20;科技峰会;美国,加利福尼亚;发布新AI模型

🛠️ 技术栈

  • D3.js: 用于数据驱动的 DOM 操作和核心的地理数据可视化。
  • TopoJSON: 用于解析和处理 TopoJSON 地理数据。
  • shapefile-js: 用于在浏览器端直接解析 Shapefile (.shp, .dbf) 文件。
  • JSZip: 用于处理 ZIP 压缩包,支持从单个 ZIP 文件中批量加载 Shapefile。
  • HTML5 / CSS3 / JavaScript (ES6+): 构建应用的基础。

🐔需要修复的内容

  • 各个板块角动量的速率不一导致的地图割裂
  • 对于敏感地区的搜索内容的修改
  • 对于导出内容以及读取内容的统一一致性
  • 将事件为单位把连线与图钉进行保存与读取
  • 设置可播放从最早事件开始的时间的地图播放功能演示功能

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages