# 矢量数据图层
vc-vector-layer 组件用于加载矢量数据图层,需要设置数据源和数据加载的样式，在样式中可以设置属性的过滤以及计算，并且渲染参数也可以采用数据的属性值。目前仅支持geojson格式的数据。
# 示例
# 添加矢量数据图层到场景
# 预览
收起
<template>
<div class="viewer">
<vc-viewer @ready="ready" :shouldAnimate="true" >
<vc-vector-layer ref="layer1" :show="layerShow" :layerStyle="layerConfig" @selectedChanged="selectedEntityChanged" @unSelectedChanged="unSelectedChanged" :locationLayer="true" :mode="0" :layerSource="layerSource">
</vc-vector-layer>
<vc-vector-layer @selectedChanged="selectedEntityChanged" @unSelectedChanged="unSelectedChanged" :layerStyle="layerConfig1" :layerSource="layerSource1" >
</vc-vector-layer>
</vc-viewer>
<div class="demo-tool">
<el-button size="small" class="md-raised md-accent" @click="changeShow">切换显隐</el-button>
<el-button size="small" class="md-raised md-accent" @click="changeStyle">切换样式</el-button>
<el-button size="small" class="md-raised md-accent" @click="highlight">高亮或者移除高亮</el-button>
<el-button size="small" class="md-raised md-accent" @click="flyTo">定位</el-button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
layerConfig: undefined,
layerSource: undefined,
layerSource1: undefined,
layerShow:true,
layerConfig1: undefined,
count:0
}
},
methods: {
flyTo(){
this.$refs.layer1.flyTo()
},
highlight(){
if(this.count%2===0)
this.$refs.layer1.highLightFeature({street:"中和街道"},0)
else{
this.$refs.layer1.removeFeatureHightLight({street:"中和街道"},0)
}
this.count++
},
changeShow(){
this.layerShow=!this.layerShow
},
changeStyle(){
if(this.layerConfig.type==="line"){
this.layerConfig={
"type":"fill",
"fillColor":{
"base":"white",//默认设置，不可缺省
"filters":[//只做属性过滤,每个filter支持的过滤方式同stops中filter支持的过滤形式
{
"filter":["===","street","桂溪街道"],
"value":"#10069F"
},
{
"filter":["===","street","中和街道"],
"value":"#FF5C39"
}
]
},//填充样式 颜色值，rgb，rgba,#fffff，hls的均可
"stroke":false,// 是否显示边框线
"strokeWidth":1,//边框粗细
"strokeColor": "red",//边框颜色
"height":0,
"duration":3,
"extrudedHeight":{
"base":10,//默认设置，不可缺省
"filters":[//只做属性过滤,每个filter支持的过滤方式同stops中filter支持的过滤形式
{
"filter":["===","street","桂溪街道"],
"value":100
},
{
"filter":["===","street","中和街道"],
"value":500
}
]
},
"animation":{
"base":false,//默认设置，不可缺省
"filters":[//只做属性过滤,每个filter支持的过滤方式同stops中filter支持的过滤形式
{
"filter":["===","street","桂溪街道"],
"value":false
},
{
"filter":["===","street","中和街道"],
"value":false
}
]}
}
}else {
this.layerConfig={
"type":"fill",
"fillColor":"#FF5C39",//填充样式 颜色值，rgb，rgba,#fffff，hls的均可
"stroke":true,// 是否显示边框线
"strokeWidth":1,//边框粗细
"strokeColor": "rgb(0,150,243)",//边框颜色
}
}
},
selectedEntityChanged(id){
console.log("selected",id)
},
unSelectedChanged(id){
console.log("unSelected",id)
},
ready (cesiumInstance) {
this.cesiumInstance = cesiumInstance
const {Cesium, viewer} = this.cesiumInstance
viewer.scene.debugShowFramesPerSecond =true
let _this = this
this.layerConfig={
"type":"line",
"lineColor":{
"base":"white",//默认设置，不可缺省
"filters":[//只做属性过滤,每个filter支持的过滤方式同stops中filter支持的过滤形式
{
"filter":["===","street","桂溪街道"],
"value":"#10069F"
},
{
"filter":["===","street","中和街道"],
"value":"#FF5C39"
}
]
},//填充样式 颜色值，rgb，rgba,#fffff，hls的均可
"lineWidth":3,//边框粗细
"lineStyle": "solid",//边框颜色
}
this.layerSource="/statics/SampleData/lineData/grid.json"
this.layerSource1="/statics/SampleData/heatmapData/xx.json"
this.layerConfig1={
"type":"text",
"text-Feild":"'城市名称：'+${name}+'_'+Math.floor(${GDP})+'万元'" ,
"labelColor":{
"base":"black",//默认设置，不可缺省
"filters":[//只做属性过滤,每个filter支持的过滤方式同stops中filter支持的过滤形式
{
"filter":["<=","GDP",50],
"value":"#10069F"
},
{
"filter":[">","GDP",50],
"value":"#FF5C39"
}
]
},//填充样式 颜色值，rgb，rgba,#fffff，hls的均可
"labelPixelOffset":{//文字的偏移量，单位是像素，x正方向向右，y正方向向上
"x": 5,
"y": 5
},
"labelStyle":2,//0,1,2分别是填充，边框和及填充也带有边框
"strokeWidth":1,//边框粗细
"strokeColor": "rgb(255,255,2)",//边框颜色
"labelHorizontalOrigin": 0,//0,1,-1分别为中间、左、右水平对齐方式
"labelVerticalOrigin": 0,//0,1,2,-1分别为中、下，baseline、上的垂直对齐方
}
},
}
}
</script>
# 属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| layerStyle | Object | undefined | optional 指定图层的样式。 |
| layerSource | Object | undefined | optional 指定图层的数据源地址。 |
| filter | Array | undefined | optional 指定图层的过滤对象。 |
| layerName | String | "" | optional 指定图层名称。 |
| mode | Number | 0 | optional 指定图层加载方式，0 是 dataSource,1 是 primitive 形式的。 |
| show | Boolean | true | optional 是否显示图层 |
# 方法
| 方法名 | 参数 | 描述 |
|---|---|---|
| setDataSource | source | 设置数据源对象,比较大的数据源对象的时候建议采用此方法，避免 VUE 的大对象的监听引起的卡顿 |
| highLightFeature | filters,type | 设置高亮要素，其中 filters 为过滤数据的过滤属性对象，type 为过滤类型，1 为单个，0 为多个 |
| removeFeatureHightLight | filters,type | 移除高亮要素，其中 filters 为过滤数据的过滤属性对象，type 为过滤类型，1 为单个，0 为多个 |
# 事件
| 事件名 | 参数 | 描述 |
|---|---|---|
| ready | {Cesium, viewer} | 该组件渲染完毕时触发，返回 Cesium 类, viewer 实例。 |