openlayers限制地图拖动区域

简介:

    现在做webgis基本都会用到openlayers或者leaflet。那么在显示地图的时候,特别是显示小区域地图的时候,由于地图区域较小,就会存在把地图拖动到显示区域之外的现象。那么该如何限制地图拖动的区域呢。   

    在openlayers2中有restrictedExtent属性,直接设置下即可。

var options = {
			controls : [
			            new OpenLayers.Control.Navigation()
			            ],
            projection: new OpenLayers.Projection("EPSG:4326"),
            maxResolution: 0.703125,
           // minScale:1/3500,
//            minScale:100,
			numZoomLevels :22 ,
			restrictedExtent: restrictedExtent,
            //maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
			//allOverlays : true
    };

	//初始化map对象
	this.map = new OpenLayers.Map('map',options);

但是在openlayers3中,由于没有直接的属性和接口使用,因此需要用别的方法。我用的方法就是在map的view对象中添加extent属性来限制。


map.setView(new ol.View({
			center: mapCenter,
			projection: this.projection,
			//extent : mapExtent,
			zoom: 18,
			minZoom: 16,
			maxZoom: 23,
			extent:[mapExtent[1]-0.0001,mapExtent[0]-0.0001,mapExtent[3]+0.0001,mapExtent[2]+0.0001]
		}));


相关文章
ThreeJs添加拖动辅助线
这篇文章介绍了在Three.js中使用TransformControls组件来添加拖动辅助线,实现对3D模型在不同轴向上进行直观的拖动和平移操作。
854 0
|
机器学习/深度学习 编解码 测试技术
YOLOv11改进策略【模型轻量化】| 替换骨干网络为 2024轻量化网络MoblieNetV4:移动生态系统的通用模型
YOLOv11改进策略【模型轻量化】| 替换骨干网络为 2024轻量化网络MoblieNetV4:移动生态系统的通用模型
1200 8
YOLOv11改进策略【模型轻量化】| 替换骨干网络为 2024轻量化网络MoblieNetV4:移动生态系统的通用模型
|
JSON API 数据格式
eBay商品详情接口(ebay API系列)
eBay 商品详情接口是电商从业者、开发者和数据分析师获取商品详细信息的重要工具,涵盖标题、价格、库存、卖家信息等。使用前需在 eBay 开发者平台注册并获取 API 凭证,通过 HTTP GET 请求调用接口,返回 JSON 格式数据。Python 示例代码展示了如何发送请求并解析响应,确保合法合规使用数据。
571 12
|
小程序 开发者
微信开发者工具如何集成SVN、同时解决集成SVN无效果的问题
这篇文章介绍了如何在微信开发者工具中集成SVN版本控制系统,并提供了解决集成后无效果问题的方法。
微信开发者工具如何集成SVN、同时解决集成SVN无效果的问题
|
存储 NoSQL 物联网
这些案例展示了MongoDB在不同行业中的广泛应用
这些案例展示了MongoDB在不同行业中的广泛应用
810 5
|
前端开发
typora自定义主题
typora自定义主题
564 2
|
Java
线程 - 一句话说明白 Java 线程池中 shutdown 和 shutdownNow 的区别
线程 - 一句话说明白 Java 线程池中 shutdown 和 shutdownNow 的区别
1177 0
|
编解码 定位技术
Cesium案例解析(七)——Layers在线地图服务
Cesium案例解析(七)——Layers在线地图服务
585 0
|
芯片
LED面板显示屏驱动芯片
一、基本概述 TM1638是一种带键盘扫描接口的LED(发光二极管显示器)驱动控制专用IC,内部集成有MCU数字接口、数据锁存器、LED驱动、键盘扫描等电路。本产品质量可靠、稳定性好、抗干扰能力强。 二、主要应用场合 主要适用于家电设备(智能热水器、微波炉、洗衣机、空调、电磁炉)、机顶盒、电子称、智能电表等数码管或LED显示设备。 三、管脚说明 DIO口输出数据时为N管开漏输出,在读键的时候需要外接1K-10K的上拉电阻。推荐10K的上拉 电阻。DIO在时钟的下降沿控制N管的动作,此时读数时不稳定,在时钟的上升沿读数才时稳定。 四、串行数据传输 读取和接收1个BIT都在时钟的上
403 1
|
Rust 安全 C#
c#如何使用WASM跨语言调用?
c#如何使用WASM跨语言调用?
444 0
c#如何使用WASM跨语言调用?