leaflet 常用方法总结

目录

​​1、使用GEOJSON创建矢量图形​​

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

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

---

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

​​leaflet文档​​

1、​​使用GEOJSON创建矢量图形​​

 （构造点、线、面）

// 点

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()