（十九）ArcGIS JS 加载WMS服务（超图示例）

阳光穿透心脏的1/2处 2021-09-17 05:22 912阅读 0赞

### 前言 ###

在工作中，需要在ArcGIS API for JavaScript中加载超图服务，因为超图的`rest服务`只可以用于`Leaflet` 、`openlayers3 (with MVT)` 、`MapboxGL` 、`Tianditu.com`，在使用ArcGIS API是无法加载超图的rest服务的（我认知的）。  
    在超图的superMap iServer中可以发布符合OGC规则的WMS服务，这时，我们可以通ArcGIS API加载WMS服务的形式加载超图服务。

### 加载WMS服务要点 ###

*  visibleLayers：显示图层
 *  extent：加载范围
 *  spatialReference：控件参考
 *  version：WMS服务版本号  
    ![在这里插入图片描述][20181206183910616.png]  
    ![在这里插入图片描述][20181206183920499.png]

### 实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]

### 实现代码 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Map with WMS</title>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.25/3.25/esri/css/esri.css" />
        <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.25/3.25/init.js"></script>
        <style>
            html,
            body,
            #map {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    
        <script>
            var map;
            require([
                'esri/map', 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',
                'dojo/parser', 'dojo/domReady!'
            ], function (Map, WMSLayer, WMSLayerInfo, Extent, parser) {
                parser.parse();
    
                map = new Map('map');
                var layer1 = new WMSLayerInfo({
                    name: 'China',
                    title: 'Rivers',
                    spatialReferences: [4326]
                });
                var resourceInfo = {
                    extent: new Extent(114, 34, 117, 60, { wkid: 4326 }),
                    layerInfos: [layer1],
                    version: "1.1.1"
                };
    
                var wmsLayer = new WMSLayer('http://www.supermap.com.cn:8090/iserver/services/map-china400/wms111/China', {
                    resourceInfo: resourceInfo,
                    visibleLayers: ['China']
                });
                map.addLayers([wmsLayer]);
    
            });
        </script>
    </head>
    
    <body>
        <div id="map"> </div>
    </body>
    </html>

[20181206183910616.png]: /images/20210726/9c5c2a7654da40ee825ff9a1f9469515.png
[20181206183920499.png]: /images/20210726/f0b3308191e94c7c98942762ca5a04ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/adfff7b5f3514888a0be364feda212ed.png