一、初识Leaflet

(一) Leaflet简介

Leaflet是面向移动设备的互动地图的领先开源JavaScript库。虽然代码仅有 38 KB,但它具有开发人员开发在线地图的大部分功能。Leaflet设计简便、高性能、可用性好,开源轻量且支持插件扩展。同时Leaflet有一个易懂易用的API文档和简单、可读的源代码,为使用者提供了参考和帮助。下面是Leaflet的官网

这里写图片描述

(二) Leaflet快速入门

下面主要讲解如何快速使用Leaflet加载地图Mapbox、添加标记、添加图形以及弹窗(Popup)的使用、绑定事件等内容。当然,在学习下面内容之前要对HTML、CSS、Javascript基础有一定的了解。

1 加载地图

(1)首先需要在页面加载Leaflet的两个文件

  • 引入Leaflet的css文件:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
  • 引入Leaflet的js文件:
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>

(2)创建用来显示map的div容器,同时确保地图容器有一个定义的高度

<div id="map"></div>

CSS设置:

#map { height: 100%; width: 100%; margin: 0; padding: 0;} 

(3)初始化地图,我们以青岛市为例,设置地图中心和缩放级别

var map = L.map('map').setView([36.09, 120.35], 13);

(4)添加切片图层

L.tileLayer是矢量瓦片图层,用来加载切片地图。其具体介绍以后会详细说明。addTo(map)是将切片地图加载到地图对象并显示。
下面例子当中瓦片地图使用的是openstreetmap,同时还包含了相关参数attribution、maxZoom、id的设置。此外,加载影像地图把替换id为‘mapbox.satellite’即可。

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
}).addTo(map);

运行结果如下图所示:
这里写图片描述
这里写图片描述

2 标记、几何图形

除了图层之外,我们还可以轻松地将其他内容添加到地图中,包括标记,折线,多边形,圆形。具体代码如下:

  • 添加标记
var marker = L.marker([36.09, 120.35]).addTo(map);
  • 添加折线
var polyline = L.polyline([
    [36.1, 120.32],
    [36.05, 120.3]
],{color: '#FFFF00'}).addTo(map);
  • 添加多边形
var polygon = L.polygon([
    [36.1, 120.39],
    [36.105, 120.41],
    [36.12, 120.36]
]).addTo(map);
  • 添加圆形
var circle = L.circle([36.07, 120.39], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 600
}).addTo(map);

运行结果如下图:
这里写图片描述

3 弹窗的使用

使用弹窗可以将某些信息附加到地图上的特定对象上,利用bindPopup()方法可以为不同对象快速添加指定HTML内容并单击显示弹窗。代码如下:

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();  
polyline.bindPopup("I am a polyline.");
polygon.bindPopup("I am a polygon.");
circle.bindPopup("I am a circle.");

这里写图片描述

此外,弹窗也可以作为一个图层显示。代码如下:

var popup = L.popup()
    .setLatLng([36.09, 120.35])
    .setContent("I am a standalone popup.")
    .openOn(mymap);

这里使用openOn()而不是addTo(),是因为当打开一个新的弹窗时,会自动关闭以前打开的弹窗。

4 绑定事件

很多时候需要用户与地图的一些交互操作来满足需求,如单击标记或者地图来触发弹窗显示信息。而在Leaflet中,每个对象都有自己的一组事件,具体参照官方文档。这里,我们以单击地图显示地理坐标为例,来说明绑定事件的实现。
监听函数(listener function)的第一个参数是事件对象 - 它包含有关发生事件的有用信息。例如,地图点击事件对象(e)具有latlng属性,该属性是发生点击的位置。

//新建弹窗对象
var popup = L.popup();
//监听函数
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("点击地图的位置为:" + e.latlng.lat+e.latlng.lng)
        .openOn(map);
}

为地图对象添加单击监听事件:

map.on('click', onMapClick);

运行结果如图:
这里写图片描述

现在,学习了Leaflet的基础知识,便可以开始构建地图应用程序!当然,必要的时候还需要查看详细的文档其他示例

### 如何使用 Leaflet 库在地图上绘制个点 要使用 Leaflet 在地图上绘制个单个点,可以按照以下方法操作。Leaflet 提供了个简单的 API 来完成这功能。 #### 初始化地图并设置中心位置和缩放级别 首先,在 Vue 组件的 `mounted` 生命周期钩子中初始化地图实例,并指定地图容器、中心经纬度以及初始缩放比例: ```javascript initMap() { this.map = L.map("mapContainer", { // 假设 HTML 中有个 id="mapContainer" 的 div 容器 center: [37.7749, -122.4194], // 设置地图中心为旧金山 (纬度, 经度) zoom: 13 // 初始缩放等级 }); // 添加瓦片图层作为底图 L.tileLayer( "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: '© OpenStreetMap contributors' } ).addTo(this.map); } ``` 此部分代码的作用是创建个地图对象并将它附加到页面上的某个 DOM 元素(此处假设该元素 ID 是 `mapContainer`),同时加载 OpenStreetMap 图砖作为背景[^4]。 #### 绘制单标记点 接着通过调用 `L.marker()` 方法来放置个图标于特定地理坐标之上: ```javascript addSingleMarker() { const marker = L.marker([37.7749, -122.4194]).addTo(this.map); // 将标记置于相同的位置即旧金山市中心 marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); // 可选:给这个标记绑定弹窗消息 } ``` 这里我们创建了枚标准的小蓝针形图标,默认情况下会自动添加至之前定义的地图实例之中[^4]。如果希望自定义外观,则需进步调整选项或者引入外部 SVG 文件来自行设计图案样式。 最后步是在应用启动时执行上述两个函数之即可看到效果展示出来。 --- ### 注意事项 当实际开发过程中遇到跨域请求失败等问题时,请确认所使用的 tile 层 URL 是否允许 CORS 请求;另外记得检查浏览器控制台是否有任何错误提示帮助定位问题所在之处。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值