一、效果展示

二、关键技术

百度地图 bmap.min.js 。

polygon 多边形的绘制 renderItem 自定义函数。

timeline 时间轴。

三、代码分析

1、坐标定位的实现

重点：echarts series 中的 type: "scatter", coordinateSystem: "bmap"

{
        name: "坐标点示例",
        type: "scatter",
        coordinateSystem: "bmap",
        symbol: "pin",
        symbolSize: 30,
        // symbol 图形的颜色
        color: "red",
        data: [{ name: "公司坐标", value: [117, 36] }],
},

2、polygon多边形的实现

2.1 重点：自定义函数 renderItem: render_polygon, 以及 data: []

{
        name: "多边形polygon示例",
        type: "custom",
        coordinateSystem: "bmap",
        renderItem: render_polygon,
        itemStyle: {
          normal: {
            opacity: 0.5,
            fill: "#00f",
          },
          emphasis: {
            fill: "#f0f",
          },
        },
        data: [],
      },

2.2 render_polygon 实现


function render_polygon(params, api) {
  data = JSON.parse(api.value());

  var properties = data.properties;
  var type = data.geometry.type;

  // polygon
  var coords_list = data.geometry.coordinates;
  var rsp_list = [];
  for (var i = 0; i < coords_list.length; i++) {
    var points = [];
    var coords = coords_list[i];
    for (var j = 0; j < coords.length; j++) {
      points.push(api.coord(coords[j]));
    }
   
    rsp = {
      type: "polygon",
      shape: {
        points: points,
      },
      style: properties,
    };
    rsp_list.push(rsp);
  }


  return {
    type: "group",
    children: rsp_list,
  };
}

2.3 动态对 data 赋值

重点：此处data必须传string，不能传object，否则render_polygon中的api.value() 取不到值。

 op = {
        series: {
          name: "雷电短期预报",
          type: "custom",
          coordinateSystem: "bmap",

          renderItem: render_polygon,
          // 此处data必须传string，不能传object
          data: [[JSON.stringify(features[i])]],
        },
      };

3、timeline 时间轴

Documentation - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/option.html#timeline重点：timeline 和其他场景有些不同，它需要操作『多个option』。我们把传入 setOption 第一个参数的东西，称为 ECOption，然后称传统的 ECharts 单个 option 为 ECUnitOption。

var option_lightingLong = {
  // `baseOption` 的属性.
  baseOption: {
    bmap: {
      center: [157, 46],
      zoom: 6,
      roam: true,
    },

    timeline: {
      left: "25%",
      right: "25%",

      // 须指定 axisType： category timeline 点击事件才生效
      axisType: "category",
      // 初始加载时样式
      
      // 对应 switchableOption`s: options 数量
      data: ["今天", "明天"],
    },
    // series 必须定义好全部的系列
    series: [
      {
        name: "坐标点示例",
        type: "scatter",
        coordinateSystem: "bmap",
        symbol: "pin",
        symbolSize: 30,
        // symbol 图形的颜色
        color: "red",
        data: [{ name: "公司坐标", value: [157, 46] }],
      },
      {
        name: "多边形示例",
        type: "custom",
        coordinateSystem: "bmap",
        renderItem: render_polygon,
        data: [],
      },
    ],
  },

  // `switchableOption`s:
  // options中的series只需定义动态的series即可。
  options: [],
};

至此，效果图上的关键知识基本OK。