少小白学前端——leaflet进阶篇

既然已经能建立地图了，接下来当然要发掘一下都能实现什么功能啦。

一、交互式 Choropleth 地图

先展示一下成果：
（根据每个行政区的数据，显示不同的颜色，鼠标移入会添加样式，点击后自动缩放到适合大小并移到地图中心）

这个→文档←里写的很详细，直接照着做就可以了，就不过多赘述了。

二、Non-geographical maps

这个指的是，非实际存在的地图，可以通过自定义坐标系，来展示特殊的空间坐标。如图：

这个就是官方列举的某个游戏的地图，实现也是非常简单：

let map = L.map('my-map', {
  crs: L.CRS.Simple,
  minZoom: 0
});
const bounds = [[0,0], [1000,1000]];
L.imageOverlay('/images/uqm_map_full.png', bounds).addTo(map);
map.fitBounds(bounds);

CRS 代表坐标参考系统，一个地图只能有一个 CRS。重新设定后，选一张星图图像，设定坐标边界，就可以展示出来了。
重点是minZoom，默认的缩放可能无法显示全部地图，因此需要根据实际情况，进行修改。

三、图层显示控制

leaflet提供了一个分组方法L.layerGroup()，可将marker、circle、polygon等，按照需要进行分组。
分组后，可用其提供的小控件（下图所示），来自定义显示。具体代码如下：

 // 分组
 const group = L.layerGroup([marker, circle, polygon]);
 // 显示控制
 L.control.layers({}, {'自定义显示' : group}).addTo(map);

L.control.layers()接受两个参数，都是object类型，其中对象的key为自定义的分组名，value为分组的内容。第一个对象控制的是单选区，第二个对象控制多选区。