Leaflet 地图入门
2021-09-24 本文已影响0人
何亮hook_8285
简介
Leaflet是一个操作地图的JavaScript库，它兼容PC浏览器及移动端浏览器，它的体积本只有140K，而且对地图操作封装很多API，最重要是使用简单、API文档很完善。
下载Leaflet文件
案例效果
image-20210924230434586.png
初始化Leaflet
//初始化 leaflet 对象，并且设置中心点和缩放等级
var map = L.map('map',{
center: [71.65826179059145, -33.5299301147461], //设置中心点
zoom: 13, //设置默认缩放等级
//目前国内坐标使用：百度地图（BD09）、谷歌地图(EPSG3857)、谷歌地球(WGS84)
crs:L.CRS.EPSG3857 ,//设置坐标系类型 EPSG3857伪墨卡托投影 EPSG3395 墨卡托投影坐标 EPSG4326 WGS84
minZoom: 1 ,//最小缩放等级
maxZoom: 20, //最大缩放等级
});
添加图层
//添加地图图层
L.tileLayer('http://mt0.google.cn/vt/lyrs=m@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga', {
attribution: 'copy he liang', //设置版权
maxZoom: 18, //最大缩放比例
zoomOffset: -1,
id: 'mapbox/streets-v11',
}).addTo(map);
绑定点击事件
map.on('click',function(e){});
绑定缩放事件
map.on('zoom',function(e){});
基础函数
//获取中心坐标点
map.getCenter()
//获取当前缩放等级
map.getZoom()
//获取当前地图宽高
map.getSize()
//maker
L.marker();
//弹出窗口
L.popup();
//添加视频
L.videoOverlay();
//添加图片
L.imageOverlay()
绘制图形函数
L.polygon(); //多边形
L.circle(); //圆形
L.rectangle(); //矩形
L.polyline(); //线条
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>leaflet</title>
<script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css" rel="stylesheet">
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#map{
width: 100vw;
height: 100vh;
}
.custom{
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//初始化 leaflet 对象，并且设置中心点和缩放等级
var map = L.map('map',{
center: [71.65826179059145, -33.5299301147461], //设置中心点
zoom: 13, //设置默认缩放等级
//目前国内坐标使用：百度地图（BD09）、谷歌地图(EPSG3857)、谷歌地球(WGS84)
crs:L.CRS.EPSG3857 ,//设置坐标系类型 EPSG3857伪墨卡托投影 EPSG3395 墨卡托投影坐标 EPSG4326 WGS84
minZoom: 1 ,//最小缩放等级
maxZoom: 20, //最大缩放等级
});
//添加地图图层
L.tileLayer('http://mt0.google.cn/vt/lyrs=m@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga', {
attribution: 'copy he liang', //设置版权
maxZoom: 18, //最大缩放比例
zoomOffset: -1,
id: 'mapbox/streets-v11',
}).addTo(map);
//绑定点击事件
map.on('click',function(e){
//获取当前坐标
console.log(e.latlng);
//获取中心点
console.log(map.getCenter());
//获取当前缩放等级
console.log(map.getZoom());
//获取当前地图宽高
console.log(map.getSize());
});
//绑定缩放事件
map.on('zoom',function(e){
console.log(e)
//获取缩放等级
console.log(e.target._animateToZoom)
})
//添加图片
var imageUrl = 'https://img2.baidu.com/it/u=1340788446,734601677&fm=26&fmt=auto',
imageBounds = [[ 71.66501297663503, -33.581771850585945], [71.66204275044949, -33.57542037963868]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
//绘制多边形
var polygon = L.polygon([
[71.65847786571732, -33.58520507812501],
[71.65269700949584, -33.607006072998054],
[71.63631737502183, -33.54949951171876]
]).addTo(map);
//绘制正方形
L.circle([71.66155666920376,-33.48701477050782], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);
//矩形
let rectbounds=[[71.67257145625386,-33.54915618896485],[71.6538317088045,-33.52495193481446]];
L.rectangle(rectbounds, {color: "#ff7800", weight: 1}).addTo(map);
//绘制线条
var latlngs = [
[71.67413676508436, -33.422470092773445],
[71.66647091766181, -33.38436126708985],
[71.65826179059145, -33.443412780761726]
];
L.polyline(latlngs, {color: 'red'}).addTo(map);
//添加一个maker
L.marker([71.64734679994248,-33.48632812500001],{
title:'我是一个maker',
opacity:0.8,
alt:'hello word'
}).addTo(map);
//添加一个弹框信息
L.popup()
.setLatLng([71.65231876133423,-33.49422454833985])
.setContent("我是一个基础的弹框.")
.openOn(map);
//添加一个视频
let videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
videoBounds = [[71.66868461404579, -33.617477416992195], [71.65658712502417, -33.61988067626954]];
L.videoOverlay(videoUrl, videoBounds ).addTo(map);
//自定义弹窗
let customPopup = "Mozilla Toronto Offices<br/><img src='https://img1.baidu.com/it/u=521522717,2848995441&fm=26&fmt=auto' alt='maptime logo gif' width='150px' height='100px'/>";
let customOptions ={
'maxWidth': '200',
'className' : 'custom'
}
let firefoxIcon = L.icon({
iconUrl:'https://img2.baidu.com/it/u=1340788446,734601677&fm=26&fmt=auto',
iconSize: [38, 95],
popupAnchor: [0,-15]
});
L.marker([71.62950188628534, -33.56220245361329],{icon: firefoxIcon}).bindPopup(customPopup,customOptions).addTo(map);
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
