MapGIS Client for JavaScript API

# new IGSVectorTileLayer(options)

参数:

支持如下方法：

[1、根据子图层id查询图层]
[2、通过传入的json构造并返回一个新的IGSVectorTileLayer对象]
[3、导出为json对象]
4、通过矢量瓦片样式图层的id，找到对应的矢量瓦片样式图层对象
5、通过矢量瓦片样式图层的id，找到对应的矢量瓦片样式图层的序号
6、通过矢量瓦片样式图层的序号，找到对应的矢量瓦片样式图层的id
7、设置样式图层属性对象
8、删除样式图层
9、设置样式图层可见性
10、获取样式图层可见性
11、获取样式图层绘制属性
12、设置样式图层绘制属性
13、获取样式图层布局属性
14、设置样式图层布局属性
15、设置样式图层的额外属性
16、获取样式图层的额外属性
17、克隆图层

示例

IGS1.0的矢量瓦片示例

//初始化地图管理容器
// ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
const { SpatialReference } = zondy
// ES6引入方式
import { IGSVectorTileLayer, SpatialReference } from "@mapgis/webclient-common"
//初始化矢量瓦片图层
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 矢量瓦片基地址
  url: ''，
  // 图层参考系
  spatialReference:new SpatialReference('EPSG:4326')
});

IGS2.0的矢量瓦片示例

 // ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
// ES6引入方式
import { IGSVectorTileLayer } from "@mapgis/webclient-common"
// 初始化矢量瓦片图层
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 矢量瓦片基地址
  url: ''
});

通过mvt样式对象来构造矢量瓦片示例

// ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
// ES6引入方式
import { IGSVectorTileLayer } from "@mapgis/webclient-common"
// 初始化矢量瓦片图层
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 矢量瓦片的mvt样式对象
  style: {}
});

自定义矢量瓦片业务逻辑-es5

// ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
// ES6引入方式
import { IGSVectorTileLayer } from "@mapgis/webclient-common"
// 初始化矢量瓦片图层
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 矢量瓦片基地址
  url: ''
});
// 例如通过重写igsVectorTileLayer对象的covertCustomStyleToMVTStyle方法，来自定义矢量瓦片业务逻辑
igsVectorTileLayer.covertCustomStyleToMVTStyle = function(customStyle) {
  // 自定义你的业务逻辑
  // 此方法必须要返回一个符合MapBox标准的矢量瓦片
  return mvtStyle
}
// 在ES5模式下，如果更改了图层的业务逻辑，则必须通过图层的load方法来加载元信息，之后再添加图层
igsVectorTileLayer.load().then(() => {
  // 添加图层
  map.add(igsVectorTileLayer)
})

自定义矢量瓦片业务逻辑-es6

// ES6引入方式
import { IGSVectorTileLayer } from "@mapgis/webclient-common"
// 在ES6模式下继承IGSVectorTileLayer，并重写其业务逻辑
class IGSVectorTileLayerCustom extends IGSVectorTileLayer {
  constructor(options) {
    super(options)
  }
}
// 重写方法
IGSVectorTileLayerCustom.prototype.covertCustomStyleToMVTStyle = function (customStyle) {
  // 自定义你的业务逻辑
  // 此方法必须要返回一个符合MapBox标准的矢量瓦片
  return mvtStyle
}
const customLayer = new IGSVectorTileLayerCustom({
  // 矢量瓦片基地址
  url: ''
})

矢量瓦片三维注记

// ES5引入方式
const { LabelClass } = zondy
const { IGSVectorTileLayer } = zondy.layer
// ES6引入方式
import { IGSVectorTileLayer, LabelClass } from "@mapgis/webclient-common"
// 初始化一个额外的图标DOM对象
const iconImage = new Image()
iconImage.src = '图片地址或者base64字符串'
// 初始化矢量瓦片图层
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 矢量瓦片基地址
  url: '',
  // 开启三维注记
  labelsRenderMode: 'on-screen',
  // 设置要应用三维主句的子图层
  sublayers: [{
    // 矢量瓦片子图层id
    id: '矢量瓦片子图层id',
    // 注记参数，目前仅用填写一个
    labelingInfo: [
      new LabelClass({
        symbol: {
          // 填充颜色 rgba or 16进制颜色
          color: 'rgba(255,255,255,1)',
          // 描边颜色
          haloColor: 'rgba(0,0,0,0.5)',
          // 描边宽度
          haloSize: 2,
          // 行高
          lineHeight: 1.1,
          // 文本间距
          letterSpacing: 2,
          // 字体样式 参考css
          font: {
            size: 14,
            family: '微软雅黑',
            weight: 'normal',
            style: 'normal'
          },
          // 额外的图标
          textExtraIcon: iconImage,
          // 图标的大小
          textExtraIconSize:20,
          // 图标方位
          textExtraIconAnchor:'left'
        },
        // 渲染方式 1.canvas 2.label 3.ground
        renderMode: 'canvas',
        // 最大可见范围
        minScale: 60000000,
        // 最小可见范围
        maxScale: 1,
        // 布局位置 可选 1.above-left 2.above-center 3.above-right 4.center-left 5.center-center 6.center-right 7.below-left 8.below-center 9.below-right
        labelPlacement: 'above-center',
        // 高程采样参数
        elevationInfo: {
          mode: 'OnTheGround',
          offset: 0
        }
      })
    ]
  }]
});

切换三维注记模式

// 矢量瓦片渲染模式
igsVectorTileLayer.labelsRenderMode = 'off-screen'
// Cesium三维渲染模式
igsVectorTileLayer.labelsRenderMode = 'on-screen'

设置图层透明度

igsVectorTileLayer.opacity = 0.5

显示或隐藏图层

igsVectorTileLayer.visible = !igsVectorTileLayer.visible

删除图层

map.remove(igsVectorTileLayer)

显示所有子图层

 // ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
// ES6引入方式
import { IGSVectorTileLayer } from "@mapgis/webclient-common"
// 添加图层
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/VectorTileServer',
  //默认不设置sublayers,加载全部图层
});

根据id显示子图层

// ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
// ES6引入方式
import { IGSVectorTileLayer } from "@mapgis/webclient-common"
// 添加图层
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/VectorTileServer',
  // 根据id显示子图层
  sublayers: [
     {
       // 子图层id
       id: '子图层id',
       // 显示子图层
       visible: true
     }
   ]
});

通过修改子图参数，设置子图层显隐

// ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
// ES6引入方式
import { IGSVectorTileLayer } from "@mapgis/webclient-common"
// 添加图层
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/VectorTileServer'
});
igsVectorTileLayer.on('layerview-created', function (result) {
  console.log("加载完毕:", result.layer)
  // 根据id获取子图层
  const subLayer = igsVectorTileLayer.findSublayerById('图层id')
  // 设置子图层显隐
  subLayer.visible = false
})

设置子图层专题图-单值专题图

// ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
const { UniqueValueRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSVectorTileLayer,UniqueValueRenderer ,SimpleFillSymbol,SimpleLineSymbol,Color} from "@mapgis/webclient-common"
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 服务基地址,当不指定图层名称时,默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/VectorTileServer',
  // 设置子图层专题图
  sublayers: [
     {
       // 子图层id
       id: '子图层id',
       // 设置渲染样式-单值专题图
       renderer: new UniqueValueRenderer({
         //专题图过滤字段名
         field: '你的字段名',
         // 默认样式,当没有匹配到指定值时,会使用默认样式
         //因为该数据的几何类型为区,因此设置区样式
         defaultSymbol: new SimpleFillSymbol({
           // 填充颜色
           color: 'rgba(1,1,252,0)',
           // 外边线样式
           outline: new SimpleLineSymbol({
             //线颜色
             color: new Color(255, 1, 0, 1),
             //线宽
             width: 1
           })
         }),
         //单值专题图过滤调条件数组
         uniqueValueInfos: [{
           //指定字段值
           value: "指定的值",
           //匹配到该值后的样式
           //因为该数据的几何类型为区,因此设置区样式
           symbol: new SimpleFillSymbol({
             // 填充颜色
             color: 'rgba(1,1,252,1)',
             // 外边线样式
             outline: new SimpleLineSymbol({
               //线符号颜色
               color: new Color(255, 1, 0, 11),
               //线宽
               width: 1
               })
             })
           },{
             //指定字段值
             value: "指定的值",
             //匹配到该值后的样式
             //因为该数据的几何类型为区,因此设置区样式
             symbol: new SimpleFillSymbol({
               // 填充颜色
               color: new Color(211, 111, 11, 1)
             })
           }]
       })
     }
  ]
});

设置子图层专题图-分段专题图

// ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
const { ClassBreakRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSVectorTileLayer,ClassBreakRenderer ,SimpleFillSymbol,SimpleLineSymbol,Color} from "@mapgis/webclient-commo
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 服务基地址,当不指定图层名称时,默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/VectorTileServer',
  // 设置子图层专题图
  sublayers: [
    {
     // 子图层id
     id: '子图层id',
     // 设置渲染样式-分段专题图
     renderer: new ClassBreakRenderer({
       //专题图过滤字段名
       field: '你的字段名',
       // 默认样式,当没有匹配到指定值时,会使用默认样式
       // 因为该数据的几何类型为区,因此设置区样式
       defaultSymbol:  new SimpleFillSymbol({
         // 填充颜色
         color: 'rgba(222,1,252,1)',
         // 线符号样式
         outline: new SimpleLineSymbol({
           //线符号颜色
           color: new Color(255, 1, 0, 1),
           //线宽
           width: 1
         })
       }),
       //分段专题图过滤条件数组
       classBreakInfos: [{
         // 最大过滤范围,field对应的值小于maxValue
         maxValue: "最大范围",
         // 最小过滤范围,field对应的值大于等于minValue
         minValue: "最小范围",
         // 匹配到该值后的样式
         // 因为该数据的几何类型为区,因此设置区样式
         symbol:  new SimpleFillSymbol({
           // 填充颜色
           color: 'rgba(1,1,252,1)',
           // 线符号样式
           outline: new SimpleLineSymbol({
             //线符号颜色
             color: new Color(255, 1, 0, 1),
             //线宽
             width: 1
           })
         })
       }]
     })
   }
 ]
});

通过修改子图参数，设置子图层专题图

// ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
const { ClassBreakRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSVectorTileLayer,ClassBreakRenderer ,SimpleFillSymbol,SimpleLineSymbol,Color} from "@mapgis/webclient-commo
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/VectorTileServer'
});
// 根据id获取子图层
const subLayer = igsVectorTileLayer.findSublayerById('子图层id')
// 设置渲染样式-分段专题图
subLayer.renderer = new ClassBreakRenderer({
    // 专题图过滤字段名
    field: '你的字段名',
    // 默认样式,当没有匹配到指定值时,会使用默认样式
    // 因为该数据的几何类型为区,因此设置区样式
    defaultSymbol:  new SimpleFillSymbol({
      // 填充颜色
      color: 'rgba(222,1,252,1)',
      // 线符号样式
      outline: new SimpleLineSymbol({
        //线符号颜色
        color: new Color(255, 1, 0, 1),
        //线宽
        width: 1
      })
    }),
    //分段专题图过滤条件数组
    classBreakInfos: [{
      // 最大过滤范围,field对应的值小于maxValue
      maxValue: "最大范围",
      // 最小过滤范围,field对应的值大于等于minValue
      minValue: "最小范围",
      // 匹配到该值后的样式
      // 因为该数据的几何类型为区,因此设置区样式
      symbol:  new SimpleFillSymbol({
        // 填充颜色
        color: 'rgba(1,1,252,1)',
        // 线符号样式
        outline: new SimpleLineSymbol({
          //线符号颜色
          color: new Color(255, 1, 0, 1),
          //线宽
          width: 1
        })
      })
    }]
  })

统一专题图

// ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
const { SimpleRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSVectorTileLayer,SimpleRenderer ,SimpleFillSymbol,SimpleLineSymbol,Color} from "@mapgis/webclient-commo
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/VectorTileServer',
  // 设置子图层专题图
  sublayers: [{
    // 子图层id
    id: '子图层id',
    // 设置渲染样式-统一专题图
    renderer: new SimpleRenderer({
    // 因为该数据的几何类型为区，因此设置区样式
    symbol: new SimpleFillSymbol({
      // 填充颜色
      color: new zondy.Color(255, 0, 0),
      // 外边线样式
      outline: new SimpleLineSymbol({
        // 线颜色
        color: new Color(0, 0, 0),
        // 线宽度
        width: 1
      })
    })
  })
  }]
})