OpenLayers学习笔记(九)— 限制地图显示范围

OpenLayers学习笔记(九)— 限制地图显示范围

openlayers 3 地图上限制地图显示及拖动范围,坐标系是4326转3857,中心经纬度精确到小数点后六位,减少误差

GitHub:八至

作者:狐狸家的鱼

本文链接:ol3-限制地图显示及拖动范围

查看extent参数可以知道:

所以可以这样进行设置范围:

var view = new ol.View({
       ...
       extent: [minx,miny,maxx,maxy]
       ...
});
var map = new ol.Map({
       ...
       view: view,
       ...
});

并且需要考虑地图投影,比如在WGS84和球形墨卡托之间,有一个转换方案:

var map = new ol.Map({
      .
      .
      .
      view: new ol.View({
           extent:  ol.proj.transfromExtent([minx, miny, maxx, maxy], 'EPSG:4326', 'EPSG:3857');
            .
            .
            .
           )}
)}

而当缩放地图时,显示的范围不是我们想要的结果,可以限制缩放层级,这是另一种选择:

...
var map = new ol.Map({
             layers: [...],
             overlays: [...],
             target: document.getElementById('map'),
             view: new ol.View({
                center: ol.proj.transform([minx,miny,maxx,maxy], 
                        'EPSG:4326', 'EPSG:3857'),
                zoom: ...,    
                maxZoom: ..., 
                minZoom: ..., 
                extent: ol.proj.transform([minx-n,miny-n,maxx+n,maxy+n], 
                        'EPSG:4326', 'EPSG:3857')
                })
           });
...

 

posted @ 2019-02-14 13:05 狐狸家的鱼 阅读(...) 评论(...) 编辑 收藏

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值