WMSLayer


这个示例显示了使用 WMSLayer 如何访问 WMS 服务。WMSLayer 用于创建基于 OGC 网络地图服务(Web Map Service , WMS) 的图层。WMSLayer 最开始会执行 WMS getCapabilities 请求,该请求可能需要跨域。

OGC 是 Open Geospatial Consortium 的缩写,意为开放地理空间信息联盟,是一个国际性的非盈利组织,该联盟致力于提供地理信息行业软件和数据以及服务的标准化工作。

OGC 官网:http://www.opengeospatial.org/

程序的完整源代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>WMSLayer - 4.5</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  <script src="https://js.arcgis.com/4.5/"></script>

  <script>
    require([
      "esri/config",
      "esri/Map",
      "esri/views/SceneView",
      "esri/layers/WMSLayer",
      "esri/widgets/Legend",
      "dojo/domReady!"
    ], function(
      esriConfig,
      Map,
      SceneView,
      WMSLayer,
      Legend
    ) {

      // 如果 WMS 服务器没有启用 CORS,使用代理进行最开始的 WMS GetCapabilities 请求
      // esriConfig.request.proxyUrl  = "/proxy/";

      esriConfig.request.corsEnabledServers.push(
        "mesonet.agron.iastate.edu");

      var layer = new WMSLayer({
        // 请参阅 http://mesonet.agron.iastate.edu/ogc/了解更多来自 
        //Iowa Environmental Mesonet (爱荷华州立大学)的WMS服务。
        url: "https://mesonet.agron.iastate.edu/cgi-bin/wms/iowa/rainfall.cgi",
        sublayers: [{
          name: "sevendays_rainfall"
        }]
      });

      var map = new Map({
        basemap: "topo",
        layers: [layer]
      });

      var view = new SceneView({
        container: "viewDiv"
      });

      layer.load().then(function() {
        view.extent = layer.fullExtent;
        view.map = map;
      });

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

程序执行效果

沙箱地址:https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=layers-wms

(完)

results matching ""

    No results matching ""