openlayers入门02 -- 地图控件-优快云博客

本文链接：https://blog.youkuaiyun.com/2202_75324779/article/details/147138596

地图控件

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>