02 openlayers 控制項

建立地圖

var map = new

ol.map(),
//建立地圖圖層
layers: [
//建立乙個使用open street map地圖源的瓦片圖層
newol.layer.tile()
],//讓id為map的div作為地圖的容器
target: 'map',
//控制項初始預設不顯示
controls:ol.control.defaults().extend()
});

比例尺控制項

let control = new

ol.control.scaleline();

map.addcontrol(control)

//比例尺單位

let units =

//獲取比例尺單位

control.getunits()

//設定比例尺單位

control.setunits('metric')

//該功能用於設定控制項的目標元素

control.settarget(target)

2、全屏控制項

//

全屏控制項
let control = new
ol.control.fullscreen()
map.addcontrol(control)
//該功能用於設定控制項的目標元素
control.settarget(target)

//

導覽控制項
let control = new
ol.control.zoomtoextent()
map.addcontrol(control)
//該功能用於設定控制項的目標元素
control.settarget(target)

//

概覽(鷹眼)控制項 
let control = new
ol.control.overviewmap()
],view: 
newol.view(),
//如果要使控制項在地圖視口之外呈現，請指定乙個目標
'box'),
})map.addcontrol(control)
//該功能用於設定控制項的目標元素
control.settarget(target)

//

滑鼠位置控制項
let control = new
ol.control.mouseposition(, ',6);
}, //座標格式
projection: 'epsg:4326',//
投影方式
//如果要使控制項在地圖視口之外呈現，請指定乙個目標
'box'),
});map.addcontrol(control)
//該功能用於設定控制項的目標元素
control.settarget(target)

//

縮放滑塊控制項
let control = new
ol.control.zoomslider();
map.addcontrol(control)

//

縮放控制項
let control = new
ol.control.zoom()
map.addcontrol(control)
//該功能用於設定控制項的目標元素
zoom_control.settarget(target)

//

版權控制項
let attribution = new
ol.control.attribution()
map.addcontrol(attribution)

//

旋轉控制項
let roter = new
ol.control.rotate()
map.addcontrol(roter)

OpenLayers之載入縮放控制項

1 一般的地圖開啟都有放大 縮小和全圖的導航條，以便於使用者對地圖的檢視，下面我們將在openlayers中實現這一功能 2 在之前建立的空白站點下面新建乙個html的頁面，引入ol.js和ol.css檔案，然後在body標籤中建立乙個div，作為地圖載入的容器 3 實現 4 執行結果 此時我們開啟...

Openlayers案例7 載入比例尺控制項

lang en charset utf 8 name viewport content width device width,initial scale 1.0 載入比例尺控制項title rel stylesheet href openlayers css ol.css src openlayer...

02 UIView 調節控制項層次

1.uiview常用方法 插入檢視，位置根據索引值而定 superview insertsubview view2 atindex 0 插入檢視，位置在 abovesubview view1 上面 superview insertsubview view2 abovesubview view1 插入...