一、效果展示

 ​​​​​​

 

 二、关键技术

• 百度地图 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。

四、资源下载

基于Echarts+百度地图bmap+时间轴timeline+polygon+scatter的可视化案例-企业管理文档类资源-CSDN下载更多资料参考：https://yydatav.blog.csdn.net/article/deta更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/lildkdkdkjf/86399452

更多地图相关：

【26】地图可视化：基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点&气泡&流向&组合&区域&三级下钻地图_YYDataV数据可视化的博客-CSDN博客_地图可视化组件

本次分享结束，欢迎交流！微信 6550523.