矢量数据图层

vc-vector-layer 组件用于加载矢量数据地图，是对矢量树图层的一个集合展示。

示例

添加矢量数据图层到场景

预览

收起

  <template>
    <div class="viewer">
      <vc-viewer @ready="ready" :shouldAnimate="true">
        <vc-vector-map  :mapConfig="layerConfig">
        </vc-vector-map>
      </vc-viewer>
    </div>
  </template>

  <script>
    export default {
      data () {
        return {
          layerConfig: undefined
        }
      },
      methods: {
        ready (cesiumInstance) {
          this.cesiumInstance = cesiumInstance
          const {Cesium, viewer} = this.cesiumInstance
          viewer.scene.debugShowFramesPerSecond =true
          let _this = this
          this.layerConfig={
            sources:{
              "sourceid":{
                url:"/statics/SampleData/lineData/grid.json"
              }
            },
            layers:[
              {
                "source":"sourceid",
                 "filter":["!=","street","芳草街道"],
                  "style":{
                    "type":"fill",   
                    "fillColor":{
                      "base":"white",//默认设置，不可缺省
                      "filters":[//只做属性过滤,每个filter支持的过滤方式同stops中filter支持的过滤形式
                          {
                              "filter":["===","street","桂溪街道"],
                              "value":"#10069F"
                          },
                          {
                              "filter":["===","street","中和街道"],
                              "value":"#FF5C39"
                          }                         
                      ]
                    },//填充样式 颜色值，rgb，rgba,#fffff，hls的均可
                    "stroke":true,// 是否显示边框线
                    "strokeWidth":1,//边框粗细
                    "strokeColor": "rgb(0,150,243)",//边框颜色
                  }
              },
              {
                "source":"sourceid",
                 "filter":["!=","street","中和街道"],
                "style":{
                  "type":"text",
                  "text-Feild":"${name}" ,  
                  "labelColor":{
                    "base":"black",//默认设置，不可缺省
                    "filters":[//只做属性过滤,每个filter支持的过滤方式同stops中filter支持的过滤形式
                        {
                            "filter":["===","street","石羊街道"],
                            "value":"#10069F"
                        },
                        {
                            "filter":["===","street","锦华街道"],
                            "value":"#FF5C39"
                        }                         
                    ]
                  },//填充样式 颜色值，rgb，rgba,#fffff，hls的均可
                  "labelPixelOffset":{//文字的偏移量，单位是像素，x正方向向右，y正方向向上
                    "x": 5,
                    "y": -25
                },
                "labelStyle":0,//0,1,2分别是填充，边框和及填充也带有边框
                "strokeWidth":1,//边框粗细
                "strokeColor": "rgb(255,255,2)",//边框颜色
                "labelHorizontalOrigin": 0,//0,1,-1分别为中间、左、右水平对齐方式
                "labelVerticalOrigin": 0,//0,1,2,-1分别为中、下，baseline、上的垂直对齐方
                }
              }
            ]
          }
        },
      }
    }
  </script>

属性

属性名	类型	默认值	描述
mapConfig	Object	undefined	optional 指定图层的样式和数据源地址。
mapName	String	""	optional 指定图层名称。
mode	Number	0	optional 指定图层加载方式，0 是 dataSource,1 是 primitive 形式的。

---

事件

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