地图信息 leaflet +vue3 一个文档让你掌握leaflet基础用法

参考仓库：

leaflet学习: leaflet基础学习 (gitee.com)

 leaflet基本用法

1.引入leafletjs资源：

1. 手动  下载地址：https://leafletjs.com/download.html  引入css和js
2. npm npm install leaflet --save 在组件或者main.js中引入

2.创建容器存放地图

3.初始化地图

坐标，纬度在前，经度在后，初始化地图必有两个参数，一个坐标，一个初始缩放倍数

4.给容器设置宽高，显示地图

leaflet布局，图层

L.tileLayer加载底图,第一个参数为底图资源，第二个参数中attribution为版权

   L.tileLayer(
        "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        {
          attribution:
            '© 
OpenStreetMap
 contributors',
        }
      ).addTo(map);

leaflet标记

使用L.marker（）第一个参数为经纬度，第二个参数为自定义标记图标。

addTo()添加到图层；bindPopup（）显示弹框内容，openPopup（）自动打开弹框。

弹框也可使用bindTooltip（）

let markerIcon = L.icon({
    iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
     iconSize: [20, 30],
    }); 
 let marker = L.marker([29.44916482692468, 106.47399902343751], { icon: markerIcon })
        .addTo(map)
        .bindPopup("标记")
        .openPopup();
//--------------------------------
//marker.bindTooltip('我是标记', { //添加提示文字
//  permanent: true, //是永久打开还是悬停打开
//direction: 'top' //方向
//}).openTooltip(); //在图层打开

leaflet线段，形状

线段：使用 L.polyline（）第一个参数为线段两端的位置坐标，第二个参数为线段的样式。

同样也可使用弹框来做数据展示。

let line = L.polyline([[29.44, 106.473], [27.595, 106.9]],
         {
           opacity: 1,
           color: 'red'
         }).addTo(map)

 圆形：使用 L.circle（），对于圆形只需要一个坐标和圆的半径；第一个参数为圆点，第二个参数为圆的样式。同样也可使用弹框