@mapgis/webclient-leaflet-plugin 17.2.0 → 17.2.2

package/documention/IGSMapImageLayer.html

@@ -0,0 +1,948 @@
+<header id="page-title" class="page-title">
+    
+        <span class="page-title-main">类名</span>
+        <span class="page-title-sub">IGSMapImageLayer</span>
+    
+</header>
+
+
+
+
+
+<section>
+
+<article>
+    <div class="container-overview">
+    
+        
+            <div class='vertical-section'>
+                <div class="members">
+                    <div class="member">
+                        
+
+
+    
+    <h4 class="name" id="IGSMapImageLayer">
+        <a class="href-link" href="#IGSMapImageLayer">#</a>
+        
+        <span class="code-name" id="IGSMapImageLayer" style="font-size:30px">
+            
+                new IGSMapImageLayer<span class="signature">(url, options)</span>
+            
+        </span>
+    </h4>
+    
+
+    
+    <div class="description">
+        <p>地图图片图层(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>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>clientId</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             String
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+      </td>
+  
+
+  <td class="description last"><p>客户端id，用户的唯一标识；在地图服务中，调用接口时如果修改了地图的状态，包括设置动态投影、设置图层显示隐藏等，为了提升并发性能，服务端会根据clientId来生成临时地图，最佳做法是一个浏览器生成一个固定的唯一值；建议普通用户不要传该参数，webclient会根据当前浏览器生成一个固定的唯一值</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>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>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>igsVersion</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             String
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+      </td>
+  
+
+  <td class="description last"><p>igs版本号</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>filters</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>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>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>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>projectionSrs</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Boolean
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+          false
+      
+      </td>
+  
+
+  <td class="description last"><p>是否开启IGS2.0动态投影</p></td>
+</tr>
+
+
+  
+    
+<tr class="deep-level-1">
+  
+      <td class="name"><code>isAntialiasing</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Boolean
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+          false
+      
+      </td>
+  
+
+  <td class="description last"><p>返回的图片时，是否开启服务端抗锯齿功能；启用抗锯齿功能后，显示效果会更清晰，但会导致出图速度变慢，true表示开启抗锯齿，false表示关闭抗锯齿，如果没有设置，则默认应用地图文档(MapX)上的设置参数</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 { IGSMapImageLayer } = zondy.Layer
+const { initializeCRS, initializeOptions } = zondy.leaflet
+// ES6引入方式
+import { IGSMapImageLayer } from "@mapgis/webclient-common"
+import "@mapgis/webclient-leaflet-plugin"
+const { initializeCRS, initializeOptions } = zondy.leaflet
+
+// 构造一个IGSMapImageLayer图层对象
+const layer = new IGSMapImageLayer({
+  // 服务基地址
+  url: "http://{ip}:{port}/igs/rest/services/{服务名}/MapServer"
+});
+// 加载图层元数据
+layer.load().then(function () {
+  // 构造地图视图的初始化参数
+  const crs = initializeCRS(layer)
+  const mapViewOptions = {
+    // 地图视图参考系
+    crs: crs,
+    // 初始化中心点
+    center: [31.147781205532336,112.21905099757561],
+    // 初始化级数
+    zoom: 2
+  }
+  // 构造Leaflet地图视图对象
+  const map = L.map('地图视图容器ID', mapViewOptions)
+  // 构造图层的初始化参数
+  const layerOptions = initializeOptions(layer)
+  // 添加图层到地图视图中
+  new zondy.leaflet.IGSMapImageLayer(layer.url, layerOptions).addTo(map)
+})</code></pre>
+    
+
+
+
+                    </div>
+                </div>
+            </div>
+        
+    
+    </div>
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+</article>
+
+</section>