来自地理服务器的图层未显示在 OpenLayers 中

Question

我用 npm 安装了包并设置了 localhost..我试图在地图中显示图层，但它不显示 up.Please 帮助！我 stuck.Not 确定问题可能出在不同的端口，因为我的应用程序 (localhost:1995) 和我的地理服务器 (localhost:8080) 实例是运行分开的并且使用不同的 ports.Someone 解释一下？

import 'ol/ol.css';
import 'ol-layerswitcher/src/ol-layerswitcher.css';

import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj';
import LayerGroup from 'ol/layer/Group';
import LayerTile from 'ol/layer/Tile';
import SourceOSM from 'ol/source/OSM';
import SourceStamen from 'ol/source/Stamen';
import TileImage from 'ol/source/TileImage';
import LayerImage from 'ol/layer/Image';
import SourceImageArcGISRest from 'ol/source/ImageArcGISRest';
import TileWMS from 'ol/source/TileWMS';
import ImageWMS from 'ol/source/ImageWMS';

import LayerSwitcher from 'ol-layerswitcher';

var OSM = new LayerTile({
    title: 'OSM',
    source: new SourceOSM(),
    type: 'base',
    visible: true
});
var googleLayerRoadmap = new LayerTile({
    title: "Google Road Map",
    source: new TileImage({ url: 'http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}' }),
    type: 'base'
});

var googleLayerSatellite = new LayerTile({
    title: "Google Satellite",
    source: new TileImage({ url: 'http://mt1.google.com/vt/lyrs=s&hl=pl&&x={x}&y={y}&z={z}' }),
    type: 'base'
});
var Odjel = new LayerTile({
    source: new TileWMS({
        url: 'http://localhost:8080/geoserver/cite/wms',
        params: {
            'LAYERS': 'cite:go_2',
        'TILED': 'true'},
        projection: 'EPSG:3857',
        serverType: 'geoserver'
    }),
    title: "Odjel"
});
Odjel.setVisible(true);
var map = new Map({
    target: 'map',
    layers: [
        new LayerGroup({
            title: 'BASE LAYERS',
            fold: 'open',
            layers: [OSM,googleLayerRoadmap,googleLayerSatellite
            ]
                }),
        new LayerGroup({
            title: 'Odjel',
            fold: 'open',
            layers: [Odjel]
        }),
        new LayerGroup({
            title: 'LAYERS',
            fold: 'open',
            layers: [
                new LayerImage({
                    // A layer must have a title to appear in the layerswitcher
                    title: 'Distrikti',
                    visible: false,
                    source: new SourceImageArcGISRest({
                        ratio: 1,
                        params: {'LAYERS': 'show:0'},
                        url: "https://ons-inspire.esriuk.com/arcgis/rest/services/Census_Boundaries/Census_Merged_Local_Authority_Districts_December_2011_Boundaries/MapServer"
                    })
                }),
                new LayerImage({
                    // A layer must have a title to appear in the layerswitcher
                    title: 'Kantoni',
                    visible: false,
                    source: new SourceImageArcGISRest({
                        ratio: 1,
                        params: {'LAYERS': 'show:0'},
                        url: "https://ons-inspire.esriuk.com/arcgis/rest/services/Census_Boundaries/Census_Merged_Wards_December_2011_Boundaries/MapServer"
                    })
                })
            ]
        })        
            ],
    view: new View({
        projection: 'EPSG:3857',
        center: transform([17.86339, 44.6054], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});
var layerSwitcher = new LayerSwitcher({
    groupSelectStyle: 'none' // Can be 'children' [default], 'group' or 'none'
});
map.addControl(layerSwitcher);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OL Mapa</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      #map {
        width: 800px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>

  
  </body>
</html>

Answer 1

尝试在您的 GeoServer 上启用 CORS 并重新启动它。由于您的 OL 应用程序和地理服务器位于不同的域（端口）上，这可以解释您的问题。这很容易做到，并且是一个很好的故障排除步骤。

https://docs.geoserver.org/latest/en/user/production/container.html#enable-cors

The standalone distributions of GeoServer include the Jetty application server. Enable Cross-Origin Resource Sharing (CORS) to allow JavaScript applications outside of your own domain to use GeoServer.

For more information on what this does and other options see Jetty Documentation

Uncomment the following and from webapps/geoserver/WEB-INF/web.xml:

<web-app>
  <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>cross-origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

来自地理服务器的图层未显示在 OpenLayers 中

Layer from geoserver not displayed in OpenLayers

javascript

geoserver

openlayers