• OpenLayers访问Geoserver发布的地图

    要访问Geoserver发布的地图，主要困难点是地图URL地址的确定，方法是打开Geoserver，在LayerPreview中找到要访问的地图，单击该地图后面的OpenLayers,如下图所示

    这时客户端会调用OpenLayers访问该地图，如下图所示

    这里我们主要注意的是浏览器中的地址：

    http://192.168.1.50:8080/geoserver/karl/wms?service=WMS&version=1.1.0&request=GetMap&layers=global&styles=&bbox=-180.0,-90.0,180.0,90.0&width=660&height=330&srs=EPSG:4326&format=application/openlayers

    因此WMS的URL地址设置为http://192.168.1.50:8080/geoserver/karl/wms，后面的参数是以键值对的形式添加的，此处添加的是layers: "global"，代表请求的层（layer，翻译为层不知道准不准确）是名为global的层。

    HTML代码如下：

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html lang='en'>  
    3. <head>  
    4.     <meta charset='utf-8'/>  
    5.     <title>访问Geoserver发布的地图</title>  
    6.     <script type='text/javascript' src='OpenLayers.js'></script>  
    7.     <script type = 'text/javascript'>  
    8.         var map;  
    9.           
    10.         function init()  
    11.         {  
    12.             //定义地图边界  
    13.             var bounds= new OpenLayers.Bounds(75.98585510253906, 18.23404312133789,  
    14.              131.15216064453125, 50.426963806152344);  
    15.             var options = {  
    16.                 projection: "EPSG:4326",                  
    17.                 center: new OpenLayers.LonLat(116.5, 39.5),               
    18.             };  
    19.             map = new OpenLayers.Map('map_element',options);  
    20.             var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",  
    21.                 //geoserver所在服务器地址  
    22.                 "http://192.168.1.50:8080/geoserver/karl/wms",   
    23.                 {  
    24.                     layers: "global"  
    25.                 });  
    26.             //添加wms图层  
    27.             map.addLayer(wms);    
    28.                       
    29.             //添加control空间  
    30.             map.addControl(new OpenLayers.Control.LayerSwitcher());  
    31.             map.addControl(new OpenLayers.Control.MousePosition());  
    32.             map.addControl(new OpenLayers.Control.ScaleLine());  
    33.             map.addControl(new OpenLayers.Control.Scale);             
    34.                                       
    35.             map.zoomToMaxExtent(bounds);              
    36.         }         
    37.                   
    38.           
    39.     </script>  
    40. </head>  
    41.   
    42. <body onload='init();'>  
    43.     <div style="position: absolute; top: 50px; left: 80px;  300px; height: 100px;">  
    44.         <div id='map_element' style='1200px;height:500px;'></div>  
    45.           
    46.     </div>  
    47. </body>  
    48. </html>  


    访问效果为：

    如何地图没有显示，要检查一下是不是Geoserver没有打开。
  • 相关阅读:
    CTF -攻防世界-crypto新手区（5~11）
    CTF密码学常见加密解密总结
    CTF -攻防世界-crypto新手区(1~4)
    跨域问题解决
    npm使用记录
    dva控制元素动态消失隐藏
    maven安装记录
    postgreSQL记录
    关于System.__ComObject一些问题
    论文中表格跨页处理
  • 原文地址：https://www.cnblogs.com/hzcya1995/p/13317979.html
Copyright © 2020-2023  润新知