# MapboxMvtImageryProvider

vc-provider-imagery-mapbox-mvt 组件用于加载矢量瓦片服务。

# 示例

# 通过mapbox的样式以矢量瓦片的形式来渲染图层，支持对要素的拾取，动态设置图层的样式。

# 预览

收起 
  <template>
    <div class="viewer">
      <vc-viewer @ready="ready">
      <vc-layer-imagery>
        <vc-provider-imagery-mapbox-mvt :mapStyle="mvtstyle">
        </vc-provider-imagery-mapbox-mvt>
      </vc-layer-imagery>
      </vc-viewer>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {  
          mvtstyle:{
            version: 8,
            sources: {
              Source_reg_buildings: {
                type: 'vector',
                tiles: ['http://192.168.5.226:7769/gisserver/rest/services/featureserver/vector/reg_buildings/{z}/{x}/{y}']
              }
            },
            layers: [
              {
                id: 'Layer_reg_buildings',
                source: 'Source_reg_buildings',
                'source-layer': 'reg_buildings',
                type: 'fill',
                paint: {
                  'fill-color': '#113549',
                  'fill-opacity': 0.7,
                  'fill-outline-color': '#969696'
                }
              }
            ]
          }   
        }
      },
      methods: {
        ready(cesiumInstance) {
        },
        readyPromise(imageryProvider) {
          const { Cesium, viewer } = this.cesiumInstance
          // viewer.flyTo(this.$refs.imageryProvider.providerContainer.imageryLayer)
          viewer.camera.flyTo({
            "destination":{"x":-1761705.0919927259,"y":6660041.15458946,"z":4076099.0992225125},"orientation":{"pitch":-1.5707810921155771,"heading":6.283185307179581,"roll":0},"duration":3
          })
          //this.addLeftClick();
        },
        selectedChanged(obj){
          console.log(obj)
        },
        changeStyle(){
          this.show=!this.show;
          return
          this.$refs.imageryProvider.imageryProvider.setPaintProperty("Layer_DLTB5101002018", 'fill-outline-color', this.getRandomColor());
        },
        //添加点击批次面
        addLeftClick() {
          let _this=this;
          const { Cesium, viewer } = this.cesiumInstance
          let selectHandle = new Cesium.ScreenSpaceEventHandler(
            viewer.scene.canvas
          );
          selectHandle.setInputAction(function (movement) {
            _this.infoShow=false;
            _this.featureData=[];
            var pickRay = viewer.camera.getPickRay(movement.position);
            var featuresPromise = viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
            if (!Cesium.defined(featuresPromise)) {
              console.log('No features picked.');
            } else {
              Cesium.when(featuresPromise, function (features) {
                // console.log('点击获取属性1 --> Number of features: ', features.length);
                if (features.length > 0&&Object.keys(features[0].data).length>0) {
                  console.log('点击获取属性1 --> features: ', features);
                  let data=features[0].data;
                  for (let item of Object.keys(data)) {
                    _this.tableTitle=item;
                    for (let item2 of Object.keys(data[item])) {
                      for (let key of Object.keys(data[item][item2])) {
                        _this.featureData.push({
                          key:key,value:data[item][item2][key]
                        })
                      }
                    }
                  }
                  _this.infoShow=true;
                }
              });
              // Cesium.when(featuresPromise).then((features) => {
              //   console.log('点击获取属性1 --> Number of features: ', features.length);
              // })
              // featuresPromise.then(features => {
              //   console.log('点击获取属性1 --> Number of features: ', features.length);
              //   if (features.length > 0&&Object.keys(features[0].data).length>0) {
              //     console.log('点击获取属性1 --> features: ', features);
              //   }
              // })
            }
          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
      }
    }

  </script>

# 属性

属性名 类型 默认值 描述
mapStyle String/Object required 矢量瓦片mapbox的样式文件或者地址。
rectangle Object optional 图层的矩形范围,此矩形限制了影像可见范围。 结构：{ west: number, south: number, east: number, north: number }
tilingScheme Object optionalThe tiling scheme to use to divide the world into tiles. This parameter is ignored when accessing a tiled server.
ellipsoid Object optional参考椭球体
tileWidth Number 256 optional像元宽度。
tileHeight Number 256 optional像元高度。

# 方法

方法名 参数 描述
setPaintProperty property, value, subLayer 三个参数分别为渲染属性字段名，要设置的属性值和子图层（可选） 设置图层的渲染样式
setLayoutProperty property, value, subLayer 三个参数分别为布局属性字段名，要设置的属性值和子图层（可选） 设置图层的布局样式
setLayerVisibility visible 布尔值，设置图层的显隐，这里和设置父级layer的show属性类似 设置图层的可见性
setFilter filter, subLayer 三个参数分别为过滤条件和子图层（可选） 设置图层的过滤条件

# 事件

事件名 参数 描述
ready {Cesium, viewer} 该组件渲染完毕时触发，返回 Cesium 类, viewer 实例。
readyPromise ImageryProvider 当图层可用时触发, 返回 ImageryProvider 实例。

← OpenStreetMap影像 →