Vue+Openlayers创建热力图

• Vue+Openlayers创建热力图,参考文档学习地址
• https://www.jianshu.com/p/3cd6f6439512
• openlayers: https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html
• 直接看代码 initMap() 方法
  

<template>
  <section>
    <!-- 地图展示 -->
    <common-map
            ref="map"
            :district-layer="false"
            :street-layer="false"
            :comm-layer="false"
            :unit-layer="false"
            :work-layer="false"
            :duty-layer="false"
            style="height: calc(100vh - 100px)">
    </common-map>
    <area-bar :map="map"
              @get-area-score-point="getAreaScorePoint">
    </area-bar>
  </section>
</template>

<script>
import { commandMapMixin } from '../mixins/commandMapMixin'
import areaBar from './area-bar'
import umEventApi from '@questionApi/umEvent'
// import { Point } from 'ol/geom'
// import { Feature } from 'ol'
// import VectorSource from 'ol/source/Vector'
// import { Heatmap as HeatmapLayer } from 'ol/layer'
// import Map from 'ol/Map.js'
// import View from 'ol/View.js'
// import KML from 'ol/format/KML.js'
import VectorSource from 'ol/source/Vector.js'
import { Heatmap as HeatmapLayer } from 'ol/layer.js'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
// import {fromLonLat} from 'ol/proj'
// import VectorSource from 'ol/source/Vector.js'
// import { transform } from 'ol/proj'
// import GeoJSON from 'ol/format/GeoJSON'

export default {
  name: 'command-area-index',
  mixins: [commandMapMixin],
  components: {
    areaBar
  },
  data() {
    return {
      PostPointDatail: '',
      PointDatailList: '',
      showPointDetail: false,
      currentTab: 'area',
      selectionCase: [],
      showSelectionCase: false,
      treeLoading: false,
      listQuery: {
        page: true,
        params: []
      },
      caseSetList: [],
      center: [118.281041, 33.962096],
      // 热力图假数据
      heatData: {
        type: 'FeatureCollection',
        features: [
          { type: 'Point', 'coordinates': [118.281041, 33.962096], count: 100 },
          { type: 'Point', 'coordinates': [118.299685, 34.004628], count: 19 },
          { type: 'Point', 'coordinates': [118.2833, 33.960444], count: 419 }
        ]
      },
      heatMapLayer: null
    }
  },
  computed: {
  },
  created() {
  },
  mounted() {
    this.map = this.$refs.map.map
    this.initMap(this.heatData)
    // this.addHeatMap()
  },
  methods: {
    initMap(heatData) {
      // 新生成图层源,用于存放热力图图层
      const source = new VectorSource({})
      const features = []
      heatData.features.forEach((item) => {
        const feature = new Feature({
          geometry: new Point(item.coordinates),
          weight: item.count
        })
        source.addFeature(feature)
        // features.push(feature)
      })
      source.addFeatures(features)
      // 创建一个热力图层
      this.heatMapLayer = new HeatmapLayer({
        source,
        blur: 20, // 模糊尺寸
        radius: 20, // 热点半径
        weight: (feature) => {
          const count = Number(feature.get('weight')) // 获取feature的weight参数值
          const magnitude = count / 1
          return magnitude
        },
        zIndex: 99999999
      })

      console.log('热力图加载中------------', this.heatMapLayer)
      this.map.addLayer(this.heatMapLayer) // 将热力图添加在地图上
      console.log('热力图加载成功!!!!!!!!!!')
    },
    clear() {
      this.map.removeLayer(this.heatLayer) // 将热力图从地图上移除
    },
    // addHeatMap() {
    //   const data = [
    //     {
    //       'total': 69,
    //       'address': '',
    //       'lng': '118.281041',
    //       'idle': 56,
    //       'contactName': '',
    //       'busy': 13,
    //       'name': '豪域西巷（洪泽湖路至骆马湖路）',
    //       'keyId': '117',
    //       'contactPhone': '',
    //       'lat': '33.962096'
    //     }, {
    //       'total': 69,
    //       'address': '',
    //       'lng': '118.294699',
    //       'idle': 62,
    //       'contactName': '',
    //       'busy': 7,
    //       'name': '黄河路（八一路至洪泽湖路）西',
    //       'keyId': '60',
    //       'contactPhone': '',
    //       'lat': '33.959553'
    //     }, {
    //       'total': 67,
    //       'address': '',
    //       'lng': '118.274658',
    //       'idle': 54,
    //       'contactName': '',
    //       'busy': 13,
    //       'name': '\t浦东路（发展大道至人民大道）',
    //       'keyId': '57',
    //       'contactPhone': '',
    //       'lat': '33.934377'
    //     }, {
    //       'total': 58,
    //       'address': '',
    //       'lng': '118.276189',
    //       'idle': 58,
    //       'contactName': '',
    //       'busy': 0,
    //       'name': '发展大道（深圳路至汕头路）东',
    //       'keyId': '87',
    //       'contactPhone': '',
    //       'lat': '33.92138'
    //     }, {
    //       'total': 56,
    //       'address': '',
    //       'lng': '0',
    //       'idle': 24,
    //       'contactName': '',
    //       'busy': 32,
    //       'name': '洪泽湖路（世纪大道至迎宾大道）南侧',
    //       'keyId': '38',
    //       'contactPhone': '',
    //       'lat': '0'
    //     }, {
    //       'total': 54,
    //       'address': '',
    //       'lng': '118.278193',
    //       'idle': 37,
    //       'contactName': '',
    //       'busy': 17,
    //       'name': '发展大道（洞庭湖路至微山湖路）西',
    //       'keyId': '86',
    //       'contactPhone': '',
    //       'lat': '33.954016'
    //     }, {
    //       'total': 54,
    //       'address': '',
    //       'lng': '118.292301',
    //       'idle': 24,
    //       'contactName': '',
    //       'busy': 30,
    //       'name': '饮马堤路（项王路至杨公路）西',
    //       'keyId': '179',
    //       'contactPhone': '',
    //       'lat': '33.939144'
    //     }, {
    //       'total': 54,
    //       'address': '',
    //       'lng': '118.295568',
    //       'idle': 35,
    //       'contactName': '',
    //       'busy': 19,
    //       'name': '黄河路（城北路至宿支路）西',
    //       'keyId': '135',
    //       'contactPhone': '',
    //       'lat': '33.974985'
    //     }, {
    //       'total': 54,
    //       'address': '',
    //       'lng': '118.331987',
    //       'idle': 19,
    //       'contactName': '',
    //       'busy': 35,
    //       'name': '江山大道（洪泽湖路至五台山路）东',
    //       'keyId': '77',
    //       'contactPhone': '',
    //       'lat': '33.95569'
    //     }, { // 118.302559,34.052019
    //       'total': 300,
    //       'lng': '118.302559',
    //       'lat': '34.052019',
    //       'idle': 43,
    //       'keyId': '85'
    //     }, { // 118.299685,34.004628
    //       'total': 10,
    //       'lng': '118.299685',
    //       'lat': '34.004628',
    //       'idle': 35,
    //       'busy': 16,
    //       'keyId': '86'
    //     }, { // 118.272664,34.009895
    //       'total': 10,
    //       'lng': '118.272664',
    //       'lat': '34.009895',
    //       'idle': 35,
    //       'busy': 16,
    //       'keyId': '87'
    //     }, { // 118.241331,33.960205
    //       'total': 10,
    //       'lng': '118.241331',
    //       'lat': '33.960205',
    //       'idle': 35,
    //       'busy': 16,
    //       'keyId': '88'
    //     }, { // 118.228539,33.953617
    //       'total': 10,
    //       'lng': '118.228539',
    //       'lat': '33.953617',
    //       'idle': 35,
    //       'busy': 16,
    //       'keyId': '88'
    //     }, { // 118.259872,33.952898
    //       'total': 10,
    //       'lng': '118.259872',
    //       'lat': '33.952898',
    //       'idle': 35,
    //       'busy': 16,
    //       'keyId': '88'
    //     }, { // 118.24399,33.905751
    //       'total': 10,
    //       'lng': '118.24399',
    //       'lat': '33.905751',
    //       'idle': 35,
    //       'busy': 16,
    //       'keyId': '88'
    //     }, { // 118.18039,33.948826
    //       'total': 10,
    //       'lng': '118.18039',
    //       'lat': '33.948826',
    //       'idle': 35,
    //       'busy': 16,
    //       'keyId': '88'
    //     }
    //     ]
    //   // 热力图
    //   const option = {
    //     blur: 20,
    //     radius: 20,
    //     weightCallBack: (e) => { return Number(e.get('data')['total']) } // 70
    //   }
    //
    //   const createFeature = (e) => {
    //     return new Feature({
    //       geometry: new Point(e.lnglat || [e.lng, e.lat] || e.position),
    //       data: e
    //     })
    //   }
    //
    //   const features = []
    //
    //   for (const i in data) {
    //     features.push(createFeature(data[i]))
    //   }
    //   const source = new VectorSource({})
    //   source.addFeatures(features)
    //
    //   this.heatMapLayer = new HeatmapLayer({
    //     source: source,
    //     blur: option.blur || 5,
    //     radius: option.radius || 10,
    //     weight: (e) => {
    //       if (option.weightCallBack) {
    //         return option.weightCallBack(e)
    //       }
    //     },
    //     zIndex: 9999999
    //   })
    //
    //   this.map.addLayer(this.heatMapLayer)
    // },
    /**
     * @Description 点击评价回调
     * @Date 2019/11/18 16:17
     */
    getAreaScorePoint(feature, event) {
      this.$router.push({
        path: '/strategy/evaluation/evaluate/area'
      })
    },
    /**
     * @Description 监听地图鼠标移动事件
     * @Date 2019/11/18 15:04
     */
    pointerMove(event) {
      const feature = this.map.getClickFeature(event)
      if (feature !== undefined && feature.get('target') === 'area_score') {
        this.layerMap.getTargetElement().style.cursor = 'pointer'
      } else {
        this.layerMap.getTargetElement().style.cursor = 'auto'
      }
    },
    /**
     * @Date: 2019-11-04 18:08:40
     * @description: pointDetail组件通信获取搜索到=出来的兴趣点list
     */
    handleUpdataPointList(data) {
      this.PointDatailList = data
    },
    /**
     * @date 2019/03/28 09:38:06
     * @Description: 查询案件
     */
    handleLoadAndQuery() {
      this.listQuery.params = []
      this.listQuery.params.push(
              {
                key: 'position',
                value: this.caseQuery.position.trim(),
                cond: 'like'
              },
              {
                key: 'caseTitle',
                value: this.caseQuery.search_key.trim(),
                cond: 'like'
              })

      if (this.caseQuery.areaCode !== '-1') {
        this.listQuery.params.push(
                {
                  key: 'areaCode',
                  value: this.caseQuery.areaCode,
                  cond: 'like'
                })
      }

      if (this.caseQuery.caseSet !== '-1') {
        this.listQuery.actDefId = this.caseQuery.caseSet
      } else {
        delete this.listQuery.actDefId
      }

      const { current, limit } = this.page
      const listQuery = Object.assign({}, { current, limit }, this.listQuery)

      this.tableLoading = true

      umEventApi.listEventData(listQuery)
              .then((ret) => {
                this.tableLoading = false

                this.dataCollection = ret.data
                this.page.total = ret.total

                const feature = this.createCaseFeature(ret.data)

                this.addLayerMapMarkers(feature, { isCluster: false })
              })
              .catch(() => {
                this.tableLoading = false
                this.dataCollection = []
              })
    },
    /**
     * @date 2019/04/02 11:16:29
     * @Description: 开始地图的框选
     */
    startMapSelect() {
      this.startLayerMapSelect((features) => {
        if (features.length > 0) {
          const rets = features.map((feature) => {
            return feature.get('id')
          })

          this.showSelectionCase = true
          this.selectionCase = rets
        }
      })
    }
  }
}
</script>