应用台导航页
  • 主页
  • 博客
  • 知识库
  • 工作台
  • 集萃
  • 友链
  • 关于
中国顶尖高校分布地图可视化应用
985高校中国地图数据可视化

中国顶尖高校分布地图可视化应用

生产力
更新于 2025-12-13
— 926 字
返回

通过地图清晰地展示了国内重点高校在各省的分布情况,收录包括985、211和双一流院校,地址:https://uni.utities.online/ 效果:

china-top-univirsities-in-map
china-top-univirsities-in-map

这个应用最初打算用ai来实现,我写了一段提示词,结果是 AI 无法正确理解并处理:Trae、cursor 等都不行

基于这个中国省级行政区划地图可视化应用的 html 结构,制作一个 985 高校分布图 web 应用:
svg地图渲染的部分,我先做一个技术拆解:
1. 现有的素材是两张 svg 图,第一张是框线图(不会变的部分),第二张是填充素材(需要根据交互来动态改变一些属性),使用绝对定位使两张图片重合
2. 填充的部分分为 provinces 、dots 、texts 和 lines,四者按固定顺序渲染,很容易反推出来分组,并确定省份顺序(文字中有省份名称)
2. hover 时(通过调整省份的背景颜色、 text、lines 等的 opcacity 等)只高亮选中的省份,且只显示该省份对应的点、线、文本
3. 可视化还体现在 svg 中不同省份色块的背景颜色深度,可以看出来是分成几个组别的,颜色越深,说明数据量越大
现在:
1. 景区信息要换成对应省份的 985 学校信息,不要只显示有几家,而是学校名称都显示出来
2. 点击省份后在侧边打开的 drawer 中展示除具体的学校列表,点击学校则展示学校信息。
3. 支持切换 211 、985、双一流、
3. 支持切换主题色,还能支持多色(现有 svg 是绿色的主题色,也可以让配色丰富起来,不考虑可视化,如果单色的话就实现可视化)
2. (AI 可能完不成,也许需要在 photopea 中用钢笔工具编辑一下)既然地图中显示学校,就需要更大的空间,现有的图上,线条太密集,会造成文字太密集,需要调整一下线条的位置、长短等,但要注意线条起始的点不能变,因为那是地图上省份位置所在点。

“985工程”学校名单 - 中华人民共和国教育部政府门户网站

dors logoDors

Dors 是花野猫开发为知识工作者打造的数字花园应用,包含的博客、个人记事本、及其他实用功能。

花园

  • 花坛——博客
  • 果园——知识库

工坊——作者开发的实用工具

  • 小记
  • 秒切——一键按秒分割视频
  • 中国重点高校地理位置可视化网站
  • 中国行政区划数据查询平台
  • excel 重命名工具

misc

  • 生活章程
  • 画廊
  • just have fun!

© 2022 - present. All Rights Reserved.滇ICP备2025063395号-1

花野猫打造