leaffLet學習筆記整理（API中文文件翻譯）
阿新 • • 發佈：2018-12-16
leafLet教程
Leaflet 是一個為建設移動裝置友好的互動地圖，而開發的現代的、開源的 JavaScript 庫。它是由 Vladimir Agafonkin 帶領一個專業貢獻者團隊開發，雖然程式碼僅有 33 KB，但它具有開發人員開發線上地圖的大部分功能。 Leaflet設計堅持簡便、高效能和可用性好的思想，在所有主要桌面和移動平臺能高效運作，在現代瀏覽器上會利用HTML5和CSS3的優勢，同時也支援舊的瀏覽器訪問。支援外掛擴充套件，有一個友好、易於使用的API文件和一個簡單的、可讀的原始碼。 leafLet最新版本為1.3.4
一、簡單入門教程（開始使用leafLet）
本教程將一步一步的指導你如何使用Leaflet載入地圖、使用標記，折線和彈出視窗，處理事件。
如何用leaflet快速載入地圖
Leaflet呼叫各種地圖的功能有點複雜，但是你可以使用 leaflet.ChineseTmsProviders這個外掛載入各種地圖，這四種地圖直接就可以載入進來，十分方便。
此外掛程式碼如下，你可以直接複製該程式碼為js檔案（可命名為leaflet.ChineseTmsProviders.js），然後引入你的HTML頁面便可使用。
leaflet.ChineseTmsProviders程式碼：
L.TileLayer.ChinaProvider = L.TileLayer.extend({
initialize: function(type, options) { // (type, Object)
var providers = 下面的程式碼利用此外掛加載出各種地圖： 在使用leafLet時，你需要引入js檔案和css檔案，可以直接線上引入： 首先引入css檔案：
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
然後在css的後面引入js檔案（ Make sure you put this AFTER Leaflet’s CSS）：
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
然後再引入leaflet.ChineseTmsProviders.js檔案 （你也可以去下載原始檔到你的本地專案進行引用，下載地址為官網地址：（DownLoad leafLet）
建立一個容器div存放你的地圖，設定id並渲染一些簡單的樣式（注意：一定要有相應的height屬性） 下面是載入幾種地圖的程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>leafLet載入幾種地圖</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<!--下面的地址根據你的實際專案地址進行引用-->
<script src="leaflet/leaflet.ChineseTmsProviders.js"></script>
</head>
<body>
<div id="map">
</div>
<script>
/**
* 智圖地圖內容
*/
var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
maxZoom: 18,
minZoom: 5
});
var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
maxZoom: 18,
minZoom: 5
});
var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
maxZoom: 18,
minZoom: 5
});
var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
maxZoom: 18,
minZoom: 5
});
var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
maxZoom: 18,
minZoom: 5
});
var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
maxZoom: 18,
minZoom: 5
});
/**
* 天地圖內容
*/
var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
maxZoom: 18,
minZoom: 5
}),
normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
maxZoom: 18,
minZoom: 5
}),
imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
maxZoom: 18,
minZoom: 5
}),
imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
maxZoom: 18,
minZoom: 5
});
var normal = L.layerGroup([normalm, normala]),
image = L.layerGroup([imgm, imga]);
/**
* 谷歌
*/
var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
maxZoom: 18,
minZoom: 5
}),
satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
maxZoom: 18,
minZoom: 5
});
/**
* 高德地圖
*/
var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
maxZoom: 18,
minZoom: 5
});
var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
maxZoom: 18,
minZoom: 5
});
var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
maxZoom: 18,
minZoom: 5
});
var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);
var baseLayers = {
"智圖地圖": normalm1,
"智圖多彩": normalm2,
"智圖午夜藍": normalm3,
"智圖灰色": normalm4,
"智圖暖色": normalm5,
"智圖冷色": normalm6,
"天地圖": normal,
"天地圖影像": image,
"谷歌地圖": normalMap,
"谷歌影像": satelliteMap,
"高德地圖": Gaode,
"高德影像": Gaodimage,
}
var map = L.map("map", {
center: [31.59, 120.29],
zoom: 12,
layers: [normalm1],
zoomControl: false
});
L.control.layers(baseLayers, null).addTo(map);
L.control.zoom({
zoomInTitle: '放大',
zoomOutTitle: '縮小'
}).addTo(map);
</script>
</body>
</html>
---------------------
作者：GIS小博工作室
來源：CSDN
原文：https://blog.csdn.net/GISuuser/article/details/77600052
版權宣告：本文為博主原創文章，轉載請附上博文連結！