openlayer3 添加arcgis 发布的wms 服务(矢量非切片)

wms作为ogc 标准之一,arcgis sever 发布的wms同样能被开源gis平台来进行加载,openlayers自然也能正常引用。但是esri发布的wms有一点小细节需要注意,与geoserver 发布的wms有点小出入。先上代码吧:

<!DOCTYPE html>
<html>
  <head>
    <title>Vector ArcGIS WMS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var url = 'http://localhost:6080/arcgis/services/szdt_CAD/haishanzhan/MapServer/WMSServer';//http://localhost:6080/arcgis/rest/services/szdt_CAD/haishanzhan/MapServer
      var pos = ol.proj.transform([114.23297258, 22.55887405], 'EPSG:4326', 'EPSG:3857');
      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Tile({
          source: new ol.source.TileWMS({
            params: {
            	'LAYERS':'0,1,2,3,4,5',
            	'TILED':false

            },
            url: url,
            projection: 'EPSG:3857',
            // serverType:'mapserver'
          })
        })
      ];

      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: pos,
          zoom: 18
        })
      });
      
    </script>
  </body>
</html>
TileWMS中params的LAYERS属性的值,网上很多加载Geoserver的例子,
layers对应图层名或者图层组名,但是同样的使用arcgis发布的服务的图层名在
哪里找到对应的名称呢,很多人容易直接将想当然的以为对应的图层名称如下:
第一张图是desktop种的图层结构,第二张图是发布出来的mapserver里面的Layers结构

但是都是错误的。要到wms服务的路由里面找到相关的NAME对应的值如下图所示:

可以看到其实图层的名称的根本就不是想当然的那个名称,而且图层的上下结构变了

(如dwg_MutiPatch还被提到了最上方,图层名为0了),因此,用arcgis发布的wms最好是
查看一下配置文件中的参数来对应layers.
此外如果还请求不到服务的话查看network中资源是否请求成功,如果是layers的名字错误

也能从中找到答案。


转载自:https://blog.csdn.net/qq_26991807/article/details/80406022

You may also like...