OpenLayers6:关于地图无法加载的问题（找到解决方法-待深究）

最新推荐文章于 2024-05-14 09:35:38 发布
最新推荐文章于 2024-05-14 09:35:38 发布
阅读量5.5k 收藏 4
点赞数 2
文章标签： OpenLayers WEBGIS GIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a742128486/article/details/107309387
版权 
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/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([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

这段是ol6官网给出的快速呈现一副地图的代码，直接运行在VScode的里面是可以呈现出地图的。当我们把地图的样式style那段代码给注释掉，在ol6中地图就无法加载，但是在ol4和ol5的版本中均可以加载。

咖喱牛腩
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
173：vue+openlayers 解决国内openstreetmap地图加载不出来的问题（代码示例）
大剑师兰特的GIS世界
11-10 8547
第173个近来写程序，发现openlayers用OSM方式来加载OpenStreetMap地图，一片爆红，瓦片加载不出来。本示例的目的是介绍演示如何在vue+openlayers中解决OpenStreetMap地图在国内被DNS污染，加载不出来瓦片的问题，通常我们是直接引用OSM，这里采用的是XYZ方式来加载瓦片的路径。
使用openlayers加载离线地图实例
10-06
使用openlayers加载离线地图实例，可通过mui打包成app。简单，易上手
Openlayers案例1——加载OSM地图
peanut2的博客
01-28 2245
Openlayers案例一之加载OSM地图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加载OSM地图</title> <link rel="stylesheet"
2024年最全openLayers6系列理论基础——Layer篇(2)，2024年最新前端面试项目经历
wang688699的博客
05-14 284
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】常用options：| 名称 | 类型 | 描述 |options图层选项。| 名称 | 类型 | 描述 |className| 字符串 （默认为“ ol-layer”） |设置为layer元素的CSS类名称。opacity| 数字 （默认为1） |不透明度（0，1）。visible| 布尔值 （默认为true） |能见度。extent模块：ol /范围〜范围图层渲染的边界范围。
openlayers -- Cannot read property ‘slice‘ of null---地图无法加载
xinleicol的博客
06-28 835
加载GeoServer WMS服务时，地图无法加载，出现错误： View.js:1552 Uncaught TypeError: Cannot read property 'slice' of null at xs (View.js:1552) at e.applyOptions_ (View.js:378) at new e (View.js:330) at test.html:115 我加载服务的代码是： var imagery = new ol.layer.Image({
Vue+Openlayer 模态窗体（Modal）加载Map不显示
weixin_43224584的博客
03-08 1193
Vue Modal窗体预加载，加载时找不到Map的对象控件target,导致地图没有加载上（这个问题困扰了我一天！还好解决了），所以在窗体加载完成后需要对窗体进行resize,刷新地图。具体代码如下： //template <Modal v-model="editModel" width="850px" :mask-closable="false"> <div class="el-col el-col-24 modelDiv"> <div id
OpenLayers加载在线地图跨域问题
weixin_43336525的博客
04-19 1554
OpenLayers加载在线地图跨域问题
Openlayers 开发时,使用GWC地图时Overviewmap不出图的解决办法
Li Minghua的专栏
04-11 1286
Openlayers给地图客户端开发提供了便捷引用类库，真心赞其在地理信息领域作出的贡献。 前一段时间使用Ol调用Geoserver gwc地图，发现Overviewmap不出图，后来只是一个小实试，发现问题出在这里。 主地图引用的坐标投影： projection: new OpenLayers.Projection("EPSG:900913"), displayProjectio
openlayers加载WMS服务图层
du_5pet的博客
04-19 6227
var tian_di_tu_road_layer = new ol.layer.Tile({ title: "天地图路网", source: new ol.source.XYZ({ url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&...
openlayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法
01-08
OpenLayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法加载矢量地图数据的两种方法加载本地geojson格式文件出现的跨域问题及解决方法。向geoserver请求WFS服务出现的跨域问题及解决方法。 加载矢量...
openlayers 加载天地图示例
02-24
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括全球知名的地图服务提供商——天地图。天地图是中国官方的地理信息公共服务平台，提供丰富的地形图、卫星...
openlayers加载瓦片地图并手动标记坐标点
04-29
本教程将详细介绍如何使用OpenLayers加载瓦片地图以及手动在地图上标记坐标点。 一、OpenLayers 瓦片地图 瓦片地图是一种常见的地图展示方式，它将大尺寸的地图分割成多个小块（即“瓦片”），每个瓦片都是一个较...
openlayers加载本地离线地图瓦片（重新发2018-10-23）
10-24
9. **路径问题**：描述中提到的问题可能是因为HTML文件中的路径设置不正确，导致OpenLayers无法找到瓦片资源。确保HTML文件和地图瓦片数据在同一目录或相对路径正确，是避免此类问题的关键。 通过以上步骤，我们...
OpenLayers 卫星图像/地图 怎么可以不显示 ‘此级别下，该区域无影像，请放大或缩小地图后再浏览‘ ‘此区域无卫星图‘ ‘暂无数据‘ ‘Map Data Not Yet Available‘
a571574085的博客
01-20 6868
根据https://openlayers.org/en/latest/examples/bing-maps.html可知 new TileLayer({ visible: false, preload: Infinity, source: new BingMaps({ key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here', imagerySet:...
ue4挂载其他工程生成的pak，打开level
weixin_44043951的博客
03-28 2202
1.pak的MountPoint的计算 UE4在创建pak文件时会对MountPoint进行计算，用一句话来概括计算逻辑就是：UE4会收集所有打包到pak中的文件，然后提取它们目录的公共部分作为MountPoint 下面以一个例子来说明。假设我们有3个文件需要打包到pak中，它们的路径分别为"../../../MyProject/Content/A.uasset"、"../../../MyProject/B.uasset"以及"../../../C.uasset"。 计算开始时，首先获取最长.
Openlayers实战：加载OpenStreetMap（快速显示无加载不出状态）
大剑师兰特的GIS世界
07-13 1276
Openlayers官方一直演示的都是用Openstreetmap， 但是目前国内使用通用的new OSM(), 是加载不出来OSM地图的。在我们的实战中代码中，不但能够加载出Openstreetmap， 而且速度非常的快，这就涉及到一个曲线救图的处理方式，请参考源代码。
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2046
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
性能~问题业务场景稳定性测试
最新发布
07-25
1
《AI大模型应用》--百度AI 文心一言.zip
07-25
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
openlayers6如何解决设置圆半径样式会跟随地图缩放等级缩放问题
06-02
在 OpenLayers 6 中，可以通过监听地图视图的 `change:resolution` 事件，来实时更新圆形要素的半径长度。具体步骤如下： 1. 创建一个圆形要素，并添加到矢量图层中。 ```javascript const circle = new ol.Feature(new ol.geom.Circle([x, y], radius)); const vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [circle] }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 2 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }) }) }); ``` 2. 监听地图视图的 `change:resolution` 事件，并在事件处理函数中更新圆形要素的半径长度。需要注意的是，半径长度需要根据当前地图视图的比例尺和半径原始值来计算得出。 ```javascript map.getView().on('change:resolution', function() { const resolution = this.getResolution(); const radiusInMapUnits = radius / resolution; circle.getGeometry().setRadius(radiusInMapUnits); }); ``` 3. 最后，将矢量图层添加到地图中，并设置合适的中心坐标和缩放级别。 ```javascript const map = new ol.Map({ target: 'map', layers: [vectorLayer], view: new ol.View({ center: [x, y], zoom: 10 }) }); ``` 通过上述步骤，我们可以实现动态调整圆形要素的半径长度，使其在不同缩放级别下保持一致。需要注意的是，半径长度的单位需要与地图投影坐标系一致，如米或像素等。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值