qe-heatmap-layer

热力图图层组件，主要用于三维绘制热力图。

---

实例

隐藏代码

<template>

  <div style="height: 450px;">
    <qe-viewer
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-primitive-layer>
        <qe-tileset
           url="http://221.226.186.58:8025/qearth-tileset/tileset.json"
          :isZoomTo="true"
        ></qe-tileset>
      </qe-primitive-layer>
      <qe-heatmap-layer :heatmap-data="heatmapData"></qe-heatmap-layer>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QePrimitiveLayer, QeTileset, QeHeatmapLayer } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'

export default {
  components: {
    QeViewer, 
    QePrimitiveLayer,
    QeTileset,
    QeHeatmapLayer
  },
  data () {
    return {
      markers:[],
      defaultView: [
        122.06502636, 
        40.7235578,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      heatmapData: [],
      heatmapOptions: {}
    };
  },
  created() {
  this.heatmapData = this._generatePosition(100);
  },
  methods: {
     _generatePosition(num) {
      const list = [];
      for (let i = 0; i < num; i++) {
        const lng = 122.05902636 + Math.random() * 0.005;
        const lat = 40.7415578 + Math.random() * 0.005;
        const count = Math.random() * 100;
        list.push({
          lng,
          lat,
          count
        });
      }
      return list;
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
heatmapData	热力图数据，格式:[{lng,lat,count},...]	string	—	—
heatmapOptions	热力图渲染可选参数	string	heatmapOptions-说明	—
name	图层名称	string	—	—
id	图层唯一 id 不设置会自动生成	string	—	—
visible	图层是否可见	boolean	—	true
minZoom	图层最小层级，低于最小层级则不显示	Number	—	0
maxZoom	图层最大层级，超过则不显示	Number	—	25
layerOptions	图层其他可选参数	object	—	—

heatmapOptions-说明

// 更多参数的设置参照官方文档：https://www.patrick-wied.at/static/heatmapjs/docs.html
{
  maxOpacity: 0.8, // the maximum opacity used if not given in the heatmap options object
  minOpacity: 0.1, // the minimum opacity used if not given in the heatmap options object
  blur: 0.85, // the blur used if not given in the heatmap options object
  maxCanvasSize: 2000,
  minCanvasSize: 700,
  max:50,//最大值
  min:0,//最小值
  radius: 25,
  gradient: {
    0.25: "rgb(0,0,255)",
    0.55: "rgb(0,255,0)",
    0.85: "yellow",
    1.0: "rgb(255,0,0)"
  }
}

查询坐标对应值

this.heatmap.getValueAt(e.cartographic._lng, e.cartographic._lat)

Events

覆盖物事件的使用请参照上面HeatmapLayer 实例

---

// 图层可选事件
"ready" // 组件装载后，返回当前实例对象