Layer from geoserver not displayed in OpenLayers
Question
I installed the package with npm and set up localhost..I'm trying to display layer in map, but it dont show up.Please Help! I'm stuck.Not sure maybe the problem is in different ports,cus my application( localhost:1995) and my geoserver (localhost:8080) instance are running on separate and use different ports.Someone to explain?
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>
1 answers
solution1
0 ACCPTED 2020-05-09 12:24:30
Try enabling CORS on your GeoServer and restarting it. Since your OL app and GeoServer are on a different domain (port) this may explain your issue. It is easy to do and would be a good troubleshooting step.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.