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

    },
...

巴特西

Vue2+Cesium1.9+热力图开发笔记

最新文章

热门文章