Question

我试图制作地图网站，但我是这些技术的新手，所以我在html中完成了一点代码，我安装了Geo-server，PostgreSQL，但我不知道如何将服务器连接到html代码，我看过视频但没有得到正确所以请任何人帮助我如何连接到服务器，并建议我哪个更好的连接和编码意味着传单，开放层或.NET MVC。我想做映射来自印度的30个城市，所以我只想展示印度

＆＃13;

<!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>

＆＃13;

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

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

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

1 个答案: