本文共 883 字，大约阅读时间需要 2 分钟。

一、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: 放大到设定区域控件

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

二、控件原理

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

三、改变控件样式

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

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

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

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

四、自定义控件

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

转载地址：https://kaisarh.blog.csdn.net/article/details/103182890 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！