OpenLayers环境搭建与配合GeoServer显示地图

OpenLayers是一个js库，用于显示各个地图服务所提供的数据，例如ArcGIS，GeoServer等。这里结合GeoServer使用来显示地图。

1. 从官网下载OpenLayers库。解压后放入web工程下。

http://openlayers.org/

2. 将js与css文件导入到页面中。这里版本为v5.0。

<link rel="stylesheet" href="v5.2.0-dist/ol.css">
<script src="v5.2.0-dist/ol.js"></script>

3. 定义一个<div>元素作为地图容器，将其id定义为map：

<div id="map"></div>

4. 将GeoServer中的地图显示出来：

<script>
	var map = new ol.Map({
		target: 'map',
		view: new ol.View({
			center: ol.proj.fromLonLat([-73.9929199, 40.7243642]),
			zoom: 12
		})
	});

	var baseSource = new ol.source.TileWMS({
		url: 'http://192.168.15.98:8082/geoserver/wms',
		params: {
			'LAYERS': 'tiger-ny',
			'TILED': true
		},
		serverType: 'geoserver'
	});

	var baseLayer = new ol.layer.Tile({
		source: baseSource
	});
	
	map.addLayer(baseLayer);
</script>

其中：

• 必须有map对象，这是主体。
• map对象的target属性值为容器的id。
• view属性为显示地图的窗口，其中center定义了地图的中心点（经纬度），zoom定义了地图的放大级别。
• map必须有地图层layer。添加到map中的第一个layer为底图，永远位于最下方且无法被隐藏；其他的layer为常规地图layer，可以更换顺序，也可以隐藏。最终的地图展示效果就是多个layer叠加的结果。
• layer有各种类型。每个layer创建时必须提供source。source指明了地图服务相关属性。

5. GeoServer服务

GeoServer提供了地图服务。

进入GeoServer的控制台，点击左侧的Layer Preview：

右侧会列出所有图层。

点击目标图层的OpenLayers，会跳转到新页面并显示预览。复制该页面的URL，其格式为：

http://192.168.15.98:8082/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger-ny&styles=&bbox=-74.047185,40.679648,-73.907005,40.882078&width=531&height=768&srs=EPSG:4326&format=application/openlayers

其中两个红色部分为最主要的属性：

• http://192.168.15.98:8082/geoserver/wms：地图服务地址，需要赋值给OpenLayers中layer的source。
• layers=tiger-ny：图层名，需要赋值给layer的source的params. LAYERS属性。

6. 运行

转载自：https://blog.csdn.net/fyyyr/article/details/82588442