与开放层 3 和 postgresql 的数据库连接

Question

我想制作地图网站，但我对这些技术还很陌生，所以我在 html 中完成了一些代码，并安装了 Geo-server、PostgreSQL，但我不知道如何连接服务器到 html 代码，我看过视频，但没有得到正确的所以请任何人帮助我如何连接到服务器，并建议我哪个更适合连接和编码方式传单，开放层 or.net MVC.I 想绘制印度 30 个城市的地图，所以我只想显示印度

<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
 <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>

地图以及我如何在开放层或传单中禁用地图的其他部分。请帮我。谢谢

Answer 1

有一组很好OpenLayers examples - the one you want is the 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'
      })
    })
  ];

与开放层 3 和 postgresql 的数据库连接

Database Connectivity with open layer 3 and postgresql

geoserver

openlayers-3

postgresql-9.5