Leaflet 基礎入門教程示例
更新時間：2023年01月04日 14:26:40 作者：摸魚的湯姆
這篇文章主要為大家介紹了Leaflet 基礎入門教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
什么是Webgis？
webGis又稱之為網(wǎng)絡地理信息系統(tǒng),GIS的全名是Geographic Information System,它是在計算機硬件，軟件系統(tǒng)支持下，對整個或部分地球表層空間中的有關地理分布數(shù)據(jù)進行采集，儲存，管理，運算，分析，顯示和描述的技術系統(tǒng)。
地圖是GIS的表現(xiàn)形式，但是GIS深層是空間信息的處理，簡單說就是將GIS這門學科所能提供的功能，以B/S技術展現(xiàn)給用戶，使用戶只需要在瀏覽器上便能使用這些GIS功能的一個應用方向。
什么是Leaflet？
Leafet 作為 webGis 主流框架之一，Leaflet 是一個開源并且對移動端友好的交互式地圖 JavaScript 庫。 它大小僅僅只有39 KB, 并且擁有絕大部分開發(fā)者所需要的所有地圖特性。
在Vue中安裝Leaflet，與其他依賴
// leaflet 核心庫 npm install leaflet // 地圖瓦片 npm install leaflet.chinatmsproviders // 動態(tài)線 npm install leaflet-ant-path // 側邊欄工具庫 npm install @geoman-io/leaflet-geoman-free
在App.vue中使用
import L from "leaflet"; import "leaflet.chinatmsproviders"; // 插件可加載各種地圖（如：智圖地圖，谷歌地圖，高德地圖等包含衛(wèi)星地圖） import "leaflet-ant-path"; //動態(tài)線條插件 import "leaflet/dist/leaflet.css"; import imgs from "@/assets/svg/logo.svg"; import "@geoman-io/leaflet-geoman-free"; import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
初始化地圖
methods:{
initMap(){
let _this = this;
this.map = L.map("map", {
attributionControl: true, // 是否版權
closePopupOnClick: false, // 點擊畫布是否直接隱藏彈窗
maxZoom: 13, // 最大縮放
minZoom: 3, // 最小縮放
noWrap: false, // 該層是否包裹在逆子午線周圍
worldCopyJump: true, // 拷貝當前配置
renderer: L.svg(), // 矢量渲染
});
}
}
chinaProvider地圖瓦片
// 設置需要引入的地圖瓦片
// 其他材質(zhì)包括（天地圖，百度，...） git地址：https://github.com/htoooth/Leaflet.ChineseTmsProviders
L.tileLayer?.chinaProvider('Geoq.Normal.PurplishBlue').addTo(this.map);
// 設置中心點與縮放層級
this.map.setView([41.02999636902566, 108.984375], 3);
addControls使用工具集
this.map.pm.addControls({
position: "topleft",
drawCircle: false,
});
attribution創(chuàng)建自定義版權
const attrs = L.control.attribution({ prefix: "Leafet地圖" });
attrs.addTo(this.map);
Marker創(chuàng)建點
- 首先在data中定義兩個layers組
data(){
return{
// layerGroup 圖層組主要用于添加標點與線段對象
LineGroupLayer: L.layerGroup([]),
MakerGroupLayer: L.layerGroup([]),
}
}
- 定義點
// 定義圖標
const icons = L.icon({
iconUrl: imgs,
iconSize: [20, 20],
iconAnchor: [5, 5],
shadowSize: [0, 0],
});
// 創(chuàng)建點實例 將經(jīng)緯度傳入,并在該點位顯示圖標
let makerStart = L.marker([50.5, 30.5],{ icon: icons });
// 添加圖
this.MakerGroupLayer.addLayer(makerStart);
this.map.addLayer(this.MakerGroupLayer); // 添加點
創(chuàng)建線
let paths = [
[35.485106, 123.078832],
[26.787026, 126.104039],
[22.847052, 126.281993],
[18.999909, 126.578654],
]; //隨便打的點
let lineLayer = L.polyline.antPath(paths, {
// 線
paused: false, //暫停 初始化狀態(tài)
reverse: false, //方向反轉(zhuǎn)
delay: 1000, //延遲，數(shù)值越大效果越緩慢
dashArray: [10, 20], //間隔樣式
weight: 2, //線寬
opacity: 0.7, //透明度
color: "red",
pulseColor: "#fff", //塊顏色
});
this.LineGroupLayer.addLayer(lineLayer);
this.map.addLayer(this.LineGroupLayer); // 添加線
Polygon創(chuàng)建三角形
let multipolygon = new L.Polygon(
[
[
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482],
],
],
{
color: "rgba(0,0,255,.7)",
weight: 1,
}
);
multipolygon.addTo(this.map);
Popup彈窗&Tooltip提示
- Popup
// 自定義popup,并顯示圖片
var popup = L.popup()
.setLatLng([e.latlng.lat, e.latlng.lng])
.setContent(`<p>Hello world!<br />This is a nice popup.</p><img src="${imgs}"/>`)
.openOn(_this.map);
- Tooltip
// 定義圖標
const icons = L.icon({
iconUrl: imgs,
iconSize: [20, 20],
iconAnchor: [5, 5],
shadowSize: [0, 0],
});
let popupDom =
"<div class='pop-data'><ul><li class='time'><span>這是一個點：</span>" +
"</li><li><span>內(nèi)容...</span>" +
"</li><li><span>內(nèi)容...</span>" +
"</li></ul></div>"; // 綁定popup
let makerEnd = L.marker([17.686816, 83.218482], {
icon: icons,
}).bindTooltip(popupDom);
this.MakerGroupLayer.addLayer(makerEnd);
Geojson區(qū)域描邊
首先需要我們在(DataV)[datav.aliyun.com/portal/scho…
// 引入Geojson的json文件，這里直接將文件展開了，在項目中不應該這么做
let Geojson = {
type: "FeatureCollectio",
properties: { zhName: "河北省", name: "Hebei" },
geometry: {
type: "MultiPolygon",
coordinates: [
[
[116.365069,40.943216],
[116.37641,40.939681],
[116.398515,40.905999]
....
],
],
},
};
L.geoJSON(Geojson, style: {
weight: 2, //邊框粗細
opacity: 0.4, //透明度
fillColor: 'transparent', //區(qū)域填充顏色
fillOpacity: 0.3, //區(qū)域填充顏色的透明
}).addTo(this.map);
總結
根據(jù)上面的例子總結到Leaflet框架設計簡單，而且官方提供很多插件、具有高擴展性、性能良好和可用性強等特點。它可以在所有主流的桌面和移動平臺上高效運行,能夠利用主流瀏覽器中利用HTML5和CSS3的優(yōu)勢的同時也兼容老版本瀏覽器,更加適合移動端，但是只支持2D地圖，不支持3d地圖。
以上就是Leaflet 基礎入門教程示例的詳細內(nèi)容，更多關于Leaflet 基礎的資料請關注腳本之家其它相關文章！
相關文章
下面小編就為大家?guī)硪黄猨s實現(xiàn)StringBuffer的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了JavaScript數(shù)組合并案例講解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
Blog的插入HTML功能有誤。 原來在blueidea.com上看到了用ASP執(zhí)行解壓縮動作的文章，一直沒有去用心看，前日，趁老大不在，爽了一把，把它改成了用JavaScript操作的了。2008-04-04
本篇文章主要是對javascript模擬枚舉的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
當input元素還未插入文檔流之前，是可以修改它的值的，在ie和ff下都沒問題。但如果input已經(jīng)存在于頁面，其type屬性在ie下就成了只讀屬性了，不可以修改2013-10-10
這篇文章主要介紹的是一個JS獲取隨機數(shù)的函數(shù)可自定義最小值最大值,需要的朋友可以參考下2014-05-05
Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。它使用了流行的瀏覽器技術，給web開發(fā)提供了時尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。2015-06-06
JavaScript canvas實現(xiàn)七彩太陽光暈效果
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)七彩太陽光暈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
JavaScript和HTML DOM的區(qū)別與聯(lián)系及Javascript和DOM的關系
這篇文章主要介紹了JavaScript和HTML DOM的區(qū)別與聯(lián)系及Javascript和DOM的關系的相關資料,需要的朋友可以參考下2015-11-11
在現(xiàn)代Web開發(fā)中,圖像處理是一個常見的需求,尤其是為圖片添加水印,下面我們就來看看如何使用HTML5的Canvas技術為圖片添加水印,需要的可以了解下2024-11-11