zoukankan      html  css  js  c++  java
  • 调用高德地图API(热力图)详解

    具体脚本语言如下:

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>热力图</title>
        <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
        <script src="https://webapi.amap.com/maps?v=1.4.9&key=您申请的key值"></script>
        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
        <script type="text/javascript" src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
    </head>
    <body>
    <div id="container"></div>
    <div class="button-group">
        <input type="button" class="button" value="显示热力图" onclick="heatmap.show()"/>
        <input type="button" class="button" value="关闭热力图" onclick="heatmap.hide()"/>
    </div>
    <script>
        var map = new AMap.Map("container", {
            resizeEnable: true,
            center: [116.418261, 39.921984],
            zoom: 11
        });
        var points=[
    {"lng":"116.32497","lat":"39.96696"},
    {"lng":"116.616","lat":"40.053016"},
    {"lng":"116.34324","lat":"39.95056"},
    {"lng":"116.554131","lat":"39.912131"},
    {"lng":"116.3483","lat":"39.83151"},
    {"lng":"116.36619","lat":"39.75298"}
        ];
        if (!isSupportCanvas()) {
            alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
        }
        //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
        //参数说明如下:
        /* visible 热力图是否显示,默认为true
         * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
         * radius 势力图的每个点的半径大小   
         * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
         *	{
         .2:'rgb(0, 255, 255)',
         .5:'rgb(0, 110, 255)',
         .8:'rgb(100, 0, 255)'
         }
         其中 key 表示插值的位置, 0-1 
         value 为颜色值 
         */
        var heatmap;
        map.plugin(["AMap.Heatmap"], function() {
            //初始化heatmap对象
            heatmap = new AMap.Heatmap(map, {
                radius: 25, //给定半径
                opacity: [0, 0.8]
                /*,gradient:{
                 0.5: 'blue',
                 0.65: 'rgb(117,211,248)',
                 0.7: 'rgb(0, 255, 0)',
                 0.9: '#ffea00',
                 1.0: 'red'
                 }*/
            });
            //设置数据集:该数据为北京部分“公园”数据
            heatmap.setDataSet({
                data: points,
                max: 100
            });
        });
        //判断浏览区是否支持canvas
        function isSupportCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        }
    </script>
    </body>
    </html>
    

    大家将上述代码存在一个html文件中,然后通过网页打开即可。

    其中只需要注意

    heatmap.setDataSet({
                data: points,
                max: 1
            }
    

    中的data:后面的points是你自己的数据,即在之前定义的json格式经纬度

    var points=[
    {"lng":"116.32497","lat":"39.96696"},
    {"lng":"116.616","lat":"40.053016"},
    {"lng":"116.34324","lat":"39.95056"},
    {"lng":"116.554131","lat":"39.912131"},
    {"lng":"116.3483","lat":"39.83151"},
    {"lng":"116.36619","lat":"39.75298"}
        ];
    

    还有就是max的值(即最红区域对应的次数值)选取自己觉得合适的,不然太小会几乎一片红色,太大几乎看不到热力图颜色。

    在这里给大家福利一个将各种格式转为json文件的小方法:
    https://www.bejson.com/json/col2json/

  • 相关阅读:
    zookeeper使用场景
    zookeeper安装配置
    hadoop 远程调试
    deep learning笔记
    Sentiment Analysis(1)-Dependency Tree-based Sentiment Classification using CRFs with Hidden Variables
    PRML阅读笔记 introduction
    Python 学习笔记(2)
    python nltk 学习笔记(5) Learning to Classify Text
    python nltk 学习笔记(4) Writing Structured Programs
    python nltk 学习笔记(3) processing raw text
  • 原文地址:https://www.cnblogs.com/wujingqiao/p/9482026.html
Copyright © 2011-2022 走看看