MapboxGL 折线图的绘制与展示

最新推荐文章于 2025-01-23 18:06:03 发布

GIS开发者

最新推荐文章于 2025-01-23 18:06:03 发布

阅读量705

点赞数

CC 4.0 BY-SA版权

分类专栏： WebGIS开发 MapBox 文章标签： mapbox vue 折线图 canvas

本文链接：https://blog.csdn.net/GISuuser/article/details/120046854

WebGIS开发同时被 2 个专栏收录

77 篇文章

订阅专栏

MapBox

37 篇文章

订阅专栏

这篇博文介绍了如何利用Mapbox Map Tool在地图上绘制折线图。首先，需要通过npm安装依赖，并在项目中引入相关组件和样式。接着，创建LineCustomLayer实例，传入图层ID、数据源和配置项，包括点击回调、图标宽高、popup设置等。最后，将图层添加到地图并渲染。示例代码展示了如何在特定地理位置生成折线图，并提供了详细的配置参数和方法说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前面的博文中介绍了一下如何在地图上展示饼状图和柱状图，下面简单介绍一下如何在地图上绘制折线图：

使用方式

下载依赖

npm install mapbox-map-tool --save

引入组件

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

代码中使用

let chartLayer = new LineCustomLayer("统计图", [
            {
              point: [114.514780, 33.777750],
              values: [35,48,39,65,24,76]
            },
            {point: [114.614780, 33.777750],
              values: [35,48,39,65,24,76]
            },
            {point: [114.614780, 33.877750],
              values: [35,48,39,65,24,76]
            }
          ], {
            clickCallBack: (data) => {
              console.log(data)
            },
            width: 60,
            height: 60,
          })
    chartLayer.addToMap(map)

效果预览

插件使用方法

constructor

参数	类型	说明	备注
第一参数id	string	图层id
第二参数data	JsonArray	数据源	[{point:[114.514780,33.777750],values:[35,48,39,65,24,76]},{point:[114.614780,33.777750],values:[35,48,39,65,24,76]},{point:[114.614780,33.877750],values:[35,48,39,65,24,76]}]
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	鼠标经过触发地图事件名称
lineColor	string	折线颜色	默认#0DFE29
fillColor	string	折线下方填充颜色	默认rgba(255,0,255,0.5)
lineWidth	number	折线宽度	默认4
pointColor	string	折点颜色	#0DCEFE
pointSize	number	折点大小	默认4
backgroundColor	string	折线图背景色	默认rgba(255,255,255,0.5)