@mapgis/webclient-leaflet-plugin/documention/FeatureLayer.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">FeatureLayer</span>
    
</header>





<section>

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


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

    
    <div class="description">
        <p>要素图层(Leaflet)</p>
    </div>
    













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>























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

// 构造一个瓦片图层对象作为底图
const layer = new IGSTileLayer({
  // 服务基地址
  url: "http://{ip}:{port}/arcgis/rest/services/{服务名}/TileServer"
});
// 加载瓦片图层元数据
layer.load().then(function () {
  // 通过瓦片图层元数据构造地图视图的初始化参数
  const crs = initializeCRS(layer)
  const mapViewOptions = {
    // 地图视图参考系
    crs: crs,
    // 初始化中心点
    center: [31.147781205532336,112.21905099757561],
    // 初始化级数
    zoom: 6
  }
  // 构造Leaflet地图视图对象
  const map = L.map('地图视图容器ID', mapViewOptions)
  // 构造瓦片图层的初始化参数
  const layerOptions = initializeOptions(layer)
  // 添加瓦片图层到地图视图中
  new zondy.leaflet.IGSTileLayer(layer.url, layerOptions).addTo(map)
  // 构造要素图层
  const featureLayer = new IGSFeatureLayer({
    // 服务基地址
    url: 'http://{ip}:{port}/igs/rest/services/{服务名}/FeatureServer'
  })
  // 查询要素
  featureLayer.queryFeatures({
    // 指定要查询的子图层
    layerId: '0',
    // 指定返回数据的坐标系
    outSrs: 'EPSG:4326',
    // 指定查询数量
    resultRecordCount: 100000
  }).then((result) => {
    // 创建Leaflet的要素图层
    const featureLayerLeaflet = new zondy.leaflet.FeatureLayer()
    // 添加要素图层
    featureLayerLeaflet.addTo(map)
    // 获取查询到的要素集合
    const features = result.features
    // 循环遍历要素，将要素转为Leaflet的几何对象并绘制
    features.forEach((feature) => {
      // 设置要素符号
      feature.symbol = new SimpleFillSymbol({
        color: 'rgba(244, 122, 31, 0.5)'
      })
      // 将要素转为Leaflet几何对象
      const graphic = FeatureLayerUtil.convertFeature(feature)
      // 添加并绘制要素
      featureLayerLeaflet.addLayer(graphic)
    })
  })
})</code></pre>
    



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

    

    

    

    

    

    

    

    

    
</article>

</section>