OpenLayers基础教程——常规的地图控件

最新推荐文章于 2024-08-16 10:13:50 发布
最新推荐文章于 2024-08-16 10:13:50 发布
阅读量2.2k 收藏 11
点赞数 3
文章标签： openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HerryDong/article/details/108688095
版权

1、前言

熟悉GIS的同志对地图控件应该不会陌生，ArcMap中就有很多地图控件，比如放大、缩小、全图等。其实在OpenLayers中也有很多地图控件，它们都继承了ol.control.Control，下面就来一一介绍。

2、缩放——Zoom

缩放控件是OpenLayers默认就加载的，它对应的是ol.Control.Zoom，如下图所示：
在这里插入图片描述

3、属性——Attribution

属性控件也是OpenLayers默认就加载的，一般在地图右下角，主要是显示版权信息，它对应的是ol.Control.Attribution，如下图所示：
在这里插入图片描述

4、旋转——Rotate

旋转控件其实也是OpenLayers默认就加载的，一般在地图右上角，但如果不在代码中进行设置的话，我们是无法看见它的，它对应的是ol.control.Rotate，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            }),
            controls: ol.control.defaults().extend([
                new ol.control.Rotate({
                    autoHide: false
                })
            ])
        })
    </script>
</body>
</html>

运行结果如下所示：在这里插入图片描述
操作时，同时按住Shift、Alt，然后利用鼠标进行地图旋转即可，如要复位地图，则点击右上角的复位按钮即可。

5、全屏显示——FullScreen

全屏显示控件一般在地图右上角，它对应的是ol.control.FullScreen，但需要注意：IE浏览器不支持该功能，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            }),
            controls: ol.control.defaults().extend([
                new ol.control.FullScreen()
            ])
        })
    </script>
</body>
</html>

运行结果如下所示：
在这里插入图片描述

6、缩放滑块——ZoomSlider

缩放滑块对应的是ol.control.ZoomSlider，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            }),
            controls: ol.control.defaults().extend([
                new ol.control.ZoomSlider()
            ])
        })
    </script>
</body>
</html>

运行结果如下所示：
在这里插入图片描述

7、缩放至某范围——ZoomToExtent

该控件对应的是ol.control.ZoomToExtent，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            }),
            controls: ol.control.defaults().extend([
                new ol.control.ZoomToExtent({
                    extent: [110, 10, 120, 30]
                })
            ])
        })
    </script>
</body>
</html>

运行结果如下所示：
在这里插入图片描述

8、比例尺——ScaleLine

比例尺控件对应的是ol.control.ScaleLine，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            }),
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({
                    units: 'metric'
                })
            ])
        })
    </script>
</body>
</html>

运行结果如下所示：
在这里插入图片描述
比例尺控件的单位默认是metric，当然你也可以设置成其他的单位，比如degrees、us、nautical等等。

9、鹰眼——OverviewMap

鹰眼控件对应的是ol.control.OverviewMap，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            }),
            controls: ol.control.defaults().extend([
                new ol.control.OverviewMap({
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    view: new ol.View({
                        projection: 'EPSG:4326'
                    })
                })
            ])
        })
    </script>
</body>
</html>

运行结果如下所示：
在这里插入图片描述
需要注意的是，鹰眼地图的投影需要跟主视图保持一致，否则显示会有问题。

10、加载地图控件的另一种写法

在上面的代码中，我们都是将控件写在一个数组中，其实我们也可以采用下面这种写法：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        })

        // ZoomSlider
        var zoomSlider = new ol.control.ZoomSlider();
        map.addControl(zoomSlider);

        // ZoomToExtent
        var zoomToExtent = new ol.control.ZoomToExtent();
        map.addControl(zoomToExtent);

        // FullScreen
        var fullScreen = new ol.control.FullScreen();
        map.addControl(fullScreen);

        // ScaleLine
        var scaleLine = new ol.control.ScaleLine({
            units: 'metric'
        });
        map.addControl(scaleLine);
    </script>
</body>
</html>

运行结果如下所示：
在这里插入图片描述

11、禁用控件

由于OpenLayers自带的地图控件样式可能与现有系统不匹配，因此很多时候我们会自己做一个浮动工具条实现相关功能，此时就需要把一些默认加载的控件禁用掉。禁用控件很简单，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            }),
            controls: ol.control.defaults({
                attribution: false,
                zoom: false,
                rotate: false
            })
        })
    </script>
</body>
</html>

运行结果如下所示：
在这里插入图片描述

12、结语

这篇博客主要介绍了OpenLayers中常规的一些地图控件，其实我这里故意漏掉了一个控件，那就是鼠标位置控件——MousePosition。之所以把它留着是因为在下一篇博客中我会介绍如何利用自定义的css样式配合OpenLayers的地图控件进行显示，考虑再三，最后还是决定用MousePosition作为例子进行介绍。OpenLayers的地图控件其实不难，主要就是一些属性的设置，大家好好理解一下应该是能够快速上手的。

HerryDong
关注
OpenLayers6入门，OpenLayers地图鹰眼控件使用
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 1582
OpenLayers想要实现鹰眼控件，必须要新建一个数据源，且不能跟其他图层混用，相当于鹰眼是一个单独图层。
265：vue+openlayers 一次性清除所有控件（亲测好用）
大剑师兰特的GIS世界
05-28 869
本示例介绍如何在vue+openlayer中清除所有的Control，之前的一篇文章中，清除方法不能一次清除，这里更换了方式，亲测方法好用。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果。
openlayers
08-10
openlayers获取地图加载
openlayers2地图控件扩展：图例控件LegendControl
banhusao3974的博客
10-20 1225
因项目需要在地图中增加图例，以便专题地图查看或输出。 实现思路，折线和多边形图例直接由样式属性创建，多边形直接设置div的样式；折线通过创建svg，设置polyline的样式；点要素的图例比较复杂，目前实现方式是： 1、根据StyleMap里的Filter，找到不同Filter的要素id，这里的查找要过滤掉没有被渲染的要素； 2、根据要素id从图层的渲染层找到对应的html元素，也...
【Openlayers】 常用API整理
最新发布
weixin_43180565的博客
08-16 1664
组定义映射中可用的图层组，用来盛放地图上的各种元素，其在地图上的显示顺序是按照数组中元素序列从下到上呈现的，可以直接在创建地图时定义图层，多个图层的时候可以单独定义。与控件不同的是，它们不在屏幕上的固定位置，而是绑定到地理坐标上，因此平移地图将移动。投影，投影决定了中心的坐标系，其单位决定了分辨率的单位(每个像素的投影单位)。检查两个投影是否相同，即一个投影中的每个坐标确实表示另一个投影中的相同地理点。将坐标从源投影转换为目标投影，这将返回一个新的坐标(并且不修改原始坐标)。注册不改变坐标的转换函数。
OpenLayers
专注JAVA开发
09-26 2234
OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OPenLayer
openlayer 地图实例
rod0320的博客
12-07 489
文章目录地图导航：成都定位 地图导航：成都定位 <!Doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
Openlayers
￡Duan’yi!
11-28 104
//获取鼠标位置坐标 var coordinate = map.getEventCoordinate(evt.originalEvent); //获取与传入的坐标点最近的要素 var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate); ...
Openlayers学习之地图比例尺控件
10-14
在OpenLayers中，地图比例尺控件是一种常用的交互元素，它允许用户直观地理解地图上显示的距离与实际地理距离之间的关系。本篇文章将详细介绍如何在OpenLayers应用中添加和使用地图比例尺控件。 首先，我们需要了解...
OpenLayers学习笔记——加载地图
qq_34158448的博客
06-29 1240
OpenLayers常见的加载地图显示的方法有三种，使用不同的加载方法，会有不同的用处。1、静态加载地图js代码：&lt;script type="text/javascript"&gt; var map = new ol.Map({ target: 'map', layers: [new ol.layer.Tile({source: new ol.source.OSM()})], ...
Openlayers 教程 11 - 创建自定义控件（图例、行政区划组件等）
linzi19900517的博客
07-10 2466
自定义控件是 Openlayers 的特色功能之一，主要用于实现自定义的功能，比如：美化版的缩放按钮、美化版的全屏按钮等；还有像图层控制、底图控制、标绘控制等。
OpenLayers教程
10-14
OpenLayers教程,很好，很专业，包含矢量图层的创建，矢量元素的创建、选中、拖移OpenLayers教程,很好，很专业，包含矢量图层的创建，矢量元素的创建、选中、拖移OpenLayers教程,很好，很专业，包含矢量图层的创建，矢量元素的创建、选中、拖移OpenLayers教程,很好，很专业，包含矢量图层的创建，矢量元素的创建、选中、拖移
openlayers教程
03-19
openlayers的类与方法.doc OpenLayers技术研究参考文档.doc Openlayers加载wms.doc openlayers介绍.ppt openlayers开发.doc OpenLayers心得文档.doc openlayers资料1.doc OpenLayer源代码总体结构分析.doc OpenLayers.pdf
OpenLayers(Layers)
小知识折射大智慧
10-16 1301
学过英语的应该都知道Layers是图层的意思吧，OpenLayers在Map的过程中会自动将添加的第一个图层设置成基层（翻译的可能不准确，就是Base Layer）。不管一个Map可以 加载多少个Layers，但总有一个是Base Layer，其他的图层的名字就是Over Layers。当然，你可以通过指定isBaseLayer属性，来设定基层，这样其他的图层会自动更改成Over  Layer
OpenLayers介绍
秋天未成熟的博客
11-25 1834
一个高性能，功能丰富的库，满足你所有使用地图的需要。 概述 OpenLayers可以很容易的在任何一个网页上面展示动态地图。它可以显示任何来源加载的地图图块、矢量数据和标记。已经开发的OpenLayers来进一步使用各种地理信息。OpenLayers是完全开源免费的JavaScript，在2-clause BSD协议下发布的。 特色优点 平铺的层 可以从OSM, Bin...
OpenLayers基础教程：定制地图、控件与调试
本教程覆盖了OpenLayers的基础设置、几何对象处理、控件管理以及调试技巧，对于希望通过Web开发引入地图功能的开发者来说，是学习和实践OpenLayers的重要资源。通过理解并熟练运用这些核心概念，你可以构建出功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值