148. 在 Vue3 中使用 OpenLayers 在地图上添加 ECharts 柱状图

吉檀迦俐

于 2025-07-09 09:31:38 发布

阅读量209

点赞数 7

CC 4.0 BY-SA版权

分类专栏： Vue3+OpenLayers 文章标签： echarts 前端 javascript ecmascript vue.js 前端框架

本文链接：https://blog.csdn.net/Miller777_/article/details/149216281

Vue3+OpenLayers 专栏收录该内容

162 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

✨ 效果预览

在 Vue3 项目中，我们可以利用 OpenLayers 搭配 ol-echarts 插件，将 ECharts 的柱状图按指定经纬度展示在地图上，实现地理信息可视化展示的功能：

📍 示例效果图如下：

🧩 技术选型

技术	作用
Vue 3 + Composition API	页面开发主框架
OpenLayers	地图底图展示
ol-echarts	将 ECharts 图层作为地图叠加层
ECharts	图表绘制，支持柱状图、饼图、折线图等

🏗️ 项目安装依赖

首先在你的 Vue3 项目中安装所需依赖：

npm install

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吉檀迦俐

关注关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

148.在 Vue3 中使用 OpenLayers 在地图上添加 ECharts 环形图

小彭的博客

07-08

166

「Vue3+OpenLayers集成ECharts环形地图方案」本文介绍基于Vue3+OpenLayers实现地图环形图叠加的技术方案。核心采用ol-echarts桥接库，将ECharts图表（Pie类型）通过地理坐标绑定到OpenStreetMap上。关键实现包括： 1️⃣ 使用EChartsLayer包装图表数据 2️⃣ 坐标转换（EPSG:4326→3857） 3️⃣ 设置hideOnMoving参数保持图表可见性 4️⃣ 通过coordinates属性精确定位城市坐标组件支持功能： 🔹 多城市

146. 在 Vue3 中使用 OpenLayers 添加 ECharts 饼图

最新发布

小彭的博客

07-07

193

【摘要】本文演示了在Vue3项目中使用Composition API集成OpenLayers和ECharts实现地图可视化。通过ol-echarts桥接库，在地图指定经纬度位置叠加交互式饼图（支持tooltip悬停），并应用CSS滤镜（hue-rotate）增强视觉效果。关键技术点包括：EPSG:4326坐标投影定位、ECharts图层动态渲染及postcompose事件滤镜处理。该方案适用于产业分布、人口统计等数据可视化场景，文中还提供了扩展建议（动态数据加载、响应式调整等）和完整代码实现。

参与评论您还未登录，请先登录后发表或查看评论

【亲测免费】探秘OpenLayers与ECharts结合的新大陆：openlayers_echart

gitblog_00074的博客

04-22

815

探秘OpenLayers与ECharts结合的新大陆：openlayers_echart 在这个数字化的时代，地图和数据分析的结合变得越来越重要。是一个开源项目，它巧妙地将流行的Web地图库OpenLayers与强大的数据可视化工具ECharts融合在一起，为开发者提供了一个全新的工具，以创造交互式、动态的地图应用。项目简介 openlayers_echart 是一个基于JavaScript的插...

openlayers_echarts开发实例

10-22

openlayers_echarts整合开发实例，有多个实例，openlayers中嵌套echarts开发

在openlayers3上与echarts结合使用示例

07-18

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问，echarts是百度的开源js图表库，该示例实现了在openlayers的地图‘贴’上echarts的图表

使用Vue和OpenLayers在地图上添加Echarts柱状图

laugh666的博客

09-13

519

Vue是一种流行的JavaScript框架，用于构建用户界面，而OpenLayers是一个强大的开源地图库，用于创建交互式地图应用程序。根据您的需求，您可以自定义地图的样式和Echarts柱状图的数据和配置。在Vue项目中创建一个新的组件，用于显示地图和Echarts柱状图。在组件的模板中，添加一个包含地图容器的div元素和一个用于显示柱状图的div元素。当组件加载时，地图将显示在指定的容器中，同时在地图上方显示柱状图。在您希望显示地图和Echarts柱状图的地方使用自定义的地图组件。

vue+openlayer+echarts 在地图点位上添加柱状图

weixin_43842567的博客

05-28

3806

** vue+openlayer+echarts 给地图点位添加柱状图 ** 重点在方法addColumnChart()里，三步实现在网上百度了很多相关文章，最终都无疾而终，只能硬着头皮自己摸索，好在功夫不负有心人，最终还是实现了在地图上，鼠标放上点位，显示对应的柱状图信息 HTML <div id="map" ref="mapRef"></div> 地图容器 &l...

vue项目中在openlayers地图上展示echarts图表

此爱如少年

03-07

2615

思路： 1、创建一个地图组件mapView，使用openlayers进行地图展示 2、创建一个图表组件chart，用于呈现图表 3、创建一个overlay组件，在模板中使用chart组件；利用openlayers的ol.Overlay类来把overlay组件添加到地图上。示例代码 1、数据以这次新冠病毒数据为例，这里是今年2月份全国新增新冠肺炎患者的数据（数据源来自百度），分为全国的新增数量和...

openlayers学习——14、openlayers结合echarts图表和地图

记录生活点滴

01-26

6467

openlayers结合echarts图表和地图一、普通饼图、柱图二、加载炫酷地图标记前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。本人不是专业GIS开发，只是记录，方便后续查找。参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.b

openlayers 使用echarts

qq_38000851的博客

11-28

1769

echarts 中提供了很多的图标和特效，这正好弥补了不会写图表的我，加上地图上功能的需要，所以采用了ol3Echarts作为扩展 git地址：https://github.com/sakitam-fdd/ol3Echarts 该扩展插件已经能满足大多数的要求了，具体的代码和实现可以参考git中的项目。但是该项目在对6.4版本好像存在一些bug 经过测试和使用，的确存在该问题暂时找到的解决办法是，下载ol-echarts的js文件，找到代码中的mockEvent中的 event.originalEven

openlayers与echarts3的结合使用

热门推荐

续汉冕的专栏

03-06

1万+

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问，echarts是百度的开源js图表库，下面简单讲解下如何在openlayers的地图‘贴’上echarts的图表。示例下载地址: 开始首先在html界面上添加两个div，一个装载地图，一个装载表格： div id="map">div> div i

OpenLayers结合Echarts实现海量点的前端可视化

wxqqq666的博客

11-06

4761

前言 OpenLayers这个库在前端操作地图自然是数一数二的存在，但是对于在地图上海量数据的绘制就显得有点力不从心，虽然目前Openlayers4以后地图上数据的绘制相关绘制接口已经开始基于WebGL进行封装，一定程度上决解决了数据绘制速度问题但对于海量数据绘制到客户端所带来的内存占用问题并没有得到解决，这其实也怪不得OL的开发者，人家本来就不是为了数据可视化打造的，之所以开始采用WebGL进行...

当前最新版本Echart结合Openlayers 航班动态效果

欢乐的小树的博客

07-06

5261

openlayers_echart 最新版的OpenLayers与最新的ECharts相结合，实现了将ECharts中的地图换成OpenLayers的地图。 ES6使用方法：下载项目目录中js文件：openlayers_echart/src/openlayers.echart.js 在自己的js文件中添加： import ADLayer from 'openlayers.ec...

echarts应用openlayers地图,黑客攻击（迁移）Demo

xuerwang的博客

08-15

3565

先上效果图 echarts用openlayers做底图，左侧可以根据选择级别进行显示，，，，，，，当然这不是我做的，虽然与设计图不符，但是效果这么好，记录一下，以备不时之需。步骤一：npm install openlayers_echart; 步骤二：import ADLayer from ‘openlayers_echart’ 步骤三：var oe = new ADLayer(...

openlayers3结合echarts3示例

傲骨雄风的博客

10-28

1928

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ol3 popup</title> <link rel="stylesheet" type="te

Echart在Openlayers的应用-热力图

weixin_30500289的博客

07-25

655

概述在前文中，有一篇文章讲述了Openlayers2结合Echart实现地图统计图，还以一篇文章讲述了结合heatmap.js实现Openlayers中热力图的展示。在本文，书接前文，讲述Openlayers如何结合Echart实现热力图。效果全图效果放大效果实现1、关键点echart实现heatmap的关键点在与屏幕坐标，所以，在地图中，应通过地理坐标到屏幕坐标的转换函数，将地理坐标转换为屏...

openlayers 5.0结合echarts迁移图

weixin_38190600的博客

10-10

852

1.通过npm安装：npm install openlayers_echart 2.代码 import ADLayer from 'openlayers_echart' //BJData数据格式 [ [[[{name:天津, value: 100, point: [106.7,32]}, {name: 北京, point: [107.9,34.3]}]]], [[[{name:上海, valu...

ol3Echarts vue3

03-21

### 在 Vue 3 中同时使用 OpenLayers 和 ECharts 实现地图可视化要在 Vue 3 中同时使用 OpenLayers 和 ECharts 实现地图可视化，可以按照以下方式操作： #### 环境准备确保已安装并配置好 Vue 3 开发环境。如果...