OpenLayers基础教程——视图的常规操作

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

1、前言

这篇博客开始介绍OpenLayers中视图的一些常规操作。其实地图的常规操作无非就是放大、缩小、平移等等。利用OpenLayers中的view可以很轻易地实现以上功能，下面进入正题。

2、常规操作

在创建地图对象后，我们可以利用var view = map.getView()获取视图对象，可以发现view中包含了许多针对视图操作的方法，比如setZoom()、setCenter()、setRotation()等等，代码如下：

<!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>
    <!-- openlayers -->
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
    <!-- bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="map" style="width:800px;height:800px;"></div>
    <button id="zoomIn" class="btn btn-primary">放大</button>
    <button id="zoomOut" class="btn btn-primary">缩小</button>
    <button id="toLeft" class="btn btn-primary">左移</button>
    <button id="toRight" class="btn btn-primary">右移</button>
    <button id="toTop" class="btn btn-primary">上移</button>
    <button id="toBottom" class="btn btn-primary">下移</button>
    <button id="toBeijing" class="btn btn-primary">平移至北京</button>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:3857',
                center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 15
            })
        })

        // 放大
        $('#zoomIn').click(function () {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom + 1);
        })

        // 缩小
        $('#zoomOut').click(function () {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom - 1);
        })

        // 左移
        $('#toLeft').click(function () {
            var view = map.getView();
            var center = view.getCenter();
            center[0] += 50000;
            view.setCenter(center);
            map.render();
        })

        // 右移
        $('#toRight').click(function () {
            var view = map.getView();
            var center = view.getCenter();
            center[0] -= 50000;
            view.setCenter(center);
            map.render();
        })

        // 上移
        $('#toTop').click(function () {
            var view = map.getView();
            var center = view.getCenter();
            center[1] += 50000;
            view.setCenter(center);
            map.render();
        })

        // 下移
        $('#toBottom').click(function () {
            var view = map.getView();
            var center = view.getCenter();
            center[1] -= 50000;
            view.setCenter(center);
            map.render();
        })

        // 平移至北京
        $('#toBeijing').click(function () {
            var center = ol.proj.transform([116.20, 39.56], 'EPSG:4326', 'EPSG:3857');
            var view = map.getView();
            view.setCenter(center);
            view.setZoom(9);
        })
    </script>
</body>
</html>

3、视图联动

假设现在有两幅地图，我们希望它们能够联动，这该怎么实现呢？其实很简单，让这两个地图共享一个view即可，代码如下：

<!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>
    <h2>地图一</h2>
    <div id="map_1" style="width:800px;height:400px;"></div>
    <h2>地图二</h2>
    <div id="map_2" style="width:800px;height:400px;"></div>
    <script>
        var view = new ol.View({
            projection: 'EPSG:3857',
            center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
            zoom: 15
        })

        var map_1 = new ol.Map({
            target: 'map_1',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: view
        })

        var map_2 = new ol.Map({
            target: 'map_2',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: view
        })
    </script>
</body>
</html>

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

4、限制地图缩放等级

有时候我们希望能够限制地图的缩放等级，比如最小5级，最大15级。其实这也很简单，只需要利用view中的minZoom和maxZoom属性即可，代码如下：

<!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:800px;height:800px;"></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:3857',
                center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10,
                minZoom: 5,   // 最小缩放等级
                maxZoom: 15   // 最大缩放等级
            })
        })
    </script>
</body>
</html>

5、限制地图的显示范围

在一般的WebGIS开发中，我们并不需要把整个世界的地图都显示出来，可能我们只需要显示一定范围内的地图就行了，这时候就需要使用view中的extent属性配合minZoom和maxZoom属性来实现。假设我们现在只需要显示[117, 20]-[120, 30]范围内的地图，其代码如下：

<!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:800px;height:800px;"></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',
                extent: [117, 20, 120, 30],  //限制范围
                center: [118, 25],
                zoom: 10,
                minZoom: 10,   // 最小缩放等级
                maxZoom: 15   // 最大缩放等级
            })
        })
    </script>
</body>
</html>

6、结语

这里只是介绍了一些OpenLayers中基本的视图操作方法，其实查阅官网后你会发现还有很多其他好玩的功能，有兴趣的同志可自行登录官网进行学习。

HerryDong
关注
Openlayers中多图层遮挡时调整图层上下顺序
BADAO_LIUMANG_QIZHI的博客
07-10 2660
场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118492511 在此基础上进行添加图层显示，当同一个位置由多个图层时就会有图层遮挡问题。 比如下面 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 .
38-Openlayers调整中心点坐标、调整缩放级别、调整地图可视角度和地图复位
fxshy的博客
06-02 305
Openlayers调整中心点坐标、调整缩放级别、调整地图可视角度和地图复位
openlayers6【三】 地图视图 View 详解
@必意玲
04-03 7345
官方文档：https://openlayers.org/en/latest/apidoc/module-ol_View-View.html 上篇文章讲到 ，初始化map地图，必备的三要素之一就是视图（view），这个对象主要是控制地图与人的交互，如进行缩放，调节分辨率、地图的旋转等控制。也就是说每个 map对象包含一个 view对象部分，用于控制与用户的交互。 1. view 属性 center 模组：ol / coordinate〜Coordinate 视图的初始中心。如果未.
Openlayers6 图形绘制和修改功能（结合React）
最新发布
weixin_44242600的博客
08-08 1457
通过使用openlayers的`ol.interaction.Draw`和`ol.interaction.Modify`模块实现地图上绘制圆形、矩形、多边形并修改编辑。
【openlayers】移动视角适应所有点
随便写写
01-24 867
OL移动视角适应所有点
openlayers多图联动1
dragonzoebai的专栏
07-25 379
两图联动
Openlayers入门教程 --- 万字长篇
大剑师兰特的GIS世界
03-13 5591
也许你还不熟悉Openlayers，也许你是一个Openlayers小白，零基础没关系，这篇文章提供最基础的 Openlayers 教程，简单易学，贯穿整个Openlayers 知识体系。读完本文，您将会对 Openlayers 有一个全新的认识。
3. OpenLayers 教程：地图视图与投影 （结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1199
本篇文章主要介绍了 OpenLayers 的地图视图与投影相关概念。首先，文章讲解了地图视图基本概念，以及如何控制地图缩放级别、中心点与限制范围；其次，文章详细介绍了地图投影与坐标转换的方法，并展示了如何在实际应用中使用地理坐标系与投影坐标系进行操作。通过学习本篇文章，读者可以更好地理解 OpenLayers 中的地图视图与投影，并能够灵活运用地理坐标与投影坐标在实际项目中进行开发。
Openlayers教程资料
11-30
OpenLayers 是一个强大的开源JavaScript库，用于在网页上展示地理空间数据。这个“OpenLayers教程资料”提供了一个理想的起点...记住，实践是检验真理的唯一标准，理论知识结合实际操作，将使你更快地掌握OpenLayers。
openlayers基础系列教程
03-13
OpenLayers 基础系列教程 OpenLayers 是一个强大的、开源的 JavaScript 库，用于开发基于 WebGIS 的应用系统。它提供了强大的地图处理能力，支持多种数据源，包括矢量和栅格图层，可以满足各种 GIS 应用的需求。 ...
OpenLayers学习笔记——加载地图
qq_34158448的博客
06-29 1254
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()})], ...
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2186
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
vue中使用openlayer实现视图联动
11-10 720
multiView.vue <template> <div class="main"> <div id="map1"></div> <div id="map2"></div> </div> </template&...
vue3 + openlayers---实现分屏联动效果
QDxin_xyz的博客
05-31 365
本质就是两个地图容器使用相同的view。
vue中使用OpenLayers（五）：两层地图合并，地图上显示地址和区域描边
weixin_43960269的博客
01-06 1766
vue中使用OpenLayers（五）：两层地图合并 html中需要用两个id接收jpg和png。png在jpg上面。地址和区域描边都在png上 <div id="themap" style="width: 100%;height: 100%;"></div> <div style="width: 100%;height: 100%;position: a...
Openlayers 教程 - 创建加载两个地图并同步操作
linzi19900517的博客
02-28 2042
在某些情况下需要一个页面展示两个同步地图，openlayers 加载两个地图的原理是地图对象共享 view，实现起来也很简单。
OpenLayers分屏联动对比
碎碎念的安静的博客
11-10 2019
温馨提示：本文所用OpenLayers版本为6.9.0 解决方案 一开始的想法是，一侧地图拖动时动态更新另一侧地图的Center，但是API没找见实时拖动的move事件，postrender事件可以实现但是影响效率，以下为实现方法，有兴趣的可以试试，但不建议使用。 function togetherMove() { allMaps[0].on("postrender", function (e) { var c0 = allMaps[0].getView().getCenter(); v
OpenLayers 6 中实现“上一视图”、“下一视图”的视图切换功能，类似arcgis for js的Navigation
weixin_44519342的博客
04-19 610
OpenLayers 6 中实现“上一视图”、“下一视图”的视图切换功能，类似arcgis for js的Navigation
openlayers的view方法
qlin_11的博客
01-27 1482
链接：https://blog.csdn.net/qingyafan/article/details/45603415 以下为原博主 防删除 初始化一幅地图，必备的三要素之一就是视图（view），这个对象主要是控制地图与人的交互，如进行缩放，调节分辨率、地图的旋转等控制。也就是说每个 map对象包含一个 view对象部分，用于控制与用户的交互。 主要介绍 view 的作用和用法，并分析商用的地图应用中的相关的功能。功能的具体的实现与如何进行定制和优化，就超过了这篇文章的范围了。 view 类的定义可以在
OpenLayers基础教程：关键属性与控件解析
"本文详细介绍了OpenLayers地图库中的关键属性和方法，包括BaseTypes中的各种基础类型，如Bounds、LonLat、Pixel和Size，以及Console的使用。此外，还讲解了Control模块，包括如何添加和使用PanZoomBar、Navigation...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值