我用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>尝试在GeoServer上启用CORS并重新启动它。由于您的OL应用程序和GeoServer位于不同的域(端口(，这可能解释了您的问题。这很容易做到，是一个很好的故障排除步骤。
https://docs.geoserver.org/latest/en/user/production/container.html#enable-cors
GeoServer的独立发行版包括Jetty应用程序服务器。启用跨源资源共享(CORS(，允许您自己域之外的JavaScript应用程序使用GeoServer。
有关此功能和其他选项的更多信息，请参阅Jetty Documentation
从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>