【Leaflet入门】vue使用leaflet插件

Leaflet系列

【Leaflet入门】vue使用leaflet插件–初始化
【Leaflet入门】vue使用leaflet插件–图层服务
【Leaflet入门】vue使用leaflet插件–几何绘制

---

前言

上一篇文章我们介绍啦如何在项目中引入leaflet,并且初始化地图服务,我的项目中对图层的应用特别多,接下来就和大家讲解一下leaflet的图层用法。

---

一、创建图层的方式

我在项目中主要使用的是栅格图层和GeoJson图层这两种图层,在栅格图层里使用的是TileLayer.WMS,先给大家介绍一下使用的方法

1.TileLayer.WMS的使用

官方文档里给我们介绍,这个方法有两个参数,第一个是路径,第二个是参数设置

 L.tileLayer.wms(`${this.layerUrl}/api/v1/geoserver/getwmts/`, {
          layers: 'db:geoserver_sarlayer',
          maxZoom: 24,
          transparent: 'true',
          version: '1.1.0',
          format: 'image/png',
        }).addTo(this.map);

选项	说明
layers	(必需)要显示的 WMS 图层的逗号分隔列表
maxZoom	此图层将显示的最大缩放级别（包括最大）
transparent	如果为 true，WMS 服务将返回具有透明度的图像
version	要使用的 WMS 服务的版本
format	WMS 图像格式 (对具有透明度的图层使用 ‘image/png’ for layers with transparency)

version 这个参数需要注意下,必须和你后端发图层服务的版本一样,我这里后端图层服务版本是1.1.0

2.GeoJSON 图层的使用

官方文档里给我们介绍,这个方法有两个参数,第一个是路径,第二个是参数设置

L.geoJSON(data, {配置项}).addTo(this.map);

这里可以data数据可以直接使用后端返回的空间坐标数据,直接创建图层,他的配置项我就不一一列举啦,可以直接去官方文档查看

二、增删图层

1.增加图层

这里我们以栅格图层举例,可以调用map里的方法addLayer()来添加我们的图层
代码如下（示例）：

let layer = L.tileLayer.wms(`${this.layerUrl}/api/v1/geoserver/getwmts/`, {
          layers: 'db:geoserver_sarlayer',
          maxZoom: 24,
          transparent: 'true',
          version: '1.1.0',
          format: 'image/png',
        });
this.map.addLayer(layer)

2.删除图层

这里我们以栅格图层举例,可以调用map里的方法removeLayer()来添加我们的图层
代码如下（示例）：

let layer = L.tileLayer.wms(`${this.layerUrl}/api/v1/geoserver/getwmts/`, {
          layers: 'db:geoserver_sarlayer',
          maxZoom: 24,
          transparent: 'true',
          version: '1.1.0',
          format: 'image/png',
        });
this.map.removeLayer(layer)

这里在删除的时候需要注意,你调用removeLayer(的方法之前,需要确保删除的图层是已经添加上的图层,要不然会报错)

---

总结

以上就是我在项目中使用的创建,增加,删除图层的方法,有什么问题欢迎大家随时交流