Openlayers 詳細記錄controls(控件)

controls:控件是一個可見的小部件,在屏幕上的固定位置具有DOM元素。

我controls沙盒的案例:https://codesandbox.io/s/hopeful-black-dnvcl?fontsize=14&hidenavigation=1&theme=dark

默認控件

默認情況下,地圖中包含的控件集。除非另行配置,否則它將返回一個包含以下每個控件實例的集合:

zoom:地圖縮放 

移除默認控件 

如何移除默認三個控件DefaultsOptions{Object}

controls: defaultControls({
    rotate:false,
    zoom: false

}).extend([])

記得 zoom,rotate,attribute一定不要首字母大寫 

更多比較常用控件:

獲取經緯度:MousePosition 

import MousePosition from 'ol/control/MousePosition';
// 鼠標獲取經緯度
var mousePositionControl = new MousePosition({
    coordinateFormat: createStringXY(4),
    projection: "EPSG:4326",
    // comment the following two lines to have the mouse position
    // be placed within the map.
    className: "custom-mouse-position", //樣式
    target: document.getElementById("mouse-position"),//指定元素
    undefinedHTML: " "});
// 渲染地圖
var map = new Map({
    controls: defaultControls({
        zoom: false,
        rotate: false,
        attribution: false    
    }).extend([
        mousePositionControl
    ])
});

地圖全屏:FullScreen

import { FullScreen } from "ol/control"; //控件
var map = new Map({
    controls: defaultControls({
        zoom: false,
        rotate: false,
        attribution: false    
    }).extend([
        new FullScreen()
    ])
});

如果需要改變樣式:.ol-full-screen-false,ol-full-screen-true通過控制className就可以

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章