vue3+leaflet 入门指南

1.初始化地图

1.1 导入依赖

<script src="https://lib.baomitu.com/leaflet/1.9.2/leaflet.js"></script>
<link rel="stylesheet" href="https://lib.baomitu.com/leaflet/1.9.2/leaflet.css">

或者

    npm i leaflet (建议在main.js全局引入）

main.js :
    import L from 'leaflet'
    import 'leaflet/dist/leaflet.css'

2.设置图层（瓦片）

mapbox：使用mapbox需要有token

var url = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token='
var layer = L.tileLayer(url, {
  maxZoom: 19,
  attribution: '© OpenStreetMap'
})

高德

var layer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'],
    minZoom: 1,
    maxZoom: 19
})

然后加载图层，需要注意的是 center的两个值和常规的不一样，第一个是纬度，第二个值是经度。

    map = L.map("map", {
        layers: [layer],
        /* center:[纬度,经度] */
        center: [30.50, 114.30],
        zoom: 4
    })
    

2.图层切换

我们打印一下map，可以看到他的一些方法，其中addLayer removeLayer分别是添加和移除图层

控制图层：

onMounted(() => {
/* 加载瓦片地图 */
    var url = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHVja2RvZyIsImEiOiJjbGdrNXZmNWkxY2NqM3BteWltcjYwaGl4In0.Xm_EO9lIxHAiCcpJx6FT1A'
    // 加载天地图影像图
    // var url = 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='
    var layer = L.tileLayer(url, {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    })
    map = L.map("map", {
        layers: [layer],
        /* center:[纬度,经度] */
        center: [30.50, 114.30],
        zoom: 4
    })
    console.log('leaflet', map)

    let isToggle = false;
    map.on("click", () => {
        console.log("click")
        isToggle = !isToggle;
        if (isToggle) {
            map.removeLayer(layer)
        } else {
            map.addLayer(layer)
        }
    })
})

效果：

3.漫游

map.on("click", e => {
  var { lng, lat } = e.latlng;
  console.log(lng);
  map.flyTo([lat, lng], 8)
})

4.添加标记、弹窗

1.标记的api是marker，在 onMounted中添加以下代码就生成了一个标记。

let marker = L.marker([30.50, 114.30]);
map.addLayer(marker);

2.弹框则是popup，很通俗易懂。

   var popup = L.popup().setLatLng([30, 114]).setContent("I am a standalone popup.").openOn(map);

3.如何将标记和弹框绑定在一起呢，很简单，如果需要显示经纬度打印marker就可以拿到

  var marker = L.marker([30,114]);
  marker.bindPopup('我是弹框')
  map.addLayer(marker)

5.移除、清除图层

1.移除标记的方法很多

function clearMarker() {
    let layers = Object.values(map._layers);
    layers.forEach((layer) => {
        if (layer instanceof L.Marker) {
            map.removeLayer(layer)
        }
    })
}
 

或者添加标记的时候加一个title

let marker = L.marker([lat, lng], {
                title: "marker"
            });
 map.addLayer(marker);
 那么清除方法就这样写：
function clear() {
       var markers = layers.filter(item => item.options.title === 'marker'); // 过滤出所有的标记
       markers.forEach(item => map.removeLayer(item)); // 移除所有标记
}

6.绘制矢量图形

1.绘制圆

let circle = L.circle([30.50, 114.30], {
  color: "yellow",
  radius: 400000,
  fillColor: "#999",
  fillOpacity: 0.7
})
map.addLayer(circle);

2.绘制线

let line = L.polyline([[30.50, 114.30], [30, 120]], {
  color: "#652e80"
})
map.addLayer(line);

3.绘制区域

let polygon = L.polygon([
  [30, 114],
  [30, 118],
  [24, 118]
])
map.addLayer(polygon)

7.加载geojson并添加功能

1.geojson：是基于json的地理空间数据的格式，写法固定。我们可以自己写一个并加载。

var jsondata = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [114.30, 30.50]
      },
      properties: {
        name: "武汉"
      },
      id: 10001
    }
 ]
}
var point_layer = L.geoJSON(data);
map.addLayer(point_layer);

线：

var json = {
  type: "Feature",
  geometry: {
    type: "LineString",
    coordinates: [
      [114, 30], [118, 30]
    ]
  }
}
var line_layer = new L.geoJSON(json);
map.addLayer(line_layer);

区域：

var data = {
  type: "Feature",
  geometry: {
    type: "Polygon",
    coordinates: [
      [
        [114, 30],
        [120, 30],
        [120, 24]
      ]
    ]
  }
}
var polygon_layer = L.geoJSON(data);
map.addLayer(polygon_layer);

8.加载全国geosion并设置样式

1.我们可以去一些数据平台拿一些自己需要的geojson数据： 阿里云数据平台 高德L7 下面举例全国的：

    // 加载geojson
    let gis_url = "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full";
    var geo_layer = L.geoJSON();
    map.addLayer(geo_layer);
    fetch(gis_url).then((res) => {
        return res.json()
    }).then((data) => {
        geo_layer.addData(data);
    })
    // 设置样式：先拿到图层geo_layer这个图层，mouseover可以改为click或者其他事件
    geo_layer.on('mouseover', e => {
        geo_layer.setStyle({
            color: 'blue'
        })
        e.layer.setStyle({
            color: 'red'
        })
    })

效果：

最后一点，如果需要多组件使用map方法需要放在全局，可以使用多种方式：

// 第一种全局挂载方法
// app.config.globalProperties.$LM = L;
// 第二种全局挂载方法
// app.provide('$LM', L);

我是这样使用的： main.js:

组件：