百度地图 - 自定义ECharts覆盖物

简介

在开发地图可视化页面时，产品想在城市的对应位置展示一个统计图。这时候先不要慌，大声的说你是在哪抄的这个需求。好看到页面了，就没有前端人不会（抄的）开发的。研究后发现使用的是，百度地图api自定义了ECharts覆盖物。

覆盖物

在百度地图中所有的覆盖物都继承Overlay，所以我们通过继承基类实现自定义覆盖物。

initialize()，用于初始化覆盖物，当调用map.addOverlay时，API将调用此方法。
draw()，当地图状态发生变化时，由系统调用对覆盖物进行绘制。
show()，显示覆盖物。
hide()，隐藏覆盖物。
MapPanes，此类表示地图上所有覆盖物的容器集合，没有构造函数，通过对象字面量形式表示。通过Map的getPanes方法可获得该对象实例。自定义的覆盖物都要放入才能其中展示。

加载地图

通过<script>标签引入地图api地址和echarts地址，这里的ak是你在地图服务中心注册的。不了解的可以点这里

   <!-- echarts --><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script><!-- 百度 --><script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=?"></script><script>// 百度地图API功能var map = new BMapGL.Map('bmap') // 创建Map实例// 初始化地图,设置中心点坐标和地图级别map.centerAndZoom(new BMapGL.Point(121.480509, 31.23592), 10)// 启用 鼠标滚轮事件map.enableScrollWheelZoom()</script>

自定义ECharts覆盖物

创建一个新的函数继承Overlay，通过initialize()和draw()函数的调用机制来实现自定义覆盖物。

      /*** @param width 节点宽* @param height 节点高* @param pot 地图点坐标* @param callback 回调 加载echarts* */function echartsOverlay(width, height, pot, callback) {this._width = width || 100this._height = height || 100this._pot = potthis._callback = callback}// 继承Overlay基类echartsOverlay.prototype = new BMapGL.Overlay()echartsOverlay.prototype.initialize = function (map) {this._map = map// DOM节点this._div = document.createElement('div')this._div.style.zIndex = 1this._div.style.width = this._width + 'px'this._div.style.height = this._height + 'px'this._div.style.position = 'absolute'// 将该覆盖物添加到标签覆盖物列表map.getPanes().labelPane.appendChild(this._div)// 传入 dom节点 用于绘制echartsthis._callback(this._div)return this._div}echartsOverlay.prototype.draw = function () {// pointToOverlayPixel() 根据地理坐标获取对应的覆盖物容器的坐标let rel_xy = this._map.pointToOverlayPixel(this._pot)// 覆盖物中点 为坐标点this._div.style.left = rel_xy.x - this._width / 2 + 'px'this._div.style.top = rel_xy.y - this._height / 2 + 'px'}

创建的元素节点需要使用'absolute'定位。
定位的left、top参数需要在draw()函数中。当地图放大、缩小，坐标都需要重新计算。
使用回调函数的方式，返回DOM节点用于ECharts绘图。

添加echarts

      var drawChart = function (obj) {var chartTem = echarts.init(obj)var option = {tooltip: {trigger: 'axis'},radar: [{indicator: [{ text: '品牌', max: 100 },{ text: '内容', max: 100 },{ text: '可用性', max: 100 },{ text: '功能', max: 100 }],center: ['50%', '50%'],radius: 60,splitArea: {areaStyle: {color: ['#77EADF'],shadowColor: 'rgba(0, 0, 0, 0.2)',shadowBlur: 10}},name: {formatter: '【{value}】',textStyle: {color: '#DC143C'}}}],series: [{type: 'radar',tooltip: {trigger: 'item'},areaStyle: {},data: [{value: [60, 73, 85, 40],name: '某软件'}]}]}chartTem.setOption(option)}

这里和平时使用echarts开发是一样的。文章最后有echarts 示例 ，不会的同学可以去看看。
不是所有的统计都适合在地图上展示，个人认为饼图和雷达图在地图上展示效果是最好的。

调用

      var myCompOverlay = new echartsOverlay(250, 250, new BMapGL.Point(121.480509, 31.23592), drawChart)map.addOverlay(myCompOverlay)

使用这种方式加载ECharts有个很大的问题，就是生成的统计图大小是固定的，不会随地图变化而变化。基于这种情况ECharts也出了解决方案bmap.min.js。

参考

echarts 示例
百度api

百度地图 - 自定义ECharts覆盖物相关推荐

百度地图自定义覆盖物，在手机上无法监听click事件
百度地图自定义覆盖物,在手机上无法监听click事件最近在做手机web端集成百度地图遇到了个坑儿:手机端不支持自定义覆盖物的click事件: 1.自带的marker是支持的(marker不属于自定义 ...
百度地图结合echarts实现飞线
百度地图结合echarts实现飞线目前很流行的地图轨迹飞线图,咱也来实现一个,使用百度地图和echarts图表实现,示例如下,(其实百度地图api有一个位置数据可视化MapV GL也可实现,需要的小 ...
百度地图之添加覆盖物并响应事件
随时随地技术实战干货,获取项目源码.学习资料,请关注源代码社区公众号(ydmsq666) 本文中将介绍在百度地图上添加覆盖物的功能.响应点击功能和弹出pop功能,代码来自百度Demo: Activit ...
百度地图自定义标点。
百度地图自定义标点. 多个标点方法可以进行for循环进行动态标点. <!DOCTYPE html> <html> <head><meta http-equ ...
百度地图结合echarts地图运历图
百度地图结合echarts地图运历图关于各省显示车辆发车数量引入部分 <script src="~/Scripts/Echarts/Js/esl.js"></ ...
百度地图之添加覆盖物
本文主要讲解如何实现在百度地图上添加覆盖物 1.承载数据的实体我们从服务器返回的数据部分,最终可能是个Json数组,我们需要转换为实体集合,即下面的Info.java 我直接在实体类中声明了一个静态 ...
百度地图自定义结果面板+分页+图层标注(标注点+搜索)
百度地图自定义结果面板+分页+图层标注(标注点+搜索) 示例一: <html> <head><meta http-equiv="Content-Type&qu ...
百度地图自定义吹出框
2019独角兽企业重金招聘Python工程师标准>>> 百度地图自定义吹出框直入正题吧! 这些都是知道的了,看文档添加就行了! 实现三个代理方法: 这个方法类似tableview添 ...
百度地图自定义信息窗口样式
在项目中,UI经常会把信息窗口做自定义设计,那么如何实现自定义样式的信息窗口呢.核心代码如下: /** 创建信息窗口* */function _createMapvInfoWindow(width,h ...

百度地图 - 自定义ECharts覆盖物

简介

覆盖物

加载地图

自定义ECharts覆盖物

添加echarts

调用

参考

百度地图 - 自定义ECharts覆盖物相关推荐

最新文章

热门文章