OpenLayer-地图控件操作

@仗剑走天涯

已于 2024-04-30 08:12:53 修改

阅读量206

点赞数 1

文章标签：前端图像处理 html javascript

于 2024-04-27 12:26:24 首次发布

本文链接：https://blog.csdn.net/zhushanlin/article/details/138246470

版权

1 、添加导航控件

<!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、导入openlayers的依赖 -->
    <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>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        .ol-zoomslider {
            top: 7.5em !important;
            background-color: #652e8080;
        }        * {
                     margin: 0;
                     padding: 0
                 }

        #map {
            width: 100vw;
            height: 100vh;
        }

        .ol-zoomslider:hover {
            cursor: pointer;
            background-color: #652e8090;
        }

        #mouse-position {
            position: fixed;
            bottom: 20px;
            z-index: 100;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 40px;
            background-color: #652e8080;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }

        .ol-custom-overviewmap {
            /* position: fixed; */
            right: 0;
            bottom: 0;
            top: auto;
            left: auto;
        }

        .ol-overviewmap-box {
            border: 1px solid #ff2d51;

        }
    </style>
</head>

<body>
<div id="mouse-position">
</div>
<!-- 2、设置地图容器的挂载点 -->
<div id="map">

</div>
<script>
    /* 3、设置一个瓦片图层 */
    const gaode = new ol.layer.Tile({
        title: "高德地图",
        source: new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
        })
    });
    /* 4、实例化地图 */
    /* new Vue({
        el
    }) */
    const map = new ol.Map({
        /* 将实例化的地图挂载到对应的DOM元素上 */
        target: "map",
        layers: [gaode],
        /* 设置地图以中心点显示/坐标显示/方法级别显示 */
        view: new ol.View({
            center: [114.30, 30.50],
            zoom: 12,
            /* 坐标 */
            projection: "EPSG:4326"
        })

    })
    /* 1、导航控件:让地图显示在一个固定的范围内*/
    const navControl = new ol.control.ZoomToExtent({
        extent: [
            100, 30,
            140, 30
        ]
    })
    map.addControl(navControl);

    /* 2. zoomslider */
    /* 实例化zoomslider */
    const zoomslider = new ol.control.ZoomSlider();
    map.addControl(zoomslider)
    /* 3、鼠标位置控件 */

    const mousePositionControl = new ol.control.MousePosition({
        /* 坐标格式 */
        coordinateFormat: ol.coordinate.createStringXY(4),
        projection: 'EPSG:4326',
        /* 坐标信息显示样式类名,默认是'ol-mouse-position' */
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp'
    })
    map.addControl(mousePositionControl)
    /* 鹰眼控件 */
    const overviewMapControl = new ol.control.OverviewMap({
        /* 鹰眼控件样式  */
        className: 'ol-overviewmap ol-custom-overviewmap',
        layers: [gaode],
        /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
        collapseLabel: '\u00BB',
        /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
        label: '\u00AB',
        /* 初始为展开显示方式 */
        collapsed: false,
        view: new ol.View({
            projection: 'EPSG:4326',
            minZoom: 8,
            maxZoom: 18
        })
    })
    map.addControl(overviewMapControl)

    const fullScreen = new ol.control.FullScreen();
    map.addControl(fullScreen)
</script>
</body>

</html>

2、视图操作

获取视图 map.getView()
获取放大级数 view.getZoom()
设置放大级数 view.setZoom()
获取中心点 view.getCenter()
设置中心点 view.setCenter()

示例：实现底图的放大缩小平移和复位

 <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<script src='./dist/include-openlayers-local.js'></script>
  
<div id="map">
    <button id="addMap">放大地图</button>
    <button id="reduceMap">缩小地图</button>
    <button id="move">平移</button>
    <button id="reset">复位</button>
</div>
    <script>
        var gaodeMapLayer = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });      
        const map = new ol.Map({ 
            target:"map",
            layers:[gaodeMapLayer],
            view:new ol.View({ 
                center:[114,30],
                zoom:4,
                projection:"EPSG:4326"
            })
        })
        var view = map.getView()    
        /* 放大缩小 */
        $("#addMap").click(function(){ 
            /* console.log(view); */
            var zoom= view.getZoom()
            view.setZoom(zoom+1)
        })
        $("#reducedMap").click(function(){ 
            /* console.log(view); */
            var zoom= view.getZoom()
            view.setZoom(zoom-1)
        })
        /* 平移 */
        $("#move").click(function(){ 
            view.setCenter([120,32])
        })
        /* 复位要获取一个中心点 */
        var center = view.getCenter()
        $("#reset").click(function(){ 
            view.setCenter(center)
            view.setZoom(4)
        })
    </script>

3、设置飞行视角

const map = new ol.Map({
        target: "map",
        layers: [gaode],
        view: new ol.View({
          center: [114, 30],
          zoom: 4,
          projection: "EPSG:4326",
        }),
      })
      setTimeout(() => { 
        map.getView().animate({ 
          zoom:10
        })
      },2000)