leaflet 常用方法总结

Love The Way You Lie 2023-02-27 12:10 18阅读 0赞

**目录**

1、使用GEOJSON创建矢量图形

2、监控leaflet地图的放大缩小事件 zoomend

3、polyline 同时生成多条线的两种方式以及清楚

--------------------

该文章是将在使用leaflet时对我有帮助的文章放在一起，以及对我自己在项目中常用的场景进行总结，方便下次快速查找

[leaflet文档][leaflet]

### 1、[使用GEOJSON创建矢量图形][GEOJSON] ###

原文链接：[https://www.cnblogs.com/tinaluo/p/7245850.html][GEOJSON] （构造点、线、面）

// 点

// 线

面：

### 2、监控leaflet地图的放大缩小事件 zoomend ###

let isZoom = false
    this.map.on("zoomend", e => {
    				//获取当前放大或者缩小的等级
    				if(e.target.getZoom() <= 8){
    					isZoom = false
    			
    					if (this.subMarinesLayers) this.subMarinesLayers.clearLayers();
    					
    					// if(this.subMarinesLine) this.map.removeLayer(this.subMarinesLine);
    				} else {
    					if(!isZoom){
    						this.getAllMachine()
    					}
    					isZoom = true
    				}
    			})

### 3、polyline 同时生成多条线的两种方式以及清楚 ###

1、生成线的样式都是统一的

addSubMarines1(){
    			if(this.subMarinesLine) this.map.removeLayer(this.subMarinesLine)
    			const latlons = []
    			this.subMarinesList.forEach(item => {
    				let latlon = []
    				item.data.forEach(val => {
    					latlon.push([val.lat, val.lon])
    				})
    				latlons.push(latlon)
    				// this.map.fitBounds(this.subMarinesLine.getBounds()); 是将地图定位到线附近
    			});
    	
    			this.subMarinesLine = L.polyline(latlons,{color: 'rgb(0, 184, 166)'} )
    				.addTo(this.map);
    
    
    
    		},

注意：此时latlons的数据格式是：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

清除线的方式：this.map.removeLayer(this.subMarinesLine)

2、生成线的样式不统一，此时需要借助于L.layerGroup(主要是为了方便清除地图上的线)

初始化时，创建图层组

this.map = L.map('map', {
    				crs: L.CRS.EPSG3395,
    				minZoom: 4,
    				maxZoom: 15,
    				detectRetina: true
    			}).setView(this.mapCenter, this.mapZoom);
    			const url = 'http://m12.shipxy.com/tile.c?l=Na&m=o&y={y}&x={x}&z={z}';
    			L.tileLayer(url, {}).addTo(this.map);
    
                // 下面的时关键代码
    			this.subMarinesLayers = L.layerGroup();
    			this.map.addLayer(this.subMarinesLayers);

添加线图层

addSubMarines(){
    			if(this.subMarinesLayers) this.subMarinesLayers.clearLayers()
    			let subMarinesLine = []
    			this.subMarinesList.forEach(item => {
    				let latlon = []
    				item.data.forEach(val => {
    					latlon.push([val.lat, val.lon])
    				})
    				subMarinesLine = L.polyline(latlon,{color: item.isWarn === 0 ? 'rgb(0, 184, 166)' : 'red'} )
    				this.subMarinesLayers.addLayer(subMarinesLine)
    			});
    
    
    
    
    		},

清除线的方式：this.subMarinesLayers.clearLayers()

[leaflet]: https://leafletjs.com/reference-1.6.0.html
[GEOJSON]: https://www.cnblogs.com/tinaluo/p/7245850.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20230209/d40d161b61334405894e8b657ecb5f0f.png