当地图的尺寸发生变化后，要调用map.updateSize()方法，强制使openlayers重新计算地图视口

updateSize()

Force a recalculation of the map viewport size. This should be called when third-party code changes the size of the map viewport.

强制重新计算地图的视口大小。此方法应该在第三方代码改变了地图视口的大小之后调用。比如我用vue，写了拖拽指令改变地图窗口的尺寸，导致了地图缩放偏移和长宽比失调

https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#updateSize

当openlayers的地图所在的div的尺寸发生变化后，鼠标滚轮缩放地图发生偏移问题以及地图变形问题解决的更多相关文章

  1. 关于 WebBrowser调用百度地图API 鼠标滚轮缩放地图级别失灵的解决办法

    在桌面程序下 百度地图API的鼠标缩放地图功能可能会失灵无效! 这个原因不是API的问题 小弟试了下在WEB上面是没有问题的 于是考虑可能是WebBrowser的获取焦点问题,于是在主窗体 添加了一个 ...

  2. JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

  3. 不偏移的天地图地图服务-ArcGIS版

    地图偏移和纠偏是使用在线电子地图不可避免的话题.研究不深入,暂且分享一种已纠偏的地图服务. 服务地址 直接放点干货: 影像地图: http://t0.tianditu.com/cia_w/esri/w ...

  4. 不偏移的天地图地图服务-SuperMap版

    在<不偏移的天地图地图服务-ArcGIS版>中,提供了相应的服务地址:而SuperMap中,则是将纠偏的方法集成到程序中,只需要修改一个配置参数,则可以实现天地图的纠偏. 打开Web型数据 ...

  5. jQuery事件-div的显示隐藏及鼠标的移入移出

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. 解决echart在IE中使用时，在div中加入postion后图表不显示问题

    <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px;width:1 ...

  7. 利用ArcEngine开发地图发布服务，将mxd文档一键发布成wmts，并根据需要对地图进行空间查询，返回客户端geojson

    一直想开发一个软件取代ArcGIS Server,该软件使用ArcEngine开发,以Windows Service形式发布,部署在服务端上,解决wmts地图服务发布和空间查询的问题,经过不断的研究. ...

  8. div 元素内容超出可通过鼠标滚轮实现横向滚动

    移动端中的元素内容超出时,对容器设置overflow-x: auto就可以通过手势水平移动.但是 PC 端只能通过鼠标滚轮上下滑动,而不能水平移动. 只需要给元素添加一个监听鼠标滚轮事件,上下滑动时修 ...

  9. 地图上显示div点位

    功能核心:  地理坐标转屏幕坐标 用到的插件:jquery  animo动画插件 核心代码: var point = new Point(lon, lat, map.spatialReference) ...

  10. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

随机推荐

  1. 鸿蒙开发之PixelMap介绍与实现图片变换

    本文所学技术可以用在哪 很多读者一看这个文章标题,可能根本不知道能干嘛,且不感兴趣.所以咱们先说说,今天写的这个技术有没有用. 首先,猫林老师即将给大家写的<原生AI之文字识别>就得用到这 ...

  2. 介绍 MSTest Runner - CLI, Visual Studio 等更多

    介绍 MSTest Runner - CLI, Visual Studio 等更多 https://devblogs.microsoft.com/dotnet/introducing-ms-test- ...

  3. 金TECH频道|最近备受关注的“应用重构”到底是什么？

    "金TECH频道"旨在为您分享中电金信助力行业数字化转型的最新产品业务动态.技术观点洞察与应用实践案例.让我们在这里,与行业发展同频共振,共筑数字新基石.

  4. Dockerr安装Oracle以及使用DBeaver连接

    拉取镜像 pull container-registry.oracle.com/database/free:latest 创建容器 说明一下我现在的最新版本是23 docker run -d --na ...

  5. 【MyBatis】学习笔记03：配置文件进一步解读（非常重要）

    [Mybatis]学习笔记01:连接数据库,实现增删改 [Mybatis]学习笔记02:实现简单的查 目录 核心配置文件 properties 将properties文件引入到核心文件 typeAli ...

  6. 黑苹果(Hackintosh) - 问题，虚拟机中的黑苹果系统分辨率低，界面小

    问题截图 解决办法 先把 draw.iso 放进 VMware 的安装根目录 再设置 Mac OS 虚拟机系统的配置情况 如果实在不行 就使用 VM 的拉伸显示功能吧,就将就着用用

  7. Go设置GOPROXY国内加速

    go env -w GOFLAGS=-buildvcs=false 在 Linux 或 macOS 上面 需要运行下面命令(或者,可以把以下命令写到 .bashrc 或 .bash_profile 文 ...

  8. Kubernetes 服务发现 监控Endpoints

    监控 Pod之前的apiserver 实际上就是一种特殊的 Endpoints,现在我们同样来配置一个任务用来专门发现普通类型的 Endpoint,其实就是 Service 关联的 Pod 列表,由于 ...

  9. 鲲鹏cpu

    cat /etc/openEuler-release sudo dmidecode -t processor |grep Version   lscpu  

  10. python安装pip出现No package python-pip available

    安装pip: 使用yum进行安装 yum install python-pip 1 若出现 No package python-pip available. 则解决方法如下:   yum -y ins ...