cesium实现热力图的加载

最新推荐文章于 2024-06-22 19:10:00 发布

依赖_赖

最新推荐文章于 2024-06-22 19:10:00 发布

阅读量1k

点赞数 1

分类专栏：图表及地图相关文章标签： javascript cesium

本文链接：https://blog.csdn.net/weixin_39150852/article/details/123663420

版权

图表及地图相关专栏收录该内容

26 篇文章 25 订阅

订阅专栏

该博客介绍了如何在Cesium中创建和删除热力图，通过加载数据并利用turf.js进行地理处理，然后使用CesiumHeatmap.js绘制热力图。数据格式包含经纬度、颜色和计数信息，热力图加载方法包括数据处理、颜色分配和矩形边界计算。此外，还提供了数组对象的升序排序函数。

摘要由CSDN通过智能技术生成

初始化地图并引入turf.js和CesiumHeatmap.js
turf用法：https://editor.csdn.net/md/?articleId=116758542
Cesium基本使用：https://editor.csdn.net/md/?articleId=118760306
CesiumHeatmap.js下载：https://download.csdn.net/download/weixin_39150852/85018824

数据格式

data=  [{"color":"#20B2AA","lng":113.3511288,"lat":22.9633233,"cellID":null},{"color":"#20B2AA","lng":113.3511288,"lat":22.9631144,"cellID":null},{"color":"#20B2AA","lng":113.3511288,"lat":22.9629055,"cellID":null},{"color":"#20B2AA","lng":113.3516685,"lat":22.9626966,"cellID":null},{"color":"#20B2AA","lng":113.3514886,"lat":22.9624877,"cellID":null},{"color":"#ADFF2F","lng":113.3556263,"lat":22.9622788,"cellID":null},{"color":"#20B2AA","lng":113.3531077,"lat":22.9620699,"cellID":null},{"color":"#00FF00","lng":113.3550866,"lat":22.9612343,"cellID":null},{"color":"#32CD32","lng":113.3439328,"lat":22.9608165,"cellID":null},{"color":"#00FF00","lng":113.345372,"lat":22.9603987,"cellID":null},{"color":"#20B2AA","lng":113.3455519,"lat":22.9603987,"cellID":null},{"color":"#32CD32","lng":113.3473509,"lat":22.9603987,"cellID":null},{"color":"#32CD32","lng":113.3455519,"lat":22.9601898,"cellID":null},{"color":"#20B2AA","lng":113.3450122,"lat":22.9599809,"cellID":null},{"color":"#20B2AA","lng":113.3451921,"lat":22.9599809,"cellID":null},{"color":"#20B2AA","lng":113.3455519,"lat":22.959772,"cellID":null},{"color":"#00FFFF","lng":113.3475308,"lat":22.959772,"cellID":null},{"color":"#00FFFF","lng":113.3477107,"lat":22.959772,"cellID":null},{"color":"#20B2AA","lng":113.3478906,"lat":22.959772,"cellID":null},{"color":"#20B2AA","lng":113.3484303,"lat":22.959772,"cellID":null},{"color":"#20B2AA","lng":113.3487901,"lat":22.959772,"cellID":null},{"color":"#20B2AA","lng":113.3455519,"lat":22.9595631,"cellID":null},{"color":"#20B2AA","lng":113.3473509,"lat":22.9595631,"cellID":null},{"color":"#20B2AA","lng":113.3475308,"lat":22.9595631,"cellID":null},{"color":"#32CD32","lng":113.3477107,"lat":22.9595631,"cellID":null},{"color":"#20B2AA","lng":113.3484303,"lat":22.9595631,"cellID":null},{"color":"#20B2AA","lng":113.3486102,"lat":22.9595631,"cellID":null},{"color":"#00FFFF","lng":113.3487901,"lat":22.9595631,"cellID":null},{"color":"#20B2AA","lng":113.34897,"lat":22.9595631,"cellID":null},{"color":"#00FFFF","lng":113.3491499,"lat":22.9595631,"cellID":null},{"color":"#32CD32","lng":113.3464514,"lat":22.9593542,"cellID":null},{"color":"#32CD32","lng":113.3469911,"lat":22.9593542,"cellID":null},{"color":"#32CD32","lng":113.3478906,"lat":22.9593542,"cellID":null},{"color":"#32CD32","lng":113.3495097,"lat":22.9593542,"cellID":null},{"color":"#00FFFF","lng":113.3511288,"lat":22.9593542,"cellID":null},{"color":"#00FFFF","lng":113.3516685,"lat":22.9593542,"cellID":null},{"color":"#20B2AA","lng":113.3451921,"lat":22.9591453,"cellID":null},{"color":"#32CD32","lng":113.3468112,"lat":22.9591453,"cellID":null},{"color":"#32CD32","lng":113.3469911,"lat":22.9591453,"cellID":null},{"color":"#32CD32","lng":113.347171,"lat":22.9591453,"cellID":null},{"color":"#32CD32","lng":113.3478906,"lat":22.9591453,"cellID":null},{"color":"#32CD32","lng":113.3480705,"lat":22.9591453,"cellID":null},{"color":"#1E90FF","lng":113.3482504,"lat":22.9591453,"cellID":null},{"color":"#00FFFF","lng":113.3484303,"lat":22.9591453,"cellID":null},{"color":"#20B2AA","lng":113.3487901,"lat":22.9591453,"cellID":null},{"color":"#FFD700","lng":113.352568,"lat":22.9591453,"cellID":null},{"color":"#20B2AA","lng":113.3451921,"lat":22.9589364,"cellID":null},{"color":"#20B2AA","lng":113.347171,"lat":22.9589364,"cellID":null},{"color":"#20B2AA","lng":113.3473509,"lat":22.9589364,"cellID":null},{"color":"#32CD32","lng":113.3475308,"lat":22.9589364,"cellID":null}]

热力图加载方法

/**
 * 加载热力图
 */
export function drawHeatMap(list1) {
    // 获取颜色列表及数量
    let colorList = []
    list.forEach((t) => {
        let obj = colorList.find(c => c.color === t.color)
        if (obj) {
            obj.count++
        } else {
            colorList.push({
                count: 1,
                color: t.color
            })
        }
    });
    let colorList2 = colorList.sort(compare('count'))// 升序排序
    // 根据颜色总数赋值
    let data = [];
    list.forEach(t => {
        let x = Number(t.lng);
        let y = Number(t.lat);
        let value = colorList2.findIndex(c => c.color === t.color)
        data.push({x: x, y: y, value: value});
    })
    let arr = []
    //计算矩形坐标
    list.forEach(item => {
        arr.push([item.lng, item.lat])
    })
    const line = turf.lineString(arr);
    const bbox = turf.bbox(line);
    const bboxPolygon = turf.bboxPolygon(bbox);
    let bounds = {
        west: bboxPolygon.bbox[0],
        south: bboxPolygon.bbox[1],
        east: bboxPolygon.bbox[2],
        north: bboxPolygon.bbox[3],
    };
    // 初始化CesiumHeatmap
    let gradientObj = {}
    colorList2.forEach((c, i) => {
        gradientObj[(i + 1) / colorList2.length] = c.color
    })
    heatMap = CesiumHeatmap.create(
        getViewer(), // 视图层
        bounds, // 矩形坐标
        {
            // heatmap相应参数
            backgroundColor: "rgba(0,0,0,0)",
            radius: 70,
            maxOpacity: 0.5,
            minOpacity: 0,
            blur: 0.75,
            gradient: gradientObj,
        }
    );
    heatMap.setWGS84Data(0, colorList2.length, data);
    const viewer = getViewer()
    viewer.flyTo(viewer.entities, {
        duration: 3,
        offset: new Cesium.HeadingPitchRange(Cesium.Math.toRadians(45), Cesium.Math.toRadians(-25.0), 9000)
    });
}

/**
 * 数组对象升序排序
 * @param {*} prop： 排序的参数名
 * --------------------------------------------------------------------------------------------
 */
export function compare(prop) {
    return (obj1, obj2) => {
        let val1 = obj1[prop];
        let val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            val1 = Number(val1);
            val2 = Number(val2);
        }
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    }
}

/**
 * 删除热力图
 */
export function deleteHeatMap() {
    //删除热力图
    if (heatMap) {
        if (heatMap._layer instanceof Array) {
            heatMap._layer.forEach(p => {
                getViewer().entities.remove(p);
            })
        } else {
            getViewer().entities.remove(heatMap._layer);
        }
        heatMap = null;
    }
}