Echarts热力图和百度地图拓展

最新推荐文章于 2024-03-16 20:31:59 发布
最新推荐文章于 2024-03-16 20:31:59 发布
阅读量5.3k 收藏 9
点赞数 3
分类专栏： javascript Html 文章标签： Echarts热力图 百度地图 Echarts热力图拓展
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chensirbbk/article/details/84066421
版权

<!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> 
    <!--百度Api申请的key-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A92LToAU0LvNAypkocsoGz8YSp9Aelku"></script>
    <!--echarts-->    
    <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
    评论
专栏目录
基于ECharts & 百度地图的热力图展示设计与实现
04-15
基于ECharts & 百度地图的热力图展示设计与实现
在echarts中使用百度地图扩展，实现在地图上叠加显示热力图
花铛
06-17 4559
需要申请百度地图ak; //引入百度地图，echarts和百度地图扩展bmap <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=VifdHexZT4WOMrFYCQUZGorpRNjiRHer"></script> <script src="node...
echarts+百度地图，值得收藏，微信web开发者工具
最新发布
m0_57472099的博客
03-16 773
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
使用Echart搭配百度地图创建某一地区热点图的注意点
知无涯
10-09 5147
使用echart搭配百度地图制作热点图,热点图图表报错,热点图不显示,热点图配合地图
使用 Echarts 和 Echarts 的百度地图扩展 bmap
花铛
09-02 7820
1.npm安装echarts：npm install echarts --save 2. 在main.js中引入echarts： import Echarts from 'echarts' Vue.prototype.echarts = Echarts Vue.use(Echarts) 安装百度地图：参照另一篇文章步骤。 在需要的组件中引入： import BMap from 'BMap' ...
百度Echarts热力图实例说明
孟美岐的博客
01-08 2612
https://www.echartsjs.com/examples/zh/editor.html?c=heatmap-bmap 原链接 下方直接贴代码 需要注意的是 bmap.js的引入（https://github.com/apache/incubator-echarts/blob/master/dist/extension/bmap.js） var data =eval("(" + da...
Echarts结合百度地图API绘制热力图
litexy
03-03 1万+
最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图，在将其与百度地图结合的过程中遇到了一些问题，现将其过程与解决方案记录下，以供日后参考。echarts中结合百度地图API的热力图demo：http://gallery.echartsjs.com/editor.html?c=xSJNKs7EX 使用步骤 1.引用echarts与百度地图扩展js文件 &amp;lt;!--引入百度地...
echarts使用百度地图扩展热力图
weixin_49219594的博客
03-08 1105
Examples - Apache ECharts 将以下代码复制到上面的连接上自己调试即可 $.get(ROOT_PATH + '/data/asset/data/hangzhou-tracks.json', function (data) { var points = [].concat.apply( [], data.map(function (track) { //共三个参数，前两个为热力图坐标位置，第三个为热力图热力指标数据 return track...
115Echarts - 热力图（Heatmap on Baidu Map Extension）
阿甘兄
05-05 822
效果图 源代码 app.title = '热力图与百度地图扩展'; $.get('data/asset/data/hangzhou-tracks.json', function (data) { var points = [].concat.apply([], data.map(function (track) { return track.map(function ...
在echarts中使用百度地图扩展，实现在地图上叠加显示栅格热力图
花铛
09-06 3384
思路：网格需要与接口返回的数据做匹配，拿到对应网格的value值来渲染热力。 data:function(){ return { //多边形覆盖物 plateOverlays:[], //栅格默认的参数 blockDefaultParams:{ southWest: { lng: 112.963588, la...
echarts3.8.4实现城市空气质量(结合百度地图bmap.js，小航哥)
dingpangxie3730的博客
02-01 1528
（小航哥自己实现的）为了事先地图效果，需要以下准备： 用百度地图作为地图，需要 1、bmap.min.js（下载地址https://github.com/ecomfe/echarts ，GitHub上echarts源代码中路径为 dist/extension/bmap.min.js） 2、百度的ak（自己申请，申请网址http://lbsyun.baidu.com/apico...
ECharts 百度地图扩展插件bmap.min.js，可以在百度地图上展现 点图，线图，热力图 等可视化。
07-02
ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。建议大家使用以百度地图为底图的形式，需要引入扩展插件bmap.min.js,扩展主要提供了跟 geo 一样的坐标系和底图的绘制
百度地图结合热力图
11-14
首先申请 百度地图的ak，注意将代码中的ak换为自己的ak，然后结合Echarts使用
echarts 地图类型热力图
05-14
根据地理区域数据的可视化，除了在地图上添加散点之外，我们也可以制作地图类型的热力图，详细介绍：https://blog.csdn.net/qq_36437172/article/details/106121650
echarts百度地图热力图踩坑后项目实践案例源文件
07-04
echarts百度地图热力图踩坑后项目实践案例源文件，解决了地图固定比例展示、地图样式、适配问题
Echarts结合百度地图实现省市区散点展示
11-12
公司要做数据大屏，Echart和百度地图的结合，实现利用百度地图的行政区划展示，在行政区区划中添加相应的Echarts散点图，散点图随地图放大和缩小，默认实景图，限制缩放等级，也可展示多个省市区划，代码注释详细，...
Echarts扩展百度地图实例
01-11
该项目包括echarts模块化包引入，echarts与百度地图实例的结合，最新数据点的动态闪烁等功能。
Echarts 页面多图自适应的解决办法
热门推荐
05-04 4万+
网上看到有不少人使用Echarts抽象出来的框架,实现自适应的效果代码:window.onresize  = option.chart.resize(), 这个代码基本是官网上的window.onresize = myCharts.resize();的翻版。 但在实际的应用中一个页面可能会有好几个Echarts图表，而使用window.onresize = option.chart.resize
knockout select绑定，选中默认值
04-02 1万+
$(function(){ var viewModel =function() { var self = this; self.departmentList = ko.observableArray([{"departmentID": "1","departmentName": "信息技术部"},{"departmentID": "2","departmentName": "财务部"}]
streamlit_echarts热力地图
09-07
streamlit_echarts是一个Python库，用于在Streamlit应用程序中显示ECharts图表。ECharts是一个使用JavaScript实现的开源可视化库，它可以使用各种图表类型和丰富的功能来展示数据。streamlit_echarts提供了一个方便的方式，使我们可以在Streamlit应用程序中轻松地嵌入ECharts图表，包括热力地图。使用streamlit_echarts，我们可以通过编写Python代码来创建和配置ECharts图表，然后使用streamlit_echarts库将它们展示在Streamlit应用程序中。这样我们就可以在一个交互性的Web应用程序中呈现和探索数据。streamlit_echarts提供了与Streamlit的集成，使我们可以在应用程序中显示动态和交互式的ECharts图表，包括热力地图。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值