概述：

本节讲述如何在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，他它的定义方式为：

  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，它的定义方式为：

  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，包括投影，中心点等信息，定义方式为：

  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());

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

    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. width: 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>

（转） OpenLayers3基础教程——加载资源的更多相关文章

  1. 背水一战 Windows 10 (63) - 控件（WebView）: 基础知识, 加载 html, http, https, ms-appx-web:///, embedded resource, ms-appdata:///, ms-local-stream://

    [源码下载] 背水一战 Windows 10 (63) - 控件(WebView): 基础知识, 加载 html, http, https, ms-appx-web:///, embedded res ...

  2. cocos2d-x addImageAsync()异步加载资源成功之后的场景跳转问题

    http://blog.csdn.net/w20175357/article/details/23546985 1.先说说addImageAsync()异步加载图片的问题 做游戏的时候现在资源的比较大 ...

  3. OpenLayers3基础教程——OL3基本概念

    从本节開始,我会陆陆续续的更新有关OL3的相关文章--OpenLayers3基础教程,欢迎大家关注我的博客,同一时候也希望我的博客可以给大家带来一点帮助. 概述: OpenLayers 3对OpenL ...

  4. （转）OpenLayers3基础教程——OL3基本概念

    http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程——OL3基本概念 从本节开始,我会陆陆续续的更新 ...

  5. OpenLayers3基础教程——OL3 介绍control

    概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 control比較: 相比較Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control: Ol2的c ...

  6. OpenLayers3基础教程——OL3之Popup

    概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...

  7. Java加载资源文件几种方法

    from: http://andyzhu.blog.51cto.com/4386758/775836/ import java.net.URL; import org.springframework. ...

  8. Maven，预加载资源文件

    预加载资源文件需要先启用功能: <build> <resources> <resource> <directory>src/main/resources ...

  9. 【Unity3D】Unity3D之 Resources.Load 动态加载资源

    [Unity3D]Unity3D之 Resources.Load 动态加载资源 1.Resources.Load:使用这种方式加载资源,首先需要下Asset目录下创建一个名为Resources的文件夹 ...

随机推荐

  1. MongoDB整库备份与还原以及单个collection备份、恢复

    备份前的检查> show dbsMyDB 0.0625GBadmin (empty)bruce 0.0625GBlocal (empty)test 0.0625GB> use MyDBsw ...

  2. 1414 冰雕 51nod 暴力

    1414 冰雕 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 白兰大学正在准备庆祝成立256周年.特别任命副校长 ...

  3. F - True Liars 带权并查集

    After having drifted about in a small boat for a couple of days, Akira Crusoe Maeda was finally cast ...

  4. 洛谷 P2195 HXY造公园

    P2195 HXY造公园 题目描述 现在有一个现成的公园,有n个休息点和m条双向边连接两个休息点.众所周知,HXY是一个SXBK的强迫症患者,所以她打算施展魔法来改造公园并即时了解改造情况.她可以进行 ...

  5. 洛谷 P1481 魔族密码

    P1481 魔族密码 题目描述 风之子刚走进他的考场,就…… 花花:当当当当~~偶是魅力女皇——花花!!^^(华丽出场,礼炮,鲜花) 风之子:我呕……(杀死人的眼神)快说题目!否则……-_-### 花 ...

  6. MYSQL 源码

    http://www.cnblogs.com/wingsless/tag/MySQL/

  7. v$open_cursor的几个问题

    SQL order by SADDR desc ; SADDR SID USER ADDRESS HASH_VALUE SQL_ID SQL_TEXT -------- ---------- ---- ...

  8. springmvc学习笔记(10)-springmvc注解开发之商品改动功能

    springmvc学习笔记(10)-springmvc注解开发之商品改动功能 标签: springmvc springmvc学习笔记10-springmvc注解开发之商品改动功能 需求 开发mappe ...

  9. [深入学习C#]输入输出安全性——可变类型形參列表的变化安全性

    可变类型形參列表(variant-type-parameter-lists) 可变类型形參列表(variant-type-parameter-lists )仅仅能在接口和托付类型上出现.它与普通的ty ...

  10. JDK框架简析--java.lang包中的基础类库、基础数据类型

    题记 JDK.Java Development Kit. 我们必须先认识到,JDK不过,不过一套Java基础类库而已,是Sun公司开发的基础类库,仅此而已,JDK本身和我们自行书写总结的类库,从技术含 ...