zoukankan      html  css  js  c++  java

  • （转） 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>  
  • 相关阅读:
    7个简单但棘手的JavaScript面试问题
    Promise.then链式调用顺序
    JS模拟实现枚举
    web前端常见的加密算法介绍
    JavaScript浮点数精度
    工作中常用的JavaScript函数片段
    JavaScript Array (数组) 对象
    快速找出数组中是否包含公共项
    用JavaScript让你的浏览器说话
    JavaScript的声明提升
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972870.html
Copyright © 2011-2022 走看看