创建地图
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)