openlayers--2.自己实现旋转缩放和复位按钮

地图可以通过添加controls配置，添加各种控制按钮（官方示例上都有）。

虽然自带了各种控件，什么旋转缩放还有复位等，但是不太好看，前端一般大屏都会有UI设计，

设计图的想法你别猜~

要实现UI的图得自己画，这里学习了一下实现地图的旋转和缩放，还有复位，以及监听地图移动缩放完成后的层级和中心点位，本来还有个地图全屏来着，还没来得及，后序补上:openlayers学习笔记3--地图的全屏和不完全全屏-CSDN博客。

思路：

创建一个方操作控件的组件，也方便布局，父子级相对绝对定位，操作控件组件想放在哪里方哪里。

其实地图的旋转和缩放归根结底，是在操作视图view，调用几个函数就可以达到想要的效果。

详见：https://openlayers.org/en/latest/apidoc/module-ol_View-View.html

附上主要代码，关于控件组件很简单，就是一般画元素那么画就可以了，这里省略代码：

// 放大缩小等功能
function contralHandler(type) {
    changeViewHandler(viewer, type)
}
// 这个一定要放在外面
let mapRotation = 0
function changeViewHandler(viewer, type) {
    console.log('type', type)
    switch (type) {
        case 'rotateLeft':
            mapRotation += Math.PI / 4
            viewer.animate({
                rotation: mapRotation,
                duration: 400
            })
            break
        case 'rotateRight':
            mapRotation -= Math.PI / 4
            viewer.animate({
                rotation: mapRotation,
                duration: 400
            })
            break
        case 'home':
            mapRotation = 0
            viewer.animate(
                { zoom: defaultZoom, duration: 300 },
                { center: defaultCenter, duration: 300 },
                { rotation: 0, duration: 300 }
            )
            break
        case 'up':
            viewer.animate({ zoom: viewer.getZoom() + 1, duration: 300 })
            break
        case 'dowm':
            viewer.animate({ zoom: viewer.getZoom() - 1, duration: 300 })
            break
    }
}

function mapAddListener() {
    //监听移动、缩放结束
    map.on('moveend', function (evt) {
// 得到当前层级和中心点位
        let zoom = viewer?.getZoom()
        let center = viewer?.getCenter()
        console.log(zoom, center)
    })
}

布局：

<template>
    <div class="base-map">
        <!-- 控件 -->
        <div class="control-box">
            <MapContral @contral="contralHandler" />
        </div>
        <!-- 地图 -->
        <div id="aaa" class="map-content"></div>
    </div>
</template>