OpenLayers地圖控件controls

1) fullscreen全屏控件

 

 

寫法一：

 

import { FullScreen } from "ol/control";

this.map.addControl(new FullScreen());

 

寫法二：

 

import { defaults as defaultControls, FullScreen } from "ol/control";

controls: defaultControls({
    zoom: false,
    rotate: false,
    attribution: false 
}).extend([
    new FullScreen()
]

 

2) mouseposition鼠標位置控件

import MousePosition from "ol/control/MousePosition";
import { createStringXY } from "ol/coordinate";

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

import MousePosition from "ol/control/MousePosition";
import { format } from "ol/coordinate";

var mousePositionControl = new MousePosition({
    //坐標格式
    coordinateFormat: function (coordinate) {
        return format(coordinate, "經度:{x}   緯度:{y}", 2);
    },
    //地圖投影坐標系（若未設置則輸出為默認投影坐標系下的坐標）
    projection: "EPSG:4326",
    //坐標信息顯示樣式類名，默認是'ol-mouse-position'
    className: "custom-mouse-position",
    //顯示鼠標位置信息的目標容器
    target: document.getElementById("mouse-position"),
    //未定義坐標的標記
    undefinedHTML: " ",
});
this.map.addControl(mousePositionControl);              

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

 

import { defaults as defaultControls, OverviewMap } from "ol/control";

var overviewMapControl = new OverviewMap({
    layers: [
        new TileLayer({
            source: new OSM(),
        })
    ]
});

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

4) scaleline 比例尺控件

import { ScaleLine } from "ol/control";

this.map.addControl(new ScaleLine());

5) zoom縮放控件

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

6) zoomslider縮放滑塊刻度控件

 

import { ZoomSlider } from "ol/control";

this.map.addControl(new ZoomSlider());

7) Rotate地圖旋轉控件

（shift+alt+鼠標旋轉地圖）

import { Rotate } from "ol/control";

this.map.addControl(new Rotate());

8) ZoomToExtent縮放到全局控件

import { ZoomToExtent } from "ol/control";

this.map.addControl(new ZoomToExtent());