OpenLayers 3 之 地图控件(control)

地图控件(control)是指地图上比例尺,缩略图,拉近拉远的按钮,滚动控制条等控件,默认控件有三个,可以禁用。


OpenLayers 3 之 地图控件(control)初始化与定制的代码如下:
var map = new ol.Map({
// 设置地图控件,默认的三个控件都不显示
controls: ol.control.defaults({
attribution: false,
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
})
});

添加控件

//添加属性控件
map.addControl(new ol.control.Attribution());
//添加鼠标定位控件
map.addControl(new ol.control.MousePosition({
undefinedHTML: 'outside',
projection: 'EPSG:4326',
coordinateFormat: function(coordinate) {
return ol.coordinate.format(coordinate, '{x}, {y}', 4);
}
})
);
//添加缩略图控件
map.addControl(new ol.control.OverviewMap({
collapsed: false
}));
//添加旋转控件
map.addControl(new ol.control.Rotate({
autoHide: false
}));
//添加比例尺控件
map.addControl(new ol.control.ScaleLine());
//添加缩放控件
map.addControl(new ol.control.Zoom());
//添加缩放滑动控件
map.addControl(new ol.control.ZoomSlider());
//添加缩放到当前视图滑动控件
map.addControl(new ol.control.ZoomToExtent());
//添加全屏控件
map.addControl(new ol.control.FullScreen());

效果:  

参考自:https://blog.csdn.net/longshengguoji/article/details/46916327

https://blog.csdn.net/yangzhai/article/details/59476325

OpenLayers 3 之 地图控件(control)的更多相关文章

  1. Google地图接口API之地图控件集(五)

    1.默认控件集 当使用一个标准的google地图,它的控件默认设置如下: (1). Zoom-显示一个滑动条来控制map的Zoom级别,如下所示:

  2. 使用XAML在WPF项目中承载ArcGIS Engine地图控件开发

    原文 http://blog.csdn.net/flexmapserver/article/details/5868882 用Windows Form进行ArcGIS Engine二次开发时常见的形式 ...

  3. Corelocation及地图控件学习笔记

    Corelocation基本使用 在地图章节的学习中,首先要学的便是用户位置定位,因此我们首先要掌握Corelocation的使用.(在IOS8以前可以系统会直接请求授权,现在需要我们自己调用方式通知 ...

  4. 线程间操作无效: 从不是创建控件“”的线程访问它~~~的解决方法~ 线程间操作无效: 从不是创建控件“Control Name'”的线程访问它问题的解决方案及原理分析

    看两个例子,一个是在一个进程里设置另外一个进程中控件的属性.另外一个是在一个进程里获取另外一个进程中控件的属性. 第一个例子 最近,在做一个使用线程控制下载文件的小程序(使用进度条控件显示下载进度)时 ...

  5. 如何添加地图控件到Windows Phone 8的页面中

    原文 如何添加地图控件到Windows Phone 8的页面中 本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...

  6. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  7. 深入理解最强桌面地图控件GMAP.NET ---离线地图

    enjoyeclipse 深入理解最强桌面地图控件GMAP.NET ---离线地图 这章会介绍GMAP.NET的核心功能之一:离线地图.这个功能可以满足很多政府项目.保密项目.或者由于种种原因不能上网 ...

  8. SkylineGlobe 7.0.1 & 7.0.2版本Web开发 如何正确使用三维地图控件和工程树控件

    Skyline TerraExplorer Pro目前正式发布的7.0.1&7.0.2版本,还只是64位的版本, 在Web开发的时候,如何在页面中正确嵌入三维地图控件,让一些小伙伴凌乱了. 下 ...

  9. 如何屏蔽SkylineGlobe提供的三维地图控件上的快捷键

    SkyllineGlobe提供的 <OBJECT ID=" TerraExplorer3DWindow" CLASSID="CLSID:3a4f9192-65a8- ...

随机推荐

  1. jquery动态增加或删除tr和td【实际项目】

    难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...

  2. sync-settings(vscode)

    vscode插件以及设置 sync-download e45c6db33cd91d661e0cc545efb6817c

  3. jquery 给新增的addClass 使用css样式

    假如有一个情况,当导航url找不到相同的地址,就会出现找不到地址,高亮当前导航不出现 解决 办法 记得使用文档载入完成后执行的函数. 因为 .current 是 addClass 新增的class $ ...

  4. HTML5的28个常用特性

    1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcapt ...

  5. linux 系统下配置tomcat,并给tomcat赋予最高操作权限,启动tomcat和关闭tomcat

    配置tomcat服器 sudo chmod -R 777 * 给某个文件下所有文件赋予最高的读写权限 红颜色的字是路径,蓝颜色字是命令 (1)官方网站下载tomcat压缩包.apache-tomcat ...

  6. mysql导入外部sql脚本的方法

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u011043843/article/details/29689853 导入的方法分为两种:一是採用图 ...

  7. WebSocket的使用

    WebSocket是长连接,如果客户端的程序没有数据实时同步的需求就没必要使用它.因为长连接会带来一定的服务器内存开销.如果Ajax就能轻松搞定的话就完全没必要兴师动众的搞WebSocket. htt ...

  8. php查询mysql数据库 查询条件替中文字符串变量时无法查询

    $temp2 ='十年';mysql_query("SET NAMES GBK"); $res = mysql_query("select songer_name fro ...

  9. 6.Python使用Pandas小案例

    1.使用以下命令引入Pandas和xlrd,引入成功后在pycharm的setting导入即可使用(pip3是由于个人python版本为3.6)==在dos命令行输入以下信息 pip3 install ...

  10. cocos2d

    http://www.jetbrains.com/webstorm/download/index.html 运行又有下面错误 Fatal signal 11 (SIGSEGV) at 0x000000 ...