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

最新推荐文章于 2025-06-04 23:55:24 发布

shmily...

最新推荐文章于 2025-06-04 23:55:24 发布

阅读量3.8k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue openlayer echarts 在地图上添加柱状图

本文链接：https://blog.youkuaiyun.com/weixin_43842567/article/details/90642491

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

重点在方法addColumnChart()里，三步实现

在网上百度了很多相关文章，最终都无疾而终，只能硬着头皮自己摸索，好在功夫不负有心人，最终还是实现了在地图上，鼠标放上点位，显示对应的柱状图信息
在这里插入图片描述鼠标放到点位上，会在左上角显示柱状图的数据，位置可调整

HTML

 <div id="map" ref="mapRef"></div>  地图容器
 <div id="chart" ref="chart"></div>  监测点的柱状图容器（  写完这篇博文之后发现了一个小问题，<div id="chart" ref="chart"></div>该div会在页面上占位置，会出现在地图容器下方，页面会有滚动条，解决办法就是给该div加一个display：none就OK了，并不会影响柱状图的定位和显示）

JS
1、引入地图跟echarts

  import Map from 'ol/Map';
  import Overlay from 'ol/Overlay';
  import View from 'ol/View';
  import Feature from 'ol/Feature';
  import Point from 'ol/geom/Point';
  import { Vector as VectorS, XYZ, ImageArcGISRest, TileArcGISRest } from 'ol/source';
  import { Tile as TileLaye