GeoServer基础教程(六):使用GeoServer发布PostGIS表数据

转自:http://www.360doc.com/content/15/0609/15/8279768_476806992.shtml

关于PostgreSQL、PostGIS安装使用和Shapefile文件的导入请查看http://blog.csdn.net/muzhaomingplay/article/details/77848985

1、新建数据存储

在Geoserver中新建POSTGIS的数据存储(此处database、user和password为PostgreSQL中的信息)


然后发布图层:


图层发布完成之后转到图层预览,以openlayers的方式打开:


当你看到这个图的时候,就说明你的服务已经发布成功了!

接下来就是用Openlayers调用显示,

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  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>china EPSG:4326 image/png</title>  
  5. <link rel="stylesheet" type="text/css" href="http://200.200.200.223/OpenLayers-2.12/theme/default/style.css"/>  
  6. <style type="text/css">  
  7.     body { font-family: sans-serif; font-weight: bold; font-size: .8em; }  
  8.     body { border: 0px; margin: 0px; padding: 0px; }  
  9.     #map { width: 100%; height: 100%; border: 0px; padding: 0px; }  
  10.     #nodelist{  
  11.         position:absolute;  
  12.         right:10px;  
  13.         top:10px;  
  14.         background:#FFF;  
  15.         border:#06F solid 2px;    
  16.         padding:5px;  
  17.     }  
  18. </style>  
  19. <script type="text/javascript" src="http://200.200.200.223/OpenLayers-2.12/OpenLayers.js"></script>  
  20. <script type="text/javascript" src="http://200.200.200.223/OpenLayers-2.12/lib/OpenLayers/Lang/zh-CN.js"></script>  
  21. <script type="text/javascript">                 
  22.     var map, demolayer;                                                                          
  23.     OpenLayers.DOTS_PER_INCH = 90.71428571428572;  
  24.     OpenLayers.Util.onImageLoadErrorColor = 'transparent';  
  25.     function init(){  
  26.         var mapOptions = {   
  27.             resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625,   
  28.                 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4,   
  29.                 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5,   
  30.                 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6,   
  31.                 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7  
  32.             ],  
  33.             projection: new OpenLayers.Projection('EPSG:4326'),  
  34.             maxExtent: new OpenLayers.Bounds(-180.0,-90.0,180.0,90.0),  
  35.             units: "degrees",  
  36.             controls: []  
  37.         };  
  38.         map = new OpenLayers.Map('map', mapOptions );  
  39.           
  40.         map.addControl(new OpenLayers.Control.PanZoomBar({  
  41.                 position: new OpenLayers.Pixel(2, 15)  
  42.         }));  
  43.         map.addControl(new OpenLayers.Control.Navigation());  
  44.         map.addControl(new OpenLayers.Control.Scale($('scale')));  
  45.         map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));  
  46.           
  47.         var wms = new OpenLayers.Layer.WMS(  
  48.             "lake",   
  49.             "http://200.200.200.223:8888/geoserver/wms",  
  50.             {  
  51.                 LAYERS: "mpro",  
  52.                 transparent:true  
  53.             },  
  54.             {  
  55.                 singleTile: false,   
  56.                 ratio: 1,   
  57.                 isBaseLayer: false,  
  58.                 visibility:true,  
  59.                 yx : {'EPSG:4326' : true}  
  60.             }   
  61.         );  
  62.         map.addLayer(wms);  
  63.           
  64.         map.zoomToExtent(new OpenLayers.Bounds(73.45100463600005, 18.16324718800007,   
  65.             134.976797647, 53.53194315200005)  
  66.         );  
  67.           
  68.         map.events.register('click', map, function (e) {  
  69.             console.log(e);              
  70.         });       
  71.     }  
  72. </script>  
  73. </head>  
  74. <body onLoad="init()">  
  75.     <div id="map"></div>  
  76. </body>  
  77. </html>  
        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/muzhaomingplay">
                <img src="https://profile.csdnimg.cn/C/6/3/3_muzhaomingplay" class="avatar_pic" username="muzhaomingplay">
            </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit "><a href="https://blog.csdn.net/muzhaomingplay" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" target="_blank">One程序猿</a></span>
                    <!-- 等级,level -->
                                            <img class="identity-icon" src="https://csdnimg.cn/identity/blog2.png">                                            </div>
                <div class="text"><span>原创文章 0</span><span>获赞 5</span><span>访问量 3万+</span></div>
            </div>
                            <div class="right-message">
                                        <a class="btn btn-sm attented bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;extend1&quot;:&quot;个人信息已关注&quot;}">已关注</a>
                                                            <a href="https://im.csdn.net/im/main.html?userName=muzhaomingplay" target="_blank" class="btn btn-sm bt-button personal-letter">私信
                    </a>
                                </div>
                        </div>
                    
    </div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值