leaflet 常用方法总结

目录

1、使用GEOJSON创建矢量图形

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

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

---

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

leaflet文档

1、使用GEOJSON创建矢量图形

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

// 点

function g(feature, layer) {
            // does this feature have a property named popupContent?
            if (feature.properties && feature.properties.popupContent) {
                layer.bindPopup(feature.properties.popupContent);
            }
        }

        var geojsonFeature = {
            "type": "Feature",
            "properties": {
                "name": "Coors Field",
                "amenity": "Baseball Stadium",
                "popupContent": "This is where the Rockies play!"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [100, 31]
            }
        };

        L.geoJSON(geojsonFeature, {
            onEachFeature: g
        }).addTo(map);

// 线

var draw_line = {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [110, 11],
                    [110, 49]
                ]
            },
            "properties": {
                "popupContent": "This is a free bus line that will take you across downtown.",
                "underConstruction": true
            },
            "id": 2
        };

//绑定事件
function f(feature, layer) {
    layer.bindPopup(feature.properties.popupContent);
}

//增加到地图
var ss = L.geoJson(draw_line, {
    style: {
        "color": 'black',
        "weight": 1
    },
    onEachFeature: f
}).addTo(map);

 面：

var states = [{
    "type": "Feature",
    "properties": {"party": "Republican"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": {"party": "Democrat"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}];

L.geoJSON(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case 'Republican': return {color: "#ff0000"};
            case 'Democrat':   return {color: "#0000ff"};
        }
    }
}).addTo(map);

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的数据格式是：

清除线的方式：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()