openlayers学习之简单控件```js <!DOCTYPE html> <html lang="en"> <hea

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控件的操作</title>
    <script src="../v5.3.0-dist/v5.3.0-dist/ol.js"></script>
    <link rel="stylesheet" href="../v5.3.0-dist/v5.3.0-dist/ol.css">
    <style>
        #map {
            width: 100%;
            height: 400px;
            position: relative;
        }

        #mouse-position {
            width: 400px;
            height: 30px;
            z-index: 1;
            position: absolute;
            right: 20px;
            bottom: 20px;

        }
    </style>
</head>

<body>
    <div class="map" id="map">
        <div id="mouse-position">
        </div>
    </div>
    <button id="out">单击放大</button>
    <button id="in">单击缩小</button>
    <button id="china">平移</button>
    <button id="all">复位</button>
    <script>
        var map = new ol.Map({
            target: "map",
            // controls: ol.control.defaults({
            //     rotate: true,
            //     zoom: true
            // }),
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=tk自己的tooken'
                    })
                    // source:new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.transform([108, 34], "EPSG:4326", "EPSG:3857"),
                zoom: 8
            })
        })
        var mapfont = new ol.layer.Tile({
            source: new ol.source.XYZ({
                title: "文字",
                url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=自己的tooken'
            })
        })
        map.addLayer(mapfont)

        var zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider)
        // 初始数据
        var zoom = map.getView().getZoom();
        var center = map.getView().getCenter()
        var rotation = map.getView().getRotation()
        // 放大地图
        // 绑定事件
        document.querySelector('#out').addEventListener('click', function () {
            //    利用map.getView获取想关信息
            // getZoom()
            var getzoom = map.getView().getZoom()
            // 利用map.getView().setZoom()设置层级
            map.getView().setZoom(getzoom - 1)
        })
        // 缩小地图
        // 绑定事件
        document.querySelector('#in').addEventListener('click', function () {
            //  利用map.getView获取想关信息
            // getZoom()当中获取层级
            var getinzoom = map.getView().getZoom();
            // 利用map.getView().setZoom()设置层级
            map.getView().setZoom(getinzoom + 1)
        })
        // 平移地图
        // 绑定事件
        document.querySelector('#china').addEventListener('click', function () {
            // 从getView()中获取设置中心点的方法setCenter(在其中传参)
            var getxian = map.getView().setCenter(ol.proj.transform([108, 34.035], "EPSG:4326", "EPSG:3857"))
            // 利用getView()中的setZoom()设置缩放等级
            map.getView().setZoom(9)
        })
        // 复原
        document.querySelector('#all').addEventListener('click', function () {
            map.getView().setZoom(zoom)
            map.getView().setCenter(center)
            map.getView().setRotation(rotation)
        })
        // 鼠标控件，获取坐标信息
        var mouseposition=new ol.control.MousePosition({
            // 坐标的格式
            coordinateFormat:ol.coordinate.createStringXY(4),
            projection:"EPSG:4326",
            // 将获取到的数据放在这个盒子当中
            target:document.getElementById('mouse-position'),
        })
        //将实类化的控件添加到地图上
        map.addControl(mouseposition)

        // 比列尺控件
        var scaleLineControl=new ol.control.ScaleLine({
            units:"metric"
        })
        map.addControl(scaleLineControl)
        // 全屏控件
        var fullall=new ol.control.FullScreen()
        map.addControl(fullall)
    </script>

</body>

</html>