基于 Leaflet做离线地图及基本功能（监听，测距，线，圆）

最新推荐文章于 2022-06-30 11:37:45 发布

取个网名真的难

最新推荐文章于 2022-06-30 11:37:45 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： js html 前端

本文链接：https://blog.csdn.net/GaoYC123/article/details/125441775

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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;">经度&nbsp;:&nbsp;</span>
			<input autocomplete="off" id="longitude">
			<span>纬度&nbsp;:&nbsp;</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>