scale缩放和openlayers的点查不兼容问题

最新推荐文章于 2025-04-29 08:53:48 发布

进阶__前端

最新推荐文章于 2025-04-29 08:53:48 发布

阅读量511

点赞数

分类专栏：开发问题文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_38074118/article/details/126134512

版权

在项目中，由于添加了OpenLayers的点查功能，当scale变化时，地图上的Feature元素位置出现偏差，导致无法正确获取信息。为了解决这个问题，采用了一个创新的方法：通过iframe在新页面中独立展示地图，避免布局影响，提高地图区域层级，从而解决点查与缩放的不兼容问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为项目写到了一半，增加了openlayes地图点查功能，在openlayers的功能里加入了点查功能
但是因为scale改变了，地图区域使用openlayers作为地图模块,之后出现了图层上feature元素发生实际位置与显示的位置不符,具有一定的偏差
获取不到对应点元素的信息，查了一些解决办法，没有相对简单易懂的方式，因为我们的是内网展示，所以有了一个新的思路，页面是经典三列布局，中间是地图区域
因此采用了ifrmae方式，直接开一个新的页面，不受到布局元素的影响，将中间区域的层级调高，影响不到其余内容

在这里插入图片描述

实现方案

首先在route中新开一个iframe页面，占满屏幕，不和其他内容共用一个布局

import vue from 'vue'
import Router from 'vue-router'
vue.use(Router)
const routes = [
  {
   
    path: '/login',
    name: 'login',
    component: () => import('@/views/login'),
    meta: {
   
      name: '登录页',
      requireAuth: false,
    },
  }, 
  {
   
    path:

最低0.47元/天解锁文章