本书首先介绍目前比较流行的地图可视化工具和常见的地图数据类型，便于读者从整体上掌握地图可视化的基本知识；然后介绍HTML、CSS、JavaScript等Web开发基础，便于不太熟悉Web开发的读者阅读本书，熟悉Web开发的读者可略过这部分内容；最后从Leaflet地图可视化基础、地图基本操作、专题地图绘制、地图动画等方面深入介绍Leaflet的开发过程，对每一步的案例代码都进行了详细说明，便于读者轻松上手。掌握基于Leaflet的地图可视化开发技巧，可以触类旁通，迅速掌握其他地图可视化开源库的使用方法。

前 言 近些年，随着地图可视化相关工具的不断涌现，地图的生产、制作与应用都已经从传统测绘行业逐渐走向大众化，掌握地图的制作技巧已经成为诸多领域从业人员的必备技能。相比一些地图可视化操作软件和在线地图可视化网站，通过编程实现地图可视化产品的开发难度更大，学习成本更高，但可实现按需灵活定制，不会受限于地图可视化操作软件和在线地图可视化网站提供的模板及功能，能够满足一些更高阶的应用需求，在实际生产项目中的实用性更强，需求量更大，更值得深入学习。在众多可用于地图可视化的开发包中，以Leaflet为代表的一系列开源类开发包受到了越来越多用户的欢迎，甚至对一些商业性质的开发工具造成了很大的冲击。在此背景下，本书将聚焦开源网络地图可视化的开发。 我在2017年获得了国家留学基金管理委员会的全额资助，于2017年7月至2018年7月在美国宾夕法尼亚州立大学地理系GeoVISTA中心留学访问。留学访问期间，在地理可视化分析领域全球顶尖专家Alan M. MacEachren教授的指导下，我使用开源网络地图可视化库OpenLayers研发了标签地图可视化系统Tag Map Explorer；同时旁听了Alan教授讲授的课程“Dynamic Cartographic Representation”，该课程的实践部分采用Leaflet+D3完成。在该课程的实习指导教师杨丽萍教授（现就职于新墨西哥大学）的帮助下，进一步了解了国外开源网络地图可视化的相关现状。受到课程“Dynamic Cartographic Representation”的启发，我萌生了将国外一些地理可视化分析相关知识、理念和技能引入国内的念头。 目前，我们的团队［中国地质大学（武汉）GeoVISLAB团队］正在微信公众号“地图可视化”（MapVis）上努力实现这一想法。与此同时，我们也一直计划编写一些和开源网络地图可视化相关的教材或专著。2018年回国后，我有幸主持了一个基于Mapbox GL的室内三维地图可视化项目，并于2019年成功交付生产单位。2020年，在新冠肺炎疫情初期，我们指导研究生基于Mapbox研发了“武汉市新型冠状病毒肺炎疫情态势分析系统”，该系统受到了中国自然资源报、中国教育电视台、中国社会科学报、楚天都市报等新闻媒体的报道。这些工作都为本书的编写奠定了坚实的基础。2020年，在新冠肺炎疫情期间，我受困于农村老家，终于得以“清闲”，有时间去思考、实现在国外时的一些想法，决定编写此书，以轻量级地图可视化包Leaflet为主，辅以D3、Turf等开源库进行介绍，和国内读者分享我们团队在开源网络地图可视化开发方面的一些经验。在武汉解封返校之前，已基本厘清本书的编写思路和框架，返校之后开始了正式的编写工作，于2020年年底完成了初稿。 本书首先介绍目前比较流行的地图可视化工具和常见的地图数据类型，便于读者从整体上掌握地图可视化的基本知识；然后介绍HTML、CSS、JavaScript等Web开发基础，便于不太熟悉Web开发的读者阅读本书，熟悉Web开发的读者可略过这部分内容；最后从Leaflet地图可视化基础、地图基本操作、专题地图绘制、地图动画等方面深入介绍Leaflet的开发过程，对每一步的案例代码都进行了详细说明，便于读者轻松上手。掌握基于Leaflet的地图可视化开发技巧，可以触类旁通，迅速掌握其他地图可视化开源库的使用方法。 本书既可作为地理学、测绘科学与技术等相关专业本科生或研究生的教材，也可作为相关生产单位的项目培训用书。 参与本书编写和审校工作的人还有关庆锋、陈占龙、晁怡、郑贵洲、奚大平，参与本书地图绘制的人有湖北省国土测绘院的彭艳鹏、李峥，参与本书案例代码测试的研究生有林鑫、朱威、吴国佳、蒋乐、许帆、李双宇、杨慧、孙鑫、庞旭静、邓志涛、张津铭等，在此真诚地感谢他们为本书付出的辛勤劳动。 在本书完成初稿后，我邀请Alan教授为本书作序，Alan教授欣然应允。今年6月底Alan教授就要退休了，回首跟着他访学的日子，一直甚感荣幸，我们在国际地图学领域知名期刊Cartography and Geographic Information Science和The Cartographic Journal上已经合著发表了两篇论文，另有一篇目前还在编写中。Alan教授的治学精神一直鼓舞着我，他给予的肯定也是我不断前行的动力。再次感谢Alan教授的指导与支持！ 此外，还要特别感谢新墨西哥大学的杨丽萍教授和电子工业出版社的田宏峰编辑，本书的出版离不开他们的鼓励与大力支持！ 由于编写时间仓促，本书难免会存在一些瑕疵，案例代码可能存在一些不规范之处，敬请广大读者批评指正。 杨 乃 2021年6月于南望山

目　　录 第1章　地图可视化基础知识 （1） 1.1　地图可视化工具简介 （1） 1.1.1　操作软件 （2） 1.1.2　在线网站 （5） 1.1.3　开发包 （10） 1.2　常用的地理数据类型 （18） 1.2.1　Shapefile （19） 1.2.2　JSON （20） 1.2.3　GeoJSON （21） 1.2.4　TopoJSON （24） 1.2.5　CSV （26） 1.2.6　KML （27） 1.3　本章小结 （27） 第2章　Web开发基础 （29） 2.1　HTML开发基础 （29） 2.1.1　HTML文档的基本结构 （29） 2.1.2　HTML元素的属性 （31） 2.1.3　DOM （32） 2.1.4　canvas （33） 2.1.5　SVG （33） 2.1.6　注释 （34） 2.2　CSS开发基础 （34） 2.2.1　CSS简介 （34） 2.2.2　CSS语法 （34） 2.2.3　CSS的创建 （39） 2.3　JavaScript开发基础 （40） 2.3.1　JavaScript简介 （40） 2.3.2　基本语法 （41） 2.4　常用的Web开发工具 （53） 2.4.1　Visual Studio Code （54） 2.4.2　Sublime Text （54） 2.4.3　WebStorm （55） 2.5　浏览器调试 （56） 2.5.1　查看源代码 （56） 2.5.2　开发者工具 （56） 2.6　本章小结 （60） 第3章　Leaflet地图可视化基础 （61） 3.1　开发环境的搭建 （62） 3.1.1　下载Leaflet压缩包 （62） 3.1.2　引用Leaflet （62） 3.2　地图加载 （63） 3.2.1　Mapbox栅格瓦片地图服务 （63） 3.2.2　国内地图服务 （66） 3.2.3　覆盖图层加载 （72） 3.3　地图控件 （83） 3.3.1　地图缩放控件 （83） 3.3.2　地图图层控件 （84） 3.3.3　地图比例尺控件 （88） 3.3.4　地图属性控件 （89） 3.3.5　地图缩略图控件 （91） 3.3.6　地图全屏显示控件 （92） 3.3.7　地图放大镜控件 （93） 3.4　本章小结 （95） 第4章　Leaflet地图基本操作 （97） 4.1　地图缩放的控制 （97） 4.1.1　地图缩放等级的原理 （97） 4.1.2　地图缩放等级的控制 （99） 4.2　鼠标光标坐标的获取 （103） 4.3　弹出窗（Popup） （104） 4.4　提示框（Tooltip） （107） 4.5　地图图层的操作 （109） 4.5.1　堆叠顺序的调整 （109） 4.5.2　图像的配准 （112） 4.5.3　视频的配准 （115） 4.5.4　地图图层的对比 （120） 4.6　地图的绘制 （123） 4.7　地图的标注 （126） 4.8　本章小结 （128） 第5章　Leaflet专题地图绘制 （129） 5.1　分级统计图法 （129） 5.1.1　获取数据 （129） 5.1.2　设置样式 （130） 5.1.3　添加注记 （132） 5.1.4　添加图例 （133） 5.1.5　设置交互 （134） 5.1.6　绘制插件 （136） 5.2　分区统计图表法 （139） 5.2.1　柱状统计图表法 （139） 5.2.2　饼状/环状统计图表法 （147） 5.2.3　折线统计图表法 （153） 5.3　热力图 （162） 5.3.1　获取数据 （162） 5.3.2　获取插件 （163） 5.3.3　绘制热力图 （164） 5.3.4　鼠标提示 （166） 5.3.5　添加图例 （167） 5.4　蜂窝图 （168） 5.4.1　获取数据 （168） 5.4.2　下载JavaScript库 （169） 5.4.3　绘制蜂窝图 （169） 5.5　等值线图 （172） 5.5.1　获取数据 （172） 5.5.2　下载JavaScript库 （173） 5.5.3　绘制等高线 （173） 5.6　分层设色法 （179） 5.6.1　绘制等值面 （180） 5.6.2　分层设色 （181） 5.7　本章小结 （182） 第6章　Leaflet地图动画 （183） 6.1　图标动画 （183） 6.1.1　沿线运动 （183） 6.1.2　时间轴控件 （186） 6.2　折线动画 （192） 6.2.1　蛇行动画 （192） 6.2.2　虚线动画 （195） 6.2.3　蚂蚁动画 （197） 6.2.4　流向图动画 （198） 6.3　流场动画 （204） 6.3.1　插件leaflet-velocity （204） 6.3.2　插件Leaflet.CanvasLayer.Field （206） 参考文献 （213） 后记 （215）