基于leaflet的二维GIS开发笔记

最近公司计划研发一套智慧城市治理系统，需要对接iserver发布好的地图。不出意外，地图技术调研及选型的任务落到我的肩上。正好上个项目告一段落，住的社区也被封控了，我可以居家办公，集中精力完成这个任务。
首要问题是需要选择地图框架。在openlayers和leaflet之间，我倾向于leaflet，个人觉得leaflet文档及Api更加清晰易懂，且很多功能可以拿来即用，而openlayers往往要定制开发。尽管了解到这个系统需求十分复杂，但leaflet强大的扩展插件库可以充当我的稳固靠山。
Leaflet 是领先的用于移动友好交互式地图的开源 JavaScript 库。

参照官方文档(Leaflet官方文档)，我搭建了个demo，于是有了这篇笔记。预计后续项目开发阶段的笔记也会记录于此。

一、初始化地图

1.index.html引入leaflet相关资源

1
2
3
4
5
<!-- leaflet基础资源 -->
<link rel="stylesheet" href="./js/leaflet.css" />
<link rel="stylesheet" href="./js/iclient-leaflet.min.css" />
<script type="text/javascript" src="./js/leaflet.js"></script>
<script type="text/javascript" src="./js/iclient-leaflet.js"></script>

2.初始化地图并加载底图

1
2
3
4
5
6
7
8
9
10
11
12
13
const { L } = window;
const chinaUrl = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China';
let map;
useEffect(() => {
    map = L.map('map', {
        center: { lon: 113.30307, lat: 23.28787 },
        maxZoom: 18,
        minZoom: 1,
        zoom: 11,
        preferCanvas: true, //使用canvas模式渲染path类矢量图层，性能优于svg
    });
    L.supermap.tiledMapLayer(chinaUrl, { transparent: false }).addTo(map);
}, []);

3.添加其他tiledMapLayer图层

1
2
const layer = L.supermap.tiledMapLayer(layer, mapOptions);
layer.addTo(map);

4.添加相关控件

1
2
// 比例尺
L.control.scale().addTo(map);

5.地图监听事件

1
2
3
4
map.on('zoom', (e) => {
    const myZoom = e.target.getZoom();
    console.log(myZoom);
});

6.设置地图视口

1
map.setView([50.5, 30.5], 5);

7.更新地图

1
map.invalidateSize(true); // 可用于地图容器大小变化，更新地图

二、操作地图

1.添加marker

1
L.marker([50.5, 30.5]).addTo(map);

2.添加多个marker

可以将marker放入layerGroup，添加到地图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const arr = [
    [248032.0254, 40469.3061],
    [247080.7802, 42093.5961],
    [246865.6745, 39896.0273],
];
let layers = [];
arr.forEach((item) => {
    let layer = new L.marker(item, {
        icon,
    }).bindPopup('测试', { closeButton: false });
    layers.push(layer);
});
const myGroup = L.layerGroup(layers);
map.addLayer(myGroup);

3.遍历并操作图层组中的所有layer

1
2
3
myGroup.eachLayer((layer) => {
    layer.setStyle({ fillOpacity: 0 });
});

4.地图清除图层

1
map.removeLayer(layer);

5.清除layerGroup的所有layer

1
myGroup.clearLayers();

6.自定义清除图层通用方法，接收layerGroup类型的数组

1
2
3
4
5
6
//清除图层通用方法
const cleanMap = (layers) => {
    layers.forEach((item) => {
        item && item.clearLayers();
    });
};

7.加载geoJSON数据

1
2
3
4
5
6
7
8
const layer = L.geoJSON(data, {
    style: function () {
        return { color: 'red', weight: 3, fillOpacity: 0.08 };
    },
}).addTo(map);
// 获取中心点并定位地图
let center = layer.getBounds().getCenter();
map.setView([center.lat, center.lng], 7);

8.获取地图边界

1
const boundRef = map.getBounds();

9.设置地图边界

1
map.fitBounds(boundRef);

10.添加线

1
2
3
4
5
6
7
8
L.polyline(
    [
        [147560.691, 21345.852],
        [140498.684, 20972.949],
        [143403.297, 21802.081],
    ],
    { color: 'red', weight: 6 }
).addTo(map);

11.添加多边形区域

1
2
const latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
const polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);

三、使用插件

1.点聚合

使用的是Leaflet.markercluster，传送门：Leaflet.markercluster。相关配置项可以参考这篇文章Leaflet聚合图层—Leaflet.markercluster。

使用步骤如下：

(1)引入插件

1
2
3
4
<!-- 点聚合 -->
<script type="text/javascript" src="%PUBLIC_URL%/js/cluster.js"></script>
<link rel="stylesheet" href="%PUBLIC_URL%/js/cluster.default.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/js/cluster.css" />

(2)初始化聚合点图层

地图渲染后，调用initClusterLayer方法初始化聚合点图层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
let clusterLayer;
//初始化聚合点图层
const initClusterLayer = () => {
    clusterLayer = L.markerClusterGroup({
        animateAddingMarkers: true,
        spiderfyOnMaxZoom: true,
        showCoverageOnHover: false,
        zoomToBoundsOnClick: false,
        maxClusterRadius: 50,
        // 自定义聚合样式(聚合圆半径随聚合点数量梯度变化;并在divIcon中自定义聚合样式)
        iconCreateFunction: function (cluster) {
            let clusterRadius = 40,
                count = cluster.getChildCount();
            if (count >= 10 && count < 20) {
                clusterRadius = 50;
            } else if (count >= 20 && count < 50) {
                clusterRadius = 70;
            } else if (count >= 50) {
                clusterRadius = 90;
            }
            return L.divIcon({
                className: '',
                html: `<div class="customstyle" style="width: ${clusterRadius}px;height: ${clusterRadius}px">
${cluster.getChildCount()}
</div>`,
            });
        },
    });
    // 数量小于20时，蛛网式散开；大于等于20时，直接散开落图
    clusterLayer.on('clusterclick', function (a) {
        if (a.layer.getChildCount() < 20) {
            a.layer.spiderfy();
        } else {
            a.layer.zoomToBounds();
        }
    });
};

定义聚合样式

1
2
3
4
5
6
7
8
9
10
11
12
.customstyle {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    font-size: 14px;
    color: white;
    background: rgba(78, 170, 255, .7);
    transform: translate(-42%, -42%);
    display: flex;
    align-items: center;
    justify-content: center;
}

(3)添加标注点

1
2
3
const layers = [marker1, marker2, marker2];
clusterLayer.addLayers(tempLayer);
map.addLayer(clusterLayer);

实际效果图如下(无地图底图)：

8

(4)清除聚合点图层

可以调用上文的清除图层通用方法

1
cleanMap([clusterLayer]);

2.热力图

使用的是Leaflet.heat，传送门：Leaflet.heat

使用步骤如下：

(1)引入插件

1
2
<!-- 热力图 -->
<script type="text/javascript" src="%PUBLIC_URL%/js/leaflet.heat.js"></script>

(2)渲染热力图

1
2
3
4
5
6
7
8
9
let heatLayer;
const heatPoints = [
    [50.5, 30.5, 0.2], // lat, lng, intensity
	[50.6, 30.4, 0.5],
];
heatLayer = L.heatLayer(heatPoints, {
    radius: 30,
    minOpacity: 0.5,
}).addTo(map);

实际效果图如下(无地图底图)：

9

(3)判断是否存在热力图

1
2
const bool = map.hasLayer(heatLayer);
console.log(bool);

(4)清除热力图

1
heatLayer && heatLayer.remove();

3.canvas标注点

在地图上添加大批量marker时，会出现严重的性能问题。打开控制台会发现每个标注点是独立的dom元素，造成了卡顿。可以引入Leaflet.Canvas-Markers插件，以Canvas的绘图方式绘制Marker，从而解决问题。

(1)引入插件

1
2
<!-- 海量marker渲染优化 -->
<script type="text/javascript" src="%PUBLIC_URL%/js/leaflet.canvas-markers.js"></script>

(2)初始化Canvas-Markers图层

1
2
3
4
5
6
7
const canvasLayer = L.canvasIconLayer({}).addTo(map);
canvasLayer.addOnClickListener(function (e, data) {
    console.log(data);
});
item.addOnHoverListener(function (e, data) {
    console.log(data);
});

(3)添加标注点

1
canvasLayer.addMarker(marker);

(4)批量添加标注点

1
canvasLayer.addMarkers([marker1, marker2]);

(5)清除Canvas-Markers图层

同样可以使用清除图层方法

1
cleanMap([canvasLayer]);

(6)问题：图标与地图缩放不同步

使用优化过的版本，参考链接：leaflet加载geojson数据_leaflet如何加载10万数据

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

吴晨光<br><br>毕业于广州大学 在职前端工程师<br>谢谢大家