OpenLayers6入门，OpenLayers实现地图指定网页节点全屏和退出全屏

已于 2024-05-07 23:22:37 修改
阅读量850 收藏 1
点赞数 2
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： 前端 javascript vue.js OpenLayers 全屏
于 2023-07-24 18:36:05 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/131902520
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
123 篇文章 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 ¥69.90 ¥99.00
订阅专栏
本文介绍了如何使用OpenLayers6在网页中实现特定DOM节点的全屏和退出全屏操作，非地图容器全屏。在Vue项目中，详细讲述了依赖安装、功能实现以及代码示例，通过示例代码展示了如何调用全屏API并应用到地图实体DOM节点上。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

专栏目录：
OpenLayers6入门教程汇总目录

前言

本章讲解如何使用OpenLayers6地图页面全屏，实现指定网页节点的全屏操作。

注意：本章代码实现的是指定某个网页节点全屏，并非地图容器全屏。

openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install
了解本专栏 订阅专栏 解锁全文
openlayers：实现全屏显示（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 348
openlayers：实现全屏显示（附完整源码）
Openlayers实战：全屏显示
大剑师兰特的GIS世界
07-05 579
Openlayers地图中，全屏显示算是一个比较重要的组件了，经常会在演示的场景用到或者在多数据要展现的时候用到。在我们的实战课程里，详细讲一下其做法并配置其属性。
Openlayers实现地图全屏显示
10-14
主要为大家详细介绍了Openlayers实现地图全屏显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
OpenLayers地图全屏显示并包含自定义的工具栏及自定义控件
heiyihahei的博客
02-27 948
在OpenLayers中，全屏控件（FullScreen）默认会将整个地图容器元素全屏显示。这意味着除了地图本身之外，如果你的底图切换按钮、其他工具栏等UI元素没有包含在地图容器内，它们在进入全屏模式时不会被显示。要实现全屏时包含自定义功能组件的效果，你需要确保这些额外的UI元素与地图容器一同进入全屏状态。
Openlayers之地图全屏显示
SmileCoffin的博客
02-10 6101
1、新建一个html页面，引入ol.js和ol.css文件，然后在body中创建一个div标签，用来作为地图加载的容器； 2、代码实现 window.onload = function () { //实例化全屏显示控件 var fullScreenControl = new ol.c
Vue+OpenLayers7入门到实战：OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
01-26 242
本章介绍如何使用OpenLayers7在地图上添加地图全屏控件，实现OpenLayers地图的全屏和退出全屏操作。
Vue+OpenLayers7入门到实战：OpenLayers如何使用全屏控件，来实现地图容器的全屏和退出全屏功能
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-16 237
本章介绍如何使用OpenLayers7在地图上使用地图全屏控件，来控制地图容器的全屏和退出全屏的功能。注意：这里的全屏控件全屏指的是地图容器全屏，并非整个网页全屏。《Vue+OpenLayers7入门到实战：OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏》
OpenLayers6入门，OpenLayers使用地图全屏控件，控制地图进入全屏和退出全屏
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-16 274
本章介绍OpenLayers6如何使用全屏控件，来控制地图全屏和退出全屏的功能。注意：这里的全屏控件全屏指的是地图容器全屏，并非整个网页全屏。《OpenLayers6入门，OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏》
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 4097
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
openlayers：实现全屏控制 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-29 150
openlayers：实现全屏控制 (附完整源码）
OpenLayers6.rar
04-03
这个文件中包含了 Openlayers6.2.1 版本的部分功能示例代码，详细教程请参考文章：https://blog.csdn.net/Supreme_Sir/article/details/105123438
Openlayers 简单实例6
11-03
Openlayers 简单实例6 距离面积量算2
openlayers地图全屏显示的代码
weixin_30522183的博客
12-30 374
最近项目需要，着手GeoServer+Udig+Openlayers搭建本地地图服务器，第一次接触这些东西，参考了网上很多相关文章，如今初有感觉，但仍属入门。近日项目需要，故在Openlayers官网上认真学习了很Demo,初见成效。Demo真是个好东西，比较直观，以下对全屏控制代码： 1 var map = new OpenLayers.Map({ 2 div: "ma...
020：vue+openlayers设置显示全屏功能（示例代码）
大剑师兰特的GIS世界
08-10 1282
本示例的目的是介绍演示如何在openlayers中使添加使用全屏控件，呈现全屏和还原的效果。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果
Openlayers案例9——全屏显示控件
peanut2的博客
02-01 1040
1. 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全屏显示控件</title> <link rel="stylesheet" href="openlayers
openlayers F11全屏显示
aiqi1964的博客
05-15 332
当地图的初始化宽度和高度都不是100%的时候，F11浏览器全屏的时候只会宽度的100%，高度还是原来地图的高度。 解决 解决此问题的关键还是在于全屏的时候地图的容器的高度也得变成100%。因此，解决代码如下： html, body, #map{ width: 100%; height: 100%; padding: 0; margin: 0; ...
openlayers--3.地图的全屏和不完全全屏
Chinese_wawa_summer的博客
11-18 553
openlayers从零开始，学习笔记，逐步实现各个功能。通过官方配置实现地图全屏，自行调用浏览器全屏API实现全屏和部分全屏，用js的API--MutationObserver观察DOM树的变化...
04-openlayers注册4490并加载天地图
fxshy的博客
05-14 474
注册4490并加载天地图
Openlayers的常用控件（一）——Select和FullScreen
m0_46410110的博客
12-21 920
【代码】Openlayers的常用控件（一）——Select和FullScreen。
openlayers只显示控件
最新发布
01-04
### 配置OpenLayers仅显示控件 为了配置OpenLayers以仅显示控件而不加载任何地图图层，可以创建一个不包含`layers`属性的`ol.Map`实例。通过这种方式，地图不会尝试渲染任何背景或矢量图层，但仍会初始化并展示所指定的控件。 下面是一段用于创建仅有控件而无实际地图内容的地图对象示例代码： ```javascript import 'ol/ol.css'; import Map from 'ol/Map.js'; import View from 'ol/View.js'; import OverviewMap from 'ol/control/OverviewMap.js'; // 导入鹰眼控件 import Zoom from 'ol/control/Zoom.js'; // 导入缩放控件 import FullScreen from 'ol/control/FullScreen.js'; // 导入全屏控件 // 创建一个新的视图，但不需要设定具体的中心点和缩放级别 const view = new View({ }); // 初始化地图对象时不传递任何图层参数 const map = new Map({ target: undefined, // 不绑定到DOM中的容器 controls: [ new OverviewMap(), // 添加鹰眼控件 new Zoom(), // 添加缩放按钮组 new FullScreen() // 添加全屏切换按钮 ], view: view // 使用上面定义好的空白视图 }); ``` 这段代码展示了如何构建一个不含图层的地图实例，并为其添加几个常用的控件[^3]。由于没有提供有效的HTML元素作为地图的目标容器(`target`)，也没有设置初始视角的位置信息，因此即使调用了`map.render()`方法也不会有任何视觉上的地图呈现出来。不过所有的UI控件都会按照预期正常工作。 需要注意的是，在实际应用中通常还是会有一个关联的DOM节点来容纳这些控件，这里只是简单地说明了技术可行性。如果希望完全隐藏掉可能存在的灰色区域或其他默认样式，则还需要进一步调整CSS样式表或者利用JavaScript动态控制DOM结构[^4]。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值