限制打开图层地图拖出屏幕

作者: 哦豁
发布时间: 2024-02-08 04:00:48 (2月前)
转自：

5 条回复

0#
回复此人
北极星微控 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是OpenLayers3的另一种方法。根据您想要引用的内容，最简单的方法是直接从您想要的投影中获取范围（ <code> ol.proj.Projection </code> ）或层（任何类别的 <code> ol.layer </code> ）使用 <code> getExtent() </code> 功能。如果是EPSG：3857，则可以： </p> <pre> <code> var map = new ol.Map({ ... view: new ol.View({ ... extent: ol.proj.get("EPSG:3857").getExtent() }) }); </code> </pre> </DIV>

编辑
1#
回复此人
与之 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我在这个要点上创建了一个非常基本的答案： <a href="https://gist.github.com/cfh294/e4495b9ff6d989db950ccd2573422808#file-restrictedextent-js" rel="nofollow noreferrer"> https://gist.github.com/cfh294/e4495b9ff6d989db950ccd2573422808#file-restrictedextent-js </A> </p> <P> “肉和土豆”： </p> <pre> <code> map.on("movestart", function(evt) { panStartCenter = view.getCenter(); }); map.on("moveend", function(evt) { var panEndCenter = view.getCenter(); var x = panEndCenter[0]; var y = panEndCenter[1]; }); // if the center no longer resides in the max extent, snap the map back to where it was // before the pan if (!(ol.extent.containsXY(maxExtent, x, y))) { view.setCenter(ol.Coordinate(panStartCenter)); } }); </code> </pre> </DIV>

编辑
2#
回复此人
取之 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我认为你真正想要的财产是 <code> restrictedExtent </code> 。该 <code> restrictedExtent </code> 控制用户能够平移的地图部分。如果您不限制缩放级别，则用户仍然可以缩小以查看地图的其余部分，但是他们将无法平移地图。 </p> <P> 首先，而不是使用 <code> OpenLayers.Bound.FromString("-160,-90.0,160,90.0") </code> ，你应该使用 <code> new OpenLayers.Bounds(-160, -90, 160, 90) </code> 。 </p> <P> 如果是 <code> (-160, -90, 160, 90) </code> （可能是整个地图？），这意味着用户可以自由地平移这些坐标，如果这是整个地图，那么它不会限制任何东西。 </p> <P> 在限制范围的情况下 <code> (0, 0, 0, 0) </code> - 地图的中心，用户无法在任何地方平移 - 地图始终固定在中心点 - 但它们仍然可以自由缩放，因为它不受 <code> restrictedExtent </code> 。 </p> <P> 中的值 <code> (-160, -90, 160, 90") </code> 是以度为单位的坐标 - 它是一个边界框 <code> (left, bottom, right, top) </code> 。可以使用各种不同的坐标系，您可以明确指定要使用的坐标系 <code> projection: "EPSG:3857" </code> 。 </p> <P> 对于像您这样的自定义地图图层，它们只是与创建图层时传入的边界相关的坐标。 </p> <P> 的<strong> 要解决您的问题： </强> </p> <P> 我创建了地图 <code> layer </code> 有界限 <code> new OpenLayers.Bounds(-180,-90.0,180,90.0) </code> 并在上面设置一个restrictedExtent <code> map </code> （而不是图层）具有相同的边界框。 </p> <pre> <code> map = new OpenLayers.Map('map', { controls: [], restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90) }); mapLayer = new OpenLayers.Layer.Image( 'My map', 'http://tchanca.com/private/Masse1080.jpg', new OpenLayers.Bounds(-180,-90.0,180,90.0), new OpenLayers.Size(screenSize.width, screenSize.height), {} ); map.addLayer(mapLayer); </code> </pre> <P> 既然你的 <code> mapLayer </code> 占据了整个范围 <code> map </code> 用户不能超出它以查看任何白色边距，也不能在它外面平移，因为它之外没有任何东西存在。 </p> <P> <a href="http://jsfiddle.net/mhicauber/t8K4p/1/" rel="nofollow"> 的jsfiddle </A> </p> </DIV>

编辑
3#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于那些来到这里并使用OpenLayers 3的人来说，这里有一些可能有用的信息。 </p> <P> 没有更多的限制范围。相反，您必须在图层和视图中设置“范围”选项。 </p> <P> 也没有更多的OpenLayers.Bounds。而是使用ol.extent，这是一个包含4个值的数组。 </p> <P> 例： </p> <pre> <code> var maxExtent = ol.proj.transformExtent([-122.445717,47.576989,-122.218094,47.71623], 'EPSG:4326', 'EPSG:3857') var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'watercolor' }), extent: maxExtent }), new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'terrain-labels' }), extent: maxExtent }) ], target: 'map', view: new ol.View({ center: ol.proj.transform( [-122.333407, 47.607436], 'EPSG:4326', 'EPSG:3857'), extent: maxExtent, zoom: 14 }) }); </code> </pre> </DIV>

编辑

登录后才能参与评论