## 微博签到图 ### 示例功能     微博签到点亮中国,基于微博官方的签到数据制作的可视化地图。 ### 示例实现     本示例需要使用【include-mapboxgl-local.js】开发库实现,通过echarts框架的关键接口`setOption()`实微博签到数据加载,示例通过Echarts GL进行数据的渲染显示。 > 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 #### 百度 Echarts > Echarts官方教程 官方下载 #### Echarts GL > Echarts GL(后面统一简称 GL)为ECharts补充了丰富的三维可视化组件,如果你对ECharts有一定了解的话,也可以很快的上手GL,GL的配置项完全是按照ECharts的标准和上手难度来设计的。 > 由于Echarts GL是通过 html z-index的技术进行的`叠加渲染`,即使用MapBox作为地理地图,然后EchartGL渲染一层漂亮的图层进行叠加,因此在拖拽的时候能够明显的感受到两个图层的不一致,因此这种技术只能用于单独的展示型界面,无法和其他的带有复杂逻辑的界面进行交互。 > 在展示一些跟踪型的任务的时候,请不要使用EchartGL而是使用MapBox原生的开发方式。 > `由于百度的Echarts GL`使用的数据源各种各样(很多来自Uber,百度,阿里,ArcGIS等),而目前暂未能完全直接对接MapGIS平台的数据,如果对数据转换存在困难,请通过司马云网站联系我们的工作人员,帮助您解决对应的数据格式问题。 #### 其他问题     由于百度内部维护的mapbox的版本较低,并且echart 4.0版本已经推出。对MapBox的支持重心下放,这个展示效果在echarts4.0使用存在小bug,因此本例中使用的是echarts3.0的版本。 > 衷心的希望少使用这个Echarts GL类库,这里的所有效果都可以通过原生的Mapbox开发方式实现...... ### 实现步骤 **Step 1.引用开发库**:     本示例通过本地离线【include-mapboxgl-local.js】脚本引入开发库; **Step 2. 获取微博签到数据**:     通过`$.getJSON()`接口获取到微博签到数据,将拿到的数据处理为echarts需要的格式; * Example: ```javascript $.getJSON("../../static/data/echartsgl/weibo/data.json", function(){}) ``` **Step 3. 页面展示微博签到可视化效果**:      通过echarts的`setOption()`方法加载地图与微博签到数据进行可视化显示。