Leaflet快速入门与加载OSM显示地图
場景
Leaflet
Leaflet 是一個為建設(shè)交互性好適用于移動設(shè)備地圖，而開發(fā)的現(xiàn)代的、開源的 JavaScript 庫。
代碼僅有幾十KB，但它具有開發(fā)在線地圖的大部分功能。Leaflet設(shè)計堅持簡便、高性能和可用性好的哲學(xué)思想，
在所有主要桌面和移動平臺能高效運(yùn)作，在現(xiàn)代瀏覽器上會利用HTML5和CSS3的優(yōu)勢，同時也支持舊的瀏覽器訪問。
支持插件擴(kuò)展，有一個友好、易于使用的API文檔和一個簡單的、可讀的源代碼。
Leaflet強(qiáng)大的開源庫插件涉及到地圖應(yīng)用的各個方面包括地圖服務(wù)，數(shù)據(jù)提供，數(shù)據(jù)格式，地理編碼，路線和路線搜索，
地圖控件和交互等類型的插件共有140多個。
官網(wǎng)
Leaflet - a JavaScript library for interactive maps
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。
實現(xiàn)
1、新建一個html,添加Leaflet的css和js的引入
? <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>?引入寫法可以參考官網(wǎng)的quick-start
2、頁面添加一個div用來顯示地圖
<div id="map"></div>并且設(shè)置該div的樣式
??? <style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style>3、初始化地圖
使用L.Map的構(gòu)造器實例化一個地圖對象，指定地圖容器的id,setview作為一個方法，
用于設(shè)定地圖顯示的地理中心和縮放級別
var map = L.map('map').setView([36.09, 120.35], 13);4、添加切片圖層
L.tileLayer是矢量瓦片圖層，用來加載切片地圖。
addTo(map)是將切片地圖加載到地圖對象并顯示。下面瓦片地圖使用的是openstreetmap。
參數(shù)attribution用于在右下角添加地圖描述信息
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'© <a href="OpenStreetMaphttps://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);5、完整示例代碼
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet加載osm</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style> </head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'© <a href="OpenStreetMaphttps://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);</script> </body></html>?6、運(yùn)行效果
?
總結(jié)
以上是生活随笔為你收集整理的Leaflet快速入门与加载OSM显示地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Modebus Slave 与 Modb
- 下一篇： Leaflet中添加标记、折线、圆圈、多