zoukankan      html  css  js  c++  java

  • （转）PostGIS+QGIS+GeoServer+OpenLayers实现数据的存储、服务的发布以及地图的显示

    http://blog.csdn.net/gisshixisheng/article/details/41575833

    标题比较长，主要呢是实现以下几点：

    1、将shp数据导入到PostGIS中；

    2、Geoserver发布WMS服务；

    3、Openlayers调用Wms服务

    首先，下载安装软件。

    为方便大家下载，我将所有软件上传的百度网盘里了，有需要的可以上网盘直接下载，地址为：http://pan.baidu.com/s/1ntJrf8P，此外，openlayers的下载地址为：http://pan.baidu.com/s/1kTBTCX5。

    软件下载完成以后安装，如何安装在此就不做详述了，不过注意：postgresql-8.4.14-1-windows安装完成之后，Stack Builder直接取消，下载太慢，安装postgis-pg84-setup-2.0.3-1即可。

    接着，将shp数据导入到PostGIS中。

    将shp数据导入到PostGIS有两种方式：1、通过QGIS的辅助工具；2、通过cmd命令行。

    1、通过Qgis辅助工具

    打开QGIS——》打开辅助工具Import ShapeFiles to PostgreSQL

    ——》新建PostGIS连接

    ——》添加shp数据

    注意：Schema类型选择public。

    2、通过cmd命令行

    通过cmd的方式比较简单，首先，进入命令窗口，切换到PostgreSql的bin路径：

    [plain] view plain copy
     
     print?
    1. </pre><pre name="code" class="plain">cd C:Program Files (x86)PostgreSQL8.4in>  

    将shp数据转换为SQL语句：

    [plain] view plain copy
     
     print?
    1. shp2pgsql D:datawgs84mcounty.shp mcounty > D:datawgs84mcounty.sql  

    新建table并将数据导入：

    [plain] view plain copy
     
     print?
    1. psql -d opengis -f D:datawgs84mcounty.sql postgres  

    比较：
    第一种操作比较简单，但是，操作步骤比较多，但是第一种操作在导入POLYGON的时候会存在MULTIPOLYGON或者POLYGON的转化的不一致的问题，导致数据导入的不成功。

    接着，在Geoserver中发布。

    1、新建数据存储

    在Geoserver中新建POSTGIS的数据存储

    然后发布图层：


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

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

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

    [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>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 {  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>  
  • 相关阅读:
    windows中echo的用法
    通过phpMyAdmin写入MySQL，获取webshell
    底部小鱼特效
    kali Linux的简单介绍
    Kali安装gmpy2
    利用kali生成字典的三种方式
    利用kali嗅探HTTP网页用户账户密码
    永恒之蓝（ms017-010）漏洞利用
    如何使用最新Microsoft Edge打开Flash页面
    结对第二次作业
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6973024.html
Copyright © 2011-2022 走看看