本文记录使用OpenLayers加载WMS数据，WMS数据为ArcGIS Server 和 GeoServer 发布的数据

1. 发布数据

1.1. ArcGIS Server 发布 WMS数据

关于如何安装ArcGIS Server 请自行百度，本文中ArcGIS Desktop和ArcGIS Server 都是ArcGIS 10.2.2版本

发布过程请借鉴： https://zhuanlan.zhihu.com/p/101493415

1.2. GeoServer 发布 WMS数据

关于如何安装GeoServer 也请自行百度，本文中GeoServer使用的是GeoServer 2.15.0版本

发布过程请借鉴： https://blog.csdn.net/sinat_28797501/article/details/69668701

2. OpenLayers 加载WMS

2.1. 加载ArcGIS WMS服务

OpenLayer版本为OpenLayer4.3.1

<!doctype html>
<html lang="en"><head><link rel="stylesheet" href="C:\openlayers\v4.3.1\css\ol.css" type="text/css"><style>html,body,#map{width: 100%;height: 600px;border: 0ch;background-color:#151515}</style><script src="C:\openlayers\v4.3.1\build\ol.js"></script><title>OpenLayers example</title></head><body><h2>My Map</h2><div id="map" class="map"></div><script type="text/javascript">var map;function initArcGISServerMap() {var format = 'image/png';var projection = new ol.proj.Projection({code: 'EPSG:4529',units: 'm',axisOrientation: 'neu',global: false});var arcgiswmschina = new ol.layer.Image({source: new ol.source.ImageWMS({ratio: 1,url: 'http://192.9.10.250:6080/arcgis/services/行政区地类图斑/MapServer/WmsServer?',                    params: {'FORMAT': format,'VERSION': '1.3.0',STYLES: '',LAYERS: '0,1',}})});map = new ol.Map({target: 'map',layers: [arcgiswmschina,],view: new ol.View({projection: projection})});var bounds = [4.13984774067E7, 4120788.8176000006,4.14474402153E7, 4160585.149700001];map.getView().fit(bounds, map.getSize());};initArcGISServerMap();</script></body>
</html>

信息获取方式

http://192.9.10.250:6080/arcgis/services/%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9C%B0%E7%B1%BB%E5%9B%BE%E6%96%91/MapServer/WMSServer?service=wms&request=getcapabilities

2.2. 加载GeoServer WMS服务

<!doctype html>
<html lang="en"><head><link rel="stylesheet" href="C:\openlayers\v4.3.1\css\ol.css" type="text/css"><style>html,body,#map{width: 100%;height: 600px;border: 0ch}</style><script src="C:\openlayers\v4.3.1\build\ol.js"></script><title>OpenLayers example</title></head><body><h2>My Map</h2><div id="map" class="map"></div><script type="text/javascript">var map;function initGeoServerMap() {var wmsSource = new ol.source.ImageWMS({url: 'http://192.9.10.250:8086/geoserver/cite/wms',params: {'FORMAT': 'image/png','VERSION':'1.1.0',LAYERS: 'cite:DLTB',styles: '',  srs: 'EPSG:4529',  tiled: 'true',  }});var wmsLayer = new ol.layer.Image({source: wmsSource});var projection = new ol.proj.Projection({code: 'EPSG:4529',units: 'm',axisOrientation: 'neu',global: false});var map = new ol.Map({layers: [wmsLayer],target: 'map',view: new ol.View({projection: projection})});var bounds = [4.13984774067E7, 4120788.8176000006,4.14474402153E7, 4160585.149700001];map.getView().fit(bounds, map.getSize());}initGeoServerMap();</script></body>
</html>
53E7, 4160585.149700001];map.getView().fit(bounds, map.getSize());}initGeoServerMap();</script></body>
</html>

OpenLayers加载WMS相关推荐

Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
openlayers 加载geoserve发布的WMS数据
一.导入相关的包 import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js'; import {XYZ,TileWMS,V ...
Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
cesium加载wms、wmts、tms、wfs服务
目录 cesium加载wms服务 cesium加载wmts服务 cesium加载tms服务 cesium加载wfs服务首先引入cesium.js,参考:https://blog.csdn.net/q ...
Arcgis for Js之加载wms服务
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...
Openlayers4加载WMS地图
前面介绍过Openlayers2加载地图的方法.但是Openlayers2现在已经算很老的版本,只有在老项目中可能还在用到.最新的Openlayers已经升级到了Openlayers5. openla ...
openlayers加载本地arcgis切片（explodes）的两种方式，利用geowebcache进行发布和直接读取本地切片
由于Arcgis的普及,经常会使用ArcgisServer对地图进行切片,且缓存在本地.如果能使用开源工具对该本地缓存进行加载的话,有时候能够节省不少精力和时间,因此本人对openlayers加载ar ...

OpenLayers加载WMS