MapGIS Client for JavaScript API

# new IGSFeatureLayer(options)

参数:

查看源代码 common/document/layer/igserver/IGSFeatureLayer.js, line 11

支持如下方法：

[1、加载图层资源]
[2、指定图层的要素查询]
[3、查询要素数量]
[4、通过传入的json构造并返回一个新的几何对象]
5、导出为json对象
6、克隆几何对象

示例

添加IGS要素图层-不指定图层

// ES5引入方式
const { Map , MapView } = Zondy
const { IGSFeatureLayer } = Zondy.Layer
// ES6引入方式
import { Map , MapView, IGSFeatureLayer} from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapView({
  // 视图id
  viewId: "viewer-id",
  // 图层管理容器
  map: map
});
// 添加图层
const igsFeatureLayer = new IGSFeatureLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer'
})
map.add(igsFeatureLayer)

添加IGS要素图层-指定图层id

// ES5引入方式
const { IGSFeatureLayer } = Zondy.Layer
// ES6引入方式
import {  IGSFeatureLayer} from "@mapgis/webclient-common"
// 添加图层
const igsFeatureLayer = new IGSFeatureLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
  // 指定图层id
  sublayerId: 2
})
map.add(igsFeatureLayer)

<caption><h7 id='IGSFeatureLayer-url'>添加IGS要素图层-在基地址中指定图层id</h7></caption
// ES5引入方式
const { IGSFeatureLayer } = Zondy.Layer
// ES6引入方式
import {  IGSFeatureLayer} from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
  // 服务基地址，再基地址上指定图层id
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer/1'
})
map.add(igsFeatureLayer)

添加IGS要素图层-IGS1.0

// ES5引入方式
const { IGSFeatureLayer } = Zondy.Layer
// ES6引入方式
import {  IGSFeatureLayer} from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
  // 服务基地址，再基地址上指定图层id
  url: 'http://{ip}:{port}/igs/rest/mrfs/docs/{ServiceName}',
  // 图层id
    sublayerId: '1'
})
map.add(igsFeatureLayer)

删除图层

map.remove(igsFeatureLayer)

设置图层透明度

// ES5引入方式
const { IGSFeatureLayer } = Zondy.Layer
// ES6引入方式
import {  IGSFeatureLayer} from "@mapgis/webclient-common"
// 在初始化时设置
const igsFeatureLayer = new IGSFeatureLayer({
  // 服务基地址，再基地址上指定图层id
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer/1',
  // 设置透明度
  opacity: 1
})
map.add(igsFeatureLayer)

// 在图层加载完毕后设置
igsFeatureLayer.opacity = 0.5

设置图层可见性

// ES5引入方式
const { IGSFeatureLayer } = Zondy.Layer
// ES6引入方式
import {  IGSFeatureLayer} from "@mapgis/webclient-common"
// 在初始化时设置
const igsFeatureLayer = new IGSFeatureLayer({
  // 服务基地址，再基地址上指定图层id
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer/1',
  // 设置图层可见性
  visible: true
})
map.add(igsFeatureLayer)

// 在图层加载完毕后设置
igsFeatureLayer.visible = !igsFeatureLayer.visible

图层顺序

// 加载完毕后，更改图层顺序
map.reorder(igsFeatureLayer, '要移动到的index');

单值专题图

// ES5引入方式
const { IGSFeatureLayer } = Zondy.Layer
const { UniqueValueRenderer } = Zondy.Renderer
const { SimpleFillSymbol,SimpleLineSymbol } = Zondy.Symbol
const { Color } = Zondy
// ES6引入方式
import {  IGSFeatureLayer,UniqueValueRenderer,SimpleFillSymbol,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
  // 服务基地址，当不指定图层名称时，默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
  // 设置渲染样式-单值专题图
  renderer: renderer: new UniqueValueRenderer({
    // 专题图过滤字段名
    field: '字段名',
    // 默认样式，当没有匹配到指定值时，会使用默认样式
    // 因为该数据的几何类型为区，因此设置区样式
    defaultSymbol: new SimpleFillSymbol({
      // 填充颜色
      color: new Color(255, 0, 0),
      // 外边线样式
      outline: new SimpleLineSymbol({
        // 线颜色
        color: new Color(0, 0, 0),
        // 线宽
        width: 1
      })
    }),
    // 单值专题图过滤条件数组
    uniqueValueInfos: [
      {
        //指定字段值
        value: '过滤字段值1',
        //匹配到该值后的样式
        // 因为该数据的几何类型为区，因此设置区样式
        symbol: new SimpleFillSymbol({
          // 填充颜色
          color: new Color(255, 0, 0)
        })
      },
      {
        //指定字段值
        // 因为该数据的几何类型为区，因此设置区样式
        value: '过滤字段值2',
        //匹配到该值后的样式
        // 因为该数据的几何类型为区，因此设置区样式
        symbol: new SimpleFillSymbol({
          // 填充颜色
          color: 'rgb(255, 123, 220)'
        })
      }
    ]
  })
})
map.add(igsFeatureLayer3)

分段专题图

// ES5引入方式
const { IGSFeatureLayer } = Zondy.Layer
const { ClassBreakRenderer } = Zondy.Renderer
const { SimpleLineSymbol } = Zondy.Symbol
const { Color } = Zondy
// ES6引入方式
import {  IGSFeatureLayer,ClassBreakRenderer,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
  // 服务基地址，当不指定图层名称时，默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
  // 设置渲染样式-分段专题图
  renderer: new ClassBreakRenderer({
    // 专题图过滤字段名
    field: '字段名',
    // 默认样式，当没有匹配到指定值时，会使用默认样式
    // 因为该数据的几何类型为线，因此设置线样式
    defaultSymbol: new SimpleLineSymbol({
      // 线符号颜色
      color: new Color(1, 244, 0),
      // 线宽
      width: 3
    }),
    // 分段专题图过滤条件数组
    classBreakInfos: [
      {
        // 最小过滤范围，field对应的值大于等于minValue
        minValue: 0,
        // 最大过滤范围，field对应的值小于maxValue
        maxValue: 2,
        // 匹配到该值后的样式
        // 因为该数据的几何类型为线，因此设置线样式
        symbol: new SimpleLineSymbol({
          // 线符号颜色
          color: new Color(1, 244, 0),
          // 线宽
          width: 3
        })
      },
      {
        // 最小过滤范围，field对应的值大于等于minValue
        minValue: 3,
        // 最大过滤范围，field对应的值小于maxValue
        maxValue: 5,
        // 匹配到该值后的样式
        // 因为该数据的几何类型为线，因此设置线样式
        symbol: new SimpleLineSymbol({
          // 线符号颜色
          color: new Color(111, 144, 10),
          // 线宽
          width: 3
        })
      },
      {
        // 最小过滤范围，field对应的值大于等于minValue
        minValue: 5,
        // 最大过滤范围，field对应的值小于maxValue
        maxValue: 7,
        // 匹配到该值后的样式
        // 因为该数据的几何类型为线，因此设置线样式
        symbol: new SimpleLineSymbol({
          // 线符号颜色
          color: new Color(22, 244, 10),
          // 线宽
          width: 3
        })
      },
      {
        // 最小过滤范围，field对应的值大于等于minValue
        minValue: 7,
        // 最大过滤范围，field对应的值小于maxValue
        maxValue: 9,
        // 匹配到该值后的样式
        // 因为该数据的几何类型为线，因此设置线样式
        symbol: new SimpleLineSymbol({
          // 线符号颜色
          color: new Color(33, 44, 10),
          // 线宽
          width: 3
        })
      },
      {
        // 最小过滤范围，field对应的值大于等于minValue
        minValue: 9,
        // 最大过滤范围，field对应的值小于maxValue
        maxValue: 20,
        // 匹配到该值后的样式
        // 因为该数据的几何类型为线，因此设置线样式
        symbol: new SimpleLineSymbol({
          // 线符号颜色
          color:  new ZColor(123, 124, 110),
          // 线宽
          width: 3
        })
      }
    ]
  })
})
map.add(igsFeatureLayer)

统一专题图

// ES5引入方式
const { IGSFeatureLayer } = Zondy.Layer
const { SimpleRenderer } = Zondy.Renderer
const { SimpleFillSymbol,SimpleLineSymbol } = Zondy.Symbol
const { Color } = Zondy
// ES6引入方式
import {  IGSFeatureLayer,SimpleRenderer,SimpleFillSymbol,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
  // 服务基地址，当不指定图层名称时，默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
  // 设置渲染样式-统一专题图
  renderer: new SimpleRenderer({
    // 因为该数据的几何类型为区，因此设置区样式
    symbol: new SimpleFillSymbol({
      // 填充颜色
      color: new Color(255, 0, 0),
      // 外边线样式
      outline: new SimpleLineSymbol({
        // 线颜色
        color: new Color(0, 0, 0),
        // 线宽度
        width: 1
      })
    })
  })
})
map.add(igsFeatureLayer)

指定一个gdbp地址来渲染要素

// ES5引入方式
const { IGSFeatureLayer } = Zondy.Layer
// ES6引入方式
import {  IGSFeatureLayer } from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
  // 服务基地址，该地址为要素服务1.0地址
  url: "http://{ip}:{port}/igs/rest/mrfs/layer",
  // gdbp地址，在桌面的数据库中右键简单要素类，来获取该地址
  gdbp: "gdbp://MapGisLocal/武汉市/ds/4326矢量/sfcls/武汉市区划4326"
})
map.add(igsFeatureLayer)

启用注记

// ES5引入方式
const { igsFeatureLayer } = Zondy.Layer
const { LabelClass ,Font} = Zondy
const { TextSymbol } = Zondy.Symbol
// ES6引入方式
import {  igsFeatureLayer,LabelClass,Font,TextSymbol } from "@mapgis/webclient-common"
// 初始化LabelClass
const labelClass = new LabelClass({
  // 指定文本符号样式
  symbol: new TextSymbol({
    // 文字颜色
    color: new Color(252, 100, 22, 1),
    // 文字样式
    font: new Font({
      // 字体
      family: "微软雅黑",
      // 文字大小，单位像素
      size: 30,
      // 文字是否为斜体，正常模式
      style: "normal",
      // 文字粗细
      weight: "normal"
    })
  })
})
// 初始化IGS要素图层
const igsFeatureLayer = new igsFeatureLayer({
  // 服务基地址，当不指定图层名称时，默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
  // 可在此处设置渲染样式
  renderer: {},
  // 启用注记
  labelsVisible: true,
  // 设置注记样式
  labelingInfo: [labelClass]
})
// 添加到容器中
map.add(igsFeatureLayer)