1. 程式人生 > >OpenLayers學習筆記(九)— 限制地圖顯示範圍

OpenLayers學習筆記(九)— 限制地圖顯示範圍

地圖 pre 參數 nbsp 我們 方案 pro 想要 pen

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‘) }) }); ...

OpenLayers學習筆記(九)— 限制地圖顯示範圍