## 彩色建筑图
### 示例功能
在地图中可视化加载城市局部的三维彩色建筑。
### 示例实现
本示例需要使用【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需要的格式，并整理echarts需要的地图区域`regions`数据；
* Example:
```javascript
$.getJSON('../../static/data/echartsgl/buildings/data.json', function(){})
```
通过echarts的`registerMap()`接口将建筑数据渲染到页面中。
* Example:
```javascript
echarts.registerMap('buildings', geoJSON);
```
**Step 3. 页面展示建筑可视化效果**：
通过echarts的`setOption()`方法加载地图与建筑数据并设置颜色。