概述：

本节讲述如何在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. codeforeces近日题目小结

    题目源自codeforeces的三场contest contest/1043+1055+1076 目前都是solved 6/7,都差了最后一题 简单题: contest/1043/E: 先不考虑m个限 ...

  2. python浅拷贝与深拷贝

    今天写程序,人为制造了一个由浅拷贝引起的bug,有必要归纳一下.先附上源代码: class PerformanceTest(object): def __init__(self): ....... s ...

  3. poj3233 题解 矩阵乘法 矩阵快速幂

    题意:求S = A + A2 + A3 + … + Ak.(mod m) 这道题很明显可以用矩阵乘法,但是这道题的矩阵是分块矩阵, 分块矩阵概念如下:当一个矩阵A中的单位元素aij不是一个数值而是一个 ...

  4. [bzoj2467][中山市选2010]生成树_快速幂

    生成树 bzoj-2467 中山市选2010 题目大意:题目链接 注释:略. 想法:首先,考虑生成树的性质.每两个点之间有且只有一条路径.我们将每个五边形的5条边分为外面的4条边和内部的一条边,在此简 ...

  5. 对于Linux内核tty设备的一点理解

    http://blog.chinaunix.net/uid-7828352-id-3233064.html

  6. The superclass &quot;javax.servlet.http.HttpServlet&quot; was not found on the Java Build Path

    完整错误信息: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS"AS IS" AND ANY ...

  7. HDU 4183 Pahom on Water(最大流SAP)

    Pahom on Water Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  8. Android---keycode值以及相应名称

    KEYCODE列表 电话键 键名 描写叙述 键值   KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOME 按键Home 3 KEYCODE_ME ...

  9. Too-Java：Intellij Idea

    ylbtech-Too-Java:Intellij Idea IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境.IntelliJ在业界被公认为最好的java开发工具之一,尤 ...

  10. yii引入js文件

    作者:zccst 四.在视图层(../views/..)添加CSS文件或JavaScript文件 Yii::app()->clientScript->registerScriptFile( ...