在https://mapshaper.org上将shp数据转换成geojson后，下一个任务是利用leaflet在网页上显示这个地图。
话不多说，直接上代码吧。
首先是最简单的版本：
<html>
<head>
<title>Leaflet Test</title>
<link rel="stylesheet" href="path/to/leaflet.css"/>
<!-- <link>标签链接一个外部样式表，rel表示当前文档与被链接文档之间的关系，stylesheet表示外部样式表；href表示被链接文档的位置。 -->
<script src="path/to/leaflet.js"></script>
<!-- 插入一段js脚本。src规定外部脚本文件的 URL。 -->
<!--
在 https://leafletjs.com/download.html 里有另一种方法：使用在线版本的leaflet，如： <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
并且为了避免潜在安全问题，推荐确保子资源完整性。（即integrity与crossorigin部分） -->
</head>
<body>
<div id='map' style="width: 600px; height: 400px;"></div>
<!-- 定义文档中的分区 -->
<script src="path/to/a_javascript" type="text/javascript"></script>
<script>
var my_map = L.map('map',{center: [51.505, -0.09],zoom: 13});
/*L.map()方法生成一个地图
L.map(<String> id, <Map options> options?)
Instantiates a map object given the DOM ID of a <div> element and optionally an object literal with Map options. */
// 可以 L.map.setView();
L.geoJSON(test_map).addTo(my_map);
</script>
</body>
</html>
这个版本实现后，我就可以在网页上显示那个geojson文件了（虽然转换为了js文件）。
过程中有两个坑：
一是刚开始忘了打<div>中的style项，导致最后什么都没出来。
二是弄好后打开网页发现一片蓝，一度怀疑出了神奇BUG，后来发现只是放大比例太大:(
然后就开始做些优化，加些交互了——
1. 修改zoom，我再也不想一打开网页就是一片蓝了
2. 修改map的宽与高，使其充满整个浏览器屏幕
3. 修改my_map的center，（0，0）多好看（强迫症
4. 点击显示经纬度
5. 给每个polygon填充不同的颜色
6. 设置一个显示我所在位置的marker
7. 设置显示鼠标悬浮国家名称的功能
最终代码如下：
（引用编辑起来太麻烦了……直接上图）
网友评论