@mapgis/webclient-leaflet-plugin/documention/ArcGISMapImageLayer.html

开发时需要引入MapGIS Client for JavaScript（Leaflet）开发包；其中包括必备的 CSS 文件和 JS 文件；

<header id="page-title" class="page-title">
    
        <span class="page-title-main">类名</span>
        <span class="page-title-sub">ArcGISMapImageLayer</span>
    
</header>





<section>

<article>
    <div class="container-overview">
    
        
            <div class='vertical-section'>
                <div class="members">
                    <div class="member">
                        


    
    <h4 class="name" id="ArcGISMapImageLayer">
        <a class="href-link" href="#ArcGISMapImageLayer">#</a>
        
        <span class="code-name" id="ArcGISMapImageLayer" style="font-size:30px">
            
                new ArcGISMapImageLayer<span class="signature">(url, options)</span>
            
        </span>
    </h4>
    

    
    <div class="description">
        <p>ArcGIS地图图片图层(Leaflet)</p>
    </div>
    









    <h4>参数</h4>
    
<div class="table-container">
    <table class="params table">
        <thead>
        <tr>
            
            <th>名称</th>
            

            <th>类型</th>

            
            <th style="min-width: 100px;">默认值</th>
            

            <th class="last">描述</th>
        </tr>
        </thead>

        <tbody>
        

            
<tr class="deep-level-0">
  
      <td class="name"><code>url</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             String
    
</span>



  
  </td>

  
      <td class="default">
      
      </td>
  

  <td class="description last"><p>服务基地址</p></td>
</tr>



        

            
<tr class="deep-level-0">
  
      <td class="name"><code>options</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Object
    
</span>



  
  </td>

  
      <td class="default">
      
      </td>
  

  <td class="description last"><p>额外构造参数</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>opacity</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Number
    
</span>



  
  </td>

  
      <td class="default">
      
          1
      
      </td>
  

  <td class="description last"><p>图层透明度</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>visible</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Boolean
    
</span>



  
  </td>

  
      <td class="default">
      
          true
      
      </td>
  

  <td class="description last"><p>图层显示或隐藏</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>layers</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             String
    
</span>



  
  </td>

  
      <td class="default">
      
      </td>
  

  <td class="description last"><p>要显示的子图层</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>id</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             String
    
</span>



  
  </td>

  
      <td class="default">
      
      </td>
  

  <td class="description last"><p>图层id</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>imageWidth</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Number
    
</span>



  
  </td>

  
      <td class="default">
      
          256
      
      </td>
  

  <td class="description last"><p>瓦片宽度，仅当renderMode为'tile'时生效</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>imageHeight</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Number
    
</span>



  
  </td>

  
      <td class="default">
      
          256
      
      </td>
  

  <td class="description last"><p>瓦片高度，仅当renderMode为'tile'时生效</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>imageFormat</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             String
    
</span>



  
  </td>

  
      <td class="default">
      
          'image/jpeg'
      
      </td>
  

  <td class="description last"><p>瓦片格式</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>imageTransparent</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Boolean
    
</span>



  
  </td>

  
      <td class="default">
      
          true
      
      </td>
  

  <td class="description last"><p>图层背景是否可以透明</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>bounds</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             L.latLngBounds
    
</span>



  
  </td>

  
      <td class="default">
      
      </td>
  

  <td class="description last"><p>地图显示范围</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>tokenKey</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             String
    
</span>



  
  </td>

  
      <td class="default">
      
      </td>
  

  <td class="description last"><p>token名</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>tokenValue</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             String
    
</span>



  
  </td>

  
      <td class="default">
      
      </td>
  

  <td class="description last"><p>token值</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>tokenAttachType</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Boolean
    
</span>



  
  </td>

  
      <td class="default">
      
          false
      
      </td>
  

  <td class="description last"><p>当请求类型为POST时，是否将token设置在请求体中</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>httpMethod</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             FetchMethod
    
</span>



  
  </td>

  
      <td class="default">
      
          FetchMethod.get
      
      </td>
  

  <td class="description last"><p>数据请求方式</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>mapServer</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             MapServer
    
</span>



  
  </td>

  
      <td class="default">
      
      </td>
  

  <td class="description last"><p>服务库对象</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>spatialReference</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             SpatialReference
    
</span>



  
  </td>

  
      <td class="default">
      
      </td>
  

  <td class="description last"><p>图层坐标系</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>clippingArea</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Object
    
</span>



  
  </td>

  
      <td class="default">
      
      </td>
  

  <td class="description last"><p>图层裁剪对象</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>renderMode</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             String
    
</span>



  
  </td>

  
      <td class="default">
      
          'tile'
      
      </td>
  

  <td class="description last"><p>影像的展现形式。可选'tile' 、 'image'。默认为'tile'，加载影像时以瓦片的方式平铺。当选项为'image'时，加载影像会请求一张覆盖当前屏幕的图像。</p></td>
</tr>


  



        
        </tbody>
    </table>
</div>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>























    <h5>示例</h5>
    
        <p class="code-caption"><h7 id='addLayer'>混合开发模式</h7></p>
    
    
        <pre class="prettyprint"><code>// ES5引入方式
const { ArcGISMapImageLayer } = zondy.Layer
const { initializeCRS, initializeOptions } = zondy.leaflet
// ES6引入方式
import { ArcGISMapImageLayer } from "@mapgis/webclient-common"
import "@mapgis/webclient-leaflet-plugin"
const { initializeCRS, initializeOptions } = zondy.leaflet

// 构造一个ArcGISMapImageLayer图层对象
const layer = new ArcGISMapImageLayer({
  // 服务基地址
  url: "http://{ip}:{port}/arcgis/rest/services/{服务名}/MapServer"
});
// 加载图层元数据
layer.load().then(function () {
  // 构造地图视图的初始化参数
  const crs = initializeCRS(layer)
  const mapViewOptions = {
    // 地图视图参考系
    crs: crs,
    // 初始化中心点
    center: [31.147781205532336,112.21905099757561],
    // 初始化级数
    zoom: 4
  }
  // 构造Leaflet地图视图对象
  const map = L.map('地图视图容器ID', mapViewOptions)
  // 构造图层的初始化参数
  const layerOptions = initializeOptions(layer)
  // 添加图层到地图视图中
  new zondy.leaflet.ArcGISMapImageLayer(layer.url, layerOptions).addTo(map)
})</code></pre>
    



                    </div>
                </div>
            </div>
        
    
    </div>
    
    

    

    

    

    

    

    

    

    

    
</article>

</section>