MapGIS Client for JavaScript API

# new FeatureLayer()

示例

混合开发模式

// 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)
    })
  })
})