热力图

vc-heatmap-layer 组件用于加载热力图，可指定生成热力图的数据字段，目前仅支持GEOJSON形式的数据，原理上通过 heatmap.js 实现。

示例

添加热力图到场景

预览

收起

  <template>
    <div class="viewer">
      <vc-viewer @ready="ready">
        <vc-heatmap-layer ref="heatMap"  feild="GDP"  :options="options" :source="data">
        </vc-heatmap-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="flyTo">定位</el-button>
      </div>
    </div>
  </template>

  <script>
    export default {
      data () {
        return {
          terrainProvider: null,
          bounds: {west: 0.0, south: 0.0, east: 0.0, north: 0.0},
          options: {
            backgroundColor: 'rgba(0,0,0,0)',
            gradient: {
              // enter n keys between 0 and 1 here
              // for gradient color customization
              '0.9': 'red',
              '0.8': 'orange',
              '0.7': 'yellow',
              '0.5': 'blue',
              '0.3': 'green'
            },
            // minCanvasSize: 10,
            // maxCanvasSize: 100,
            radius: 250,
            maxOpacity: 0.5,
            minOpacity: 0,
            blur: 0.75
          },
          data: undefined,
          min: 0,
          max: 0
        }
      },
      methods: {
        flyTo(){
            this.$refs.heatMap.flyTo()
        },
        changeShow(){
          Object.assign(this.options,{
             gradient: {
              '0.2': 'red',
              '0.4': 'orange',
              '0.6': 'yellow',
              '0.8': 'blue',
              '0.9': 'green'
            },
            radius: 50
          })
        },
        ready (cesiumInstance) {
          this.cesiumInstance = cesiumInstance
          const {Cesium, viewer} = this.cesiumInstance
          let _this = this
          _this.data='/statics/SampleData/heatmapData/xx.json' 
          this.flyTo()      
        }
      }
    }
  </script>

属性

属性名	类型	默认值	描述
type	Number	1	optional 指定热力图加载的 Cesium 对象类型，0: RectangleGeometry, 1: RectangleGraphics, 2: SingleTileImageryProvider。
options	Object	true	optional 指定热力图的 heatmap 参数。
source	Array	true	optional 指定热力图数据。
feild	String	""	optional 指定热力图数据使用的字段。

---

事件

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