足迹地图

March 21, 2025

最近给博客增加了一个新玩意儿——足迹地图,用于在地图上标注走过的大好河山。数据文件与博客相独立,单独在页面中使用iframe引用即可,对于我的技术水平来说还算可以接受。

足迹地图基于jVectorMap插件制作,官方提供的可选地图文件有中国、美国和世界地图可供选择。我选用的中国地图,但是原版缺少港澳台数据,荒野孤灯的版本有了台湾,后来又在有点东西的教程中找到了AMCHARTS提供的相对完整的svg地图文件,而且也可以通过经纬度实现添加标注点。

更新地图数据后却出现个问题,各省级地图轮廓几乎消失,在原来的地图中各省级行政区划之间是有明显轮廓的。个人分析应该是AMCHARTS地图数据点更多更加精确,导致行政区划之间的间隙消失。为了解决这个问题,经请教有点东西修改/js/index.js文件实现,通过regionStyle.initial对象设置属性给地图添加边框,stroke为边框颜色,stroke-width为边框宽度,stroke-opacity为边框透明度,stroke-width和stroke-opacity需要添加英文双引号以免语法错误。

荒野孤灯改进后的版本实现了在标注点中添加描述、多图片、指定链接等,可以展示更多的信息。标注点信息存储在/data/config.json中,修改其中的字段数据即可。

至此,基本达到了自己比较满意的效果,在页面中添加以下代码即可实现引用。

<iframe scrolling=no style="min-height: 480px !important;" src="http://xxxx/xxxx/index.html" width="100%" height="100%"></iframe>

【源文件】按需自取,不谢!


高度为了适配移动端,对最小高度做了调整,原来设置是固定高度480px,现调整为50vw,即宽度的50%,这样高度可根据不同的宽度进行同步调整。

style="min-height: 50vw !important;

—— 2025.06.13 更新

竖版地图

March 27, 2015

前段时间在找PPT上用的全国行政区划图时,无意间发现了另一新版的地图——竖版。

对此地图感觉挺新鲜的,刻意搜索了一下相关信息,发现这个版本的地图是2014年才发布的,相对原来的横版地图最大的变化就是南海海域和岛屿与大陆为同一比例尺,南海诸岛不再作为插图形式表示,全景展示了中国陆海疆域,不会再误以为国家领土有主次之分,有利于国民版图意识和海洋意识的树立。确实也是,原来像我们这种生活在内陆的人有多少会去关注那角落的海域呢?是因为最近几年闹得沸沸扬扬的南海纷争和2012成立的三沙市才让我们对这片海洋有了更多的关注,这个时候又发布了这样一张地图也是顺应时事吧。

另外发布的还有竖版的世界地图,也是颠覆了我们的世界观,因为美国不再位于中国的东面,而是北面。据说2006年我国在开发“北斗”卫星系统时,竖版地图绘制者、中科院武汉测量与地球物理研究所研究员郝晓光就提出“美国在中国的北面,而不是东面”,因此增强“北斗”卫星系统向北的覆盖面,对于军事来说也是意义重大。

中国地图 世界地图

——Posted from Windows Live Writer.