ArcGIS jsapi wms sample

最新推荐文章于 2018-10-17 17:16:00 发布

limina

最新推荐文章于 2018-10-17 17:16:00 发布

阅读量1.3k

点赞数

文章标签： layer function stylesheet constructor html service

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 esri.layers.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 esri.layers.WMSLayerInfo({name:"1",title:"Rivers"});
var layer2 = new esri.layers.WMSLayerInfo({name:"2",title:"Cities"});
var resourceInfo = {
  extent: new esri.geometry.Extent(-126.405,31.02,-109.66,41.52,{wkid: 4326}),
  layerInfos: [layer1,layer2]
};

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <!--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" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> 
    <style> 
      html, body { height: 98%; width: 98%; margin: 0; padding: 5px; }
    </style> 
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> 
    
    <script type="text/javascript"> 
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("esri.layers.wms");
      
      var map;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-89.78,"ymin":41.03,"xmax":-85.54,"ymax":42.75,"spatialReference":{"wkid":4326}});
        map = new esri.Map("map",{extent:initExtent});
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
        map.addLayer(basemap);

        var layer1 = new esri.layers.WMSLayerInfo({name:"1",title:"Rivers"});
        var layer2 = new esri.layers.WMSLayerInfo({name:"2",title:"Cities"});
        var resourceInfo = {
          extent: new esri.geometry.Extent(-126.40869140625,31.025390625,-109.66552734375,41.5283203125,{wkid: 4326}),
          layerInfos: [layer1,layer2]
        };
        var wmsLayer = new esri.layers.WMSLayer("http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer",
          {resourceInfo: resourceInfo,
          visibleLayers: ["1","2"]
          }
        ); 
        map.addLayers([wmsLayer]);
       
       var content = [];
        content.push("<b>Layers</b>:<ul>");
        dojo.forEach(wmsLayer.layerInfos, function(layerInfo) {
          content.push("<li>"  + layerInfo.title + "</li>");
        });
        content.push("</ul>");
        content.push("<b>WMS Version</b>:" + wmsLayer.version + "<br />");
        dojo.byId('details').innerHTML = content.join("");

        var resizeTimer;
        dojo.connect(map, 'onLoad', function(theMap) {
          dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout( function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });
      }


      dojo.addOnLoad(init);
    </script> 
  </head> 
  
  <body class="claro"> 
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;"> 
      <div id="details" dojotype="dijit.layout.ContentPane" region="left" splitter="true" style="overflow:auto; width:200px;" > 
      </div> 
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> 
      </div> 
    </div> 
  </body> 

</html>

limina

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ArcGIS jsapi wms sample

Description<br />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 w
复制链接

扫一扫