（转） OpenLayers3基础教程——加载资源

概述：

本节讲述如何在Ol3中加载wms图层并显示到地图中。

Ol3下载：

你可以在OL官网去下载，下载地址为http://openlayers.org/download/，也可以去我的百度云盘下载，下载地址为http://pan.baidu.com/s/1o6wwHTo。官网上的最新版本为3.6.0，我的网盘的版本为3.0.0，不过官网上的链接好像是失效的。

OL3必须资源引入：

OL3必须引入的资源有两个，一个为样式文件，ol.css；一个为js文件，ol.js。

OL3加载wms：

在Ol3中，可以通过两种方式加载WMS，一种是ol.layer.Image，其对应的资源为ol.source.ImageWMS，他它的定义方式为：

[javascript] view plain copy
 
 print?
  1. var untiled = new ol.layer.Image({  
  2.     source: new ol.source.ImageWMS({  
  3.         ratio: 1,  
  4.         url: 'http://localhost:8081/geoserver/lzugis/wms',  
  5.         params: {'FORMAT': format,  
  6.             'VERSION': '1.1.1',  
  7.             LAYERS: 'lzugis:province',  
  8.             STYLES: ''  
  9.         }  
  10.     })  
  11. });  

一种是ol.layer.Tile，其对应的资源为ol.source.TileWMS，它的定义方式为：

[javascript] view plain copy
 
 print?
  1. var tiled = new ol.layer.Tile({  
  2.     visible: false,  
  3.     source: new ol.source.TileWMS({  
  4.         url: 'http://localhost:8080/geoserver/lzugis/wms',  
  5.         params: {'FORMAT': format,  
  6.             'VERSION': '1.1.1',  
  7.             tiled: true,  
  8.             LAYERS: 'lzugis:province',  
  9.             STYLES: ''  
  10.         }  
  11.     })  
  12. });  

显示资源：

OL3中显示资源使用Map实现的，一个Map实例包括target，即地图展示的div的id；layers，地图要现实的图层集合；view，包括投影，中心点等信息，定义方式为：

[javascript] view plain copy
 
 print?
  1. var map = new ol.Map({  
  2.     controls: ol.control.defaults({  
  3.         attribution: false  
  4.     }),  
  5.     target: 'map',  
  6.     layers: [  
  7.         untiled,  
  8.         tiled  
  9.     ],  
  10.     view: new ol.View({  
  11.         projection: projection,  
  12.         rotation: Math.PI / 6  
  13.     })  
  14. });  
  15. map.getView().fitExtent(bounds, map.getSize());  


将上面的内容连起来，完整的代码如下：

[html] view plain copy
 
 print?
    1. <html xmlns="http://www.w3.org/1999/xhtml">  
    2. <head>  
    3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    4.     <title>Ol3 wms</title>  
    5.     <link rel="stylesheet" type="text/css" href="http://localhost/ol3/css/ol.css"/>  
    6.     <style type="text/css">  
    7.         body, #map {  
    8.             border: 0px;  
    9.             margin: 0px;  
    10.             padding: 0px;  
    11.              100%;  
    12.             height: 100%;  
    13.             font-size: 13px;  
    14.         }  
    15.     </style>  
    16.     <script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script>  
    17.     <script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script>  
    18.     <script type="text/javascript">  
    19.         function init(){  
    20.             var format = 'image/png';  
    21.             var bounds = [73.4510046356223, 18.1632471876417,  
    22.                 134.976797646506, 53.5319431522236];  
    23.             var untiled = new ol.layer.Image({  
    24.                 source: new ol.source.ImageWMS({  
    25.                     ratio: 1,  
    26.                     url: 'http://localhost:8081/geoserver/lzugis/wms',  
    27.                     params: {'FORMAT': format,  
    28.                         'VERSION': '1.1.1',  
    29.                         LAYERS: 'lzugis:province',  
    30.                         STYLES: ''  
    31.                     }  
    32.                 })  
    33.             });  
    34.             var tiled = new ol.layer.Tile({  
    35.                 visible: false,  
    36.                 source: new ol.source.TileWMS({  
    37.                     url: 'http://localhost:8080/geoserver/lzugis/wms',  
    38.                     params: {'FORMAT': format,  
    39.                         'VERSION': '1.1.1',  
    40.                         tiled: true,  
    41.                         LAYERS: 'lzugis:province',  
    42.                         STYLES: ''  
    43.                     }  
    44.                 })  
    45.             });  
    46.             var projection = new ol.proj.Projection({  
    47.                 code: 'EPSG:4326',  
    48.                 units: 'degrees'  
    49.             });  
    50.             var map = new ol.Map({  
    51.                 controls: ol.control.defaults({  
    52.                     attribution: false  
    53.                 }),  
    54.                 target: 'map',  
    55.                 layers: [  
    56.                     untiled,  
    57.                     tiled  
    58.                 ],  
    59.                 view: new ol.View({  
    60.                     projection: projection,  
    61.                     rotation: Math.PI / 6  
    62.                 })  
    63.             });  
    64.             map.getView().fitExtent(bounds, map.getSize());  
    65.         }  
    66.     </script>  
    67. </head>  
    68. <body onLoad="init()">  
    69. <div id="map">  
    70.     <div id="location"></div>  
    71. </div>  
    72. </body>  
    73. </html>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/telwanggs/p/6972870.html