地理服务器中的图层未显示在 OpenLayers 中
Posted
技术标签:
【中文标题】地理服务器中的图层未显示在 OpenLayers 中【英文标题】：Layer from geoserver not displayed in OpenLayers 【发布时间】：2020-03-25 13:31:25 【问题描述】：我用 npm 安装了包并设置了 localhost..我试图在地图中显示图层，但它没有显示出来。请帮忙！我被卡住了。不确定问题可能出在不同的端口上，因为我的应用程序（localhost:1995）和我的地理服务器（localhost: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>【问题讨论】：
控制台中的任何错误或无效的网络请求（返回 HTTP 代码 > 300）？ 控制台清晰，这些文件的网络状态码是200 但是使用GET的css和js文件有304状态码 该图层是否有GetMap请求包含真实图片？ 不知道你在问我什么，这很新...但我尝试了简单的代码与库的源地图链接 OL 并且仍然无法工作...在网络窗口中没有显示图片 【参考方案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 中的主要内容，如果未能解决你的问题，请参考以下文章