來自地理服務器的圖層未顯示在 OpenLayers 中

Question

我用 npm 安裝了這個包並設置了 localhost..我試圖在地圖中顯示圖層，但它沒有顯示出來。請幫助！ 我被卡住了。不確定問題可能出在不同的端口上，因為我的應用程序（本地主機：1995）和我的地理服務器（本地主機：8080）實例在不同的端口上運行並使用不同的端口。有人解釋一下嗎？

 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 應用程序和 GeoServer 位於不同的域（端口）上，這可能可以解釋您的問題。 這很容易做到，並且是一個很好的故障排除步驟。

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

GeoServer 的獨立發行版包括 Jetty 應用服務器。 啟用跨域資源共享 (CORS) 以允許您自己域之外的 JavaScript 應用程序使用 GeoServer。

有關此功能和其他選項的更多信息，請參閱 Jetty 文檔

從 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 中

問題描述

1 個解決方案

解決方案1
0 已采納 2020-05-09 12:24:30

來自地理服務器的圖層未顯示在 OpenLayers 中

問題描述

1 個解決方案

解決方案1 0 已采納 2020-05-09 12:24:30

解決方案1
0 已采納 2020-05-09 12:24:30