中地数码

# MVT样式图层

mapgis-mvt-style-layer

TIP

Mapbox GL JS Style:
Mapbox 矢量瓦片样式 MVT (opens new window)

# 属性

# mvtStyle

# mode

  • 类型: String

  • 非侦听属性 非 watch 属性

  • 默认值 merge

  • 描述: 样式显示模式 ['merge', 'add', 'set']

    • merge-合并. 在当前样式上合并 Mvt 样式，内部会自动对比图层进行覆盖

      mergeLayers(olds, news) {
  news = news || [];
  if (!olds) return [].concat(news);
  let merges = olds.map((layer) => {
    let find = news.find((l) => l.id === layer.id);
    return find && find.length > 0 ? find[0] : layer;
  });
  let unmerges = news.filter((layer) => {
    let find = merges.find((l) => l.id === layer.id);
    return find ? false : true;
  });
  return merges.concat(unmerges);
},
let mvtStyle = async compareStyle(mvtStyle) {
  let oldStyle = this.map.getStyle();
  let newStyle = await this.$_getStyleObject(mvtStyle);
  let style = {
    version: oldStyle.version || newStyle.version,
    sprite: oldStyle.sprite || newStyle.sprite,
    glyphs: oldStyle.glyphs || newStyle.glyphs,
    sources: { ...oldStyle.sources, ...newStyle.sources },
    layers: this.mergeLayers(oldStyle.layers, newStyle.layers);
  };
  return style;
},
this.map.setStyle(mvtStyle, { diff: true });

    • add-追加. 在当前样式上追加 Mvt 样式，内部会自动对比图层进行覆盖

      addLayers(olds, news) {
  news = news || [];
  if (!olds) return [].concat(news);
  let filters = olds.filter((layer) => {
    let find = news.find((l) => l.id === layer.id);
    return find ? false : true;
  });
  return filters.concat(news);
},
let mvtStyle = async compareStyle(mvtStyle) {
  let oldStyle = this.map.getStyle();
  let newStyle = await this.$_getStyleObject(mvtStyle);
  let style = {
    version: oldStyle.version || newStyle.version,
    sprite: oldStyle.sprite || newStyle.sprite,
    glyphs: oldStyle.glyphs || newStyle.glyphs,
    sources: { ...oldStyle.sources, ...newStyle.sources },
    layers: this.addLayers(oldStyle.layers, newStyle.layers);
  };
  return style;
},
this.map.setStyle(mvtStyle, { diff: true });

    • set-覆盖.

      this.map.setStyle(mvtStyle, { diff: true });

# 事件

# @added

  • 描述: 在矢量瓦片加载完毕后发送该事件
  • Payload { this }
    • this 当前组件自身引用

# 可见性控制 & 排序

# 可见性控制

原图 √ 存在专题图 - 显示 × 存在专题图 - 隐藏 √ 不存在专题图 - 显示 × 不存在专题图 - 隐藏
原图层 A 可见，透明度 为 0 不可见 可见 不可见
专题图层 A1 可见 不可见 不存在 不存在
专题图层 A2 可见 不可见 不存在 不存在
专题图层 A3 可见 不可见 不存在 不存在

# 场景模拟演示

武汉市

  1. 激活专题图 此时的场景是 激活专题图
    1. 武汉市(原图层) 可见透明度为 0
    2. 武汉市_单值专题图 可见
    3. 武汉市单值专题图线 可见
    4. 武汉市单值专题图注记 可见
  2. 隐藏专题图 - 将图层武汉市的可见性设置为不可见 此时的场景是 隐藏专题图
    1. themelayer.hide()

      由于专题图的可见性控制是通过专题图组件的 show/hide 方式进行控制的，因此调用 hide 方法生成 ["武汉市(不可见)","武汉市_单值专题图(不可见)","武汉市_单值专题图_线(不可见)","武汉市_单值专题图_注记(不可见)]

    2. 此时的场景是 mergeLayers(olds, news)
      1. olds = ["背景","mapgis-default-empty","武汉市_单值专题图","武汉市_单值专题图_线","武汉市_单值专题图_注记] 全部可见

        由于"背景","mapgis-default-empty"是默认内置图层， XXX_专题图是专题图控件维护的图层，MVT 组件本身不维护其内部的排序顺序。其内部顺序由维护它的组件独立维护。

      2. news = ["武汉市(不可见)" ]

        news 对应的就是 mvt 组件维护的内部的图层数组，需要内部维护顺序，同时如果存在外部的类似专题图控件之类的图层组件，需要按照对应组件的业务进行图层重排序和合并操作。

      3. 合并后的图层 ["背景","mapgis-default-empty","武汉市(不可见)","武汉市_单值专题图(不可见)","武汉市_单值专题图_线(不可见)","武汉市_单值专题图_注记(不可见)]
  3. 显示专题图 - 将图层武汉市的可见性设置为可见 此时的场景是

# 排序

由于 add set 的排序方式较为简单 属于基本的尾部追加和原始替换，本文重点讲解 merge 合并的排序方式

  1. 无专题图排序 图层 A -> 图层 B
  2. 有专题图排序
    1. 原始专题图排序 B b: C a: null C b: A a:

← Echarts →