在JavaScriptAPI中添加WMS層的問題-有解無憂

我正在努力添加 Web 地圖服務 (WMS)。地圖服務提供對托管在服務器上的地圖內容的訪問。

地圖服務可以公開不同級別的功能。

但是在完成所有代碼之后。我無法將我的 WMS 圖層提取到地圖上。

我的地圖只顯示底圖，wms 圖層根本不顯示。

有人幫我找出來，出了什么問題嗎？

下面是我的代碼：

<!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" href="https://js.arcgis.com/3.38/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/css/esri.css">
  <style>
    html, body, #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.38/"></script>

  <script>
    var map;
    require([
      'esri/map', 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',
      'dojo/_base/array', 'dojo/dom', 'dojo/dom-construct', 'dojo/parser',
      'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'dojo/domReady!'
    ], function(Map, WMSLayer, WMSLayerInfo, Extent, array, dom, domConst, parser) {
      parser.parse();

      map = new Map('map', {
        basemap: "streets-vector",
        center: [-96, 37],
        zoom: 3
      });

      var layer1 = new WMSLayerInfo({
        name: '1',
        title: 'Rivers'
      });
      var layer2 = new WMSLayerInfo({
        name: '2',
        title: 'Cities'
      });
      var resourceInfo = {
        extent: new Extent(-126.40869140625, 31.025390625, -109.66552734375, 41.5283203125, {
          wkid: 4326
        }),
        layerInfos: [layer1, layer2]
      };
      var wmsLayer = new WMSLayer('https://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', {
        resourceInfo: resourceInfo,
        visibleLayers: ['1', '2']
      });
      map.addLayers(wmsLayer);

      var details = dom.byId('details');
      domConst.place('<b>Layers</b>:', details);
      var ul = domConst.create('ul', null, details);
      array.forEach(wmsLayer.layerInfos, function(layerInfo) {
        domConst.create('li', { innerHTML: layerInfo.title }, ul);
      });
      domConst.place('<b>WMS Version</b>:'   wmsLayer.version   '<br />', details);
    });
  </script>
</head>

<body class="claro">
  <div id="content"
       data-dojo-type="dijit.layout.BorderContainer"
       data-dojo-props="design:'headline', gutters:true"
       style="width: 100%; height: 100%; margin: 0;">

    <div id="details"
         data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props="region:'left', splitter:true"
         style="overflow:auto; width:200px;">
    </div>

    <div id="map"
         data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props="region:'center'"
         style="overflow:hidden;">
    </div>

  </div>
</body>
</html>

uj5u.com熱心網友回復：

該addLayers()方法采用一個陣列 - 請參閱https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#addlayers

如果您與https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=layers_wmsresourceinfo上的原始示例進行比較，您似乎已更改 map.addLayers([wmsLayer]); 為 map.addLayers(wmsLayer);

或者將其更改為使用單數方法addLayer()。

uj5u.com熱心網友回復：

代替

map.addLayers(wmsLayer);

在您的代碼中，使用

map.addLayers([wmsLayer]);

它將解決您的問題。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/336590.html

標籤：javascript 接口地理信息系统 arcgis-js-api arcgis-服务器

上一篇：使用獲取的API專案填充下拉串列

下一篇：我如何獲得req.querynextjsapi？