OpenLayers 之 控件（control）详解

每一个地图应用都应该有一些工具方便用户控制地图的行为，比如缩放，全屏，坐标控件等等，在 OpenLayers 中怎么添加这些工具呢？下面我给大家介绍一下 OpenLayers 中包含的控件种类，并介绍其使用方法。对控件的定制化，和对 OpenLayers 增加控件和优化控件等超出了本文范围。

一、control 类

OpenLayers 中的控件是由 control 类定义的，这是一个虚基类，不负责实例化特定的控件，它的主要作用是让其他具体的种类的控件类实现继承。OpenLayers 中包含的控件有：

  • controldefaults，地图默认包含的控件，包含缩放控件和旋转控件；
  • fullscreencontrol，全屏控件，用于全屏幕查看地图；
  • mousepositioncontrol，鼠标位置控件，显示鼠标所在地图位置的坐标，可以自定义投影；
  • overviewmapcontrol，地图全局视图控件；
  • rotatecontrol，地图旋转控件；
  • scalelinecontrol，比例尺控件；
  • zoomcontrol，缩放控件；
  • zoomslidercontrol，缩放刻度控件；
  • zoomtoextentcontrol，缩放到全局控件。

下面我们来分别介绍各种控件的使用方法。

二、控件举例介绍

1. fullscreen control - 全屏控件

地图全屏控件，该控件提供一个全屏按钮，当点击的时候，地图充满整个屏幕（注意是整个屏幕，而不是整个浏览器窗口）；当在全屏模式时，在屏幕的右上角会出现一个退出按钮，用于退出全屏模式，同时按 Esc 按钮也可以退出全屏模式。在 map 对象中添加如下代码：

    controls: ol.control.defaults().extend([
        new ol.control.FullScreen()
      ]),

刷新浏览器运行代码，结果如下图：

点击全屏后，全屏按钮变成退出按钮，点击即可退出全屏模式，同时点击 ESC也可以退出全屏模式：

2. mouseposition control - 鼠标位置控件

鼠标位置控件，用于显示鼠标指针 2D 坐标，默认情况下，它显示的是地图的 view 对象中设置的投影，但是可以修改为任意投影。鼠标位置控件是加载在地图右上角的位置，如，我们在以上全屏控件的基础上加如下代码：

    controls: ol.control.defaults().extend([
        new ol.control.FullScreen(),
        new ol.control.MousePosition()
      ]),

刷新浏览器，得到结果截图如下：

这个默认的鼠标位置控件，连全屏按钮都遮盖了，为了避免遮盖，我们将鼠标位置控件移动到别的地方，右下角是一个不错的地方，那么怎么修改位置呢？

有两种解决方法，一种是修改 ol.control.MousePosition 的可选参数的默认值；二是覆盖其默认的 CSS 样式类，这种方法我们后面会讲到。

这里我们用第一种方法做例子，控件的可选参数如下：

/**
 * @typedef {{className: (string|undefined),
 *     coordinateFormat: (ol.CoordinateFormatType|undefined),
 *     projection: ol.proj.ProjectionLike,
 *     render: (function(ol.MapEvent)|undefined),
 *     target: (Element|undefined),
 *     undefinedHTML: (string|undefined)}}
 * @api stable
 */

重要的参数如下：

  • className，显示坐标的 HTML 元素的 class 值，如果不设置，就会默认 ol-mouse-position，也就是默认动态生成的；
  • coordinateFormat，设置坐标显示的格式，保留小数点后几位等；
  • projection，投影信息，表示显示的坐标的投影坐标系。

知道用法后，我们就先定义将要显示坐标的 HTML 元素：

<div  id="mouse-position" class="mouse-position-wrapper">
    <div class="custom-mouse-position"></div>
</div>

我们要将该 div元素悬浮在地图之上，而默认情况下，map 的 z-index值很大，要悬浮在 map 之上，就要定义更大的 z-index。定义如下：

  .mouse-position-wrapper{
    width:300px;
    height:29px;
    color:#FFFFFF;
    position:absolute;
    right:20px;
    bottom:6px;
    z-index:999;
  }

该CSS将控件放在右下角的位置，然后修改 MousePosition 对象：

    controls: ol.control.defaults().extend([
        new ol.control.FullScreen(),
        new ol.control.MousePosition({
            coordinateFormat: ol.coordinate.createStringXY(4),
            projection: ‘EPSG:4326‘,
            className: ‘custom-mouse-position‘,
            target: document.getElementById(‘mouse-position‘)
        })
      ]),

再次运行代码，得到如下效果：

3. overviewmap control - 全局地图控件

全局地图控件，显示当前视口中的地图位于全局地图的哪一部分，可选的参数如下：

/**
 * @typedef {{collapsed: (boolean|undefined),
 *     collapseLabel: (string|Node|undefined),
 *     collapsible: (boolean|undefined),
 *     label: (string|Node|undefined),
 *     layers: (Array.<ol.layer.Layer>|ol.Collection|undefined),
 *     render: (function(ol.MapEvent)|undefined),
 *     target: (Element|undefined),
 *     tipLabel: (string|undefined)}}
 * @api
 */

参数的意义为：

  • collapsed，收缩选项；
  • collapseLabel，收缩后的图标按钮；
  • collapsible，是否可以收缩为图标按钮，默认为 true；
  • label，当 overviewmapcontrol 收缩为图标按钮时，显示在图标按钮上的文字或者符号，默认为 ?；
  • layers，overviewmapcontrol针对的图层，默认情况下为所有图层；
  • render，当 overviewmapcontrol 重新绘制时，调用的函数；
  • target，放置的 HTML 元素；
  • tipLabel，鼠标放置在图标按钮上的提示文字。

以上参数都为可选，添加如下代码：

new ol.control.OverviewMap({})

默认情况下，控件为收缩状态，点击即可打开，打开后如下图所示：

4. rotate control - 地图旋转控件

地图旋转控件，主要作用是当地图角度不为 0 时，默认显示，点击，使地图恢复旋转角度为 0。可选参数如下：

/**
 * @typedef {{duration: (number|undefined),
 *     className: (string|undefined),
 *     label: (string|Node|undefined),
 *     tipLabel: (string|undefined),
 *     target: (Element|undefined),
 *     render: (function(ol.MapEvent)|undefined),
 *     autoHide: (boolean|undefined)}}
 * @api stable
 */

参数的意义为：

  • duration，在开始角度和目标角度转动特效的持续时间，毫秒为单位，默认 240；
  • className，表示图标的样式，默认为ol-rotate；
  • label，旋转按钮中显示的符号，默认为?；
  • tipLabel，鼠标在按钮上时的提示文字，默认为Reset rotation；
  • target，按钮放置的 HTML 元素的 ID ;
  • render，当控件重新绘制的时候，调用的函数；
  • autoHide，当选择角度为 0 的时候，控件是否自动隐藏，默认值为true，也就是默认隐藏。

默认情况下，该控件不会显示；当地图旋转角度不为 0 时，才会显示，原因是该控件为地图默认添加控件。当该控件显示时候，其默认的位置和全屏控件重合，所以如果想要显示该按钮，那么全屏按钮就会被覆盖。

有两种方法可以解决该问题：

  1. 按照mousepositioncontrol的方式，将其默认位置放于其它地方；
  2. 覆盖其原有的 CSS 样式，最好不要修改原文件，因为其它地方如果使用的话，就会同样改变。

这里采用第二种方法，在自己的 CSS 样式表中添加如下代码（因为自己的CSS文件样式优先级比外部链接引入的样式优先级高）：

  /* rewrite the default css in `ol.css` */
  .ol-rotate{
    right:40px;
  }

添加如下代码：

        new ol.control.Rotate({
            autoHide:false
        })

5. scaleline control - 比例尺控件

比例尺控件，显示当前地图的分辨率，也就是比例尺，默认的位置和 overviewmap control位置重合，要移动位置避免覆盖，同样覆盖默认样式：

  /* rewrite the default css in `ol.css` */
  .ol-scale-line {
    #left:100px;
  }

添加代码：

new ol.control.ScaleLine({  }),

6. zoom control - 缩放控件

缩放控件，包含两个按钮，一个放大，一个缩小，是默认加载的控件之一，默认的 CSS样式类分别为 .ol-zoom-in和.ol-zoom-out。

7. zoomslider control - 缩放条控件

缩放条控件，主要显示当前的分辨率对应的刻度，给予一个直观的显示，其默认的条没有刻度，如果需要有刻度的，需要自己定制。可选的参数有：

/**
 * @typedef {{className: (string|undefined),
 *     duration: (number|undefined),
 *     maxResolution: (number|undefined),
 *     minResolution: (number|undefined),
 *     render: (function(ol.MapEvent)|undefined)}}
 * @api
 */
  • maxResolution，表示其最大的分辨率；
  • minResolution，表示最小分辨率。

其它的选项类似于以上的控件，添加该控件到地图中：

new ol.control.ZoomSlider({  }),

效果如下：

8. zoomtoextent control - 缩放到图层控件

缩放到图层控件，将地图缩放到视口可以容纳整个地图的合适尺度，可选的参数如下：

/**
 * @typedef {{className: (string|undefined),
 *     target: (Element|undefined),
 *     label: (string|Node|undefined),
 *     tipLabel: (string|undefined),
 *     extent: (ol.Extent|undefined)}}
 * @api stable
 */

这个控件也没有什么特殊的选项，除了 extent，表示缩放到范围的大小。需要注意的是该控件位置和 zoomslidercontrol 位置会有部分重叠，同样，我们需要覆盖zoomslidercontrol的样式类： .ol-zoomslider：

  .ol-zoomslider{
    top:100px;
    left: 9px;
  }

添加如下代码：

new ol.control.ZoomToExtent({  })

效果如下图：

我们看一下点击之前和之后的效果对比：

点击之后其实已经到了合适的尺寸，但是地图配置为连贯显示，也就是左右不间断，重复拼接在一起，所以会有这样的效果。

三、总结

到此为止，我们将 OpenLayers 3 的所有能用的控件都试了一遍，代码最后是这样的：

map = new ol.Map({  //init map
    controls: ol.control.defaults().extend([
        new ol.control.FullScreen(),
        new ol.control.MousePosition({
            coordinateFormat: ol.coordinate.createStringXY(4),
            projection: ‘EPSG:4326‘,
            className: ‘custom-mouse-position‘,
            target: document.getElementById(‘mouse-position‘)
        }) ,
        new ol.control.OverviewMap({  }),
        new ol.control.Rotate({
            autoHide:false
        }),
        new ol.control.ScaleLine({  }),
        new ol.control.ZoomSlider({  }),
        new ol.control.ZoomToExtent({  })
      ]),
    target: ‘map‘,
    layers: [
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: ‘sat‘})
      }),
      vectorLayer
    ],
    view: new ol.View({
      center: ol.proj.transform([37.41, 8.82], ‘EPSG:4326‘, ‘EPSG:3857‘),
      zoom: 2
    })
});

我们的地图也变成了这样：

这幅地图包含了缩放控件、缩放到图层控件、缩放标尺、地图全景控件、比例尺、旋转控件和全屏控件 7 个控件，希望对大家有帮助！

有问题，可以留言或者给我发邮件！ [email protected]

时间： 2024-10-14 13:10:53

OpenLayers 之 控件（control）详解的相关文章

FileUpload上传控件用法详解 (转载)

FileUpload 类显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\TestFile.txt )来指定要上载的文件.用户也可以通过单击“浏览” 按钮,然后在“选择文件” 对话框中定位文件来选择文件. 注意: FileUpload 控件设计为仅用于部分页面呈现期间的回发情况,并不用于异步回发情况.在 UpdatePanel 控件内部使用 FileUpload 控件时,

WebBrowser控件使用详解

WebBrowser控件使用详解 方法 说明 GoBack 相当于IE的“后退”按钮,使你在当前历史列表中后退一项 GoForward 相当于IE的“前进”按钮,使你在当前历史列表中前进一项 GoHome 相当于IE的“主页”按钮,连接用户默认的主页 GoSearch 相当于IE的“搜索”按钮,连接用户默认的搜索页面 Navigate 连接到指定的URL Refresh 刷新当前页面 Refresh2 同上,只是可以指定刷新级别,所指定的刷新级别的值来自RefreshConstants枚举表, 

android L新控件RecyclerView详解与DeMo

介绍 在谷歌的官网我们可以看到它是这样介绍的:RecyclerView is a more advanced and flexible version of ListView. This widget is a container for large sets of views that can be recycled and scrolled very efficiently. Use the RecyclerView widget when you have lists with eleme

VC/MFC中的CComboBox控件使用详解

CComboBox控件详解 CComboBox控件又称作组合框控件,其有三种形态可供选择,1.简单组合框(Simple)2.下拉组合框(Drop-down)3.下拉列表式组合框(Drop-down list). CComboBox控件的常用设置属性说明: type属性:里面一共有三个选项.就是其三种形式, 我们常用的是后两种形态,其区别就是Dropdown的编辑区为可编辑控件,而droplist为静态控件. Data属性:当程序初始化的时候,下拉列表将显示其属性里面的内容,内容用分号分隔.其属性

iOS开发 - 最常用控件 UITableView详解

UITableView掌握点 设置UITableView的dataSource.delegate UITableView多组数据和单组数据的展示 UITableViewCell的常见属性 UITableView的性能优化(cell的循环利用) 自定义Cell 如何展示数据 UITableView需要一个数据源(dataSource)来显示数据 UITableView会向数据源查询一共有多少行数据以及每一行显示什么数据等 没有设置数据源的UITableView只是个空壳 凡是遵守UITableVi

asp.net分页控件使用详解【附实例下载】

本篇文章主要对asp.net创建事务的方法进行实例介绍,具有很好的参考价值,需要的朋友一起来看下吧 一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer"

android开发之wheel控件使用详解

出门在外生不起病呀,随便两盒药60多块钱.好吧,不废话了,今天我们来看看wheel控件的使用,这是GitHub上的一个开源控件,用起来十分方便,我们可以用它做许多事情,比如做一个自定义的datepicker,在一些电商App中,经常用它来做省市县三级联动,总之用途还是挺多的,我们今天就一起来看看怎么使用这个东东. 我们先来看看今天要做的一个效果图: 这是我们今天要做的效果图.下面就开始吧. 1.获得wheel wheel是GitHub上的一个开源控件,我们可以直接在GitHub上下载,地址htt

安卓通知控件SnackBar详解

安卓开发中常用的控件包括Toast和Dilalog,本文和大家分享则是通知控件SnackBar相关使用,一起来看看吧. Dilalog Dialog的作用是给用户一个提示信息,并让用户根据提示做出判断.而Dialog的特征就是,它会阻止你原本正在进行的操作,必须停止下来对Dialog进行处理.但是,大多数的人可能并不喜欢这样被打断,也许用户正在处理一项重要的操作,突然弹出一个Dialog遮挡住了他原本的操作,这个时候用户会变得很恼火. 因此,使用Dialog的时候还是谨慎一点比较好,尽量不要给用

Android开发之基本控件和详解四种布局方式

Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

Objective-C:UIScrollView控件和UIPageControl控件的详解

UIScrollView控件和UIPageControl控件: UIScrollView用于显示多于一个屏幕的内容,超出屏幕范围的内容可以通过滑动进行查看,当然UIPagecontrol也能实现图片分页查看. UIScrollView往往搭配UIPageControl一起使用,当UIScrollView进行分页时,UIPagecontrol对应的点也会相应的变动,图片翻转,反之亦然. 一.UIScrollView常见属性: @interface UIScrollView : UIView <NS