• arcgis js 4.x加载超图发布的wms服务并进行空间属性查询

    1. <html>
    2. <head>
    3.     <meta charset="utf-8" />
    4.     <meta name="viewport"
    5.           content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    6.  
    7.     <link rel="stylesheet"
    8.           href="https://js.arcgis.com/4.25/esri/themes/light/main.css" />
    9.     <script src="https://js.arcgis.com/4.25/init.js"></script>
    10.  
    11.     <style>
    12.         html,
    13.         body {
    14.             padding: 0;
    15.             margin: 0;
    16.             height: 100%;
    17.         }
    18.  
    19.         #viewDiv {
    20.             float: left;
    21.             width: 100%;
    22.             height: 100%
    23.         }
    24.     </style>
    25.  
    26.     <script>
    27.         require(["esri/Map", "esri/geometry/Extent",
    28.             "esri/geometry/SpatialReference",
    29.             "esri/views/MapView",
    30.             "esri/views/SceneView",
    31.             "esri/layers/WMSLayer",
    32.             "esri/request",
    33.             ], (
    34.                 Map, Extent, SpatialReference,
    35.                 MapView, SceneView,
    36.                 WMSLayer,  esriRequest) => {
    37.  
    38.             var wmsLayer = new WMSLayer({
    39.                 url: "http://localhost:8090/iserver/services/map/wms/testlayer",
    40.             })
    41.  
    42.             var map = new Map({
    43.                 layers: [wmsLayer]
    44.             });
    45.             const sceneView = new SceneView({
    46.                 container: "viewDiv",
    47.                 map: map
    48.  
    49.             });
    50.  
    51.             sceneView.on("click", async ({ x, y }) => {
    52.                 await wmsLayer.load();
    53.                 console.log(wmsLayer.featureInfoFormat);
    54.                 var layers = "";
    55.                 wmsLayer.allSublayers.forEach(function (item, i) {
    56.                     console.log(item.name)
    57.                     if (item.name != "0") {
    58.                         if (item.name == "0.0") {
    59.                             layers += item.name;
    60.                         } else {
    61.                             layers += ',' + item.name;
    62.                         }
    63.                     }
    64.                 })
    65.  
    66.                 const { xmin, ymin, xmax, ymax, spatialReference: { latestWkid, wkid } } = sceneView.extent;
    67.                 const bbox = `${xmin},${ymin},${xmax},${ymax}`;
    68.                 const crs = `EPSG:${latestWkid ?? wkid}`;
    69.                 console.log(wmsLayer.featureInfoUrl)
    70.                 const { data } = await esriRequest(wmsLayer.featureInfoUrl, {
    71.                     query: {
    72.                         SERVICE: "WMS",
    73.                         LAYERS: layers,
    74.                         QUERY_LAYERS: layers,
    75.                         REQUEST: "GetFeatureInfo",
    76.                         INFO_FORMAT: "application/json",
    77.                         FEATURE_COUNT: 20,
    78.                         BBOX: bbox,
    79.                         CRS: crs,
    80.                         SRS: crs,
    81.                         X: Math.round(x),
    82.                         Y: Math.round(y),
    83.                         VERSION: "1.1.1",
    84.                         WIDTH: sceneView.width,
    85.                         HEIGHT: sceneView.height,
    86.                     },
    87.                     responseType: "xml"
    88.                 });
    89.                 const json = xmlToJson(data);
    90.             });
    91.  
    92.             //xml格式数据转json格式数据
    93.             function xmlToJson(xml) {
    94.                 var obj = {};
    95.                 if (xml.nodeType == 1) {
    96.                     if (xml.attributes.length > 0) {
    97.                         obj["@attributes"] = {};
    98.                         for (var j = 0; j < xml.attributes.length; j++) {
    99.                             var attribute = xml.attributes.item(j);
    100.                             obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
    101.                         }
    102.                     }
    103.                 } else if (xml.nodeType == 3) { 
    104.                     obj = xml.nodeValue;
    105.                 }
    106.                 if (xml.hasChildNodes()) {
    107.                     for (var i = 0; i < xml.childNodes.length; i++) {
    108.                         var item = xml.childNodes.item(i);
    109.                         var nodeName = item.nodeName;
    110.                         if (typeof (obj[nodeName]) == "undefined") {
    111.                             obj[nodeName] = xmlToJson(item);
    112.                         } else {
    113.                             if (typeof (obj[nodeName].length) == "undefined") {
    114.                                 var old = obj[nodeName];
    115.                                 obj[nodeName] = [];
    116.                                 obj[nodeName].push(old);
    117.                             }
    118.                             obj[nodeName].push(xmlToJson(item));
    119.                         }
    120.                     }
    121.                 }
    122.                 return obj;
    123.             };
    124.         });
    125.     </script>
    126. </head>
    127.  
    128. <body>
    129.     <div id="viewDiv"></div>
    130. </body>
    131. </html>

    参考文档：WMSLayer | API Reference | ArcGIS Maps SDK for JavaScript 4.28 | ArcGIS Developers

  • 相关阅读:
    Netlogo 简化版Scatter 分散
    H-WORM家族远控木马分析与处置
    Python单元测试
    100道大厂面试题总结，可以测试自己能考多少分
    Day39——互斥锁，线程技术
    Machine learning week 9(Andrew Ng)
    条码二维码读取设备在医疗设备自助服务的重要性
    Go入门案列1：实现一个家庭收支记账系统
    笙默考试管理系统-MyExamTest----codemirror（36）
    气体净化与特种气体除杂——吸附
  • 原文地址：https://blog.csdn.net/xlp789/article/details/134213730