Skip to content

README.md

Latest commit

 

History

History
58 lines (44 loc) · 2.64 KB

README.md

File metadata and controls

58 lines (44 loc) · 2.64 KB
Raw
title 深圳科技公司二次元地图使用指南
category other
tags
可视化
shenzhen
数据可视化
lastUpdated 2026年8月
aiGenerated true

深圳科技公司二次元地图

一个零依赖的纯静态 Web 应用：把 industry/ 目录下 24 个深圳企业清单（约 240 条记录，去重后 170+ 家公司）画在一张二次元可爱风格的卡通深圳地图上，以"首字徽章 + 简称"浮标标记各公司办公地址所在商圈。

快速开始

# 方式一：本地服务器（推荐）
python3 -m http.server 8765
# 浏览器打开 http://localhost:8765/app/index.html

# 方式二：直接双击 app/index.html（file:// 协议同样可用）

功能

  • 三套主题（右上角按钮循环切换，自动记忆）：🌸 粉彩马卡龙贴纸风（默认）、🎮 像素复古游戏风、🐱 猫咪拟人风
  • 卡通深圳地图：11 个区手绘轮廓 + 22 个商圈锚点（科技园、留仙洞、深圳湾、前海、坂田、华强北等），滚轮缩放、拖拽平移
  • 聚合浮标：缩小视图按商圈聚合成"N家"气泡，点击放大展开为公司浮标（首字徽章 + 简称）
  • 筛选与搜索：24 个行业标签筛选、公司/行业/地址关键词搜索
  • 详情卡：公司全名、行业、规模、上市情况、办公地址、官网、开源仓库、来源文件
  • 待定位分组：办公地址缺失的公司收入侧栏"待定位"折叠区，数据不丢失

数据管道

数据由脚本从 Markdown 清单解析生成，Markdown 更新后重跑即可同步：

python3 scripts/build_app_data.py           # 生成 app/data/companies.json + companies.js
python3 scripts/build_app_data.py --check   # 仅校验（原始行数/去重数/定位覆盖率断言）

解析容错：5 种主表标题变体、security/cybersecurity 两处列错位修复、markdown 链接与裸 URL 双格式、按法人全名归一去重（华为/腾讯/大疆等跨文件记录合并为一家，行业标签合并）。

定位精度说明：公司坐标为"区 + 商圈锚点 + 确定性散开"的卡通示意位置，不代表真实门牌位置。

文件结构

app/
├── index.html      # 页面骨架
├── css/base.css    # 布局（零字面色值）
├── css/themes.css  # 三套主题变量
├── js/map-data.js  # 区轮廓 / 商圈锚点 / 装饰元素
├── js/map.js       # SVG 渲染、缩放平移、聚合
├── js/panel.js     # 侧栏：筛选/搜索/列表/详情卡
├── js/themes.js    # 主题切换
├── js/main.js      # 入口
└── data/           # 生成产物（companies.json / companies.js）