【02】openlayers 控件

創建地圖

var map = new ol.Map({
    //設置顯示地圖的視圖
    view: new ol.View({
        projection:'EPSG:4326',//投影方式
        center: [108, 34],//定義初始顯示位置
        zoom: 3 //定義地圖顯示層級
    }),
    //創建地圖圖層
    layers: [
        //創建一個使用Open Street Map地圖源的瓦片圖層
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    //讓id為map的div作為地圖的容器
    target: 'map',
    //控件初始默認不顯示
    controls:ol.control.defaults({
        attribution: false,
        zoom: false
    }).extend([])
});

 

地圖添加控件：map.addControl(control)

地圖刪除控件：map.removeControl(control)

 

1、比例尺控件

//比例尺控件
let control = new ol.control.ScaleLine({
    className:'ol-scale-line',//CSS類名稱,默認'ol-scale-line'
    units:'metric',//單位,默認'metric'
    //如果要使控件在地圖視口之外呈現，請指定一個目標
    //target:document.getElementById('box'),
});
map.addControl(control)
//比例尺單位
let units = {
    degrees:'degrees',//度
    imperial:'imperial',//英制英尺
    us:'us',//美制英尺
    nautical:'nautical',//海里
    metric:'metric',//公制
}
//獲取比例尺單位
control.getUnits()
//設置比例尺單位
control.setUnits('metric')
//該功能用於設置控件的目標元素
control.setTarget(target)

 

2、全屏控件

//全屏控件
let control = new ol.control.FullScreen({
    className:'ol-full-screen',//CSS類名稱,ol-full-screen
    tipLabel:'Toggle full-screen',//鼠標滑入按鈕提示信息，默認'Toggle full-screen'
    //如果要使控件在地圖視口之外呈現，請指定一個目標
    //target:document.getElementById('box'),
})
map.addControl(control)
//該功能用於設置控件的目標元素
control.setTarget(target)

 

3、導覽控件

//導覽控件
let control = new ol.control.ZoomToExtent({
    className:'ol-zoom-extent',//CSS類名稱,默認ol-zoom-extent
    tipLabel:'Fit to extent',//鼠標滑入按鈕提示信息，默認'Fit to extent'
    label:'E',//用於按鈕的文本，默認為'E'
    extent:[108,34,109,35],//縮放的程度。如果未定義，則使用視圖投影的有效性范圍。
    //如果要使控件在地圖視口之外呈現，請指定一個目標
    //target:document.getElementById('box'),
})
map.addControl(control)
//該功能用於設置控件的目標元素
control.setTarget(target)

 

4、概覽(鷹眼)控件

//概覽(鷹眼)控件 
let Control = new ol.control.OverviewMap({
    className:'ol-overviewmap ol-custom-overviewmap',//CSS類名稱，默認'ol-overviewmap'
    collapsed:false,//控件初始是否折疊,默認為true
    collapseLabel:'«',//折疊時的按鈕文本,默認為"«"
    label:'»',//展開時的按鈕文本，默認為"»"
    collapsible:true,//控件是否可以折疊，默認為true
    tipLabel:'Overview map',//鼠標滑入按鈕提示信息,默認'Overview map'
    layers:[//概覽圖層
        new ol.layer.Tile({
               source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        projection:'EPSG:4326',//投影方式
        center: [108, 34],//定義初始顯示位置
        zoom: 3 //定義地圖顯示層級
    }),
    //如果要使控件在地圖視口之外呈現，請指定一個目標
    //target:document.getElementById('box'),
})
map.addControl(Control)
//該功能用於設置控件的目標元素
Control.setTarget(target)

 

5、鼠標位置控件

//鼠標位置控件
let Control = new ol.control.MousePosition({
    className: 'ol-mouse-position', //css名稱，默認'ol-mouse-position'
      coordinateFormat: function(param){
        return ol.coordinate.format(param,'{x}, {y}',6);
    }, //坐標格式
      projection: 'EPSG:4326',//投影方式
      //如果要使控件在地圖視口之外呈現，請指定一個目標
    //target:document.getElementById('box'),
});
map.addControl(Control)
//該功能用於設置控件的目標元素
Control.setTarget(target)

 

6、縮放滑塊控件

//縮放滑塊控件
let Control = new ol.control.ZoomSlider({
    className:'ol-zoomslider',//CSS類名稱,默認'CSS類名稱'
});
map.addControl(Control)

 

7、縮放控件

//縮放控件
let control = new ol.control.Zoom({
    className:'ol-zoom',//CSS類名稱,默認ol-zoom
    zoomInLabel:'+',//放大按鈕文本，默認'+'
    zoomOutLabel:'-',//縮小按鈕文本,默認'-'
    zoomInTipLabel:'Zoom in',//放大按鈕提示信息，默認'Zoom in'
    zoomOutTipLabel:'Zoom out',//縮小按鈕提示信息，默認'Zoom out'
    delta:1,//每次點擊都會應用縮放比例,默認為1
    //如果要使控件在地圖視口之外呈現，請指定一個目標
    //target:document.getElementById('box'),
})
map.addControl(control)
//該功能用於設置控件的目標元素
zoom_control.setTarget(target)

 

8、版權控件

//版權控件
let attribution = new ol.control.Attribution({
    className:'ol-attribution',//CSS類名稱,默認ol-attribution
    collapsible:true,//版權按鈕是否可以折疊
    collapsed:true,//版權按鈕初始化是否折疊
    tipLabel:'Attributions',//按鈕文本提示信息，默認'Attributions'
    label:'i',//按鈕折疊時文本，默認'i'
    collapseLabel:'»'//按鈕展開時文本,默認'»'
    //如果要使控件在地圖視口之外呈現，請指定一個目標
    //target:document.getElementById('box'),
})
map.addControl(attribution)

 

9、旋轉控件

//旋轉控件
let roter = new ol.control.Rotate({
    className:'ol-rotate',//CSS類名稱,默認'ol-rotate'
    label:'⇧',//旋轉按鈕文本，默認為“⇧”
    tipLabel:'Reset rotation',//旋轉按鈕提示信息，默認'Reset rotation'
    autoHide:false,//旋轉為0時隱藏控件,默認為true
    duration:250,//動畫持續時間，默認250毫秒
    //如果要使控件在地圖視口之外呈現，請指定一個目標
    //target:document.getElementById('box'),
})
map.addControl(roter)