cesium加载热力图

首先，这个原理很简答也很直白，一句话就是使用heatmap.js生成热力图后将图贴到Cesium的相应位置。

1、下载heatmap.js，并在项目中引用。

地址是：https://github.com/pa7/heatmap.js
把项目zip下载下来找到build中的heatmap.js放到自己的项目中

image.png

2、使用heatmap.js创建热力图，CesiumHeatmap.vue代码：

<template>
    <div id="cesiumContainer">
        <div id="heatmap" v-show="false"></div>
    </div>
</template>

<script>
    import widget from 'cesium/Widgets/widgets.css'
    export default {
        name: 'CesiumHeatmap',
        components: {},
        data(){
            return{

            }
        },
        mounted(){
            var len = 300;
            var points = [];
            var max = 100;

            //热力图图片大小
            var width = 600;
            var height = 400;

            //点坐标的矩形范围
            var latMin = 28.364807;
            var latMax = 40.251095;
            var lonMin = 94.389228;
            var lonMax = 108.666357;

            //随机创建300个点（经度、纬度、热力值）
            var dataRaw = [];
            for (var i = 0; i < len; i++) {
                var point = {
                    lat: latMin + Math.random() * (latMax - latMin),
                    lon: lonMin + Math.random() * (lonMax - lonMin),
                    value: Math.floor(Math.random() * 100)
                };
                dataRaw.push(point);
            }

            //随机创建300个点（x、y、热力值）
            for (var i = 0; i < len; i++) {
                var dataItem = dataRaw[i];
                var point = {
                    x: Math.floor((dataItem.lat - latMin) / (latMax - latMin) * width),
                    y: Math.floor((dataItem.lon - lonMin) / (lonMax - lonMin) * height),
                    value: Math.floor(dataItem.value)
                };
                max = Math.max(max, dataItem.value);
                points.push(point);
            }

            var heatmapInstance = h337.create({
                container: document.querySelector('#heatmap')
            });

            var data = {
                max: max,
                data: points
            };

            heatmapInstance.setData(data);


            var viewer = new Cesium.Viewer('cesiumContainer',{
                imageryProvider: new Cesium.UrlTemplateImageryProvider({
                    url: 'http://localhost:8085/xyz/Satellite/{z}/{x}/{y}.jpg'
                })
            });

            viewer._cesiumWidget._creditContainer.style.display = "none";

            var canvas = document.getElementsByClassName('heatmap-canvas');
            viewer.entities.add({
                name: 'heatmap',
                rectangle: {
                    coordinates: Cesium.Rectangle.fromDegrees(lonMin, latMin, lonMax, latMax),
                    material: new Cesium.ImageMaterialProperty({
                        image: canvas[0],
                        transparent: true
                    })

                }
            });

            viewer.zoomTo(viewer.entities);
        },
        methods:{

        }
    }
</script>

<style scoped>
    #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #heatmap{
        width: 500px;
        height: 500px;
    }
</style>

3、效果

image.png