02openlayers 控件

Posted 2021-03-05 mashuai666

创建地图

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)