Geoserver 和 openlayer：为什么当我运行 file:///C:/Users/nedam247/Desktop/open%20layer/prueba1.html 时我的地图不显示？

发布于 2025-01-16 22:04:47 字数 1960 浏览 4 评论 0原文

我使用apache-tomcat来运行geoserver，然后我使用了一个名为NEIGHBOURHOOD的shapefile，该文件包含北美和南美的数据，geoserver完美地显示了这两个数据，但是当我在html文件中使用开放层语法并更改url和语法中的图层名称，仅显示北美数据，不显示南美数据。请帮我。

这是代码：

    <!DOCTYPE html>
<html>
  <head>
    <title>Tiled WMS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      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: 'http://localhost:8080/geoserver/geo585/wms',
            params: {'LAYERS': 'geo585:Neighborhoods', 'TILED': true},
            serverType: 'geoserver',
            // Countries have transparency, so do not fade tiles:
            transition: 0
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>
  </body>
</html>

geoserver image

语法openlayer，我根据geoserver

syntax openlayer, 我根据 geoserver 更改了 url 和图层名称

我在本地浏览器中打开了 html 文件

原文

I used apache-tomcat to run geoserver,then I used a shapefile called NEIGHBOURHOOD, this file has data for north America and south America, geoserver shows perfectly both data, but when I use open layer syntax in a html file and change the url and layer name inside the syntax, only shows the north America data and south America data doesn`t show. Please help me.

here is the code:

    <!DOCTYPE html>
<html>
  <head>
    <title>Tiled WMS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      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: 'http://localhost:8080/geoserver/geo585/wms',
            params: {'LAYERS': 'geo585:Neighborhoods', 'TILED': true},
            serverType: 'geoserver',
            // Countries have transparency, so do not fade tiles:
            transition: 0
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>
  </body>
</html>