MapboxGL饼状图绘制与展示

前言

之前在网上看了一个MapboxGL与Echarts集合的例子，个人感觉用处不大，效果就是相当于把Echarts的一些地图demo地图换成了Mapbox，无法实现根据坐标在地图上动态渲染饼图的功能，这里我自己封装了一个工具，下面简单介绍一下用法

使用方式

1. 下载依赖

npm install mapbox-map-tool --save

2. 引入组件

import {PieCustomLayer} from "mapbox-map-tool";
import "mapbox-map-tool/dist/css/mapbox-map-tool.css"//建议在main.js中全局引入

3. 代码中使用

let chartLayer=new PieCustomLayer("统计图",[{ point:[112.6,45],values:[35.6,41.2,155.9]},{ point:[114,45.5],values:[12,20,33]}])
chartLayer.addToMap(map);

4. 效果预览
   

插件使用方法

• constructor

  参数	类型	说明	备注
  第一参数id	string	图层id
  第二参数data	JsonArray	数据源	[{ point:[112.6,45],values:[35.6,41.2,155.9]},{ point:[114,45.5],values:[12,20,33]}]
  options	Json	配置项	见下表

  • options

  参数	类型	说明	备注
  width	int	图标宽度	单位px，偶数 默认60
  height	int	图标宽度	强制等于宽度
  chartAnchor	string	锚点位置	‘center’ , ‘top’ , ‘bottom’ , ‘left’ , ‘right’ , ‘top-left’ , ‘top-right’ , ‘bottom-left’ , and ‘bottom-right’ ‘center’ , ‘top’ , ‘bottom’ , ‘left’ , ‘right’ , ‘top-left’ , ‘top-right’ , ‘bottom-left’ , and ‘bottom-right’ 默认center
  showPopup	boolean	是否展示popup	默认false
  popupAnchor	string	popup锚点	‘center’,‘top’,‘bottom’,‘left’,‘right’,‘top-left’,‘top-right’,‘bottom-left’，以及‘bottom-right’ 默认left
  popupClassName	string	popup的className
  popupHtmlTemplate	string	popup的模版	示例：" 种类1：$val0</div><br/><div>种类2：${val1} 种类3：$val2</div>"，${val0}会自动替换data中values中的第一个值，以此类推
  colors	array[string]	分类颜色16进制	颜色为空或比值的种类少，会自动补充随机颜色
  popupOffsets	json	popup偏移量	默认{ ‘top’: [0, 0], ‘left’: [20, 0], ‘bottom’: [0, 0], }
  clickCallBack	function	点击标签回调
  overCallBack	function	鼠标滑过标签回调
  clickCallBackName	function	点击标签触发地图事件名
  overCallBackName	function	鼠标经过触发地图事件名称

• 方法

  参数名	类型	说明
  addToMap	mapboxgl.Map	将图层添加到地图并渲染
  remove	-	移除当前图层