Echarts热力图和百度地图拓展

最新推荐文章于 2024-10-04 11:57:29 发布

翠花琳

最新推荐文章于 2024-10-04 11:57:29 发布

阅读量5.5k

点赞数 3

分类专栏： javascript Html 文章标签： Echarts热力图百度地图 Echarts热力图拓展

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/chensirbbk/article/details/84066421

版权

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="../Scripts/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A92LToAU0LvNAypkocsoGz8YSp9Aelku"></script>

<script src="../Scripts/Debug/echarts.js"></script>

<script src="../Scripts/Map/bmap/BMapCoordSys.js"></script>
<script src="../Scripts/Map/bmap/BMapModel.js"></script>
<script src="../Scripts/Map/bmap/BMapView.js"></script>
<script src="../Scripts/Map/bmap/bmap.js"></script>

<title>热力图功能示例</title>
</head>
<body>
<div id="container" style="width:300px; height:300px;"></div>
</body>
</html>

<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var data = [
[{
"coord": [120.14322240845, 30.236064370321],
"elevation": 21
}, {
"coord": [120.14280555506, 30.23633761213],
"elevation": 5
}, {
"coord": [120.14307598649, 30.236125905084],
"elevation": 30.7
}, {
"coord": [120.14301682797, 30.236035316745],
"elevation": 15.4
}, {
"coord": [120.1428734612, 30.236160551632],
"elevation": 1.6
}, {
"coord": [120.14200215328, 30.23595702204],
"elevation": 8.9
}, {
"coord": [120.14138577045, 30.236113748704],
"elevation": 18.4
}, {
"coord": [120.1400398833, 30.235973050702],
"elevation": 19
}, {
"coord": [120.13893453465, 30.23517220446],
"elevation": 12.6
}, {
"coord": [120.1382899739, 30.234062922977],
"elevation": 17.7
}, {
"coord": [120.13634057665, 30.233446752432],
"elevation": 24.5
}, {
"coord": [120.13413680453, 30.232112168844],
"elevation": 37.8
}, {
"coord": [120.13333353311, 30.232145779364],
"elevation": 48.7
}, {
"coord": [120.13306479103, 30.231759284837],
"elevation": 63.7
}, {
"coord": [120.13265960629, 30.231641351722],
"elevation": 32.3
}, {
"coord": [120.1327455782, 30.231430284343],
"elevation": 81.9
}, {
"coord": [120.13218153673, 30.230180120187],
"elevation": 114.1
}, {
"coord": [120.13170681763, 30.229925745619],
"elevation": 125.3
}, {
"coord": [120.13140700148, 30.229576173509],
"elevation": 128
}, {
"coord": [120.13119614803, 30.228996846637],
"elevation": 161.2
}, {
"coord": [120.13066649155, 30.228846445356],
"elevation": 176
}, {
"coord": [120.13023980134, 30.228226570416],
"elevation": 198.1
}, {
"coord": [120.12989250643, 30.228177899345],
"elevation": 213.1
}, {
"coord": [120.1297674531, 30.227895075522],
"elevation": 226.1
}, {
"coord": [120.12941575407, 30.228596968401],
"elevation": 244.8
}, {
"coord": [120.12900512996, 30.228293967376],
"elevation": 253.7
}, {
"coord": [120.1260081246, 30.225109979145],
"elevation": 160.7
}, {
"coord": [120.12428900347, 30.224907917069],
"elevation": 155.3
}, {
"coord": [120.1233608862, 30.224531990576],
"elevation": 167.9
}, {
"coord": [120.12328968155, 30.225342953599],
"elevation": 172.4
}, {
"coord": [120.12289821299, 30.22630750923],
"elevation": 164
}, {
"coord": [120.1226090834, 30.226410111043],
"elevation": 164.2
}, {
"coord": [120.12245512244, 30.226878337044],
"elevation": 156.5
}, {
"coord": [120.1221672377, 30.227216311881],
"elevation": 143.2
}, {
"coord": [120.12164622224, 30.227314672485],
"elevation": 140.4
}, {
"coord": [120.12131843541, 30.2278850071],
"elevation": 121
}, {
"coord": [120.12014167505, 30.227860326084],
"elevation": 99.6
}, {
"coord": [120.11982765304, 30.227656247151],
"elevation": 116.7
}]
];
//data = eval("("+data+")");
var points = [].concat.apply([], data.map(function (track) {
return track.map(function (seg) {
return seg.coord.concat([1]);
});
}));

var option = {
bmap: {
center: [120.13066322374, 30.240018034923],
zoom: 14,
roam: true,
mapStyle: {}
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
pointSize: 5,
blurSize: 6
}]
}
myChart.setOption(option);

// 获取百度地图实例，使用百度地图自带的控件
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
</script>

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论 4

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。