Openlayers 详细记录controls（控件）

controls：控件是一个可见的小部件，在屏幕上的固定位置具有DOM元素。

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

默认控件

默认情况下，地图中包含的控件集。除非另行配置，否则它将返回一个包含以下每个控件实例的集合：

module:ol/control/Zoom~Zoom
module:ol/control/Rotate~Rotate
module:ol/control/Attribution~Attributio

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: "&nbsp;"});
// 渲染地图
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就可以

Openlayers 详细记录controls（控件）相关推荐

微信小程序 map 点击图标回到自己的位置（不使用controls控件）
先上效果图: 原由(必看): 本来微信小程序的map 里面的 controls控件可以轻松实现,但是官方说要废弃了,说采用 cover-view代替,其实就是一个点击事件.用不用cover-view ...
video 元素自定义 controls 控件以及常用事件、方法
video 元素自定义 controls 控件以及常用事件属性参考隐藏控件隐藏播放器右下角三个点自定义播放速度阻止默认的全屏和暂停自定义全屏播放常用事件常用属性和方法 <vide ...
video标签隐藏右下角的三个点-controls控件ui样式
通过controlslist和禁止右键使播放器不能被下载 <video src="{$data.h_video}" class="swiper-slide-img& ...
android基础 [超级详细android常用控件解析（ScollView控件,ProgressBar进度条,PopupWindow控件）]
目录 1 章节目录 2 ScollView控件 2.1 ScrollView简介 2.2 ScrollView使用 2.3 常用属性及方法 3 ProgressBar进度条 3.1 简介 3.2 常用 ...
详细Android studio 控件对齐方式
控件对齐方式请移步:常用的控件设置格式大全记忆方法根据命名规则可以很轻松地理解并记忆每个格式的作用: gravity: 重力; above : 在--上面; Bottom : 底部:末端: a ...
C#中的Chart控件——当数据源很多时可以显示进度条拉动观察，也可以记录到后台文本详细对照
C#中的Chart控件--当数据源很多时可以显示进度条拉动观察,也可以记录到后台文本详细对照本文源码下载地址:https://download.csdn.net/download/qq_427579 ...
openlayers6【七】地图控件controls详解
文章目录 1. controls 简述 2. 常见的 controls 控件 3. 控件的使用 3.1 fullscreen 全屏控件 3.2 mouseposition 鼠标位置控件 3.3 ove ...
在Blazor中构建数据库应用程序——第4部分——UI控件
目录介绍存储库和数据库组件 RouteViews 表单 UI控件 UIBase 一些例子 UIButton UIColumn UILoader UIContainer/UIRow/UIColum ...
WPF开发人员必读：WPF控件测试台
介绍 WpfControlTestbench帮助您为您的控件或您想要调查其行为的任何控件编写快速复杂的测试窗口.只需十几行XAML即可创建以下Window内容: 它在左下角显示你要测试的控件,在Win ...
17Web服务器端控件
Web服务器端控件 Web服务器端控件 ASP.Net提供了两类服务器端控件:Html服务器端控件和Web服务器端控件.由于Web服务器端控件功能更强大,和Windows应用程序的控件使用方法类似,容 ...