3D 热力图

当Map的视图模式为3D时，热力图也将展示为3D效果。

源代码编辑器

复制

运行

还原

          <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D热力图</title>
    <link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/bezier/bezier.css">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
            font-size: 13px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="graph">
    <h2>heightBezier:</h2>
    <input type="text" id="bezierInp" readonly="readonly"/>
    <figure>
        <canvas id="curve" width="210" height="550"></canvas>
        <figcaption id="axisHeat">热度</figcaption>
        <figcaption id="axisHeight">高度</figcaption>
    </figure>
</div>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.CustomLayer,AMap.ControlBar,AMap.Heatmap"></script>
<script src="https://a.amap.com/jsapi_demos/static/bezier/bezier.js"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        viewMode: '3D',
        pitch: 70,
        resizeEnable: true,
        center: [116.418261, 39.921984],
        zoom: 11.5
    });

    map.addControl(new AMap.ControlBar({}));

    var heatmapOpts = {
        //3d 相关的参数
        '3d': {
            //热度转高度的曲线控制参数，可以利用左侧的控制面板获取
            heightBezier: [0.4, 0.2, 0.4, 0.8],
            //取样精度，值越小，曲面效果越精细，但同时性能消耗越大
            gridSize: 2,
            heightScale: 1
        }
    };

    //初始化heatmap对象
    var heatmap = new AMap.Heatmap(map, heatmapOpts);

    heatmap.setDataSet({
        data: heatmapData,
        max: 100
    });

    //控制左侧的曲线控制面板
    (function () {

        var bezierInp = document.getElementById('bezierInp');

        function onBezierUpdate(val) {

            bezierInp.value = (val);

            heatmapOpts['3d'].heightBezier = val;

            if (heatmap) {
                heatmap.setOptions(heatmapOpts);
            }
        }

        bezierHelper.setBezier(heatmapOpts['3d'].heightBezier);

        bezierInp.value = (bezierHelper.getBezier());

        window.onBezierUpdate = onBezierUpdate;

    })();
</script>
</body>
</html>
        

控制台

清空

示例
中心常见
问题智能
客服