ECharts 高德地图扩展

ECharts 高德地图扩展，可以在高德地图上展现 点图，线图，热力图 等可视化。

示例

参见 examples/index.html

安装

npm install echarts-extension-amap --save

引入

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

<!--引入高德地图的Javascript API，这里需要使用你在高德地图开发者平台申请的 ak-->
<script src="https://webapi.amap.com/maps?v=1.4.14&key=ak&plugin=AMap.Scale,AMap.ToolBar"></script>
<!-- 引入 ECharts -->
<script src="/path/to/echarts.min.js"></script>
<!-- 引入高德地图扩展 -->
<script src="dist/echarts-extension-amap.min.js"></script>

如果是 webpack 打包，也可以 require 引入

require("echarts");
require("echarts-extension-amap");

使用 CDN

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

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

使用

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

option = {
  // 加载 amap 组件
  amap: {
    // 高德地图支持的初始化地图配置
    // 高德地图初始中心经纬度
    center: [120.13066322374, 30.240018034923],
    // 高德地图初始缩放级别
    zoom: 14,
    // 是否开启resize
    resizeEnable: true,
    // 自定义地图样式主题
    mapStyle: "amap://styles/dark",
    // 高德地图自定义EchartsLayer的zIndex，默认2000
    echartsLayerZIndex: 2019
    // 说明：如果想要添加卫星、路网等图层
    // 暂时先不要使用layers配置，因为存在Bug
    // 建议使用amap.add的方式，使用方式参见最下方代码
  },
  series: [
    {
      type: "scatter",
      // 使用高德地图坐标系
      coordinateSystem: "amap",
      // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
      data: [[120, 30, 8], [120.1, 30.2, 20]],
      encode: {
        value: 2
      }
    }
  ]
};

// 获取高德地图实例，使用高德地图自带的控件(需要在高德地图js API script标签手动引入)
var amap = chart
  .getModel()
  .getComponent("amap")
  .getAMap();
// 添加控件
amap.addControl(new AMap.Scale());
amap.addControl(new AMap.ToolBar());
// 添加图层
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
amap.add([satelliteLayer, roadNetLayer]);