echarts-extension-gmap


Apache ECharts 谷歌地图扩展

README_EN

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

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

$3

Scatter 散点图

Lines 线图

Heatmap 热力图

Pie 饼图

!示例

$3

``shell
npm install echarts-extension-gmap --save
`

$3

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

`html






`

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

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

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

使用 CDN

jsdelivr

`html

`

unpkg

`html

`

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

$3

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

`js
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);
``