OpenLayers 加载一幅地图

最新推荐文章于 2024-08-29 15:16:03 发布
最新推荐文章于 2024-08-29 15:16:03 发布
阅读量2.8k 收藏 3
点赞数 1
分类专栏： OpenLayers 文章标签： OpenLayers map

摘要

         在浏览器中加载一幅地图，而且是可交互（包含缩放、平移、查询和分析等高级功能）的，该怎么做呢？我们当然知道要想网页中的内容是动态的，可交互的，要使用JavaScript，地图应用也不例外，不过要从底层开发的话，要费老鼻子的劲儿了！OpenLayers便是一个减轻你的工作量的框架，利用它可以轻松地加载一幅动态可交互的地图到浏览器中！

         下面便是一个利用OpenLayers加载地图的小例子，我们先看看运行结果，并分析一下原理，捋一捋源码！

正文

例程如下：

[html]  view plain  copy
  1. <!doctype html>  
  2. <html lang="en">  
  3.   <head>  
  4.     <link rel="stylesheet" href="http://openlayers.org/en/v3.3.0/css/ol.css" type="text/css">  
  5.     <style>  
  6.       .map {  
  7.         height: 400px;  
  8.         width: 100%;  
  9.       }  
  10.     </style>  
  11.     <script src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript"></script>  
  12.     <title>OpenLayers 3 example</title>  
  13.   </head>  
  14.   <body>  
  15.     <h2>My Map</h2>  
  16.     <div id="map" class="map"></div>  
  17.     <script type="text/javascript">  
  18.       var map = new ol.Map({  
  19.         target: 'map',  
  20.         layers: [  
  21.           new ol.layer.Tile({  
  22.             source: new ol.source.MapQuest({layer: 'sat'})  
  23.           })  
  24.         ],  
  25.         view: new ol.View({  
  26.           center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),  
  27.           zoom: 4  
  28.         })  
  29.       });  
  30.     </script>  
  31.   </body>  
  32. </html>  

在浏览器中打开，Duang  Duang  Duang  。。 。 - -| ，运行结果如下：


为什会有这些效果，咱来个庖丁解牛，分解分解，捋一捋！这是一个普通的Html网页，没错，但是它引用了OpenLayers的CSS样式和js文件：

[html]  view plain  copy
  1. <link rel="stylesheet" href="http://openlayers.org/en/v3.3.0/css/ol.css" type="text/css">  
[html]  view plain  copy
  1. <script src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript"></script>  

然后又扯了一段代码：

[html]  view plain  copy
  1. <script type="text/javascript">  
  2.       var map = new ol.Map({  
  3.         target: 'map',  
  4.         layers: [  
  5.           new ol.layer.Tile({  
  6.             source: new ol.source.MapQuest({layer: 'sat'})  
  7.           })  
  8.         ],  
  9.         view: new ol.View({  
  10.           center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),  
  11.           zoom: 4  
  12.         })  
  13.       });  
  14. </script>  

在这段代码中，主要是实例化了一个OpenLayers的Map对象，于是就显示了地图！Map是何许人也？它是OpenLayers中最主要的对象！要初始化一幅地图，需要一个view，一个或多个图层（layers），一个目标容器（target）。在GitHub上的OpenLayers主页上的Map定义可以看到：

[html]  view plain  copy
  1. ol.MapProperty = {  
  2.   LAYERGROUP: 'layergroup',  
  3.   SIZE: 'size',  
  4.   TARGET: 'target',  
  5.   VIEW: 'view'  
  6. };  

定义了一个数组，主要有layers、target和view，代表map对象 的三个主要属性。

[html]  view plain  copy
  1. ol.Map.prototype.getTarget = function() {  
  2.   return /** @type {Element|string|undefined} */ (this.get(ol.MapProperty.TARGET));  
  3. };  
  4. goog.exportProperty(  
  5.   ol.Map.prototype,  
  6.   'getTarget',  
  7.   ol.Map.prototype.getTarget);  

getTarget主要是取得以上的数组的TARGET属性值，而exportProperty是Google的Closure库的一个函数，函数原型是：


[html]  view plain  copy
  1. goog.exportProperty = function(object, publicName, symbol) {  
  2.   object[publicName] = symbol;  
  3. };  

就是将一个自定义的属性symbol导出到object定义的对象中，而publicName就是导入后的属性名。

[html]  view plain  copy
  1. ol.Map.prototype.getTargetElement = function() {  
  2.   var target = this.getTarget();  
  3.   return goog.isDef(target) ? goog.dom.getElement(target) : null;  
  4. };  

根据id名来找到放置map的HTML元素。

[html]  view plain  copy
  1. ol.Map.prototype.getLayerGroup = function() {  
  2.   return /** @type {ol.layer.Group} */ (this.get(ol.MapProperty.LAYERGROUP));  
  3. };  
  4. goog.exportProperty(  
  5.   ol.Map.prototype,  
  6.   'getLayerGroup',  
  7. ol.Map.prototype.getLayerGroup);  

这便是和以上同理，将layerGroup初始化！

[html]  view plain  copy
  1. layers: [  
  2.   new ol.layer.Tile({  
  3.     source: new ol.source.MapQuest({layer: 'sat'})  
  4.   })  
  5. ]  
用OpenLayers提供的瓦片作为Map的图层，取用名称为“sat”的图层。

[html]  view plain  copy
  1. ol.Map.prototype.getView = function() {  
  2.   return /** @type {ol.View} */ (this.get(ol.MapProperty.VIEW));  
  3. };  
  4. goog.exportProperty(  
  5.   ol.Map.prototype,  
  6.   'getView',  
  7.   ol.Map.prototype.getView);  

同理，初始化view。

[html]  view plain  copy
  1. view: new ol.View({  
  2.   center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),  
  3.   zoom: 4  
  4. })  
设置一些视区的参数，其中center是设置地图中心，transform函数是将给定的坐标从4326转到3857坐标系下，4326即是WGS84坐标系！zoom参数是设置缩放等级！

峰沙同行
关注
专栏目录
使用openlayers加载离线地图实例
10-06
在IT行业中，前端开发是构建Web应用程序的关键部分，而OpenLayers是一个流行的JavaScript库，用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用...
openlayers加载地图
qq_59625204的博客
07-14 468
this.$store.state.serverIP.serverIP是地图存放的服务器IP。2.加载geoserver服务上面的地图。
openlayers创建Arcgis图层
lixue7921的博客
06-09 298
要在OpenLayers中创建ArcGIS图层，您需要使用ArcGIS REST图层服务的URL。在此示例中，我们将ArcGIS REST图层添加到OpenLayers地图中。您可以使用与上述示例相同的方法创建其他ArcGIS REST服务的图层。在此示例中，我们使用ArcGIS Online的世界地形图服务。
Openlayers 自定义地图瓦片加载（一）
最新发布
无可言喻的博客
08-29 1309
对使用固定的 URL 模板和自定义瓦片网格两种方式对Openlayers 瓦片请求行为进行探究，并列举自定义瓦片网格的使用场景。
OpenLayers项目分析（七）地图表现
鳄山维虾壳集思园
05-15 1341
一开始看到OpenLayers，就有一个问题。就是它作为WebGIS的前端，通俗地说，是“显示”地图的。那么，它显示的地图是什么，是怎么显示的，又是怎么实现的？——暂且把这个问题叫做地图表现。我觉得最关键的就是Map类，把这个类分析清楚了，问题就解决了一大半了。 　　前面第一回里说过怎么实例化一个地图，怎么向地图里加图层加控件。其实，地图是这样的，它就像一个容器，可以盛东西。要分析它光理解这些还
【WebGIS】二、基于Openlayers实现地图的加载与显示
xiaobai_1900的博客
09-17 3456
vue cli + openlayers发布地图
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
热门推荐
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
openlayers 加载天地图示例
02-24
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括全球知名的地图服务提供商——天地图。天地图是中国官方的地理信息公共服务平台，提供丰富的地形图、卫星...
openlayers加载瓦片地图并手动标记坐标点
04-29
OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括瓦片地图，使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...
openlayers加载静态图片地图
10-31
OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括WMS、WMTS、GeoJSON等，同时也允许开发者加载静态图片作为地图底图。本教程将详细介绍如何使用OpenLayers...
OpenLayers3加载谷歌地图
05-07
OpenLayers3加载谷歌地图，加载谷歌地图显示，实现效果很好，放大比例尺也能看得清楚。文章链接：https://blog.csdn.net/Gary_888/article/details/89914290
Openlayers离线加载天地图
weixin_30325971的博客
02-27 450
概述：经过一个春节的休整，今天终于开始了！不论什么时候，都不要忘记学习，学习是一辈子的事情！今天，我来说说如何实现天地图的离线以及Openlayers加载离线数据实现天地图数据的展示。实现：1、获取天地图的数据可以通过网络上下载各大地图的工具将天地图的数据下载下来，并制作成mbtiles文件。制作过程在此就不详述，将已经制作好的一个文件上传到了百度网盘，需要的童鞋可以下载哦~~~~下载链接：h...
OpenLayers图层管理
lixue7921的博客
06-09 1651
OpenLayers是一个开源的JavaScript库，用于在Web浏览器中显示交互式地图。OpenLayers提供了丰富的图层管理功能，允许用户添加、移除、显示和隐藏各种地理数据图层。这些示例演示了OpenLayers中图层的基本管理。通过这些功能，用户可以轻松地控制他们的地图数据的外观和行为。
Openlayers实战：加载google地图
大剑师兰特的GIS世界
07-13 531
google地图在业界一直是标杆的存在， 其zoomlevel超级大，可看到非常精细的程度。Openlayers中如何加载谷歌地图呢？同样是XYZ的挂载方式，根据参数的不同，可以显示不同状态的谷歌地图，如果矢量地图，瓦片遥感图片等。
openlayers如何使用（一）地图的加载
可乐加冰的博客
08-15 1435
在vue文件中使用openlayers创建地图
OpenLayers学习笔记——加载地图
qq_34158448的博客
06-29 1242
OpenLayers常见的加载地图显示的方法有三种，使用不同的加载方法，会有不同的用处。1、静态加载地图js代码：&lt;script type="text/javascript"&gt; var map = new ol.Map({ target: 'map', layers: [new ol.layer.Tile({source: new ol.source.OSM()})], ...
VUE3使用OpenLayer无偏差加载百度地图
weixin_45729439的博客
12-20 953
使用OpenLayer无偏差加载百度地图（vue）
vue openlayers 初始化地图加载 详解
luoawai的博客
06-03 1111
1. openlayers 简介：openlayers是一个开源免费的js库，用于在网页中实现地图的动态显示和交互。一起看看官方对openlayers的介绍。 OpenLayers使在任何网页中放置动态地图变得容易。它可以显示地图块，矢量从任何源加载的数据和标记。 开发OpenLayers是为了进一步使用各种地理信息。 它是完全免费的开源JavaScript。 2. 话不多说，先看效果 3. 在vue环境下，创建一个Map地图 3.1 npm 安装 openlayers cnpm i
使用openlayers加载离线地图
weixin_43578304的博客
10-06 1713
简单来说，Openlayers是一个基于Javacript开发，免费、开源的前端地图开发库，使用它，可以很容易的开发出WebGIS系统。目前Openlayers支持地图瓦片、矢量数据等众多地图数据格式，支持比较完整的地图交互操作。目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架，在国内外的GIS相关行业中得到了广泛的应用。
openlayers 加载本地路径地图
07-27
### 回答1： OpenLayers是一个用于显示地理信息的开源JavaScript库。要加载本地路径地图，首先需要将地图文件保存在本地计算机上。然后，可以通过以下步骤使用OpenLayers加载本地路径地图： 1. 在HTML文件中引入OpenLayers的JavaScript库。可以通过在网页的<head>标签内添加以下代码实现： ```html <script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script> ``` 2. 在代码中创建一个用于显示地图的<div>元素。例如： ```html <div id="map" style="width: 800px; height: 600px;"></div> ``` 3. 在JavaScript代码中编写加载本地路径地图的步骤。首先，创建一个地图实例，并指定要显示地图的目标元素。然后，创建用于显示地图的图层，例如OpenStreetMap图层。最后，将图层添加到地图实例中。以下是一个简单的示例： ```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 }) }); ``` 4. 运行代码，打开包含HTML文件的浏览器页面。现在，应该能够加载并显示本地路径地图了。 注意：加载本地路径地图可能需要一些额外的步骤，例如配置本地web服务器或处理文件路径。此外，OpenLayers还提供了许多其他功能和选项，可以根据需求进行配置和定制。 ### 回答2： OpenLayers是一个用于在网页上展示地图的开源JavaScript库，它支持加载本地路径地图。要加载本地路径地图，首先需要将地图切片存储在本地的文件系统中。切片是将整个地图区域分成一系列小块的图像，以提高地图显示效 ### 回答3： OpenLayers 是一个开源的地图库，可以用于加载和显示各种地图数据。要加载本地路径地图，需要按照以下步骤进行操作： 1. 准备地图数据：首先，将本地的地图数据准备好。这可以是一个图像文件（如JPEG、PNG等），也可以是一个矢量文件（如GeoJSON、KML等）。 2. 创建地图容器：在 HTML 页面中，创建一个用于显示地图的容器元素，例如一个 `<div>`元素，并为其指定一个唯一的ID。 3. 加载地图数据：使用 OpenLayers 的 `ol.source.Image` 或 `ol.source.Vector`类，根据地图数据的类型，创建一个相应的数据源。例如，如果是图像文件，可以使用 `ol.source.ImageStatic` 类，并指定图像文件的路径。如果是矢量文件，可以使用 `ol.source.Vector` 类，并使用 `ol.format` 类来解析和加载矢量数据。 4. 创建地图图层：使用 `ol.layer.Image` 或 `ol.layer.Vector` 类，创建一个相应的图层，并将数据源与图层关联起来。 5. 创建地图对象：使用 `ol.Map` 类，创建一个地图对象。将之前创建的地图容器元素和图层添加到地图对象中。 6. 显示地图：将地图对象绑定到地图容器元素上，使用 `map.setTarget(containerID)` 方法。 经过以上步骤，就可以加载本地路径地图并在网页上显示了。可以根据需要，设置地图的初始视图、缩放级别、交互功能等，以实现更多的地图交互操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值