2017-03-09 12 views
0

私はマップのウェブサイトを作ろうとしていますが、これらの技術には新しいので、私はちょっとしたコードをHTMLで完成しましたが、私はGeo-server、PostgreSQLをインストールしました。サーバーをHTMLコードに接続すると、ビデオは見えますが、正しく取得できないので、誰かがサーバーに接続する方法を教えてください。また、接続性とコーディングがリーフレット、オープンレイヤー、または.NET MVC.I私はインドデータベースオープンレイヤ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>

マップAを表示したいので、インドから30都市のマッピングをしたいですどのように私は開いている層やリーフレットの地図の他の部分を無効にする。私を助けてください。ありがとう

答えて

1

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' 
     }) 
    }) 
    ]; 
+0

をおかげで先生、この答えを与えるが、それでも私のコードが動作していないため、私はURLを理解していない、私は地理サーバーからレイヤーを作成これはURLの "http:// localhost:8080/geoserver/Seema/wms"のレイヤーで、エクステントの値を追加する方法をインドの国の地図を表示したい場合はどの程度ですか...変更しました古いコード.so –

+0

何がうまくいかない?ネットワークタブには何が表示されますか? GeoServerのログには何が表示されますか? –

+0

ジオサーバーレイヤは表示されますが、htmlコードでレイヤパスを追加した後は、ブラウザにはズームインとズームアウトのボタンしか表示されません。地図cant display.thanks –