與開放層3和postgresql數據庫連接

我試圖製作地圖的網站，但我對這些技術的新來，所以我完成了一點在HTML代碼和我安裝地理服務器，PostgreSQL，但我不知道如何連接服務器的HTML代碼，我看到視頻，但沒有得到正確的，所以請任何人都幫助我如何連接到服務器，並建議我哪個更好的連接和編碼手段傳單，開放層或.NET MVC.I想做來自印度30個城市的地圖，所以我只想顯示印度與開放層3和postgresql數據庫連接

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>hello</title> 
 
\t <link rel="stylesheet" href="..\asset\ol4\css\ol.css" type="text/css"> 
 
    
 
    <script src="../asset/ol4/js/ol.js"></script> 
 
    <style> 
 
     a.skiplink { 
 
     position: absolute; 
 
     clip: rect(1px, 1px, 1px, 1px); 
 
     padding: 0; 
 
     border: 0; 
 
     height: px; 
 
     width: px; 
 
     overflow: hidden; 
 
     } 
 
     a.skiplink:focus { 
 
     clip: auto; 
 
     height: auto; 
 
     width: auto; 
 
     background-color: #fff; 
 
     padding: 0.3em; 
 
     } 
 
     #map:focus { 
 
     outline: #4A74A8 solid 0.15em; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <a class="skiplink" href="#map">Go to map</a> 
 
    <div id="map" class="map" tabindex="0"></div> 
 
    <button id="zoom-out">Zoom out</button> 
 
    <button id="zoom-in">Zoom in</button> 
 
    <script> 
 
     var map = new ol.Map({ 
 
     layers: [ 
 
      new ol.layer.Tile({ 
 
      source: new ol.source.OSM() 
 
      }) 
 
     ], 
 
     target: 'map', 
 
     controls: ol.control.defaults({ 
 
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ 
 
      collapsible: false 
 
      }) 
 
     }), 
 
     view: new ol.View({ 
 
     center: [0, 0], 
 
      zoom: 2 
 
     }) 
 
     }); 
 

 
     document.getElementById('zoom-out').onclick = function() { 
 
     var view = map.getView(); 
 
     var zoom = view.getZoom(); 
 
     view.setZoom(zoom - 1); 
 
     }; 
 

 
     document.getElementById('zoom-in').onclick = function() { 
 
     var view = map.getView(); 
 
     var zoom = view.getZoom(); 
 
     view.setZoom(zoom + 1); 
 
     }; 
 
    </script> 
 
    </body> 
 
</html>

地圖nd如何在開放圖層或傳單中禁用地圖的其他部分。請幫幫我。謝謝

來源

2017-03-09 Seema Barate

有一個很好的一套OpenLayers examples - 你想要的是WMS example。

你需要創建一個從GeoServer的加載層：

var layers = [ 
    new ol.layer.Tile({ 
     source: new ol.source.OSM() 
    }), 
    new ol.layer.Tile({ 
     extent: [-13884991, 2870341, -7455066, 6338219], 
     source: new ol.source.TileWMS({ 
     url: 'https://ahocevar.com/geoserver/wms', 
     params: {'LAYERS': 'topp:states', 'TILED': true}, 
     serverType: 'geoserver' 
     }) 
    }) 
    ];

來源

2017-03-11 11:54:29

感謝先生給了這個答案，但還是我的代碼不能正常工作，我不明白的URL，我從地理服務器中創建層並且這是圖層的網址「http：// localhost：8080/geoserver/Seema/wms」，以及如何顯示印度國家地圖，然後如何在其中添加範圍值...我修改了舊代碼.so –

什麼不起作用？網絡選項卡顯示什麼？ GeoServer日誌顯示什麼？ –

地理服務器層顯示，但在HTML代碼中添加層路徑後，瀏覽器僅顯示放大和縮小按鈕。 map can not display.thanks –

與開放層3和postgresql數據庫連接

回答

相關問題