openlayers6 解决当收起侧边栏时，地图宽度没有铺满的问题

最新推荐文章于 2024-08-12 11:20:10 发布

从南慕白

最新推荐文章于 2024-08-12 11:20:10 发布

阅读量584

点赞数

分类专栏： webgis 文章标签：前端 css vue

本文链接：https://blog.csdn.net/qq_43030908/article/details/122123133

版权

webgis 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

watch: {
    '$store.state.user.updateSize': function() {
      if (this.$store.getters.updateSize == 1) {
        var div = document.getElementById('map')
        div.style.width = '100vw'
        this.map.updateSize()
      }
    }
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

从南慕白

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

openlayers地图没有撑满容器--layers图层与地图分离，不随地图放大缩小正确展示图层位置的解决办法

weixin_46513664的博客

03-18

1611

这两天遇到了一个怪异的事情，Openlayers地图宽度没有撑满容器，是这样展示的于是，我顺其自然的在样式中加了一个canvas:{width:100%;} 这下好了，白条没了，但更怪异的事情出现了，研发部电脑显示的地图没有任何问题，提交到了业务部门，就出现了很可笑的现象图层偏移了，偏的还不是一星半点儿，但是技术研发部的电脑都没有这种情况，于是我去检查了业务部门的浏览器，区别就是他们的电脑是32位的，我们的电脑都是64位的，那么猜想就是canvas宽度不能这样设置，于是删掉canvas的.

OpenLayers 侧边栏收缩重新设置地图高宽

weixin_52318785的博客

11-13

667

setTimeout(() => { this.map.updateSize(); }, 100); 需要使用延时,不然不生效

参与评论您还未登录，请先登录后发表或查看评论

Openlayer-问题总结（一）监听地图变化

最新发布

人与人之间最小的差别是智商，最大的差别是坚持。

08-12

228

当遇到页面宽度无法填满画布导致出现白边或者页面布局发生变化时地图无法动态适应时，可以通过监听地图变化，使用MutationObserver API来观察DOM节点的变动，当检测到地图相关属性变化时调用`updateSize()`方法，从而动态调整地图尺寸，解决问题。

OpenLayers之多源数据加载六：静态地图及应用

不睡觉的怪叔叔的博客

08-03

3129

此处说的静态地图指没有经过地理投影什么的普通地图，比如一些规划图，室内建筑图，平面示意图等等，这些图一般都不会很大，但常用于一些演示系统中。会涉及到一些简单的定位，标注等。 OpenLayers也充分考虑到了这样的需求，提供了对应的source类：ol.source.ImageStatic。示例请看下面这个地图，显示的是成都熊猫基地的平面图：因为应用于OpenLa...

canvas 设置不同手机宽度不同宽度不同（伪自适应）

KLW75

09-11

513

重点是绘制的时候，宽和高根据页面可视宽度来设置。不同手机的宽度不同，这个值是不同的，所以canvas的宽度也变化了。 w = window.innerWidth 使用window.innerWidth 获取页面的宽度，来计算处理这个宽度来设置canvas的宽与高。 w = canvas.width = window.innerWidth; 希望有帮助你。 ...

vue,初始化地图的canvas宽高不正确。调整一下浏览器的宽度就恢复正常

A873054267的博客

09-19

1063

这是由于地图创建先于dom创建完成的事件，因此需要map.resize才行。目前是定时去map.resize().体验较差。。。 setTimeout(() => { if(this.map){ console.log('resize') this.map.resize() this.mapWidth=this.map.getCanvas().width+"p...

openlayers加载瓦片地图并手动标记坐标点

04-29

OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括瓦片地图，使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...

使用openlayers加载离线地图实例

10-06

在IT行业中，前端开发是构建Web应用程序的关键部分，而OpenLayers是一个流行的JavaScript库，用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用...

解决openlayers6加载百度地图出现偏移问题

weixin_43685945的博客

07-06

1579

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

openlayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法

01-08

OpenLayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法加载矢量地图数据的两种方法加载本地geojson格式文件出现的跨域问题及解决方法。向geoserver请求WFS服务出现的跨域问题及解决方法。加载矢量...

OpenLayers实战，OpenLayers预加载瓦片，解决移动地图或缩放地图时出现空白瓦片的问题

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

04-17

2036

OpenLayers默认加载地图并不会预加载不同层级的瓦片，所以我们在进行地图缩放操作或者移动地图位置时会出现瓦片还没加载出来显示空白瓦片的问题，其实很简单，只需要设置图层的preload参数即可实现瓦片的预加载，解决没加载出来显示空白瓦片的问题。

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

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

07-24

718

本章讲解如何使用OpenLayers全屏控件，实现OpenLayers地图节点的全屏操作。

Openlayers实战：全屏显示

大剑师兰特的GIS世界

07-05

513

Openlayers地图中，全屏显示算是一个比较重要的组件了，经常会在演示的场景用到或者在多数据要展现的时候用到。在我们的实战课程里，详细讲一下其做法并配置其属性。

关于Echarts和离线谷歌地图窗口显示不全的问题及解决方案

PINGER007的博客

09-04

2605

今日一个工作中的大数据分析平台项目中，接入了离线谷歌卫星地图和诸多Echarts。但是初次涉入数据分析平台，不可避免会碰到很多问题。最近一个特别头疼的问题就是出现白边或显示不全的问题。通过拖拽浏览器，使得浏览器重新获取可视宽高时，Echarts可以实现理想的效果，但是离线地图又出现白边问题产生的原因大致分为： 1）Echarts图表所在祖辈Div隐藏后显示，发现所在的Echarts的canvas...

OpenLayers项目分析（七）地图表现

鳄山维虾壳集思园

05-15

1335

一开始看到OpenLayers，就有一个问题。就是它作为WebGIS的前端，通俗地说，是“显示”地图的。那么，它显示的地图是什么，是怎么显示的，又是怎么实现的？——暂且把这个问题叫做地图表现。我觉得最关键的就是Map类，把这个类分析清楚了，问题就解决了一大半了。　　前面第一回里说过怎么实例化一个地图，怎么向地图里加图层加控件。其实，地图是这样的，它就像一个容器，可以盛东西。要分析它光理解这些还

openlayer自定义悬浮框overlay及其跨地图边界显示不全的解决方案

shalDream的博客

07-03

2361

openlayer自定义悬浮框overlay及其跨地图边界显示不全的解决方案

vue中使用openstreetmap当div大小改变会出现空

maxiaoxin1314的博客

02-18

281

项目中通过点击放大缩小界面从而去渲染openstreetmap地图的时候，会出现空白的的地图界面，如何缩放地图都不会填充

html把地图显示全屏显示,Openlayers实现地图全屏显示

weixin_34786066的博客

06-20

927

本文实例为大家分享了Openlayers实现地图全屏显示的具体代码，供大家参考，具体内容如下1、新建一个html页面，引入ol.js和ol.css文件，然后在body中创建一个div标签，用来作为地图加载的容器；2、代码实现window.onload = function () {//实例化全屏显示控件var fullScreenControl = new ol.control.FullScree...

openlayers6如何解决设置圆半径样式会跟随地图缩放等级缩放问题

06-02

在 OpenLayers 6 中，可以通过监听地图视图的 `change:resolution` 事件，来实时更新圆形要素的半径长度。具体步骤如下： 1. 创建一个圆形要素，并添加到矢量图层中。 ```javascript const circle = new ol.Feature(new ol.geom.Circle([x, y], radius)); const vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [circle] }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 2 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }) }) }); ``` 2. 监听地图视图的 `change:resolution` 事件，并在事件处理函数中更新圆形要素的半径长度。需要注意的是，半径长度需要根据当前地图视图的比例尺和半径原始值来计算得出。 ```javascript map.getView().on('change:resolution', function() { const resolution = this.getResolution(); const radiusInMapUnits = radius / resolution; circle.getGeometry().setRadius(radiusInMapUnits); }); ``` 3. 最后，将矢量图层添加到地图中，并设置合适的中心坐标和缩放级别。 ```javascript const map = new ol.Map({ target: 'map', layers: [vectorLayer], view: new ol.View({ center: [x, y], zoom: 10 }) }); ``` 通过上述步骤，我们可以实现动态调整圆形要素的半径长度，使其在不同缩放级别下保持一致。需要注意的是，半径长度的单位需要与地图投影坐标系一致，如米或像素等。