openlayer3.0隐藏地图右下角的attribution控件图标

最新推荐文章于 2024-08-15 14:02:26 发布
原创 最新推荐文章于 2024-08-15 14:02:26 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#openlayer3.0地图 #ol.attribution #隐藏地图右下角信息图标

本文介绍了在使用openlayer3.0绘制地图时，如何隐藏地图右下角的attribution控件图标。通过在初始化map对象时，设置controls中的attributionOptions为{collapsible: false}，可以实现该功能。这种方法能够满足需求，确保地图无logo或图标。同时，若要重新显示图标，只需将collapsible设为true。

在绘制openlayer地图的时候，出现地图右下角有个消息的小图标。logo已经隐藏，又出来个消息图标。

根据需求地图上不能有logo或者图标。需要隐藏地图右下角的attribution控件消息的小图标。

解决的办法是：在初始化map对象里添加控制器，设置attributionOptions的collapsible: false就可以了。

重要代码如下：

    controls: ol.control.defaults({

        attributionOptions: ({

          collapsible: false

        })

&

最低0.47元/天 解锁文章
openlayers：实现归因attributions（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-28 140
openlayers：实现归因attributions（附完整源码）
OpenLayers6入门，OpenLayers多图层切换显示隐藏，支持多个Layer同时显示和隐藏，以百度地图和高德地图为例实现vue的Layer图层管理组件
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-20 2834
OpenLayers默认并没有提供图层管理组件，本章就讲一下在vue中如何使用ElementUI的下拉框做一个简单的图层管理组件。话不多说，直接开始。
openlayer3隐藏地图右下角logo
study_7forever的博客
11-04 1741
第一次接触openlayer3绘制地图，遇到很多问题。虽然有api.但是小白表示看的不在状态。整理记录一下openlayer3绘制地图过程的小问题及解决方法，希望能帮助更多的朋友马上解决问题。 首先，分享大家一位大神的学习链接：http://anzhihun.coding.me/ol3-primer/ch03/03-06.html对于小白来说很实用。 切入正题：隐藏一个地图上右下角的logo图...
六、openlayers官网示例Attributions解析——地图上添加版权信息并随窗口大小控制显隐
aaa_div的博客
05-10 530
controls是地图上的默认控件，可以都设置为false，原本的attribution也设置为false。这里有个小坑，一开始我没有引入ol的样式文件，然后怎么设置都不成功，一直是这样。然后自己来创建一个Attribution，collapsible表示是否折叠。在地图上添加版权信息，地图容器大小小于600就隐藏，大于600才显示。所以要在main.js里加上ol样式的引入，大家记得引入哦，不要学我。就可以看到效果了，注意看右下角。今天来写个简单的例子。
OpenLayers3-4-Attributions
isowang的博客
01-16 2924
原文地址：http://openlayers.org/en/v3.12.1/examples/attributions.htmlWhen the map gets too small because of a resize, the attribution will be collapsed. This is because the collapsible option is set to true
openlayers4隐藏掉放大缩小图标
h1534589653的博客
01-10 5513
设置openlayers的ol.css的样式 .ol-overlaycontainer-stopevent { display:none; }
1.（openlayer篇）openlayer接入天地图（经纬度投影）.zip
03-01
attribution: '天地图' }), visible: true }); map.addLayer(tiandituImage); ``` 步骤4：处理坐标投影 如果需要在OpenLayers上显示其他基于WGS84的数据，例如标记或几何图形，我们需要进行坐标系统的转换。...
vue中导入openlayer地图控件
KIoIK的博客
05-12 406
1.首先新建controls.js import {defaults} from 'ol/control' import Attributions from 'ol/control/Attribution' import ZoomSlider from 'ol/control/ZoomSlider' export const controls = { //定义控件格式 Attribution: new Attributions({ //控件属性 show_progress: tr
Openlayer - vue中加载天地图（入门篇）
人与人之间最小的差别是智商，最大的差别是坚持。
08-15 669
基于Vue脚手架构建的，按照教程天地图就可以显示出来了。
204：vue+openlayers 学习Attribution各种API，示例展示自定义版权信息
大剑师兰特的GIS世界
01-16 835
第204个本示例的目的是介绍如何在vue+openlayers项目中个性化修改版权信息，这里主要涉及到Attribution各种属性的设置，所以这里先列出属性的信息，然后用示例来展示如何使用。
openlayers中文api.zip
07-29
openLayers中文版api全翻译
Vue+OpenLayers学习Attribution的各种API及自定义版权信息示例展示
laugh666的博客
09-04 253
在Vue和OpenLayers中，Attribution是用于显示地图上数据源或图层的版权信息的重要组件。通过使用Attribution，可以向用户提供关于地图数据来源的相关信息，以帮助他们了解数据的来源和版权信息。本文将介绍如何在Vue项目中使用OpenLayers的Attribution功能，并展示一些自定义版权信息的示例。希望本文能够帮助你学习Vue和OpenLayers中Attribution的使用，并通过自定义版权信息来展示相关数据来源。运行以上示例代码，你将会看到一个具有自定义版权信息的地图。
OpenLayers教程四：归属控件与全屏控件
不睡觉的怪叔叔的博客
06-06 3961
目录 一、归属控件 二、全屏控件 经过上一篇文章的介绍，大家一定对OpenLayers的地图控件有一定了解了，现在接着介绍归属控件和全屏控件。 一、归属控件 归属控件（ol.control.Attribution）用于展示地图资源的版权或者归属，它会默认加入到地图中，现在我们来看看归属控件。 拷贝一份first文件夹中的simple_map.html到contr...
（三）openlayers引入放大、缩小、隐藏显示图层控件
fang427的博客
04-22 1689
openlayers引入放大、缩小、隐藏显示图层控件。
【学习笔记之Openlayers3】控件篇（第二篇）
凌往昔
12-25 1214
其实关于控件篇没有多少需要讲的，只要在地图初始化时添加你需要的的地图控件就可以了，如果需要更改样式，更改其对应的CSS就可以。地图加载时候会通过ol.control.defaults()这个函数返回默认的三个控件（ol.control.Zoom,ol.control.Rotate,ol.control.Attribution），这些控件也可以通过设置ol.control.defaults()中的参数
OpenLayers隐藏默认放大放小按钮
AngieLife
04-20 3320
<div id="map"></div> import {Map, View} from 'ol'; import TileWMS from 'ol/source/TileWMS'; import TileLayer from 'ol/layer/Tile'; import {ScaleLine, defaults as defaultControls} from 'ol/control'; //安徽省数据源 let wmsSource = new TileWMS({ .
layer添加元素 openlayer_OpenLayers 官网例子的中文详解
weixin_28936835的博客
01-27 578
当你希望实现某种功能的时候，即使你对 openlayers 几乎一窍不通，照着官网的例子做，也可以很快的实现想要的效果。问题在于，官网的例子都是英文啊，不能很快定位到想要的效果是在哪个例子里面！！( 英文不渣就别看这篇文章了 )最近在学 openlayers ，我觉得非常有必要将 openlayers 官网的所有例子都看过去一遍，这篇文章就当是笔记了。名词解释在 openlayer 里，下面这些单...
Vue+OpenLayers学习系列（一）OpenLayers 总体介绍+切换地图底图
Ocean111best的博客
08-02 6245
一、OpenLayers 数据组织 OpenLayers 的地图数据通过图层（Layer）进行组织渲染，然后通过数据源（Source）设置具体的地图数据来源。 Layer 可看作渲染地图的层容器，具体的数据需要通过 Source 设置。 Source 和 Layer 是一对一的关系。每一个 Layer 里面需要一个 Source，然后把 Layer 添加到 Map 上，就可以显示出来了。 地图数据根据数据源（Source）可分为 Image、Tile、Vector 三大类型的数据源类，对应设置到地图
openlayers知识点
zhaoxq1223的博客
04-29 431
openlayers知识点 动画移动 map1.getView().animate({center: center}, {zoom: 18}) // 先移动再放大 map1.getView().animate({zoom: 18}, {center: center}) // 先放大再移动 map1.getView().animate({center: center, zoom: 18}) // 同时移动和放大 原文链接：https://blog.csdn.net/envon123/article/det
openlayer的地图如何去除自带UI
最新发布
11-12
<think>我们正在讨论OpenLayers地图中去除自带UI的方法。根据用户的指示，我们需要参考之前的引用，但之前的引用主要涉及Mapbox、Cesium和iServer等，与OpenLayers直接相关的内容较少。不过，我们可以根据OpenLayers的文档和常见实践来回答。 OpenLayers是一个开源的JavaScript库，用于在Web上显示交互式地图。默认情况下，OpenLayers地图包含一些内置的控件（如缩放按钮、旋转按钮、比例尺等）。要去除这些自带的UI控件，我们需要在初始化地图时通过配置选项来禁用它们。 主要步骤： 1. 在创建地图实例时，通过`controls`选项设置为一个空数组，这样可以移除所有默认控件。 2. 如果只想移除部分控件，可以单独指定要包含的控件。 参考OpenLayers官方文档：默认情况下，地图会包含一些控件（如缩放滑块、旋转按钮等），但我们可以通过显式设置`controls`选项来覆盖默认行为。 示例代码： ```javascript import Map from &#39;ol/Map&#39;; import View from &#39;ol/View&#39;; import TileLayer from &#39;ol/layer/Tile&#39;; import OSM from &#39;ol/source/OSM&#39;; // 创建地图时，设置controls为一个空数组，去除所有默认控件 const map = new Map({ layers: [ new TileLayer({ source: new OSM() }) ], target: &#39;map&#39;, // 指向页面中地图容器的id view: new View({ center: [0, 0], zoom: 2 }), controls: [] // 关键：设置为空数组，去除所有控件 }); ``` 如果只想移除部分控件，而保留其他控件，可以手动添加所需的控件。例如，只保留缩放控件： ```javascript import {defaults as defaultControls, Zoom} from &#39;ol/control&#39;; const map = new Map({ // ... 其他配置 controls: defaultControls({ // 使用defaultControls函数并设置选项来排除不需要的控件 zoom: true, // 保留缩放控件 rotate: false, // 去除旋转控件 attribution: false // 去除属性控件 }).extend([ // 还可以添加自定义控件 ]) }); ``` 或者，也可以单独创建控件数组： ```javascript import {Zoom, ScaleLine, FullScreen} from &#39;ol/control&#39;; const controls = [ new Zoom(), new ScaleLine(), new FullScreen() ]; const map = new Map({ // ... 其他配置 controls: controls // 只添加我们指定的控件 }); ``` 注意事项： - 去除所有控件后，用户将无法通过默认的UI与地图交互（如缩放、移动等）。如果需要，可以添加自定义控件。 - 如果使用OpenLayers的打包版本（如通过CDN引入），注意全局变量名称（如`ol.control.defaults`）。 根据引用[1]中提到的Mapbox对地图像素的处理方式（虽然不直接相关），我们可以联想到地图可视化的定制化需求是多样的。同样，在OpenLayers中，去除默认控件也是为了满足特定的界面设计需求。 相关问题： 1. OpenLayers中如何自定义地图控件的样式？ 2. 在OpenLayers中如何添加自定义控件？ 3. OpenLayers地图交互有哪些优化方法？ </think>### OpenLayers地图去除自带UI控件的方法 在OpenLayers中，默认地图包含导航控件（如缩放按钮、旋转按钮等），可通过配置`controls`选项实现UI定制化。以下是完整解决方案： #### 1. **完全移除所有默认控件** 初始化地图时设置`controls`为空数组： ```javascript import Map from &#39;ol/Map&#39;; import View from &#39;ol/View&#39;; import TileLayer from &#39;ol/layer/Tile&#39;; import OSM from &#39;ol/source/OSM&#39;; const map = new Map({ layers: [new TileLayer({ source: new OSM() })], target: &#39;map&#39;, view: new View({ center: [0, 0], zoom: 2 }), controls: [] // 关键：空数组移除所有控件 }); ``` #### 2. **选择性移除特定控件** 使用`defaults`函数自定义保留的控件： ```javascript import { defaults } from &#39;ol/control&#39;; const map = new Map({ // ...其他配置 controls: defaults({ zoom: false, // 移除缩放按钮 rotate: false, // 移除旋转按钮 attribution: true // 保留属性信息 }) }); ``` #### 3. **动态移除已有控件** 地图初始化后操作控件集合： ```javascript // 获取地图控件集合 const controls = map.getControls(); // 遍历移除特定控件 controls.forEach(control => { if (control instanceof ol.control.Zoom) { map.removeControl(control); } }); ``` #### 4. **兼容旧版本的解决方法** 若使用OpenLayers 5及以下版本： ```javascript // 创建无控件的默认配置 const noControls = ol.control.defaults({ zoom: false, rotate: false }); const map = new ol.Map({ controls: noControls(), // ...其他配置 }); ``` #### 注意事项 - **交互保留**：移除缩放控件后，仍可通过鼠标滚轮或双击缩放地图 - **必要控件**：建议至少保留`attribution`控件以满足地图数据源的版权要求 - **性能影响**：精简UI可提升渲染效率，尤其在大规模并发场景中[^3] - **兼容性**：方法适用于OpenLayers v6+，旧版API略有差异 类似Mapbox对像素级地图数据的精细化处理[^1]，OpenLayers的控件配置也需精确控制，以满足专业级地图定制需求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值