Openlayer:学习笔记之控件
发布日期:2021-06-30 15:43:04
浏览次数:3
分类:技术文章
本文共 883 字,大约阅读时间需要 2 分钟。
这些控制器在实现上,并不是在画布上绘制的,而是使用传统的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: 放大到设定区域控件
我们可以通过设置值进行选择:
把所有的控件都显示出来二、控件原理
我们可以用Chrome浏览器的F12功能查看控件样式源码
我们可以通过更改CSS更改其样式三、改变控件样式
我们可以在CSS文件中增加这样一段
.ol-zoom .ol-zoom-in { background-color: #0000ff; color: #ff0000;}
就可以修改我们地图放大按钮的样式了.
其实就是对按钮进行了定位,修改其样式
当我们引入jQuery库后,我们也可以通过JS进行更改四、自定义控件
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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年04月11日 02时11分54秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
spring的优势
2019-05-01
前端权限控制:获取用户信息接口构造数据
2019-05-01
前端权限控制:实现思路分析-待修改
2019-05-01
有状态服务和无状态服务
2019-05-01
基于jwt的用户鉴权:配置拦截器并测试
2019-05-01
POI的概述
2019-05-01
DataURL:实现员工头像保存
2019-05-01
DataURL:员工头像回显
2019-05-01
七牛云存储:断点续传
2019-05-01
JasperReport:声明周期
2019-05-01
递归求阶乘
2019-05-01
递归遍历目录
2019-05-01
IO流概述和分类
2019-05-01
字节流写数据
2019-05-01
字节流写数据的三种方式
2019-05-01
字节流写数据的两个小问题
2019-05-01
字节流写数据加异常处理
2019-05-01
字节流复制文本文件【应用】
2019-05-01
字节流复制图片
2019-05-01
字节缓冲流构造方法
2019-05-01