Vue2+Cesium1.9+熱力圖開發筆記

1、安裝cesiumJS、heatmap、webpack插件依賴包:

yarn install/npm install

"dependencies": {
    ...
    "cesium": "^1.90.0",
    "heatmap.js": "^2.0.5"
    ...
},
"devDependencies": {
     ...
     "copy-webpack-plugin": "^5.0",
     "html-webpack-plugin": "3.2.0",
     ...
}

2、cesium目錄配置

項目是用vue-cli生成的，在vue.config.js中配置CesiumJS目錄:

'use strict'
const path = require('path')
...

function resolve(dir) {
  return path.join(__dirname, dir)
}

...

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

// console.log('cesiumSource->',cesiumSource)
// console.log('cesiumWorkers->',cesiumWorkers)
// console.log('__dirName->', __dirname)
// console.log('cesium', path.resolve(__dirname, cesiumSource))

module.exports = {
  publicPath: process.env.NODE_ENV === 'development' ? '/xxx' : './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: 8888,
    open: false,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
     ...
    }
  },
  configureWebpack: {
　　 ...
    resolve: {
      alias: {
        '@': resolve('src'),'cesium': path.resolve(__dirname, cesiumSource) //CesiumSource絕對路徑別名
      }
    },
    plugins:
       [
        new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
        new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
        new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
        new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers'}]),
        new webpack.DefinePlugin({
          CESIUM_BASE_URL: JSON.stringify('')
        })
      ],
  },
  ... 
}

項目頁面JS中這樣導包：

import * as Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

3、開發熱力圖

直接參考https://github.com/manuelnas/CesiumHeatmap

由於此插件不支持es6導入，需要改源碼（找了github上的其它支持es6 import方式導入的cesium熱力圖插件，存在一些未知的bug反而影響了開發效率，故還是自己整靠譜）

移除CesiumHeatmap.js中的h337源碼，直接在文件頭引入cesium和heatmap.js，如下：

import * as Cesium from 'cesium/Cesium'
import h337 from 'heatmap.js'

刪掉IIEF及相關匿名函數包裹代碼，直接暴露出CesiumHeatmap對象並導出，大致如下：

/**
 * 修改自https://github.com/manuelnas/CesiumHeatmap
 */
import * as Cesium from 'cesium/Cesium'
import h337 from 'heatmap.js'
/*
 *  CesiumHeatmap.js v0.1 | Cesium Heatmap Library
 *
 *  Works with heatmap.js v2.0.0: http://www.patrick-wied.at/static/heatmapjs/
 */
const CesiumHeatmap = {
  defaults: {
...
CesiumHeatmap.rad2deg = function(r) {
  var d = r / (Math.PI / 180.0)
  return d
}

/*  Initiate a CesiumHeatmap instance
 *  c:  CesiumWidget instance
 *  bb: a WGS84 bounding box like {north, east, south, west}
 *  o:  a heatmap.js options object (see http://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create)
 */
function CHInstance(c, bb, o) {
...

export default CesiumHeatmap

4、頁面中引入CesiumHeatmap並使用

把修改的cesiumHeatmap.js放入某個公共目錄下，如src/utils/gis下面。

vue中引入使用：

...
import CesiumHeatmap from '@/utils/gis/cesiumHeatmap.js'
...
addHeatmap() {
      const geojson = this.geojson
      const points = []
      let west = 1000; let east = -1000; let south = 1000; let north = -1000
      geojson.features.forEach(function(feature) {
        const lon = feature.geometry.coordinates[0]
        const lat = feature.geometry.coordinates[1]
        west = Math.min(west, lon)
        east = Math.max(east, lon)
        south = Math.min(south, lat)
        north = Math.max(north, lat)
        points.push({
          x: lon,
          y: lat,
          value: 1
        })
      })
      const bounds = {
        west,
        east,
        south,
        north
      }

      // init heatmap
      const heatMap = CesiumHeatmap.create(
        this.viewer,
        bounds,
        {
          minOpacity: 0.15,
          maxOpacity: 0.8,
          radius: 15,
          blur: 0.9,
          gradient: {
            '.7': '#546AA4',
            '.9': '#0DB212',
            '.95': '#D6CE3B',
            '.96': '#CC9C1B',
            '.998': '#DC0F2A'
          }
        }
      )

      const valueMin = 0
      const valueMax = 10
      heatMap.setWGS84Data(valueMin, valueMax, points)
      this.heatmap = heatMap
    },
...