MapGIS Client for JavaScript API

# new IGSVectorTileSubLayer(options)

参数:

示例

矢量瓦片三维注记

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

切换三维注记样式

// ES5引入方式
const { LabelClass } = zondy
// ES6引入方式
import { LabelClass } from "@mapgis/webclient-common"
// 初始化一个额外的图标DOM对象
const iconImage = new Image()
iconImage.src = '图片地址或者base64字符串'
// 获取矢量瓦片子图层
const sublayer = igsVectorTileLayer.findSublayerById('子图层id')
// 设置一个新的矢量瓦片三维注记参数
sublayer.labelingInfo = [
  new LabelClass({
    symbol: {
      // 填充颜色 rgba or 16进制颜色
      color: 'rgba(1,255,1,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
    }
  })
]