openlayers6【七】地圖控件controls詳解

1. controls 簡述

上篇文章我們將了在地圖上的交互(interaction)，那些都是一些隱性的需要去使用才能知道存在有這樣一個東西，就像彩蛋一樣。這篇我們主要講地圖上的控件(controls)，這些可以說都是顯性的東西，如果設置了，打開地圖頁面就能夠看到的東西。場景

跟 interaction交互一樣，可以看到官網的描述：最初添加到地圖的控件。如果未指定， module:ol/control~defaults則使用。也就是說這個屬性 不是必須存在 的，默認使用的是control~defaults 內容，並且是已 Array數組形式存在，也就是說可以像圖層和交互一樣，可以多個控件功能承載在地圖上。

2. 常見的 controls 控件

• controldefaults，地圖默認包含的控件，包含縮放控件和旋轉控件；
• fullscreen，全屏控件，用於全屏幕查看地圖；
• mouseposition，鼠標位置控件，顯示鼠標所在地圖位置的座標，可以自定義投影；
• overviewmap，地圖全局視圖控件（鷹眼圖）；
• scaleline，比例尺控件；
• zoom，縮放控件；
• zoomslider，縮放滑塊刻度控件；

3. 控件的使用

3.1 fullscreen 全屏控件

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

3.2 mouseposition 鼠標位置控件

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);

3.3 overviewmap 地圖全局視圖（鷹眼圖）控件

參數：以下參數都爲可選，添加如下代碼：

collapsed，收縮選項，默認爲true，收縮；
collapseLabel，收縮後的圖標按鈕；
collapsible，是否可以收縮爲圖標按鈕，默認爲 true；
label，當 overviewmapcontrol 收縮爲圖標按鈕時，顯示在圖標按鈕上的文字或者符號，默認爲 »；
layers，overviewmapcontrol針對的圖層，默認情況下爲所有圖層，一般這裏設置的圖層和map圖層數據一致；
render，當 overviewmapcontrol 重新繪製時，調用的函數；
target，放置的 HTML 元素；
tipLabel，鼠標放置在圖標按鈕上的提示文字。

var overviewMapControl = new OverviewMap({
    layers: [
        new TileLayer({
            source: new XYZ({
                url:
                    "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
            })
        })
    ]
});
this.map = new Map({
    target: target,
    layers: tileLayer,
    view: view,
    // 添加鷹眼圖的控件
    controls: defaultControls({ zoom: true }).extend([
        overviewMapControl
    ])
});

3.4 scaleline 比例尺控件

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

3.5 zoom 縮放控件

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

3.6 zoomslider 縮放滑塊刻度控件

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

4. 總結

這裏只是簡單介紹了幾個常用的控件全屏，鼠標位置，鷹眼圖，比例尺，縮放，縮放滑塊等，更多的控件可以去官網查看。