vue openlayers【十一】地圖工具放大縮小，放大縮小滑塊，鷹眼圖控件，比例尺，全屏，旋轉，鼠標位置

寫在前面：
① 提供了核心功能代碼，完整代碼參考之前博客。
②後面不斷完善更多控件及控件延伸的功能

1. 添加放大縮小控件(zoom)

1.1 設置zoom爲true

controls: defaultControls({ zoom: true }).extend([])

2. 添加放大縮小滑塊控件(ZoomSlider)

import { defaults as defaultControls, ZoomSlider } from "ol/control";
this.map.addControl(new ZoomSlider());

3. 添加鷹眼圖控件(OverviewMap)

import { OverviewMap } from "ol/control.js";
initMap() {
   let target = "map"; //跟頁面元素的 id 綁定來進行渲染
    let tileLayer = [
        new TileLayer({
            source: new XYZ({
                url:
                    "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
            })
        })
    ];
    let view = new View({
        center: fromLonLat([104.912777, 34.730746]), //地圖中心座標
        zoom: 4.5 //縮放級別
    });
    var overviewMapControl = new OverviewMap({
        //設置默認展開方式
        collapsed: false,
        //設置類名
        // className: "ol-overviewmap ol-custom-overviewmap",
        //鷹眼中加載同坐標系下不同數據源的圖層
        layers: [
            new TileLayer({
                // 比如切換爲 source = new OSM(); 底圖數據源
                source: new XYZ({
                    url:
                        "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
                })
            })
        ]
        //鷹眼控件展開時功能按鈕上的標識（網頁的JS的字符編碼）
        //collapseLabel: "\u00BB",
        //鷹眼控件摺疊時功能按鈕上的標識（網頁的JS的字符編碼）
        //label: "\u00AB",
    });

    this.map = new Map({
        target: target,
        layers: tileLayer,
        view: view,
        // 添加鷹眼圖的控件
        controls: defaultControls({ zoom: true }).extend([
            overviewMapControl
        ])
    });
}

4. 添加比例尺控件(ScaleLine)

import { defaults as defaultControls,ScaleLine} from "ol/control";
this.map.addControl(new ScaleLine());

5. 添加全屏控件(FullScreen)

import { defaults as defaultControls, FullScreen } from "ol/control";
this.map.addControl(new FullScreen());

6. 添加旋轉控件（DragRotateAndZoom）

鼠標按照shift，鼠標拖動操作

// 4.1 導入 DragRotateAndZoom
import {
    defaults as defaultInteractions,
    DragRotateAndZoom
} from "ol/interaction";
// 4.2 map的interactions屬性上添加 DragRotateAndZoom
this.map = new Map({
    target: target,
    layers: tileLayer,
    view: view, 
    controls: defaultControls({ zoom: true }).extend([]),
    interactions: defaultInteractions().extend([
        new DragRotateAndZoom()
    ])
});

7. 添加鼠標位置控件（DragRotateAndZoom）

import MousePosition from "ol/control/MousePosition";
// 向地圖添加 MousePosition
var mousePositionControl = new MousePosition({
     //座標格式
     coordinateFormat: createStringXY(5),
     //地圖投影座標系（若未設置則輸出爲默認投影座標系下的座標）
     projection: "EPSG:4326",
     //座標信息顯示樣式類名，默認是'ol-mouse-position'
     className: "custom-mouse-position",
     //顯示鼠標位置信息的目標容器
     target: document.getElementById("mouse-position"),
     //未定義座標的標記
     undefinedHTML: " "
 });
 this.map.addControl(mousePositionControl);