echarts-extension-gmap
v1.7.0
Published
A Google Map(https://www.google.com/maps) extension for Apache ECharts (https://github.com/apache/echarts)
Downloads
7,107
Maintainers
Readme
Apache ECharts 谷歌地图扩展
在线示例 (示例中使用了谷歌地图API,国内访问需要代理)
Apache ECharts 谷歌地图扩展,可以在谷歌地图上展现 点图,线图,热力图,饼图 等可视化。
示例
安装
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
<script src="https://cdn.jsdelivr.net/npm/echarts-extension-gmap/dist/echarts-extension-gmap.min.js"></script>
<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);