OpenLayers 加载一幅地图

by · 2019-04-02

摘要

         在浏览器中加载一幅地图，而且是可交互（包含缩放、平移、查询和分析等高级功能）的，该怎么做呢？我们当然知道要想网页中的内容是动态的，可交互的，要使用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参数是设置缩放等级！

转载自：https://blog.csdn.net/u013758456/article/details/79379639

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序