本文共 1239 字，大约阅读时间需要 4 分钟。
Leaflet快速入门与加载OSM显示地图
Leaflet 是一个强大的开源地图绘制库，能够轻松加载开源地图(OSM)并进行丰富的地图操作。以下将介绍如何快速上手Leaflet并展示地图。
在页面中加载并显示地图后，系统会呈现对应的地图样式。Leaflet封装了setStyle接口，用户可以灵活修改地图上的各个元素样式。
页面上添加地图和按钮
首先需要在HTML页面中添加Leaflet地图组件和相关操作按钮。以下是实现代码示例：初始化地图
使用Leaflet初始化地图，并设置默认显示范围：// 初始化地图var map = L.map('map').setView([0, 0], 2);// 添加地图底图L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors'}).addTo(map);添加地图层
通过addLayer按钮，可以添加各种地图层，如地形图、交通图等。以下是示例：document.getElementById('addLayer').addEventListener('click', function() { L.geoJSON({ type: 'FeatureCollection', features: [ { type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [ [51.505, -0.09], [51.505, -0.09], [51.505, -0.09] ] } } ] }).addTo(map);});移除地图层
通过removeLayer按钮，可以移除已添加的地图层：document.getElementById('removeLayer').addEventListener('click', function() { map.removeLayer(currentLayer);});通过以上步骤，可以轻松加载并展示地图，并通过按钮进行地图层的增删操作。Leaflet 提供了丰富的API和插件，能够满足多种地图展示需求。
转载地址：http://qigyk.baihongyu.com/