Echarts热力图和百度地图拓展

绝地灬酷狼 2022-04-17 07:06 534阅读 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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5zaXJiYms_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5zaXJiYms_size_16_color_FFFFFF_t_70]: /images/20220417/807d0dd05093432eb60bd6d862050106.png

发表评论取消回复

表情：

评论列表（有 0 条评论，534人围观）

还没有评论，来说两句吧...

相关阅读

相关 bMap+Echarts--百度地图使用方法

项目需求将客户添加的站点如下表示在百度地图上，[这是官网的示例][Link 1]，鼠标滑过显示基本信息，打了一些马赛克，凑合看，蓝色圆点都是添加的站点： ![在这里插入图片

迷南。/ 2023年07月25日 11:12/ 0 赞/ 64 阅读

相关 Echart基于百度地图实现地图飞线

echart社区例子都是基于geo底图实现的底图飞线，现实现基于在线地图实现地图飞线：原例子[ECharts Gallery - 模拟迁徙+百度地图 (makeapie.c

忘是亡心i/ 2022年12月25日 00:54/ 0 赞/ 342 阅读

相关百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></

电玩女神/ 2022年10月01日 03:58/ 0 赞/ 415 阅读

相关 eachart和百度地图

1. 添加百度地图插件 var bmap = myChart.getModel().getComponent(‘bmap’).getBMap(); b

向右看齐/ 2022年06月10日 10:15/ 0 赞/ 442 阅读

相关 echarts3 + 百度地图API展示自定义地图

　之前一篇echarts+百度地图API实现自定义底图后，这次测试提出了bug：地图上的点可点击，弹出地点信息。于是开始研究如何去掉底图可点的功能。上网搜索无果后，还是自己研究

电玩女神/ 2022年06月10日 10:10/ 0 赞/ 515 阅读

相关 echarts,map,百度地图扩展

echarts,map,百度地图扩展 > github：[https://github.com/Gladysgong/echarts-map][https_github.

谁践踏了优雅/ 2022年06月02日 08:57/ 0 赞/ 318 阅读

相关 HTML百度地图实例：google地图坐标和百度地图的相互转化

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=u

水深无声/ 2022年06月02日 01:20/ 0 赞/ 338 阅读

相关 echarts+百度地图

使用echarts实现百度地图功能（需要下载bmap.js）：效果图如下： ![70][] <!DOCTYPE html> <html>

Love The Way You Lie/ 2022年05月14日 20:44/ 0 赞/ 749 阅读

相关 Echarts热力图和百度地图拓展

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;

绝地灬酷狼/ 2022年04月17日 07:06/ 0 赞/ 535 阅读

相关 vue 百度地图气泡图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3

╰+哭是因爲堅強的太久メ/ 2021年10月01日 04:30/ 0 赞/ 702 阅读