1. 程式人生 > >(轉)PostGIS+QGIS+GeoServer+OpenLayers實現數據的存儲、服務的發布以及地圖的顯示

(轉)PostGIS+QGIS+GeoServer+OpenLayers實現數據的存儲、服務的發布以及地圖的顯示

切換 以及 data- about 100% tail error -s image

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)\PostgreSQL\8.4\bin>

將shp數據轉換為SQL語句:

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

新建table並將數據導入:

[plain] view plain copy print?
  1. psql -d opengis -f D:\data\wgs84\mcounty.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 { 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. map.addControl(new OpenLayers.Control.PanZoomBar({
    40. position: new OpenLayers.Pixel(2, 15)
    41. }));
    42. map.addControl(new OpenLayers.Control.Navigation());
    43. map.addControl(new OpenLayers.Control.Scale($(‘scale‘)));
    44. map.addControl(new OpenLayers.Control.MousePosition({element: $(‘location‘)}));
    45. var wms = new OpenLayers.Layer.WMS(
    46. "lake",
    47. "http://200.200.200.223:8888/geoserver/wms",
    48. {
    49. LAYERS: "mpro",
    50. transparent:true
    51. },
    52. {
    53. singleTile: false,
    54. ratio: 1,
    55. isBaseLayer: false,
    56. visibility:true,
    57. yx : {‘EPSG:4326‘ : true}
    58. }
    59. );
    60. map.addLayer(wms);
    61. map.zoomToExtent(new OpenLayers.Bounds(73.45100463600005, 18.16324718800007,
    62. 134.976797647, 53.53194315200005)
    63. );
    64. map.events.register(‘click‘, map, function (e) {
    65. console.log(e);
    66. });
    67. }
    68. </script>
    69. </head>
    70. <body onLoad="init()">
    71. <div id="map"></div>
    72. </body>
    73. </html>

(轉)PostGIS+QGIS+GeoServer+OpenLayers實現數據的存儲、服務的發布以及地圖的顯示