地图控件
1.视图跳转控件（ZoomToExtent）
视图跳转控件用于将地图快速跳转到指定的范围。示例：
// 视图跳转控件（extent这里用的是学校的经纬度范围，可以按照需要修改）
const ZoomToExtent = new ol.control.ZoomToExtent({extent:[114.612,30.457544,114.622,30.457544]
})
map.addControl(ZoomToExtent)
2.放大缩小控件（ZoomSlider）
放大缩小控件用于控制地图的缩放级别，示例：
// 放大缩小控件
const zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider)
3.全屏控件（FullScreen）
全屏控件允许用户将地图切换到全屏模式，示例：
// 全屏控件
const fullScreen = new ol.control.FullScreen();
map.addControl(fullScreen)
4. 鼠标位置控件（MousePosition）
鼠标位置控件用于显示鼠标当前所在位置的坐标，示例：
// 鼠标位置控件
const mousePositionControl = new ol.control.MousePosition({coordinateFormat: ol.coordinate.createStringXY(4), // 设置坐标格式projection: 'EPSG:4326', // 设置投影方式className: 'custom-mouse-position', // 自定义样式类名target: document.getElementById('mouse-position') // 显示位置的元素
});
map.addControl(mousePositionControl);
5. 地图全局视图控件（OverviewMap）
地图全局视图控件（也称为鹰眼控件）用于显示地图的全局视图，示例：
// 地图全局视图控件
const overviewMapControl = new ol.control.OverviewMap({className: 'ol-overviewmap', // 自定义样式类名layers: [new ol.layer.Tile({source: new ol.source.OSM()})], // 设置图层collapseLabel: '≡', // 折叠时的标签label: 'O', // 展开时的标签collapsed: false // 初始是否折叠
});
map.addControl(overviewMapControl);
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入ol依赖 --><link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"><script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script><style>.ol-zoomslider {top: 7.5em;}</style>
</head>
<body><!-- 2.设置图的挂载点 --><div id="map"></div><script>// 3.初始化一个高德图层const gaode = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',wrapX: false})});// 初始化openlayer地图const map = new ol.Map({// 将初始化的地图设置到id为map的DOM元素上target:"map",layers:[gaode],// 设置视图view:new ol.View({ //（这里用的是学校的经纬度，可以按照需要修改）center:[114.617104,30.457544],// 设置地图的放大级别zoom:17,projection:"EPSG:4326"})})// 视图跳转控件（这里用的是学校的经纬度范围，可以按照需要修改）const ZoomToExtent = new ol.control.ZoomToExtent({extent:[114.612,30.457544,114.622,30.457544]})map.addControl(ZoomToExtent)// 放大缩小控件const zoomslider = new ol.control.ZoomSlider();map.addControl(zoomslider)// 全屏控件const fullScreen = new ol.control.FullScreen();map.addControl(fullScreen)</script></body>
</html>