openlayer3隐藏地图右下角logo

最新推荐文章于 2024-05-10 19:30:00 发布
最新推荐文章于 2024-05-10 19:30:00 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： openlayer3 立得地图学习 文章标签： openlayer3 立得地图 logo 隐藏logo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/study_7forever/article/details/102890958
版权

第一次接触openlayer3绘制地图，遇到很多问题。虽然有api.但是小白表示看的不在状态。整理记录一下openlayer3绘制地图过程的小问题及解决方法，希望能帮助更多的朋友马上解决问题。

首先，分享大家一位大神的学习链接：http://anzhihun.coding.me/ol3-primer/ch03/03-06.html对于小白来说很实用。

切入正题：隐藏一个地图上右下角的logo图标。先看下正常显示的图标效果。如下图。

只需要在新建map对象，初始化时加上logo:false(如下图)。就可以了。很简单吧，傻傻的我还找了半天。

 

实现的效果是地图右下角的l

最低0.47元/天 解锁文章
study_7forever
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何隐藏Supermap超图地图右下角水印
Keep__Me的博客
04-01 221
在前端页面通过f12，在浏览器中使用元素选择器，选中水印这个元素并找到它的类名，再使用display: none;属性将元素隐藏即可。同时这也是隐藏页面元素的一种通用方法。其实很简单，是通过css的方式去隐藏。
openlayer3.0隐藏地图右下角的attribution控件图标
study_7forever的博客
11-08 1941
在绘制openlayer地图的时候，出现地图右下角有个消息的小图标。logo已经隐藏，又出来个消息图标。 根据需求地图上不能有logo或者图标。需要隐藏地图右下角的attribution控件消息的小图标。 解决的办法是：在初始化map对象里添加控制器，设置attributionOptions的collapsible: false就可以了。 重要代码如下： controls: ol....
六、openlayers官网示例Attributions解析——地图上添加版权信息并随窗口大小控制显隐
最新发布
aaa_div的博客
05-10 255
controls是地图上的默认控件，可以都设置为false，原本的attribution也设置为false。这里有个小坑，一开始我没有引入ol的样式文件，然后怎么设置都不成功，一直是这样。然后自己来创建一个Attribution，collapsible表示是否折叠。在地图上添加版权信息，地图容器大小小于600就隐藏，大于600才显示。所以要在main.js里加上ol样式的引入，大家记得引入哦，不要学我。就可以看到效果了，注意看右下角。今天来写个简单的例子。
openlayers+vueCli去除默认放大缩小以及右下角的链接
w_WebGis_bb的博客
03-16 398
只需要在css里写入： .ol-overlaycontainer-stopevent { display: none; } 注意： 如果没有效果，请查看style标签是否有 scoped 效果如下：
OpenLayer 图层一键隐藏和显示
qq_33138785的博客
11-03 569
this.labelLayer=this.map.layer.createVectorLayer('labelLayer'); 我们使用for循环创建了这一图层之后，我们再使用 this.labelLayer.setVisible(false) 发现只隐藏了一个，这时候我们就需要，在第一行代码后面加上一句 this.labelLayerData.push(this.labelLayer) 再使用forEach 循环隐藏图层 item.setVisible(false) ...
openlayers小案例（输入地名查询、拖动图层切换、图层透明度、鹰眼、图层显示与隐藏、定位、放大缩小）新手必备
qq_45549336的博客
03-20 1826
界面 左侧和右侧为功能区 上下为信息区 中间显示地图 左右可收起展开 功能 左侧地图查询 右侧可以调整图层透明度 显示和隐藏图层 拖动图层切换图层上下级关系 鹰眼、放大缩小、全屏、定位 额外说明 查询功能请自己在index文件中308行出贴上自己的key（去高德的网址申请，不懂请私聊） 代码就随手写的，写的很烂，勿喷。。。。。。 请在资源出下载代码 ...
天地图 - 隐藏左下角logo图标及相关版权信息
Eleven_W的博客
08-24 1846
我们打开天地图API调试界面：http://lbs.tianditu.gov.cn/api/js4.0/examples.html 红框中就是要隐藏的部分 天地图API调试界面标题 打开浏览器开发者工具，定位到红框中元素所在的标签 然后使用document.getElementsByClassName找到该标签，将改标签隐藏即可。 document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.
openlayer地图示例代码
10-16
**OpenLayer地图示例代码详解** 在Web开发中，OpenLayers是一个流行的开源JavaScript库，用于构建交互式的地图应用。结合Vue3，一个现代化的前端框架，可以创建出高性能且易于维护的地图界面。以下是对给定的"open...
baiduMap_openlayer(openlayer加载百度地图和高德地图例子)
05-27
本示例“baiduMap_openlayer”是关于如何利用OpenLayers加载和展示百度地图与高德地图的教程。这个教程对开发者来说具有很高的参考价值，特别是那些想要在自己的Web应用中集成地图功能的人员。 首先，让我们深入...
1.（openlayer篇）openlayer接入天地图（经纬度投影）.zip
03-01
步骤3：添加天地图图层 天地图提供了多种图层类型，如地形、影像等。这里我们以影像图层为例： ```javascript var tiandituImage = new ol.layer.Tile({ source: new ol.source.Tianditu({ layer: 'img_c', // ...
CSS3右下角悬浮客服菜单代码
06-24
本教程将详细讲解如何利用CSS3实现一个右下角悬浮的客服菜单，该菜单可展示二维码、QQ客服链接以及电话联系功能。 首先，我们需要创建HTML结构来定义客服菜单的基本布局。这通常包括一个容器元素，用于放置悬浮菜单...
baiduMap_openlayer(openlayer加载百度地图例子)
05-27
【标题】：“baiduMap_openlayer(openlayer加载百度地图例子)” 在GIS（地理信息系统）领域，集成不同的地图服务是常见的需求。本示例重点展示了如何利用OpenLayers库加载百度地图，让开发者能够在一个Web应用中...
132：vue+openlayers 设置显示图层的层级数zIndex
大剑师兰特的GIS世界
09-09 1654
本示例的目的是介绍演示如何在vue+openlayers中设置显示层级数zIndex。每一个图层都像一张纸似的，叠加在一起，上面的层级数zIndex值高，下面的层级数小。点击查看本专栏内容目录列表。
openLayers基础地图操作
前端小记
02-14 7097
和高德地图，百度地图，腾讯地图，Arcgis一样，OpenLayers是一个用于开发WebGIS客户端的JavaScript包。
利用Openlayers4实现地图遮罩效果（三）
此爱如少年
01-29 3200
文章目录前言完整代码效果代码解读完整项目代码(含测试数据） 前言 之前写的关于利用openlayer创建遮罩的文章（原文），那篇文章主要是讲如何创建一个四周遮罩（即四周外围遮罩但露出目标中心区域）。后面有很多同学在留言，说按我的方法，遮罩出不来或者运行报错，甚至私信在线求解。 的确，那篇文件的代码确实写的有一些漏洞，因为是作为示例给大伙演示，追求简单，希望大家明白实现原理，而没有对输入数据、地图坐标系等这些依赖用户环境的问题，进行统一处理。但是大伙在使用时，生搬代码，就很容易出错。 因此，今天抽空升级下之前
148：vue+openlayers 控制蒙版层显示隐藏，蒙版中部挖空显示下面地图信息
大剑师兰特的GIS世界
10-19 792
本示例的目的是介绍演示如何在vue+openlayers项目中画多边形，领用Modify进行任意编辑。添加了一层地图放在最顶部，控制其隐藏和显示状态，在这层上做了mask和内剪切操作，相当于中间掏了个窟窿，能够显示出下面的一些图层的信息。点击查看本专栏内容目录列表。
OpenLayers实战（四）控制图标显示隐藏
BigBanana的博客
09-17 3511
将同一图层的元素（feature）进行分类显示和隐藏（类似于图层控制） // 接前面（三）图层和vectorSource数据源，遍历source数据源，将符合条件的feature的style置空或者重新设置样式 let features = vectorSource.getFeatures(); features.forEach(feature=>{ if(xxx){ feature.setStyle(null); // 隐藏 } if(xxx){
openlayer中如何隐藏默认的放大缩小及标志按钮
kouza4341的博客
04-19 7384
map = new ol.Map({ controls: ol.control.defaults({ attribution: false, zoom: false, rotate: false }).extend([ //new ol.control.LayerSwitcher({ trash: false, extent: true }), //new ol.control.ScaleLine...
vue中天地图之隐藏左下角logo
m0_72993813的博客
12-13 811
【代码】vue中天地图之隐藏左下角logo。
openlayer3删除右下角
09-06
要删除OpenLayers中地图的右下角，你可以使用以下步骤： 1. 导入OpenLayers的必要库文件和样式表。 2. 创建一个地图容器元素，如一个div元素。 3. 创建一个OpenLayers的地图实例，并将其添加到地图容器中。 4. 使用OpenLayers的控制器功能，将地图的控制条设置为只显示左上角的一部分，并隐藏右下角。你可以使用控制器的"controls"选项来设置这个功能。 以下是一个示例代码，演示了如何删除OpenLayers地图的右下角： ```javascript // 导入OpenLayers的必要库文件和样式表 // 创建一个地图容器元素 var mapContainer = document.getElementById('map'); // 创建一个OpenLayers的地图实例 var map = new ol.Map({ target: mapContainer, controls: ol.control.defaults().extend([ new ol.control.Zoom({ zoomInTipLabel: 'Zoom in', zoomOutTipLabel: 'Zoom out', zoomInLabel: '+', zoomOutLabel: '-', delta: 1 }) ]), layers: [/* 添加地图图层 */], view: new ol.View({ center: /* 地图中心点 */, zoom: 10 }) }); // 将地图的控制条设置为只显示左上角的一部分，并隐藏右下角 map.getControls().forEach(function(control) { if (control instanceof ol.control.Zoom) { control.setPosition('top-left'); } }); ``` 这样，你就可以删除OpenLayers地图的右下角。请注意，你需要根据自己的需求来调整代码中的各个部分，比如地图容器的ID，地图图层的添加等。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值