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

查看全文

相关阅读:
Nginx的启动、停止与重启
 linux环境下安装nginx步骤
 关于Nginx的负载均衡
 【Nginx】实现动静分离
 nginx中的反向代理
 Nignx的简介
 ERROR 1822 (HY000): Failed to add the foreign key constraint. Missing index for constraint 'orderite
mysql出现“ You can't specify target table '表名' for update in FROM clause”解决方法
 SpringMvc的工作原理图
 【Java多线程】Java中的13个原子操作类（十九）

原文地址：https://www.cnblogs.com/telwanggs/p/10285891.html