README.zh-CN.md

Apache ECharts 谷歌地图扩展

README_EN

在线示例 (示例中使用了谷歌地图API，国内访问需要代理)

Apache ECharts 谷歌地图扩展，可以在谷歌地图上展现 点图，线图，热力图，饼图 等可视化。

示例

Scatter 散点图

Lines 线图

Heatmap 热力图

Pie 饼图

安装

npm install echarts-extension-gmap --save

引入

可以直接引入打包好的扩展文件和谷歌地图的 Javascript API

<!-- 引入谷歌地图的Javascript API，这里需要使用你在谷歌地图开发者平台申请的key -->
<script src="https://maps.googleapis.com/maps/api/js?key={key}"></script>
<!-- 引入 ECharts -->
<script src="/path/to/echarts.min.js"></script>
<!-- 引入谷歌地图扩展 -->
<script src="dist/echarts-extension-gmap.min.js"></script>

如果 webpack 等工具打包，也可以通过 require 或者 import 引入

// 使用 require
require('echarts');
require('echarts-extension-gmap');

// 使用 import
import * as echarts from 'echarts';
import 'echarts-extension-gmap';

使用 CDN

jsdelivr

<script src="https://cdn.jsdelivr.net/npm/echarts-extension-gmap/dist/echarts-extension-gmap.min.js"></script>

unpkg

<script src="https://unpkg.com/echarts-extension-gmap/dist/echarts-extension-gmap.min.js"></script>

插件会自动注册相应的组件。

使用

扩展主要提供了跟 geo 一样的坐标系和底图的绘制，因此配置方式非常简单，如下

option = {
  // 加载 gmap 组件
  gmap: {
    // 地图中心 支持数组或JSON对象
    //center: [108.39, 39.9],
    center: { lng: 108.39, lat: 39.9 },
    // 缩放级别
    zoom: 4,
    // 其他地图初始化参数...
    // https://developers.google.cn/maps/documentation/javascript/reference/map#MapOptions

    // 移动过程中实时渲染。默认为 true。如数据量较大，建议置为 false。
    renderOnMoving: true,
    // 谷歌地图 ECharts 图层的 zIndex。默认为 2000。
    echartsLayerZIndex: 2019,
    // 是否启用手势事件处理，如拖拽等。默认为 true。
    // 此配置项从 v1.4.0 起支持
    roam: true
  },
  series: [
    {
      type: 'scatter',
      // 使用谷歌地图坐标系
      coordinateSystem: 'gmap',
      // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
      data: [[120, 30, 8], [120.1, 30.2, 20]],
      encode: {
        value: 2,
        lng: 0,
        lat: 1
      }
    }
  ]
};

// 获取谷歌地图实例
var gmap = chart
  .getModel()
  .getComponent('gmap')
  .getGoogleMap();
// 添加一个Marker
var marker = new google.maps.Marker({ position: gmap.getCenter() });
marker.setMap(gmap);
// 添加交通图层
// var trafficLayer = new google.maps.TrafficLayer();
// trafficLayer.setMap(gmap);