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

最新推荐文章于 2024-07-14 10:34:53 发布
最新推荐文章于 2024-07-14 10:34:53 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： OpenLayers 文章标签： html jsp 存储 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/netlinking/article/details/6138520
版权

主要原因是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,

netlinking
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenLayers实战，OpenLayers预加载瓦片，解决移动地图或缩放地图时出现空白瓦片的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-17 1931
OpenLayers默认加载地图并不会预加载不同层级的瓦片，所以我们在进行地图缩放操作或者移动地图位置时会出现瓦片还没加载出来显示空白瓦片的问题，其实很简单，只需要设置图层的preload参数即可实现瓦片的预加载，解决没加载出来显示空白瓦片的问题。
openlayer地图大小变化后地图白屏不显示
weixin_44940364的博客
02-22 1833
openlayer白屏
Openlayers之初始化地图
SmileCoffin的博客
01-20 4060
1、使用VS新建一个Web空白网站，然后将Openlayers3的开发库和样式文件复制到网站的根目录下； 2、新建一个HTML文档，并引入ol.js和ol.css； 3、在body标签中新建一个div作为地图加载的容器，然后设置其id为“map”； 4、代码实现 加载并显示OSM地图 window.onload =
openlayers调用geoserver地图不显示
淘淘小窝
04-10 5175
问题: 使用openlayers请求geoserver的wms服务,发现地图不显示. 原因: 发现map的高度设置的是100%,然后不显示。 后来改成400px,就显示了。 也就是html没识别map的高度设置100% 解决: map所在的div的父一级必须设置高度,map设置的100%才能识别. 因为我的map的父一级是body,所以设置如下 html,body { heigh
vue-openlayers中初始地图加载
猪猪侠的博客
02-25 532
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
openlayer 瓦片缩放空白的问题
qq_39330397的博客
06-15 395
openlayer旧版本加载瓦片服务时，缩放时会有空白的效果。7.1以后通过属性preload: Infinity可以解决此问题。
Openlayers 开发时,使用GWC地图时Overviewmap不出图的解决办法
Li Minghua的专栏
04-11 1284
Openlayers给地图客户端开发提供了便捷引用类库，真心赞其在地理信息领域作出的贡献。 前一段时间使用Ol调用Geoserver gwc地图，发现Overviewmap不出图，后来只是一个小实试，发现问题出在这里。 主地图引用的坐标投影： projection: new OpenLayers.Projection("EPSG:900913"), displayProjectio
baiduMap_openlayer(openlayer加载百度地图和高德地图例子)
05-27
总的来说，"baiduMap_openlayer"这个示例为我们展示了如何结合OpenLayers与百度地图、高德地图实现Web端GIS应用。通过学习这个案例，开发者可以快速掌握将这两种地图服务集成到自己项目的技巧，从而提升Web应用的...
openlayer地图示例代码
10-16
**OpenLayer地图示例代码详解** 在Web开发中，OpenLayers是一个流行的开源JavaScript库，用于构建交互式的地图应用。结合Vue3，一个现代化的前端框架，可以创建出高性能且易于维护的地图界面。以下是对给定的"open...
1.（openlayer篇）openlayer接入天地图（经纬度投影）.zip
03-01
如果需要在OpenLayers上显示其他基于WGS84的数据，例如标记或几何图形，我们需要进行坐标系统的转换。OpenLayers 提供了`ol.proj.transform()`函数来完成这个任务。例如，将经纬度坐标转换为GCJ-02坐标： ```...
baiduMap_openlayer(openlayer加载百度地图例子)
05-27
【标题】：“baiduMap_openlayer(openlayer加载百度地图例子)” 在GIS（地理信息系统）领域，集成不同的地图服务是常见的需求。本示例重点展示了如何利用OpenLayers库加载百度地图，让开发者能够在一个Web应用中...
Openlayer地图叠加瓦片
07-12
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的...在实际项目中，可以根据标签中的"瓦片 Openlayer"关键词，结合提供的"瓦片叠加测试"文件，进行具体的代码实践和调试，以达到理想的叠加效果。
解决uniapp使用openlayers在app端叠加图层失效问题
CheriseZhou的博客
01-10 1269
一开始用的uniapp官方的map组件，但是map组件在app端只能用高德地图，没法实现叠加geoserver效果，摸索了好久，网上的方法在我这都报错一堆，最后我发现了个神奇的东西，renderjs，它是运行在视图层的js，只支持app-vue和h5。首先下载openlayers依赖。
记录---app中 使用openlayers 地图添加图标不显示问题
冰雪为融的博客
08-30 1578
app中 使用openlayers 地图添加图标不显示问题
OpenLayers3基础教程之实现地图显示功能
jiegiser博客
01-15 6375
1.配置开发环境 使用OpenLayers 3开发WebGIS应用，我们首先需要配置开发环境，首先我们需要在openlayers官网获取OpenLayers 3的开发库。下载链接：官网。打开后如图所示： 需要注意的是这里下载有两个版本，①：仅包括开发库（开发与调试的JS库以及CSS文件），②：包括开发库、开发库源码、示例、API等所有开发资源。 在这里我下载了第一个版本，下载后
vue 应用 openlayers 使用ol-hashed维持地图状态
weixin_42084322的博客
03-29 252
在vue 中使用 ol-hashed 维持地图状态，刷新时地图不显示。 原因是使用ol-hashed 时，在操作地图的时候，会自动获取地图的层次及中心点，并将其添加到url地址中， 导致，刷新页面时路由出错， 解决的办法是， 修改 hasded/lib/hash.js 中的deserialize serialize 俩个方法，修改其设置urlpath 的 逻辑 ...
openlayers缩放地图切换图层
qq_41560089的博客
09-11 1519
openlayers缩放地图切换地图展示
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2632
title>充电效果
html 关闭信息窗口
最新发布
cuisidong1997的博客
07-14 105
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
Openlayer 初始化地图
06-13
要初始化 OpenLayers 地图，您需要完成以下步骤： 1. 在 HTML 文件中引入 OpenLayers 库： ```html <script src="https://cdn.jsdelivr.net/npm/ol@6.5.0/dist/ol.js"></script> ``` 2. 在一个 `div` 元素中创建一个地图容器： ```html <div id="map" style="width: 100%; height: 500px;"></div> ``` 3. 在 JavaScript 文件中创建一个地图实例，并将其添加到地图容器中： ```javascript var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 }) }); ``` 这将创建一个基本的 OpenLayers 地图，其中包含一个层，该层显示 OpenStreetMap 数据。地图的初始视图将位于经度 0 和纬度 0 处，缩放级别为 2。您可以根据自己的需要调整这些参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值