Openlayer地图出不来或地图出来了，但是初始没有居中显示

最新推荐文章于 2025-05-25 15:36:46 发布
原创 最新推荐文章于 2025-05-25 15:36:46 发布 · 2.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #jsp #存储 #div

本文探讨了JSP页面中地图显示异常的原因，并提供了解决方案。通过调整DOCTYPE声明及地图边界设置，确保地图能在指定范围内正确显示。

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

主要原因是JSP页面头这句话，去除这句话，地图显示正常：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 

地图平移固定在DIV的范围设置语句：

var bounds = new OpenLayers.Bounds(
                114.3959455, 34.18611045,
                122.0988045, 38.40444655
            );///数据以四个浮点型数left, bottom, right, top 的格式存储

      var options = {
                controls: [],
                maxExtent: bounds,
                ////restrictedExtent: bounds,
                maxResolution: 0.033995542968750014,
                projection: "EPSG:4326",
                units: 'degrees'
            };

注释掉的这句就是：  restrictedExtent: bounds,

解决Vue和OpenLayers中地图不显示的问题
ByteZenith的博客
08-12 1901
在Vue和OpenLayers中，有时候我们可能会遇到地图不显示的问题。现在，当你运行Vue项目时，你应该能够看到一个带有OpenLayers地图的容器元素。通过以上步骤，你应该能够成功解决Vue和OpenLayers中地图不显示的问题。安装完成后，我们需要在Vue组件中引入OpenLayers的库文件。接下来，在你的Vue模板中，需要添加一个具有相应id的容器元素，用于显示地图。确保你的Vue组件正确引入了OpenLayers库文件，并且没有引入其他可能导致冲突的库文件。的数据属性，用于存储地图实例。
openLayer 画笔测量面积，可连续绘制多个多边形并计算和显示面积，每个多边形面积文本居中显示
zhushanlin的博客
05-22 170
【代码】openLayer 画笔测量面积，可连续绘制多个多边形并计算和显示面积，每个多边形面积文本居中显示。
openlayers调用geoserver地图不显示
淘淘小窝
04-10 5321
问题: 使用openlayers请求geoserver的wms服务,发现地图不显示. 原因: 发现map的高度设置的是100%,然后不显示。 后来改成400px,就显示了。 也就是html没识别map的高度设置100% 解决: map所在的div的父一级必须设置高度,map设置的100%才能识别. 因为我的map的父一级是body,所以设置如下 html,body { heigh
vite+vue3项目上openlayers的地图显示问题
最新发布
v0_persistent的博客
05-25 136
使用onMounted生命周期钩子，它在组件的DOM已经被挂载到页面上之后被调用。页面无报错但显示空白（挂载地图容器已经设置大小的情况下）。DOM操作和数据获取的冲突。vue文件原代码如下。
Openlayers之初始化地图
SmileCoffin的博客
01-20 4182
1、使用VS新建一个Web空白网站，然后将Openlayers3的开发库和样式文件复制到网站的根目录下； 2、新建一个HTML文档，并引入ol.js和ol.css； 3、在body标签中新建一个div作为地图加载的容器，然后设置其id为“map”； 4、代码实现 加载并显示OSM地图 window.onload =
vue-openlayers中初始地图加载
猪猪侠的博客
02-25 667
Vue引入openlayers的命令 npm install ol template> <div id="map" style="width: 100%;height: 100%"> </div> </template> <script> import TileLayer from "ol/layer/Tile"; import View from "ol/View"; import {XYZ} from "ol/source"; impo
openlayers地图没有撑满容器--layers图层与地图分离，不随地图放大缩小正确展示图层位置的解决办法
weixin_46513664的博客
03-18 1788
这两天遇到了一个怪异的事情，Openlayers地图宽度没有撑满容器，是这样展示的 于是，我顺其自然的在样式中加了一个canvas:{width:100%;} 这下好了，白条没了，但更怪异的事情出现了，研发部电脑显示的地图没有任何问题，提交到了业务部门，就出现了很可笑的现象 图层偏移了，偏的还不是一星半点儿，但是技术研发部的电脑都没有这种情况，于是我去检查了业务部门的浏览器，区别就是他们的电脑是32位的，我们的电脑都是64位的，那么猜想就是canvas宽度不能这样设置，于是删掉canvas的.
解决layer.msg 不居中 ifram中的问题
10-16
在使用layer.msg时，可能会遇到在iframe中弹出的消息框不能居中显示的问题。通常情况下，开发者希望弹出的消息框能够像在普通页面中一样居中显示，这样用户体验更为友好。 当在一个iframe嵌入页面中使用layer.msg时...
Openlayers 教程 31 - 地名搜索、坐标搜索、行政区划等服务（基于天地图Web服务）
非科班Java出身GISer的博客
08-15 4800
天地图 Web 服务接口。地名搜索、地理编码查询、地理逆编码查询、行政区划、路径公交规划等，可以根据项目的实际需求调用接口。
64.在Vue3中使用OpenLayers显示带箭头的线段，箭头居中
小彭的博客
01-14 473
本文展示了如何在 Vue 3 中使用 OpenLayers 显示带箭头的线段，并详细介绍了实现细节。这种实现方法可以应用于各种地图展示需求，如路径规划、物流轨迹等场景。如有问题，欢迎在评论区留言讨论！🎉希望这篇文章对你有所帮助！
openlayer地图大小变化后地图白屏不显示
weixin_44940364的博客
02-22 2152
openlayer白屏
OpenLayers实战，OpenLayers预加载瓦片，解决移动地图或缩放地图时出现空白瓦片的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-17 2480
OpenLayers默认加载地图并不会预加载不同层级的瓦片，所以我们在进行地图缩放操作或者移动地图位置时会出现瓦片还没加载出来显示空白瓦片的问题，其实很简单，只需要设置图层的preload参数即可实现瓦片的预加载，解决没加载出来显示空白瓦片的问题。
openlayer 瓦片缩放空白的问题
qq_39330397的博客
06-15 719
openlayer旧版本加载瓦片服务时，缩放时会有空白的效果。7.1以后通过属性preload: Infinity可以解决此问题。
173：vue+openlayers 解决国内openstreetmap地图加载不出来的问题（代码示例）
热门推荐
大剑师兰特的GIS世界
11-10 1万+
第173个近来写程序，发现openlayers用OSM方式来加载OpenStreetMap地图，一片爆红，瓦片加载不出来。本示例的目的是介绍演示如何在vue+openlayers中解决OpenStreetMap地图在国内被DNS污染，加载不出来瓦片的问题，通常我们是直接引用OSM，这里采用的是XYZ方式来加载瓦片的路径。
Openlayers 开发时,使用GWC地图时Overviewmap不出图的解决办法
Li Minghua的专栏
04-11 1348
Openlayers给地图客户端开发提供了便捷引用类库，真心赞其在地理信息领域作出的贡献。 前一段时间使用Ol调用Geoserver gwc地图，发现Overviewmap不出图，后来只是一个小实试，发现问题出在这里。 主地图引用的坐标投影： projection: new OpenLayers.Projection("EPSG:900913"), displayProjectio
解决uniapp使用openlayers在app端叠加图层失效问题
CheriseZhou的博客
01-10 1715
一开始用的uniapp官方的map组件，但是map组件在app端只能用高德地图，没法实现叠加geoserver效果，摸索了好久，网上的方法在我这都报错一堆，最后我发现了个神奇的东西，renderjs，它是运行在视图层的js，只支持app-vue和h5。首先下载openlayers依赖。
记录---app中 使用openlayers 地图添加图标不显示问题
冰雪为融的博客
08-30 1974
app中 使用openlayers 地图添加图标不显示问题
OpenLayers3基础教程之实现地图显示功能
jiegiser博客
01-15 6534
1.配置开发环境 使用OpenLayers 3开发WebGIS应用，我们首先需要配置开发环境，首先我们需要在openlayers官网获取OpenLayers 3的开发库。下载链接：官网。打开后如图所示： 需要注意的是这里下载有两个版本，①：仅包括开发库（开发与调试的JS库以及CSS文件），②：包括开发库、开发库源码、示例、API等所有开发资源。 在这里我下载了第一个版本，下载后
layer.open弹出效果
05-09
### layer.open 弹出效果的使用方法与配置 `layer.open` 是 Layui 提供的一个用于创建弹出层的功能模块，支持多种类型的弹窗显示方式以及丰富的配置选项。以下是 `layer.open` 的基本使用方法及其常见配置项。 #### 基本语法 `layer.open` 方法通过传入一个对象参数来定义弹窗的行为和样式。其核心结构如下： ```javascript layer.open({ type: 1, // 类型 title: '标题', // 标题 content: '<div>这里是弹窗内容</div>', // 内容 area: ['800px', '600px'], // 宽高 btn: ['确认', '取消'] // 按钮 }); ``` --- #### 配置选项详解 | 参数名 | 描述 | 默认值 | |--------|------|--------| | **type** | 弹窗类型：<br />0（信息框）、<br />1（页面层）、<br />2（iframe 层）、<br />3（加载层）、<br />4（tips 层） | 0 | | **title** | 弹窗标题，可以是一个字符串或者布尔值 `false` 来隐藏标题栏 | '' | | **content** | 弹窗内容。<br />如果是 `type=1` 或者 `type=2`，则可以直接写 HTML 字符串；<br />如果是 `type=2`，也可以指定 URL 地址 | '' | | **area** | 设置宽高，默认单位为像素(px)，可以通过数组形式设置宽度和高度，例如：`['500px', '300px']` | 自动调整 | | **offset** | 弹窗偏移位置，可选值有 `'t'`, `'r'`, `'b'`, `'l'` 表示上下左右居中，也可手动输入坐标如 `['100px', '100px']` | 中心居中 | | **shade** | 背景遮罩颜色透明度，范围 `[0, 1]`，设为 `0` 则无背景遮罩 | 0.3 | | **closeBtn** | 是否显示关闭按钮，`true` 显示，`false` 不显示 | true | | **btn** | 底部按钮组，数组中的每一项代表一个按钮的文字描述 | [] | --- #### 动态调整弹窗大小 为了实现动态适配浏览器窗口尺寸的变化，可以在初始化时监听窗口变化事件并重新计算弹窗的高度和宽度[^1]。具体代码如下所示： ```javascript // 初始化弹窗 var index = layer.open({ type: 1, title: '自适应弹窗', content: '<p style="height: 500px;">这是一个测试内容。</p>', area: ['90%', '90%'], maxmin: true, // 启用最大化最小化功能 resize: false // 禁用手动拉伸 }); // 监听窗口大小变化 window.onresize = function() { layer.resize(index); // 更新弹窗大小 }; ``` 上述代码实现了当用户缩放浏览器窗口时自动更新弹窗区域大小的效果[^1]。 --- #### iframe 类型弹窗实例 如果需要在一个独立的子页面中打开链接，则可以选择 `type=2` 并传递目标地址作为 `content` 参数值： ```javascript layer.open({ type: 2, title: 'Iframe 页面', content: '/example.html', // 子页面路径 area: ['800px', '600px'] }); ``` 此模式下会嵌套一个新的网页到父级页面之中，并允许交互操作。 --- #### 加载提示层 (Loading) 对于异步请求场景下的等待反馈，推荐采用 loading 效果： ```javascript var loadIndex = layer.load(1, { shade: [0.1,'#fff'] }); setTimeout(function(){ layer.close(loadIndex); }, 2000); ``` 这里展示了如何启动及停止加载动画过程。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值