| <!doctype html> |
| <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]--> |
| <!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="zh"><![endif]--> |
| <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="zh"><![endif]--> |
| <!--[if gt IE 8]><!--> <html class="no-js" lang="zh"><!--<![endif]--> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts 实现地图散点图(下) </title> |
| <meta name="description" content="作为国内良心开源软件的主页君,我们以后会为大家带来更多 ECharts 优质教程!本期,主页君邀请到了百度 EFE 美女前端工程师王说,为我们介绍如何在地图散点图。如果看得跃跃欲试,文末还有小作业,跟着主页君一起学 ECharts 吧!"> |
| <meta name="keywords" content="地图, 教程"> |
| |
| |
| |
| <!-- Open Graph --> |
| <meta property="og:locale" content="en_US"> |
| <meta property="og:type" content="article"> |
| <meta property="og:title" content="ECharts 实现地图散点图(下)"> |
| <meta property="og:description" content="作为国内良心开源软件的主页君,我们以后会为大家带来更多 ECharts 优质教程!本期,主页君邀请到了百度 EFE 美女前端工程师王说,为我们介绍如何在地图散点图。如果看得跃跃欲试,文末还有小作业,跟着主页君一起学 ECharts 吧!"> |
| <meta property="og:url" content="http://echarts.baidu.com/blog/2016/06/13/echarts-map-tutorial.html"> |
| <meta property="og:site_name" content=""> |
| |
| |
| |
| |
| |
| <link rel="canonical" href="http://echarts.baidu.com/blog/2016/06/13/echarts-map-tutorial.html"> |
| <link href="http://echarts.baidu.com/blog/feed.xml" type="application/atom+xml" rel="alternate" title=" Feed"> |
| |
| <!-- http://t.co/dKP3o1e --> |
| <meta name="HandheldFriendly" content="True"> |
| <meta name="MobileOptimized" content="320"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
| <!-- For all browsers --> |
| <link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/bootstrap.min.css"> |
| <link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/main.css"> |
| |
| <meta http-equiv="cleartype" content="on"> |
| |
| <!-- Load Modernizr --> |
| <script src="http://echarts.baidu.com/blog/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script> |
| |
| <!-- Icons --> |
| <!-- 16x16 --> |
| <link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.ico"> |
| <!-- 32x32 --> |
| <link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.png"> |
| <!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices --> |
| <link rel="apple-touch-icon-precomposed" href="http://echarts.baidu.com/blog/images/apple-touch-icon-precomposed.png"> |
| <!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini --> |
| <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://echarts.baidu.com/blog/images/apple-touch-icon-72x72-precomposed.png"> |
| <!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch --> |
| <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://echarts.baidu.com/blog/images/apple-touch-icon-114x114-precomposed.png"> |
| <!-- 144x144 (precomposed) for iPad 3rd and 4th generation --> |
| <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://echarts.baidu.com/blog/images/apple-touch-icon-144x144-precomposed.png"> |
| |
| </head> |
| |
| <body id="post" class="feature"> |
| |
| <!--[if lt IE 9]><div class="upgrade"><strong><a href="http://whatbrowser.org/">Your browser is quite old!</strong> Why not upgrade to a different browser to better enjoy this site?</a></div><![endif]--> |
| <nav class="navbar navbar-default navbar-fixed-top"> |
| <div class="container-fluid"> |
| <div class="navbar-header"> |
| <button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"> |
| <span class="sr-only">Toggle navigation</span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| <a href="http://echarts.baidu.com/index.html" class="navbar-brand"> |
| <img src="http://echarts.baidu.com/images/logo.png" alt="echarts logo" class="navbar-logo"> |
| </a> |
| </div> |
| <div id="navbar-collapse" class="collapse navbar-collapse"> |
| <ul class="nav navbar-nav navbar-left"> |
| <li id="nav-index"><a href="http://echarts.baidu.com/index.html">首页</a></li> |
| <li id="nav-doc" class="dropdown"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/feature.html">特性</a></li> |
| <li><a href="http://echarts.baidu.com/tutorial.html">教程</a></li> |
| <li><a href="http://echarts.baidu.com/api.html">API</a></li> |
| <li><a href="http://echarts.baidu.com/option.html">配置项手册</a></li> |
| <li><a href="http://echarts.baidu.com/faq.html">常见问题</a></li> |
| <li><a href="http://echarts.baidu.com/changelog.html">版本记录</a></li> |
| </ul> |
| </li> |
| <li id="nav-download" class="dropdown"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/download.html">下载</a></li> |
| <li><a href="http://echarts.baidu.com/download-theme.html">主题下载</a></li> |
| <li><a href="http://echarts.baidu.com/download-map.html">地图下载</a></li> |
| <li><a href="http://echarts.baidu.com/download-extension.html">扩展下载</a></li> |
| </ul> |
| </li> |
| <li id="nav-examples"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/examples.html">官方实例</a></li> |
| <li><a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">GL 实例</a></li> |
| </ul> |
| </li> |
| <li id="nav-community" class="active"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://gallery.echartsjs.com">GALLERY</a></li> |
| <li><a href="http://echarts.baidu.com/blog">博客</a></li> |
| </ul> |
| </li> |
| <li id="nav-tool"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/spreadsheet.html">表格工具</a></li> |
| <li><a href="http://ecomfe.github.io/echarts-map-tool/">地图数据在线工具</a></li> |
| <li><a href="http://echarts.baidu.com/theme-builder/">主题构建工具</a></li> |
| </ul> |
| </li> |
| <li id="nav-about"><a href="http://echarts.baidu.com/about.html">关于</a></li> |
| </ul> |
| <ul class="nav navbar-nav navbar-right"> |
| <li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="http://echarts.baidu.com/images/github.png" width="18"></a></li> |
| <li id="nav-2" class="0"><a href="http://echarts.baidu.com/echarts2/">2.0</a></li> |
| <li id="nav-homeen"><a href="https://ecomfe.github.io/echarts-doc/public/en/index.html">EN</a></li> |
| </ul> |
| </div> |
| </div> |
| </nav> |
| |
| |
| |
| <div class="entry-header"> |
| |
| <div class="entry-image"> |
| <img src="http://echarts.baidu.com/blog/images/post/2016-06-13-bmap-4.png" alt="ECharts 实现地图散点图(下)"> |
| </div><!-- /.entry-image --> |
| </div><!-- /.entry-header --> |
| |
| |
| <div id="post-main" role="main"> |
| <article class="hentry"> |
| <header class="header-title"> |
| <div class="header-title-wrap"> |
| <h1 class="entry-title">ECharts 实现地图散点图(下)</h1> |
| <h2><span class="entry-date date published"><time datetime="2016-06-13T00:00:00+08:00">2016-06-13</time></span></h2> |
| |
| </div><!-- /.header-title-wrap --> |
| </header> |
| <div class="entry-content"> |
| <p>上一篇我们介绍了如何使用 ehcarts 内置地图实现地图上绘制的散点图,这篇中,我们将讲解如何在百度地图上绘制散点图。</p> |
| |
| <h2 id="一初始准备">一、初始准备</h2> |
| |
| <p>首先要创建 html 和引入 ECharts 包,具体说明详见上篇:<a href="http://echarts.baidu.com/blog/2016/04/28/echarts-map-tutorial.html">ECharts 实现地图散点图(一)</a>。</p> |
| |
| <h2 id="二引入echarts百度地图扩展包">二、引入echarts百度地图扩展包</h2> |
| |
| <p>在 <a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap">github</a> 上下载 ECharts 扩展 bmap.js,放在 /extension/ 目录下,并引入 html 中:</p> |
| |
| <div class="language-html highlighter-rouge"><pre class="highlight"><code> <span class="cp"><!DOCTYPE html></span> |
| <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> |
| <span class="nt"><head></span> |
| <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span> |
| <span class="nt"><title></span>ECharts map Demo<span class="nt"></title></span> |
| <span class="nt"></head></span> |
| <span class="nt"><body></span> |
| <span class="nt"><div</span> <span class="na">id=</span><span class="s">"map-wrap"</span> <span class="na">style=</span><span class="s">"height: 500px;"</span><span class="nt">></span> |
| <span class="c"><!-- 这里以后是地图 --></span> |
| <span class="nt"></div></span> |
| <span class="nt"></body></span> |
| <span class="nt"><script </span><span class="na">src=</span><span class="s">"/dep/echarts.min.js"</span><span class="nt">></script></span> |
| |
| <span class="nt"><script </span><span class="na">src=</span><span class="s">"/extension/bmap.js"</span><span class="nt">></script></span> |
| |
| <span class="nt"></html></span> |
| |
| |
| </code></pre> |
| </div> |
| |
| <h2 id="三绘制地图">三、绘制地图</h2> |
| |
| <p>1.在 js 中,新建 ECharts 示例,并为其设置配置项 option:</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">bmapChart</span> <span class="o">=</span> <span class="nx">echarts</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'map-wrap'</span><span class="p">));</span> |
| |
| <span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="c1">// 这里是 ECharts 的配置项,接下来会说明</span> |
| <span class="p">}</span> |
| |
| <span class="nx">bmapChart</span><span class="p">.</span><span class="nx">setOption</span><span class="p">(</span><span class="nx">option</span><span class="p">);</span> |
| |
| |
| </code></pre> |
| </div> |
| |
| <p>2.添加百度地图:</p> |
| |
| <p>在 option 中添加 bmap 相关设置:</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">bmap</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="mf">116.307698</span><span class="p">,</span> <span class="mf">40.056975</span><span class="p">],</span> <span class="c1">// 中心位置坐标</span> |
| <span class="na">zoom</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="c1">// 地图缩放比例</span> |
| <span class="na">roam</span><span class="p">:</span> <span class="kc">true</span> <span class="c1">// 开启用户缩放</span> |
| <span class="p">}</span> |
| |
| <span class="p">}</span> |
| |
| </code></pre> |
| </div> |
| |
| <p>ECharts 将百度地图部分配置集成在了 bmap 中,包括:</p> |
| |
| <table> |
| <thead> |
| <tr> |
| <th>参数</th> |
| <th>说明</th> |
| <th>格式</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>center</td> |
| <td>中心点的百度坐标</td> |
| <td>坐标数组, 如:[116.307698, 40.056975]</td> |
| </tr> |
| <tr> |
| <td>zoom</td> |
| <td>初始缩放比</td> |
| <td>number</td> |
| </tr> |
| <tr> |
| <td>roam</td> |
| <td>是否允许用户缩放操作</td> |
| <td>boolean</td> |
| </tr> |
| <tr> |
| <td>mapStyle</td> |
| <td>地图自定义样式</td> |
| <td>object, 如:{ styleJson: […] }</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p>这样百度地图就加载到页面中了,这里显示百度地图的默认样式,稍后第四部分将为百度地图添加自定义样式的配置:</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2016-06-13-bmap-1.png" alt="百度地图1" /></p> |
| |
| <h2 id="四绘制散点图">四、绘制散点图</h2> |
| |
| <p>绘制散点图的方法与上篇中绘制散点图方法相同,需要修改的部分是,将散点图的坐标系 <code class="highlighter-rouge">coordinateSystem</code> 改成使用 bmap</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">myData</span> <span class="o">=</span> <span class="p">[</span> |
| |
| <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'海门'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">121.15</span><span class="p">,</span> <span class="mf">31.89</span><span class="p">,</span> <span class="mi">90</span><span class="p">]},</span> |
| <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'鄂尔多斯'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">109.781327</span><span class="p">,</span> <span class="mf">39.608266</span><span class="p">,</span> <span class="mi">120</span><span class="p">]},</span> |
| <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'招远'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">120.38</span><span class="p">,</span> <span class="mf">37.35</span><span class="p">,</span> <span class="mi">142</span><span class="p">]},</span> |
| <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'舟山'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">122.207216</span><span class="p">,</span> <span class="mf">29.985295</span><span class="p">,</span> <span class="mi">123</span><span class="p">]},</span> |
| <span class="p">...</span> |
| <span class="p">]</span> |
| |
| |
| <span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">bmap</span><span class="p">:</span> <span class="p">{</span> |
| <span class="p">...</span> |
| <span class="p">},</span> |
| <span class="na">visualMap</span><span class="p">:</span> <span class="p">{</span> <span class="c1">// 视觉映射组件</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'continuous'</span><span class="p">,</span> |
| <span class="na">min</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> |
| <span class="na">max</span><span class="p">:</span> <span class="mi">200</span><span class="p">,</span> |
| <span class="na">calculable</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> |
| <span class="na">inRange</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">color</span><span class="p">:</span> <span class="p">[</span><span class="s1">'#50a3ba'</span><span class="p">,</span><span class="s1">'#eac736'</span><span class="p">,</span><span class="s1">'#d94e5d'</span><span class="p">]</span> |
| <span class="p">},</span> |
| <span class="na">textStyle</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">color</span><span class="p">:</span> <span class="s1">'#fff'</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="nl">series</span><span class="p">:</span> <span class="p">[</span> |
| <span class="p">{</span> |
| <span class="na">name</span><span class="p">:</span> <span class="s1">'销量'</span><span class="p">,</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'scatter'</span><span class="p">,</span> |
| |
| <span class="na">coordinateSystem</span><span class="p">:</span> <span class="s1">'bmap'</span><span class="p">,</span> <span class="c1">// 坐标系使用bmap</span> |
| |
| <span class="na">data</span><span class="p">:</span> <span class="nx">myData</span> |
| <span class="p">}</span> |
| <span class="p">]</span> |
| <span class="p">}</span> |
| |
| </code></pre> |
| </div> |
| |
| <p>绘制散点后的百度地图:</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2016-06-13-bmap-2.png" alt="百度地图2" /></p> |
| |
| <h2 id="四-自定义百度地图样式">四、 自定义百度地图样式</h2> |
| |
| <p>地图的样式配置 <code class="highlighter-rouge">bmap.mapStyle</code> 中 <code class="highlighter-rouge">styleJson</code> 与百度地图内置的样式配置一致,具体参考百度地图API开发指南中 <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom">定制个性地图</a> 章节的介绍。</p> |
| |
| <p>这里我们设置一个较暗色调的地图,如下:</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">bmap</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="mf">116.307698</span><span class="p">,</span> <span class="mf">40.056975</span><span class="p">],</span> |
| <span class="na">zoom</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> |
| |
| <span class="na">roam</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 允许缩放</span> |
| |
| <span class="na">mapStyle</span><span class="p">:</span> <span class="p">{</span> <span class="c1">// 百度地图自定义样式</span> |
| <span class="na">styleJson</span><span class="p">:</span> <span class="p">[</span> |
| <span class="c1">// 陆地</span> |
| <span class="p">{</span> |
| <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"land"</span><span class="p">,</span> |
| <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"all"</span><span class="p">,</span> |
| <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span> |
| <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#073763"</span> |
| <span class="p">}</span> |
| <span class="p">},</span> |
| <span class="c1">// 水系</span> |
| <span class="p">{</span> |
| <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"water"</span><span class="p">,</span> |
| <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"all"</span><span class="p">,</span> |
| <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span> |
| <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#073763"</span><span class="p">,</span> |
| <span class="s2">"lightness"</span><span class="p">:</span> <span class="o">-</span><span class="mi">54</span> |
| <span class="p">}</span> |
| <span class="p">},</span> |
| <span class="c1">// 国道与高速</span> |
| <span class="p">{</span> |
| <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"highway"</span><span class="p">,</span> |
| <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"all"</span><span class="p">,</span> |
| <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span> |
| <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#45818e"</span> |
| <span class="p">}</span> |
| <span class="p">},</span> |
| <span class="c1">// 边界线</span> |
| <span class="p">{</span> |
| <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"boundary"</span><span class="p">,</span> |
| <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"all"</span><span class="p">,</span> |
| <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span> |
| <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#ffffff"</span><span class="p">,</span> |
| <span class="s2">"lightness"</span><span class="p">:</span> <span class="o">-</span><span class="mi">62</span><span class="p">,</span> |
| <span class="s2">"visibility"</span><span class="p">:</span> <span class="s2">"on"</span> |
| <span class="p">}</span> |
| <span class="p">},</span> |
| <span class="c1">// 行政标注</span> |
| <span class="p">{</span> |
| <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"label"</span><span class="p">,</span> |
| <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"labels.text.fill"</span><span class="p">,</span> |
| <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span> |
| <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#ffffff"</span><span class="p">,</span> |
| <span class="s2">"visibility"</span><span class="p">:</span> <span class="s2">"on"</span> |
| <span class="p">}</span> |
| <span class="p">},</span> |
| <span class="p">{</span> |
| <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"label"</span><span class="p">,</span> |
| <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"labels.text.stroke"</span><span class="p">,</span> |
| <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span> |
| <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#444444"</span><span class="p">,</span> |
| <span class="s2">"visibility"</span><span class="p">:</span> <span class="s2">"on"</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="p">]</span> |
| <span class="p">}</span> |
| <span class="p">},</span> |
| <span class="p">...</span> |
| <span class="p">}</span> |
| </code></pre> |
| </div> |
| |
| <p>实现效果如下图:</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2016-06-13-bmap-3.png" alt="百度地图3" /></p> |
| |
| <p>除了上述四个配置,其他地图设置都可以通过 <a href="http://lbsyun.baidu.com/index.php?title=jspopular">百度地图提供的API</a> 实现</p> |
| |
| <p>获取百度地图实例的方法如下:</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">bmap</span> <span class="o">=</span> <span class="nx">bmapCharts</span><span class="p">.</span><span class="nx">getModel</span><span class="p">().</span><span class="nx">getComponent</span><span class="p">(</span><span class="s1">'bmap'</span><span class="p">).</span><span class="nx">getBMap</span><span class="p">();</span> <span class="c1">// 百度地图实例</span> |
| |
| </code></pre> |
| </div> |
| |
| <p>例如,我们可以为地图添加一个缩放控件和一个比例尺:</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="nx">bmap</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="k">new</span> <span class="nx">BMap</span><span class="p">.</span><span class="nx">NavigationControl</span><span class="p">());</span> <span class="c1">// 缩放控件</span> |
| <span class="nx">bmap</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="k">new</span> <span class="nx">BMap</span><span class="p">.</span><span class="nx">ScaleControl</span><span class="p">());</span> <span class="c1">// 比例尺</span> |
| |
| </code></pre> |
| </div> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2016-06-13-bmap-4.png" alt="百度地图4" /></p> |
| |
| |
| <div class="entry-meta"> |
| <span class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#地图" title="Pages tagged 地图" class="tag">--> |
| <span class="term">地图</span> |
| <!--</a>--> |
| |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">--> |
| <span class="term">教程</span> |
| <!--</a>--> |
| |
| |
| </span> |
| </div> |
| |
| |
| </div><!-- /.entry-content --> |
| |
| <div class="container"> |
| <div class="read-more"> |
| <h3>更多相关信息</h3> |
| <div class="row"> |
| |
| |
| |
| |
| |
| <div class="col-md-4"> |
| <div class="read-more-post"> |
| <h4><a href="http://echarts.baidu.com/blog/2017/06/14/building-realistic-map-with-echarts-gl.html" title="在 ECharts GL 中绘制三维地图">在 ECharts GL 中绘制三维地图</a></h4> |
| <p>ECharts 前段时间发布了超亮眼的 GL,相对于之前已经圈粉无数的 ECharst-X 而言,ECharst GL 更是帅到爆,无论是性能、颜值、类型都有了巨大的飞跃。但是不是更易上手呢?答案是肯定的,用户除了能够根据数据画出诸如三维地图等三维的可视化图之外,只需要在项目中加入几个简单的配置项,就能配制出想要的风格的高质量画面效果。</p> |
| <div class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#地图" title="Pages tagged 地图" class="tag">--> |
| <span class="term">地图</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">--> |
| <span class="term">教程</span> |
| <!--</a>--> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| <div class="col-md-4"> |
| <div class="read-more-post"> |
| <h4><a href="http://echarts.baidu.com/blog/2017/05/25/new-release.html" title="ECharts v3.6 发布:自定义系列、极坐标柱状图">ECharts v3.6 发布:自定义系列、极坐标柱状图</a></h4> |
| <p>在 ECharts 新发布的 3.6 版本中,新增了自定义系列,能让用户定制渲染逻辑,从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。</p> |
| <div class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#地图" title="Pages tagged 地图" class="tag">--> |
| <span class="term">地图</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">--> |
| <span class="term">教程</span> |
| <!--</a>--> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| <div class="col-md-4"> |
| <div class="read-more-post"> |
| <h4><a href="http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial.html" title="ECharts 统计扩展教程">ECharts 统计扩展教程</a></h4> |
| <p>你是否想了解一组样本数据的分布情况?你是否想根据用户的数值属性将用户分成不同的群体?你是否想预测两个变量的变化趋势?——什么?不需要?不要再违心了,小编已经听到来自你们内心深处的呐喊,今天就为大家推荐一款神器——ECharts 统计扩展,这是一个用来进行数据分析的扩展工具,包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合,可以使大家方便地实现可视分析,也就是将数据分析的结果,通过可视化直观地呈现出来。</p> |
| <div class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#地图" title="Pages tagged 地图" class="tag">--> |
| <span class="term">地图</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">--> |
| <span class="term">教程</span> |
| <!--</a>--> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| </div> |
| </div> |
| </div> |
| |
| </article> |
| </div><!-- /#main --> |
| |
| <footer> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-md-3 col-sm-4 logo"><img src="http://echarts.baidu.com/images/echarts-footer-logo.png"/></div> |
| <div id="efe-product" class="col-md-2 col-sm-4 pc"> |
| <h3>百度EFE更多产品</h3> |
| <ul id="efe-product"> |
| <li><a href="http://tushuo.baidu.com/?fr=echarts" target="_blank">图说</a></li> |
| <li><a href="https://ecomfe.github.io/san/?fr=echarts" target="_blank">SAN</a></li> |
| <li><a href="http://ecomfe.github.io/edp/?fr=echarts" target="_blank">EDP</a></li> |
| <li><a href="http://github.com/ecomfe/zrender/?fr=echarts" target="_blank">ZRender</a></li> |
| <li><a href="http://fecs.baidu.com/?fr=echarts" target="_blank">FECS</a></li> |
| <li><a href="http://ecomfe.github.io/fontmin/?fr=echarts" target="_blank">Fontmin</a></li> |
| </ul> |
| </div> |
| <div class="col-md-3 col-md-offset-1 col-sm-4 pc"> |
| <h3>友情链接</h3> |
| <ul> |
| <li><a href="https://fex.baidu.com/?fr=echarts" target="_blank">FEX</a></li> |
| <li><a href="http://bit.baidu.com/?fr=echarts" target="_blank">百度技术学院</a></li> |
| <li><a href="https://git.oschina.net/echarts/echarts?fr=echarts" target="_blank">码云镜像</a></li> |
| </ul> |
| </div> |
| <div class="col-md-3" id="footer-icon-panel"> |
| <div class="icon-panel"> |
| <a href="mailto:echarts@baidu.com" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-email.png"/> |
| </a> |
| <a href="https://twitter.com/EChartsJs" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-twitter.png"/> |
| </a> |
| <a href="http://weibo.com/u/5160877841" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-weibo.png"/> |
| </a> |
| <a href="https://github.com/ecomfe/echarts" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-github.png"/> |
| </a> |
| </div> |
| <div id="echarts-copyright">Ⓒ 2017 百度ECharts团队出品</div> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <script src="http://echarts.baidu.com/blog/assets/js/vendor/jquery-1.9.1.min.js"></script> |
| <script src="http://echarts.baidu.com/vendors/bootstrap/js/bootstrap.min.js"></script> |
| <script src="http://echarts.baidu.com/blog/assets/js/scripts.min.js"></script> |
| |
| |
| |
| |
| <script> |
| var _hmt = _hmt || []; |
| (function() { |
| var hm = document.createElement("script"); |
| hm.src = "https://hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f"; |
| var s = document.getElementsByTagName("script")[0]; |
| s.parentNode.insertBefore(hm, s); |
| })(); |
| </script> |
| |
| |
| |
| </body> |
| </html> |