zoukankan      html  css  js  c++  java
  • WMS

    Description

    This sample shows how to work with an OGC Web Map Service (WMS). When WMSLayers are added to the map only the specified layers are displayed. The code below creates a new

    WMSLayer

    then uses the visibleLayers constructor option to specify which layers are displayed.

    var wmsLayer = new WMSLayer(wmsURL,{resourceInfo: resourceInfo,visibleLayers: ["1","2"]});

    Note that in the code above a

    resourceInfo

    object is also provided. The resourceInfo object is used to define information about the service such as extent, layers, version etc. The benefit to specifying the resource info is that a proxy is not needed to work with WMS layers.

    var layer1 = new WMSLayerInfo({name:"1",title:"Rivers"});var layer2 = new WMSLayerInfo({name:"2",title:"Cities"});var resourceInfo = {extent: new Extent(-126.405,31.02,-109.66,41.52,{wkid: 4326}),layerInfos: [layer1,layer2]};

    Code

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <!--The viewport meta tag is used to improve the presentation and behavior of the samples
        on iOS devices-->
      <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
      <title>Map with WMS</title>

      <link rel="stylesheet" href="http://jsapi.thinkgis.cn/dijit/themes/claro/claro.css">
      <link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css">
      <style>
        html, body, #map {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
      </style>
      <script src="http://jsapi.thinkgis.cn/"></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',
            center: [-96, 37],
            zoom: 4
          });

          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('http://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
  • 相关阅读:
    学JAVA第十一天,属性与方法
    学JAVA第十天,一维数组及二维数组的使用。
    限制input[type=number]的输入位数策略整理
    淘宝NPM源的使用
    webpack之loader实践
    5月份开发问题整理
    前后端分离思考
    js 导航栏多项点击显示下拉菜单代码
    阵容首发
    jquery中的ajax请求到php(学生笔记)
  • 原文地址:https://www.cnblogs.com/telwanggs/p/10285891.html
Copyright © 2011-2022 走看看