关于openlayers右侧出现空白问题的解决

最新推荐文章于 2023-06-15 18:13:02 发布
最新推荐文章于 2023-06-15 18:13:02 发布
阅读量854 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Norah_Yang/article/details/112786300
版权

提出

由于项目需要，使用到了openlayers的地图。这几天在调整页面的时候突然发现地图的右侧出现了空隙
如图，除了没有图之外，其他操作，包括拖拽缩放都可以在这块空白处完成

思考

百度发现并没有解决这种问题的博客，我就只能在自己代码中找问题。由于印象中最开始是没有这个问题的，后来灵光一现，想起来因为业务需求，我在地图上添加了右键菜单。
经过各种方式的确认之后，我发现原来真的是我添加的右键菜单在作怪……OAO

解决

给右键菜单绑定一个布尔类型的值v-show:false，在地图上单击右键时切换为true

完美解决，撒花✿✿ヽ(°▽°)ノ✿

Norah_Yang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers实战，OpenLayers预加载瓦片，解决移动地图或缩放地图时出现空白瓦片的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-17 1982
OpenLayers默认加载地图并不会预加载不同层级的瓦片，所以我们在进行地图缩放操作或者移动地图位置时会出现瓦片还没加载出来显示空白瓦片的问题，其实很简单，只需要设置图层的preload参数即可实现瓦片的预加载，解决没加载出来显示空白瓦片的问题。
openLayers geoserver常见问题
03-04
geoserver 发布.shp 中文乱码问题 怎么解决啊 45 Geoserver怎么连postGreSql 数据库 48 Geoserver连Oracle Spatial 52 GeoServer架构浅谈 53 Geoserver发布地图无法显示问题 57 WebGIS相关的OpenGIS规范 58 ...
openlayers 引用天地图截图时跨域问题导致空白解决办法
weixin_43405921的博客
01-17 812
let map_img = new TileLayer({ source: new XYZ({ url: "https://t6.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token, //！！！！！设置crossOrigin crossOrigin: 'anonymous', }), }); 参考文章：参考文章请点这里 ...
openlayers加载OSM地图出现白线
A873054267的博客
04-04 1001
目前的原因看起来是因为是在视角中加了坐标系，如果去掉坐标，白线就会消失。 但是目前还没有找到解决的方案
解决OpenLayers加载鹰眼图时出现的闪烁空白问题
xiao猪仙的博客
01-21 1479
解决OpenLayers加载鹰眼地图时出现的闪烁问题问题描述分析原因解决方案 问题描述 上次使用OpenLayers加载了天地图，但是在加载OverviewMap时，会出现视图闪烁，要么鹰眼图空白，要么主视图空白等问题。 分析原因 刚一开始不知道是什么原因，后来猛然发现鹰眼图和主视图的Layers使用的是同一图层数据源，为了判断是不是使用相同图层造成的，在OverviewMap的Layers上重新new了两个图层，居然解决了这个问题。 解决方案 避免鹰眼图和主视图使用相同图层(Layers)，但是其图层使用
openlayers6 解决调用百度地图之瓦片偏移、坐标偏移、无限拖动裂缝偏移问题
Gisdream的博客
08-02 5556
openlayers6调用百度地图，解决各种瓦片偏移、坐标偏移（国内外）、左右无限拖动裂缝偏移问题
openlayers：OpenLayers
02-04
OpenLayers 是一个高性能，功能丰富的库，用于在Web上创建交互式地图。 它可以显示从任何网页上的任何来源加载的地图图块，矢量数据和标记。 OpenLayers的开发旨在进一步利用各种地理信息。 它是完全免费的开源...
openlayers 风场渲染效果
01-11
openlayers 风场渲染效果，放置风场数据即可使用
openlayers遮罩示例
01-29
**OpenLayers 遮罩示例** OpenLayers 是一个强大的开源JavaScript库，用于在Web上构建交互式的地图应用。这个示例将展示如何在OpenLayers中实现地图遮罩功能，以便在地图上显示半透明覆盖层，从而突出显示特定区域...
最新openlayers6加载百度影像图及解决空白瓦片办法
qq_39525480的博客
11-16 2360
最近系统升级了openlayers的版本，发现百度影像图竟然无法使用了。 首先是百度的影像图直接加载可能会存在很大偏移，按照如下方法可以做到基本贴合。 然后是部分贴图在请求时可能会存在失败，失败后导致瓦片图可能会有部分空白，使用了onloaderror解决了这一问题。 调试了挺久才调试完成，首先按照如下，加入百度投影坐标系 var forEachPoint = function (func) { return function (input, opt_output, opt_dimensi
OpenLayers 3 之 加载百度地图
热门推荐
研究与专注
10-26 3万+
很多人想使用 OpenLayers 调用百度地图、腾讯地图等国内地图，本文就讨论一下其可能性和实现原理。我们以百度地图为例，分析其地图调用原理，我们都使用过百度地图，在网速不快的情况下，肯定有过感受，地图是一块一块加载的，从这里我们就可以看出，地图是被切成了很多块的小图片，调用时按照一定规则请求需要的“切片”，可视区域以外的“切片”不加载，这样可以减小数据传输数据量，使地图加载更快。
openlayer 瓦片缩放空白的问题
qq_39330397的博客
06-15 413
openlayer旧版本加载瓦片服务时，缩放时会有空白的效果。7.1以后通过属性preload: Infinity可以解决此问题。
解决openlayers6加载百度地图出现偏移问题
weixin_43685945的博客
07-06 1527
1、问题 ol6加载百度地图出现的问题 2、原因 由于openlayers6加载地图的方式是右下递增，原先是右上递增，所以在原先加载百度地图的基础之上，将tileUrlFunction中的y坐标变为原先的负值即可。 3、解决方法 var resolutions = []; for (var i = 0; i < 19; i++) { resolutions[i] = Math.pow(2, 18 - i); } var tilegrid = new TileGrid({ origin
openlayer地图大小变化后地图白屏不显示
weixin_44940364的博客
02-22 1855
openlayer白屏
OpenLayers 3 之 地图样式（ol.style）详解
研究与专注
05-30 3万+
地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。      矢量图层样式可以事先写好，写成静态的，矢量图层直接按照定义好的样式渲染，也可以动态使用样式的 set() 方法，但是要注意刷新矢量图层，重新渲染，否则动态样式不生效。
005 - 马科维茨投资组合理论实现
最新发布
08-10
python基于tushare实现马科维茨投资组合理论实现
openlayers 瓦片缩小时有空白
11-24
openlayers是一个用于显示地图的Javascript库，它支持显示瓦片地图。当瓦片地图被缩小时，可能会出现空白的情况，这通常是由于瓦片地图的分辨率不够高或者缺少适当的缩放级别所导致的。 解决这个问题的方法有几种。首先，可以尝试使用不同来源的瓦片地图来看是否能够解决问题。有时候，切换到另一个瓦片地图服务提供商可能会解决空白的问题。其次，可以尝试调整openlayers的视图设置，确保地图在缩小时能够渲染出整个区域，而不是显示空白。这可能涉及调整分辨率、缩放级别等参数。此外，还可以尝试优化瓦片地图的加载方式，确保瓦片能够及时加载并正确显示在地图上。 另外，还需要检查瓦片地图的源数据是否完整，有时候空白可能是由于瓦片地图数据缺失或者损坏所导致的。如果数据存在问题，需要尝试修复或者重新获取正确的瓦片地图数据。 总之，解决openlayers瓦片地图缩小时出现空白的问题需要综合考虑瓦片地图的数据源、openlayers的配置以及地图的渲染方式等多个方面，通过调整参数、切换服务提供商或者修复数据来解决这个问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值