少小白学前端——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为分组的内容。第一个对象控制的是单选区,第二个对象控制多选区。
在这里插入图片描述    在这里插入图片描述   在这里插入图片描述