2024年最新Leaflet中如何限制地图的拖动范围_leaflet maxbounds，2024年最新特殊渠道拿到阿里大厂面试真题

最新推荐文章于 2024-09-12 11:50:48 发布

2401_84975622

最新推荐文章于 2024-09-12 11:50:48 发布

阅读量681

点赞数 24

分类专栏：程序员文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84975622/article/details/138848891

版权

程序员专栏收录该内容

39 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

L.marker([22.024546, 110.654297]).addTo(mymap)
		.bindPopup("<b>Hello world!</b><br />我是一个提示框.").openPopup();

三、原因分析

造成以上问题的原因是什么呢？众所周知，在地理信息系统中，对地理范围是有一个明确的定义的。经度范围是0-180°，纬度范围是0-90°。从0°经线算起，向东、向西各分作180°，以东的180°属于东经，习惯上用“百E”作代号，以西的180°属于西经，习惯上用“W”作代号。我们通常说的纬度度指的是大地纬度。其数值在0至90度之间。位于赤道以北的点的纬度叫北纬，记为N；位于赤道以南的点的纬度称南纬，记为S。为了研究问题方便，人们把纬度分问为低、中、高纬度。0°～30°为低纬度， 30°～ 60°为中纬度， 60～90°为高答纬度。

了解了上述的知识后就知道了解决上述问题的办法，只需要在Leaflet中定义地图时，限制以下地图的经纬度范围。

四、Leaflet API

通过查找Leaflet的api我们发现了，在地图参数中有以下的定义：


maxBounds	LatLngBounds	null	When this option is set, the map restricts the view to the given geographical bounds, bouncing the user back if the user tries to pan outside the view. To set the restriction dynamically, use setMaxBounds method.

默认的情况下，maxBounds参数设置为空。设置此选项后，地图会将视图限制在给定的地理范围内，如果用户试图在视图之外平移，则将用户弹回。要动态设置限制，请使用 setMaxBounds方法。通过这种方式就能限制地图的最大范围。

五、代码实现

1、leaflet资源引入

<head>
	<title>经纬度投影-限制地图拖动范围</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
	<link rel="stylesheet" href="/2d/leaflet/leaflet.css" />
    <script src="/2d/leaflet/leaflet.js?v=1.0.0"></script>
</head>

2、地图定义

L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {
		code: 'EPSG:4326',
		projection: L.Projection.LonLat,
		transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),
		scale: function (zoom) {
			return 256 * Math.pow(2, zoom - 1);
		}
	});

// 第一种设置方式，可行
//限制地图的拖动范围是正负90到正负180，这样才合理。
var corner1 =  L.latLng(-90, -180); //设置左上角经纬度
var corner2 = L.latLng(90, 180);	//设置右下点经纬度
var bounds = L.latLngBounds(corner1, corner2); //构建视图限制范
var mymap = L.map('mapid',{crs:L.CRS.CustomEPSG4326,maxBounds:bounds}).setView([29.052934, 104.0625], 5);

这里的关键代码就是如下代码，通过这两个位置来限制拖动情况。地图的定义在crs这里，我使用了一个自己的转换规则，这取决你的瓦片读取方式。如果标准的WGS84投影，可以不需要这么定义，直接使用默认的方式加载即可。

var corner1 =  L.latLng(-90, -180); //设置左上角经纬度
var corner2 = L.latLng(90, 180);	//设置右下点经纬度
var bounds = L.latLngBounds(corner1, corner2); //构建视图限制范围

除了使用这种初始定义的方式，还可以使用setMaxBounds(args)这种函数调用来进行，效果是一样的，调用代码：mymap.setMaxBounds(bounds);这种方式对控制显得更灵活方便。

3、完整代码实例

<!DOCTYPE html>
<html>
<head>
	<title>经纬度投影-限制地图拖动范围</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
	<link rel="stylesheet" href="/2d/leaflet/leaflet.css" />
    <script src="/2d/leaflet/leaflet.js?v=1.0.0"></script>
</head>
<body>
<div id="mapid" style="width: 100%; height: 600px;"></div>
<script>

    L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {
		code: 'EPSG:4326',
		projection: L.Projection.LonLat,
		transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),
		scale: function (zoom) {
			return 256 * Math.pow(2, zoom - 1);
		}
	});

    // 第一种设置方式，可行
    //限制地图的拖动范围是正负90到正负180，这样才合理。
	/*var corner1 =  L.latLng(-90, -180); //设置左上角经纬度
    var corner2 = L.latLng(90, 180);	//设置右下点经纬度
    var bounds = L.latLngBounds(corner1, corner2); //构建视图限制范围
	var mymap = L.map('mapid',{crs:L.CRS.CustomEPSG4326,maxBounds:bounds}).setView([29.052934, 104.0625], 5);*/

	var corner1 =  L.latLng(-90, -180); //设置左上角经纬度
    var corner2 = L.latLng(90, 180);	//设置右下点经纬度
    var bounds = L.latLngBounds(corner1, corner2); //构建视图限制范围
	var mymap = L.map('mapid',{crs:L.CRS.CustomEPSG4326}).setView([29.052934, 104.0625], 5);
    
	//第二种设置方式，可行
	//mymap.setMaxBounds(bounds);

	L.tileLayer('http://localhost:8086/data/basemap_nowater/1_10_tms/{z}/{x}/{y}.jpg', {
		maxZoom: 16,
		attribution: 'yelangkingMap data &copy; <a href="https://www.openstreetmap.org/">本地瓦片加载</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11',
		tileSize: 256,
		zoomOffset: -1


![img](https://img-blog.csdnimg.cn/img_convert/158aee25dd3da2147d8e2505268962cb.png)
![img](https://img-blog.csdnimg.cn/img_convert/d964ad6cf2fb4c79426b068e7ecc702e.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**