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
  • 相关阅读:
    HTML5 API的威力
    国内独立博客发展的障碍
    中国天气 XWeahter 2.0.1.0 所有版本 下载地址 阿干 win7
    宿命轮回里的爱与恨
    广东一伙劫匪在抢劫银行时说了一句至理名言
    Android项目R文件丢失报错
    2010年8月29日周日_Creating a New Xcode Project_3
    2010年8月27日周五understanding ArcGIS Server_secured services_8.4
    2010年8月26日_TitleWindow_Flex控件
    组件类_BorderContainer1
  • 原文地址:https://www.cnblogs.com/telwanggs/p/10285891.html
Copyright © 2011-2022 走看看