作者:Carlo
前景:最近很多小伙伴在项目中希望能设置地图拖动的最大边界范围,并且只允许在范围内进行拖动地图的操作,超出范围就无法进行拖动的操作;或者在拖动超过最大边界范围时,自动跳转返回。接下来我将对此进行详细的介绍。
首先我们需要了解map
类的两个方法,参考leaflet源生api文档
setMaxBounds
方法:给视图设置边界,地图会将视图限制在给定的地理边界内,如果用户试图在视图外平移,则会将用户弹回。
map. setMaxBounds(<LatLngBounds> bounds)
panInsideBounds
方法:将地图平移到位于给定边界内的最近视图,使用特定选项控制平移动画。
panInsideBounds(<LatLngBounds> bounds, <Pan options> options?)
完整代码参考:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title data-i18n="resources.title_tiledMapLayer4326"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, url = host + "/iserver/services/map-world/rest/maps/World";
var bounds = L.latLngBounds([
[26.0858822624737, 101.828322359786], // 右下
[26.0858822624737, 97.3471862323636], // 左下
[34.3139500892738, 97.3471862323636], // 左上
[34.3139500892738, 101.828322359786], // 右上
]);
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [30.19991617587375, 99.5877542960748],
maxZoom: 18,
zoom:8
});
new L.supermap.TiledMapLayer(url).addTo(map);
//浏览范围中心点
var circleMarker = L.circleMarker([30.19991617587375, 99.5877542960748], {color: 'blue'}).addTo(map);
//红框所在范围即为设置的最大边界范围
var polygon = L.polygon([[26.0858822624737, 101.828322359786],[26.0858822624737, 97.3471862323636],[34.3139500892738, 97.3471862323636],[34.3139500892738, 101.828322359786]], {color: 'red'});
polygon.addTo(map);
//实现每一次拖动后都返回到该范围
map.setMaxBounds(bounds);
//监听地图拖动事件,达到最大边界后禁止地图拖动
map.on('drag', function() {
map.panInsideBounds(bounds, { animate: true });
});
</script>
</body>
</html>
效果展示:
setMaxBounds
方法实现每一次拖动后都返回到该范围
panInsideBounds
方法监听地图拖动事件,达到最大边界后禁止地图拖动