SuperMap iClient for Leaflet实现达到最大边界范围后禁止拖动

最新推荐文章于 2024-05-14 12:06:21 发布

supermapsupport

最新推荐文章于 2024-05-14 12:06:21 发布

阅读量948

点赞数 3

分类专栏： WebGIS 文章标签： javascript

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/127571084

版权

WebGIS 专栏收录该内容

136 篇文章 29 订阅

订阅专栏

作者：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方法监听地图拖动事件，达到最大边界后禁止地图拖动
在这里插入图片描述

supermapsupport

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
SuperMap iClient for Leaflet实现达到最大边界范围后禁止拖动

最近很多小伙伴在项目中希望能设置地图拖动的最大边界范围，并且只允许在范围内进行拖动地图的操作，超出范围就无法进行拖动的操作；或者在拖动超过最大边界范围时，自动跳转返回。
复制链接

扫一扫