MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MCHMAP > initHeatMap 初始化热力图

initHeatMap 初始化热力图

*注意：如使用热力图功能，需引入如下文件：

"https://mhc.ixiera.com/mhc/Cesium-1.120/CesiumHeatmap.js"

1.初始化实例：initHeatMap(option, data, bounds, needTrans) ;

参数说明：

option(Object)：热力图配置。具体配置见实例。

data(Array)：热力图数据。 x：datapoint的经度；y：datapoint的纬度；value：datapoint的value。

bounds(Object)：热力图boundingbox范围。west(Number)：画布区域在地图上最西边的经度；south(Number)：最南边的纬度；east(Number)：最东边的经度；north(Number)：最北边的纬度；

needTrans(Boolean)：是否需要GCJ02(高德地图、腾讯地图、谷歌地图等)转换WGS84, 默认false

2.显示热力图

实例：MchCesium.showHeatmap();

3.隐藏热力图

实例：MchCesium.hideHeatmap();

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>0707热力图</title>
        <script src="https://mhc.ixiera.com/mhc/main.js"></script>
        <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
        <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
        <style type="text/css">
            #containerId{width: 100vw;height: 100vh;}
        </style>
    </head>
    <body>
        <div id="containerId"></div>
        <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/CesiumHeatmap.js"></script>
        <script type="text/javascript">
            // 初始化地图
            const view3D = MchCesium.init('containerId');
            
            // 配置数据
            const heatMapData = [ 
                 { x: 104.45926982311602, y: 31.833608860886198, value: 100 }, 
                 { x: 104.45925095013386, y: 31.834335363637414, value: 73 }, 
                 { x: 104.456136982311602, y: 31.826335363637414, value: 85 }, 
                 { x: 104.45965095013386, y: 31.820608860886198, value: 50 } ,
            ] 
            const bounds = { 
                west: 104.45465095013386, 
                east: 104.46436982311602, 
                south: 31.810608860886198, 
                north: 31.839335363637414 ,
            } 
            // 渲染热力图 
            MchCesium.initHeatMap({ radius: 50 }, heatMapData, bounds, false) 
            MchCesium.viewer.camera.flyTo({ 
                destination: Cesium.Rectangle.fromDegrees(bounds.west, bounds.south, bounds.east, bounds.north),
            }) 
        </script>
    </body>
</html>

效果展示：

本文档来自—MCHMAP 丨 地图引擎平台