这些控制器在实现上，并不是在画布上绘制的，而是使用传统的HTML元素来实现的，便于同地图分离，也便于界面实现。

一、All Controllers

OpenLayers 3目前内置的地图控件类都在包ol.control下面，依次有：

ol.control.Attribution: 右下角的地图信息控件
ol.control.FullScreen: 全屏控件
ol.control.MousePosition: 鼠标位置控件
ol.control.OverviewMap: 鸟瞰图控件
ol.control.Rotate: 指北针控件
ol.control.ScaleLine: 比例尺控件
ol.control.Zoom: 缩放按钮控件
ol.control.ZoomSlider: 缩放滚动条控件
ol.control.ZoomToExtent: 放大到设定区域控件

我们可以通过设置值进行选择:

<script type="text/javascript">var map = new ol.Map({// 设置地图控件，默认的三个控件都不显示controls: ol.control.defaults({attribution: true,rotate: false,zoom: false}),layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({center: ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'),zoom: 10})});
</script>

把所有的控件都显示出来

<script type="text/javascript">var map2 = new ol.Map({// 在默认控件的基础上，再加上其他内置的控件controls: ol.control.defaults().extend([new ol.control.FullScreen(),new ol.control.MousePosition(),new ol.control.OverviewMap(),new ol.control.ScaleLine(),new ol.control.ZoomSlider(),new ol.control.ZoomToExtent()]),layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map2',view: new ol.View({center: ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'),zoom: 10})});
</script>

二、控件原理

我们可以用Chrome浏览器的F12功能查看控件样式源码

我们可以通过更改CSS更改其样式

三、改变控件样式

我们可以在CSS文件中增加这样一段

.ol-zoom .ol-zoom-in {background-color: #0000ff;color: #ff0000;
}

就可以修改我们地图放大按钮的样式了.

其实就是对按钮进行了定位,修改其样式

当我们引入jQuery库后,我们也可以通过JS进行更改

<div id="map2" style="width: 100%"></div>
<script type="text/javascript">new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map2',view: new ol.View({center: ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'),zoom: 10})});// 设置放大按钮符号，下面这个代码需要引入jquery，或者zepto库$('#map2 .ol-zoom-in').html('<>');
</script>

四、自定义控件

<div id="map" style="width: 100%"></div>
<script type="text/javascript">var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({center: ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'),zoom: 10})});// 在viewport节点下添加一个分享按钮var viewport = map.getViewport();$(viewport).append('<div id="share" class="share">分享地图</div>');// 监听按钮点击事件，执行相关操作document.getElementById('share').onclick = function() {alert('分享当前地图给朋友');}
</script>

css

.share {position: absolute;top: 10px;right: 10px;border: 1px;border-color: #333;background-color: #339999;color: #fff;box-shadow: 0px 0px 2px #666;cursor: pointer;padding: 0 4px 0 4px;
}

Openlayer：学习笔记之控件相关推荐

VC学习笔记 -单选按钮控件（Ridio Button）的使用
在VC++编程过程中,查资料是一个苦差事,案边放了一摞书左翻右翻好是烦人.一赌气就把一些常用的小技巧自己总结了一下,虽费了些功夫,但对以后编程很有好处.现拿出来与大家共享,以后积累多了,作一个CHM电 ...
Asp.net控件开发学习笔记(三)-控件开发基础
封装在asp.net中,控件被分为两类.用户控件和自定义服务器控件.前者就是我们经常用来将一些可复用的内容封装成的.ascx文件.这里主要研究后者. 创建自定义服务器控件创建自 ...
IOS开发学习笔记018- 一般控件的使用
1.移动 2.动画 3.缩放 3.旋转 4.简化代码 5.总结 UIButton 的两种状态 normal highlighted 1.移动 OC语法规定:不允许直接修改某个对象中结构体属性的成员. ...
android菜鸟学习笔记13----Android控件(二) 自定义控件简单示例
有时候,可能觉得系统提供的控件太丑,就会需要自定义控件来实现自己想要的效果. 以下主要参考<第一行代码> 1.自定义一个标题栏: 系统自带的标题栏很丑,且没什么大的作用,所以我们之前会在o ...
PR学习笔记——效果控件的相关知识
效果控件 1.一般调节音量 2.左右鼠标一起点击或者alt+鼠标左键 3.钢笔工具是增添关键帧的 4.alt+ctrl 换视频的位置
C#学习笔记：控件BackColor属性与ForeColor的使用方法
1.解释 (1)BackColor属性 BackColor属性表示控件的背景颜色,各个颜色颜色分量的取值范围是0-255的整数. (2)ForeColor属性 ForeColor属性表示控件的前景色, ...
C#学习笔记：控件的Dock属性使用，工具栏遮挡解决。
#Dock属性说明该属性的用途类似于JAVA中的边框布局.绑定区域类似于东西南北中. Top:顶部,将控件绑定到窗体或页面的顶部,控件跟随顶部移动,一般ToolStrip就是这样的模式 Bottom ...
PyQt5学习笔记- PyQt5控件介绍
PyQt5控件介绍一.控件的概念二.控件结构继承图一.控件的概念一个程序界面上的各个独立的元素(一块矩形区域) 具备不同的功能:用户点击.接受用户输入.展示内容.存放其他控件初始常用控件:按 ...
python Tkinter学习笔记 menu控件 02
2019独角兽企业重金招聘Python工程师标准>>> ''' Created on 2012-9-19@author: liangqianwu''' #_*_ coding:utf ...
002柿饼派GUI模组学习之AnimatedImage控件调试
本文声明:本文为个人学习柿饼派显示模组的相关记录与经验. 002柿饼派GUI模组学习之AnimatedImage 控件调试 1.认识AnimatedImage控件 AnimatedImage是动态 ...

Openlayer：学习笔记之控件

一、All Controllers

二、控件原理

三、改变控件样式

四、自定义控件

Openlayer：学习笔记之控件相关推荐

最新文章

热门文章