使用按钮控制动态地图服务层定义_动态地图按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/GiScript/article/details/50730394

ArcGIS API for JavaScript

Layer definitions on a dynamic map service

Sample Code:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    
    <meta name="viewport"
          content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create Map with Custom ArcGISDynamicMapServiceLayer Layer
      Definitions</title>

    <link rel="stylesheet"
          href="https://js.arcgis.com/3.15/esri/css/esri.css"/>
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }

    </style>

    <script src="https://js.arcgis.com/3.15/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters) {

          map = new Map("mapDiv", {
            basemap: "streets",
            center: [-98.258, 38.236],
            zoom: 7
          });

          //Use the ImageParameters to set map service layer definitions and map service visible layers before adding to the client map.
          var imageParameters = new ImageParameters();

          //layer.setLayerDefinitions takes an array.  The index of the array corresponds to the layer id.
          //In the sample below I add an element in the array at 3,4, and 5.
          //Those array elements correspond to the layer id within the remote ArcGISDynamicMapServiceLayer
          var layerDefs = [];
          layerDefs[5] = "STATE_NAME='Kansas'";
          layerDefs[4] = "STATE_NAME='Kansas' and POP2007>25000";
          layerDefs[3] = "STATE_NAME='Kansas' and POP2007>25000";
          imageParameters.layerDefinitions = layerDefs;

          //I want layers 5,4, and 3 to be visible
          imageParameters.layerIds = [5, 4, 3];
          imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
          imageParameters.transparent = true;

          //construct ArcGISDynamicMapServiceLayer with imageParameters from above
          var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer",
            {"imageParameters": imageParameters});

          map.addLayer(dynamicMapServiceLayer);
        });
    </script>
  </head>

  <body>
    <div id="mapDiv"></div>
  </body>
</html>

现在需要添加一个控制按钮点击实现所想要的部分图层的显示。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create Map with Custom ArcGISDynamicMapServiceLayer Layer
      Definitions</title>

    <link rel="stylesheet"
          <link rel="stylesheet" href="http:/arcgis_js_api/library/3.14/3.14/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
    </style>

    <script src="http:/arcgis_js_api/library/3.14/3.14/"></script>
	
    <script>
	
	
      var map;
	  var dL1;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer) {

          map = new Map("mapDiv", {
            basemap: "satellite",
            center: [84.35, 42.31],
            zoom: 6
          });
		  dL1 = ArcGISDynamicMapServiceLayer;
		  });
     
	
	function getChecked(){
	          
	      var iP1 = new esri.layers.ImageParameters();
		  var layerDefs = [];
          layerDefs[1] = "AREA_CODE='652100'";
          iP1.layerDefinitions = layerDefs;
          iP1.layerIds = [1];
          iP1.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
          iP1.transparent = true;
		   var dL2 = new dL1("http:/arcgis/rest/services/BaseMap/MapServer",
            {"imageParameters": iP1}
			);			
          map.addLayer(dL2);
		  }
    </script>
  </head>

  <body>
   <div>
                        <button  class="btn" style="background: #99BBFF" οnclick="getChecked()">应用</button>
                    </div>
    <div id="mapDiv"></div>	 
  </body>
</html>

一定要注意ImageParameters的用法，它不可以像ArcGISDynamicMapServiceLayer这样使用。正确使用方式为：iP1.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;

ArcGISDynamicMapServiceLayer还可以这样使用。

  <script>
      var map;
      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/domReady!"
      ],
        function (Map) {

          map = new Map("mapDiv", {
            basemap: "satellite",
            center: [84.35, 42.31],
            zoom: 6
          });
		  });
     
	
	function getChecked(){
	          
	      var iP1 = new esri.layers.ImageParameters();
		  var layerDefs = [];
          layerDefs[1] = "AREA_CODE='652100'";
          iP1.layerDefinitions = layerDefs;
          iP1.layerIds = [1];
          iP1.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
          iP1.transparent = true;
		  var dL2 = new esri.layers.ArcGISDynamicMapServiceLayer("http://192.168.0.210:6080/arcgis/rest/services/BaseMap/MapServer",
            {"imageParameters": iP1}
			);			
          map.addLayer(dL2);
		  }
    </script>

实现效果，点击按钮，可以显示图层的某一部分。