概述：

本节讲述如何在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. Selenium的安装和简单实用——PhantomJS安装

    简介 Selenium是一个用于Web应用程序测试的工具. Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Firefox,S ...

  2. PKI 的组成

    PKI(Public Key Infrastructure)公钥基础设施是提供公钥加密和数字签名服务的系统或平台,目的是为了管理密钥和证书.一个机构通过采用PKI 框架管理密钥和证书可以建立一个安全的 ...

  3. CDOJ 888 Absurdistan Roads

    Absurdistan Roads Time Limit: 5678/3456MS (Java/Others)     Memory Limit: 65432/65432KB (Java/Others ...

  4. BZOJ1191 超级英雄Hero （匈牙利算法）

    直接跑匈牙利,注意到“只有当选手正确回答一道题后,才能进入下一题,否则就被淘汰”,一旦无法满足就直接退出. #include <cstdio> #include <algorithm ...

  5. hdu 4280

    题意:求XY平面上最左边的点到最右边的点的最大流. 分析:数据量大,EK算法TLE,要用SAP算法.SAP算法用的是 http://www.cnblogs.com/kuangbin/archive/2 ...

  6. 【ACM】nyoj_47_过桥问题_201308151616

    过河问题时间限制:1000 ms  |  内存限制:65535 KB 难度:5描述 在漆黑的夜里,N位旅行者来到了一座狭窄而且没有护栏的桥边.如果不借助手电筒的话,大家是无论如何也不敢过桥去的.不幸的 ...

  7. [bzoj2086][Poi2010]Blocks_单调栈_双指针

    Blocks bzoj-2086 Poi-2010 题目大意:题目链接. 注释:略. 想法:首先,不难发现,如果连续的一段数的平均值不小于输入的k的话,这段数是满足题意的. 所以,我们再次简化一下:将 ...

  8. HDU 5242 上海大都会 G题

    这道题其实是求K条最长的不重叠的链.贪心算法+DFS即可求.深度优先搜索时,返回当前子树的最长链,使用优先队列保存其他孩子结点的最长链,即可.求结果时只需从优先队列中取前K个值的和.这相当于暴力删除每 ...

  9. HDU 4534

    AC自动机+状态DP. 虽然很明显的AC自动机+状态DP题,但要分析问题上还是欠缺一点了.一直在犹豫枚举每一个字符选或不选的状态会不会超时,以为会达到状态有2^n,但其实根本没有.因为有很多状态是可以 ...

  10. javac compiling error ( mising package)

    javac 编译java源文件时,提示 package does not exist 的错误 Test.java import java.security.MessageDigest; import ...