首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在鼠标拖动过程中限制OpenLayers 5地图

如何在鼠标拖动过程中限制OpenLayers 5地图
EN

Stack Overflow用户
提问于 2019-05-18 21:13:50
回答 1查看 919关注 0票数 0

在openlayers.js (当前版本5.3.0)中,如何在鼠标拖动时限制地图?lat的范围应为-90,90。

与下面的两个示例相比,

https://openlayers.org/en/latest/examples/drag-rotate-and-zoom.html?q=drag

https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/

如果将地图拖动到经度-90,90上,则地图框中的地图将自动限制范围,并且OpenLayers中的地图将显示空白区域。

这里有同样的问题,但没有完美的答案。https://gis.stackexchange.com/questions/222698/openlayers3-how-to-limits-the-drag-range-of-the-map

我尝试的解决方案是1.添加map.on('moveend'...)监听器2.使用缩放检测地图中心3.如果超出范围,则执行map.getView().animate({ center:...,.animate:100})

但是动画的过程是,你知道的,从一些空白区域过渡到指定的中心。

Map构造函数中有什么选项吗?或者在OpenLayers中可以进行黑客攻击的源代码的任何位置?

EN

回答 1

Stack Overflow用户

发布于 2019-05-18 21:51:49

请参阅Limit Panning OpenLayers 5

下面是具有全局范围的相同演示:

代码语言:javascript
运行
复制
var view = new ol.View();

var map = new ol.Map({
    layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ],
    target: 'map'
});

function openMap() {

    map.setView(view);
    var extent = ol.proj.transformExtent([ -540, -85, 540, 85], 'EPSG:4326', 'EPSG:3857');

    // fit the extent horizontally or vertically depending on screen size
    // to determine the maximum resolution possible
    var size = map.getSize();
    var width = ol.extent.getWidth(extent);
    var height = ol.extent.getHeight(extent);
    if (size[0]/size[1] > width/height) {
        view.fit([extent[0],(extent[1]+extent[3])/2,extent[2],(extent[1]+extent[3])/2], { constrainResolution: false });
    } else {
        view.fit([(extent[0]+extent[2])/2,extent[1],(extent[0]+extent[2])/2,extent[3]], { constrainResolution: false });
    }
    var maxResolution = view.getResolution();
    var resolution = 0;

    function resChange() {
        var oldView = map.getView();
        if (resolution == 0 || oldView.getZoom()%1 == 0) {
            resolution = oldView.getResolution();
            var width = map.getSize()[0] * resolution;
            var height = map.getSize()[1] * resolution;
            var newView = new ol.View({
                projection: oldView.getProjection(),
                extent: [extent[0]+(width/2), extent[1]+(height/2), extent[2]-(width/2), extent[3]-(height/2)],
                resolution: resolution,
                maxResolution: maxResolution,
                rotation: oldView.getRotation() 
            });
            newView.setCenter(newView.constrainCenter(oldView.getCenter()));
            newView.on('change:resolution', resChange);
            map.setView(newView);
        }
    }
    resChange();

}
map.on('change:size', openMap);
openMap();
代码语言:javascript
运行
复制
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

如果您可以等到OpenLayers 6发布,或者不介意使用测试版,则范围选项将限制可见范围,除非指定了multiWorld选项,否则范围将默认为一个全局https://github.com/openlayers/openlayers/blob/master/changelog/upgrade-notes.md

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56199292

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档