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

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

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

http://openlayers.org/

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

3. 定义一个

元素作为地图容器，将其id定义为map：

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

其中：

• 必须有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. 运行