高德地图 Javascript API 入门(七)

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

高德地图 Javascript API 入门(七)

热力图插件

简单例子

// 显示地图
var map=new AMap.Map("container",{
    resizeEnable:true,
    center:[116.397428, 39.90923],
    zoom:11
});
// 坐标点
var points =[
    {"lng":116.191031,"lat":39.988585,"count":100},
    {"lng":116.389275,"lat":39.925818,"count":60},
    {"lng":116.287444,"lat":39.810742,"count":200},
    {"lng":116.481707,"lat":39.940089,"count":30},
    {"lng":116.410588,"lat":39.880172,"count":200},
    {"lng":116.394816,"lat":39.91181,"count":10},
    {"lng":116.416002,"lat":39.952917,"count":150}
];
// 加载热力图插件
map.plugin(["AMap.Heatmap"],function () {
     var heatmap=new AMap.Heatmap(map,{
        radius:50
    });
    heatmap.setDataSet({
           data:points,
        max:100
       });
)};

预览

image

参数

AMap.Heatmap

构造函数 说明
AMap.Heatmap(map:Map,opts:HeatmapOptions) 构造一个热力图插件对象,map为要叠加热力图的地图对象,opts属性参考HeatmapOptions列表中的说明。

options

HeatmapOptions 类型 说明
radius Number 热力图中单个点的半径,默认:30,单位:pixel
gradient Object 热力图的渐变区间,热力图按照设置的颜色及间隔显示热力图,例:
{
0.4:'rgb(0, 255, 255)',
0.65:'rgb(0, 110, 255)',
0.85:'rgb(100, 0, 255)',
1.0:'rgb(100, 0, 255)'
}
其中 key 表示间隔位置,取值范围: [0,1],value为颜色值。默认:heatmap.js标准配色方案
opacity Array 热力图透明度数组,取值范围[0,1],0表示完全透明,1表示不透明,默认:[0,1]
zooms Array 支持的缩放级别范围,取值范围[3-18],默认:[3,18]

------
参考来源:http://lbs.amap.com/
作者:Yangfan

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看