本文共 509 字，大约阅读时间需要 1 分钟。

一，geoserver发布地图服务

详见：

二，引入ol

cnpm i ol -S

三，根据图层预览中的URL，配置以下代码

（注意：如果没有显示出来，按F12查看有没有报错。如果没有报错，那么其原因极有可能是zoom设置小了，把zoom设为15等比较大的数再试试！！）

URL：

四，展示

如果还想叠加地图，代码实现如下：

注意：上线后，记得要把url: 'http://localhost:8090/geoserver/ws-world/wms'中的localhost换成云服务器的ip地址！！ 

效果图：

如果想要点击查看各个要素的属性，那么可以将这个shp数据发布为geojson数据，再进行访问，具体代码参考：  （）

这是加载的shp矢量地图，如果想要加载tiff格式的影像栅格地图，那么在选择数据来源时选Geotiff格式，然后前端访问影像数据的代码和访问矢量数据的代码一样，只不过矢量可以用geojson访问，而影像不能用geojson访问

这个shp数据最好是4326的，因为在用3857测试时时访问不到数据，不知道为什么，但是4326是可以正常访问加载的