Leaflet官网:
Leaflet - a JavaScript library for interactive mapshttps://leafletjs.com/此文档当作记录使用,无详细解释,瓦片自己的可去搜索下载.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>地图</title>
<link href="js/leafletmap/leaflet.css" rel="stylesheet"/>
<style>
.maptop {
width: 1200px;
height: 700px;
}
#map {
width: 100%;
height: 100%;
}
.measure-close{
top: 3px;
position: absolute;
right: 10px;
}
</style>
</head>
<body>
<!-- 地图 -->
<div class="maptop">
<div id="map">
</div>
<div id="mapButton">
<br><br><br><br>
<button type="button" id="juliMeasure" onclick="juliMeasure()">测距</button>
<span style="margin-left: 50px;">经度 : </span>
<input autocomplete="off" id="longitude">
<span>纬度 : </span>
<input autocomplete="off" id="latitude">
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery/1.11.3/jquery.min.js"></script>
<script src="js/leafletmap/leaflet.js"></script> <!-- 基础地图js -->
<script src="js/leafletmap/leaflet.polylineDecorator.js"></script> <!-- 线样式js 官网插件可下载 -->
<script src="js/leafletmap/l.ellipse.js"></script> <!-- 椭圆js,官网插件可下载 -->
<script src="js/leafletmap/turf.min.js"></script> <!-- 测距的js 官网插件可下载-->
<script>
var polylineMap=null;
var rangingSF=false;
var paths = [
[38, 0],
[38, 180],
[0, 0]
]
// 离线地图(瓦片,也可使用瓦片数据库)
var mapUrl = 'mapImgs/{z}/{y}/{x}.png';
var map = L.map("map", {
center: [20.59, 20.29],
zoom: 1,
});
map.doubleClickZoom.disable(); //禁止双击放大地图
L.tileLayer(mapUrl, { // 地图图层
maxZoom: 4,
minZoom: 1
}).addTo(map);
//地图划线
polylineMap=new L.polyline(paths,{
color:'red',
weight:1,
}).addTo(map);
//监听鼠标移动事件
map.on('mousemove', onMove);
var mypop = L.popup();
function onMove(e){
//if(!rangingSF){
//这个是显示在鼠标上的经纬度,跟随鼠标移动
/* var content="经纬度:"+e.latlng.lat+" "+e.latlng.lng;
mypop.setLatLng(e.latlng)
.setContent(content)
.openOn(map); */
//显示在input框
$("#longitude").val(e.latlng.lng);
$("#latitude").val(e.latlng.lat);
//}else{
//这个是测距的时候鼠标移动线跟着移动的功能--放开测距点可根据鼠标移动而移动
/* if (tempPoints.length) {
tempPoints[1] = e.latlng;
tempLayer.setLatLngs(tempPoints);
} */
//}
}
//绘制椭圆
/*
latlng - 椭圆中心的位置。
半径 - 以米为单位的半长轴和半短轴
倾斜 - 椭圆从西旋转的度数
options - 传递给 L.Path 的选项字典,具体官方查看使用
*/
var ellipse = L.ellipse([51.5, -0.09], [5000000, 1000000], 60,{color:'red',weight:1}).addTo(map);
/* 测距功能 */
var layer = L.polyline([], {
}).addTo(map);
// 绘制mousemove line
const tempLayer = L.polyline([], {
}).addTo(map);
//点集合
let tempPoints = [];
// popup 展示距离
const popup = L.popup({
autoClose: false,
closeButton: false
});
// 自定义 展示框
const setTipText = content => {
const el = document.createElement("div");
el.className = "measure-marker";
const text = document.createElement("span");
text.className = "measure-text";
text.innerHTML = content;
const close = document.createElement("span");
close.className = "leaflet-popup-close-button measure-close";
close.innerHTML="X";
close.addEventListener("click", () => {
remove();
});
el.appendChild(text);
el.appendChild(close);
return el;
};
//点击显示的
const clickHandler = e => {
layer.addLatLng(e.latlng);
tempPoints[0] = e.latlng;
const len = turf.length(layer.toGeoJSON(), { units: "kilometers" });
popup
.setLatLng(e.latlng)
.setContent(setTipText(len.toFixed(2) + " 公里"))
.openOn(map);
};
// 结束绘制
const remove = () => {
layer.remove();
//在重新创建layer
layer = L.polyline([], {}).addTo(map);
popup.remove();
//点集合清空
tempPoints.length = 0;
};
/* 开始测距 */
function juliMeasure(){
if(!rangingSF){
rangingSF=true;
map.on("click", clickHandler);
$("#juliMeasure").css("background","bisque");
map.doubleClickZoom.disable();
}else{
rangingSF=false;
remove();
map.off("click", clickHandler);
$("#juliMeasure").css("background","bottom");
map.doubleClickZoom.disable();
}
}
</script>
</html>