OpenLayer6之控件

已有控件

所有API可以在文档中查询

默认控件Map default control

默认情况下地图中包含的一组控件，其中Rotate需要同时按住shift_alt+按住鼠标左键导致地图旋转后，复原使用，Attribution为版权信息，不是任何图层都有

1. ol.control.Zoom
2. ol.control.Rotate
3. ol.control.Attribution 语法：设置参数(具体参数查看API)

new ol.Map {
    ...
     controls: ol.control.defaults({
        attributionOptions: ({
            collapsible: true
        }),
        rotateOptions: ({
             autoHide: false
        }),
        zoomOptions: ({
              zoomInLabel: "in"
        })
    })
}

扩展控件(部分)

1. 缩放滑块ZoomSlider
2. 鼠标位置MousePosition
3. 比例此ScaleLine
4. 鹰眼OverviewMap 声明语法

const scaleLineControl = new ol.control.ScaleLine({
    units: "metric"
})

加载方式

1. extend加载在默认控件之后

new ol.Map {
    ...
     controls: ol.control.defaults()extend([scaleLineControl])
}

2. addControl

map.addControl(scaleLineControl)

鹰眼比较特殊

const overviewMapControl = new OverviewMap({
    // 这里的图层数据源可以和地图容器中的不一致
    layers: [ 
        new TileLayer({
            source: new XYZ({
                url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=xxxx",
                wrapX: false
            })
        })
    ],
    collapseLabel: '关闭',
    label: '打开',
    collapsed: false // 展开，默认为关闭
});

设置class

1. 每个组件都有className属性，可以替代最前面的那个class
   • 默认ZoomSilder的class

* 修改之后

在一般情况下不要使用这种方法，因为可能对其它的部分产生影响

2. 通过元素检查工具，一般最上面的就是最贴近的，通过该选择器指定就好

自定义控件

部分控件，ol不提供，可以通过，ol提供的方式进行模拟，下面以图层切换控件为例

<div id="controls">
    <input type="checkbox" id="osm" checked />OpenStreetMap
    <input type="checkbox" id="bingmap" />Bing Map
    <input type="checkbox" id="stamen" />Stamen Map
</div>

  let map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({                 // OpenStreetMap图层
                    source: new ol.source.OSM()     
                }),
                new ol.layer.Tile({                 // Bing Map图层
                    source: new ol.source.BingMaps({
                        key: 'xxx',    // 自行到Bing Map官网申请key
                        imagerySet: 'Aerial'
                    }),
                    visible: false                  // 先隐藏该图层
                }),
                new ol.layer.Tile({
                    source: new ol.source.Stamen({
                        layer: 'watercolor'
                    }),
                    visible: false                  // 先隐藏该图层
                })
            ],
            view: new ol.View({                     // 地图视图
                projection: 'EPSG:3857',
                center: [0, 0],
                zoom: 0
            })
        });
 
        let controls = document.getElementById('controls');     
        // 事件委托
        controls.addEventListener('click', (event) => {
            if(event.target.checked){                       
                switch(event.target.id){
                    case "osm": 
                        map.getLayers().item(0).setVisible(true);
                        break;
                    case "bingmap":
                        map.getLayers().item(1).setVisible(true);
                        break;
                    case "stamen": 
                        map.getLayers().item(2).setVisible(true);
                        break;
                    default: break;
                }
            }else{                               
                switch(event.target.id){
                    case "osm": 
                        map.getLayers().item(0).setVisible(false);
                        break;
                    case "bingmap":
                        map.getLayers().item(1).setVisible(false);
                    case "stamen": 
                        map.getLayers().item(2).setVisible(false);
                    default: break;
                }
            } 
        });