当地图的尺寸发生变化后，要调用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. StarBlog博客Vue前端开发笔记：(2)页面路由

    前言 Vue.js 使用虚拟 DOM 处理单页面,然后使用 Webpack 打包.通过上一篇文章的例子,读者也许已经发现,无论语法和写法如何不同,Vue.js 程序打包后都是一个单一的 HTML 文件 ...

  2. docker创建Tomcat

    安装docker 查找tomcat docker search tomcat 下载镜像 docker pull tomcat 查看下载的镜像 docker images 运行Tomcat docker ...

  3. Vue开启Gzip

    Vue配置 1.安装  npm install --save-dev compression-webpack-plugin@5.0.0 const CompressionWebpackPlugin = ...

  4. 工作中这样用MQ，很香！

    前言 消息队列(MQ)是分布式系统中不可或缺的技术之一. 对很多小伙伴来说,刚接触MQ时,可能觉得它只是个"传话工具",但用着用着,你会发现它简直是系统的"润滑剂&quo ...

  5. 中电金信：GienTech动态|一波好消息→中标！多领域“开花”

  6. NJU ICS2024 PA 作业心得（三）

    NJU ICS2024 PA 作业心得(三) 需要参考的内容 RISC-V ABIs Specification:是一组规则和规范,定义了在 RISC-V 架构上编写和链接程序的方式.它确保了不同语言 ...

  7. Qt音视频开发20-海康sdk本地播放

    一.前言 海康sdk中包含了MP4解码播放库,对应的API函数都是PlayM4开头的,顾名思义播放MP4,海康的视频默认可以保存成MP4文件,可以用通用的播放器来播放,这就是为啥前面好多篇文章讲到的各 ...

  8. 一篇复杂的研究🤔A Comprehensive Study of 😨Jailbreak Attack versus Defense for Large Language Models

    本认为,这篇文章的亮点在于对攻击和防御技术的多维评估,另外通过比较不同模型(如Vicuna.LLama和GPT-3.5 Turbo)对攻击和防御策略的反应,文章提供了对模型间差异的深入理解. 对现有的 ...

  9. 古早的遗传算法碰到LLM->😊AutoDAN Generating Stealthy Jailbreak Prompts on💗Aligned Large Language Models

    师兄推给我的一篇ICLR,抽出时间阅读整理了附录前的内容 这次没有完全翻译,因为我想组会上分享,转成自己的话 禁止盗用,侵权必究!!!欢迎大家积极举报

  10. IM开发干货分享：如何优雅的实现大量离线消息的可靠投递

    1.点评 IM聊天消息的可靠投递,是每个线上产品都要考虑的IM热点技术问题. IM聊天消息能保证可靠送达,对于用户来说,就好比把钱存在银行不怕被偷一样,是信任的问题.试想,如果用户能明显感知到聊天消息 ...