地图可视化：基于 Echarts + 百度地图bmap + 时间轴timeline + 多边形(multi)polygon + 点scatter 的可视化案例

您所在的位置：网站首页 › 百度地图显示时间 › 地图可视化：基于 Echarts + 百度地图bmap + 时间轴timeline + 多边形(multi)polygon + 点scatter 的可视化案例

地图可视化：基于 Echarts + 百度地图bmap + 时间轴timeline + 多边形(multi)polygon + 点scatter 的可视化案例

2024-05-28 14:50| 来源: 网络整理| 查看: 265

一、效果展示

二、关键技术百度地图 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.

【本文地址】

地图可视化：基于 Echarts + 百度地图bmap + 时间轴timeline + 多边形(multi)polygon + 点scatter 的可视化案例

地图可视化：基于 Echarts + 百度地图bmap + 时间轴timeline + 多边形(multi)polygon + 点scatter 的可视化案例

今日新闻

推荐新闻