Mapbox GL插件之echartsLayer

article/2025/9/15 14:29:28

Mapbox GL除了本身的api具有的功能以外,还能够集成各种开源的类库。
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,百度公司开发的,同时其中也有一些地图的效果。
Mapbox GL的echarts插件,在github上是以开源的形式发布,不过,年限相对来说是三年前的了,当时echarts还是版本3,现在echarts已经更新到4版本了。
地址是:
https://github.com/lzxue/echartsLayer
国内的地图大厂商在此基础上进行了bug的修改,在厂商的官方网站上,也有for Mapbox GL的样例,前端是基于Mapbox GL进行的修改,后台他们开发的数据服务支持前端的调取使用,附修改版插件地址:
https://github.com/Supermap/echartsLayer
源码中的lib文件夹,是插件的源码,以echarts扩展组件的形式进行编写,根据Mapbox GL的缩放级别,通过坐标系的变换,实时更新echarts中的数据位置,从而达到同步显示的效果。
dist是打包好的类库压缩包,使用的时候,页面上要同时引用Mapbox GL的类库和echarts的类库。
demo页中有几个样例,简单截图下效果:
有兴趣的clone源码进行查看。
在这里插入图片描述
在这里插入图片描述
参考网站:
https://docs.mapbox.com/mapbox-gl-js/plugins/
https://github.com/lzxue/echartsLayer
https://github.com/Supermap/echartsLayer

更多文章请关注公众号支持!
在这里插入图片描述


http://chatgpt.dhexx.cn/article/yVXl2e0R.shtml

相关文章

【OpenGL】十八、OpenGL 绘制多边形 ( 绘制 GL_POLYGON 模式多边形 )

文章目录 一、绘制 GL_POLYGON 模式多边形二、多边形绘制顺序分析三、相关资源 一、绘制 GL_POLYGON 模式多边形 使用 glBegin(GL_POLYGON) 设置绘制多边形 , 不管有几个点 , 都按照指定的顺序连接起来 ; 注意 : 这些点组成的多边形必须是凸多边形 , 不能是凹多边形 ; 代码示例…

gl_FragCoord 的含义

gl_FragCoord 表示当前片元着色器处理的候选片元窗口相对坐标信息,是一个 vec4 类型的变量 (x, y, z, 1/w), 其中 x, y 是当前片元的窗口坐标,OpenGL 默认以窗口左下角为原点, 在 着色器中通过布局限定符可以重新设定原点&#xf…

WebGL着色器内置变量gl_PointSize、gl_Position、gl_FragColor、gl_FragCoord、gl_PointCoord

WebGL着色器内置变量 WebGL中文教程网 本文是WebGL教程(电子书)的2.7节内容 着色器语言在GPU的着色器单元执行,javascript语言、C语言在CPU上执行,任何一种语言的语法规则,整体设计都和它执行的硬件有一定的关系,GPU和CPU执行程…

Unity画线之GL

上一篇中,SetPixel的方法,卡顿严重,暂未解决,又去看了原来的GL画线,自己画图思考了一下适配UI的问题,最终解决。 特此说明,GL画线功能,及Shader均为借鉴,自己做了优化。…

GL823K

下面是另一家SD/TF解码芯片的方案 ![](https://img-blog.csdnimg.cn/20210319145313645.png?x-oss-processimage/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTU3MDgwNA,size_16,color_FFFFFF,t_70 13030533945 VX

GL各个表结构总结

NewProgramer EBS GL表结构学习(转) gl_code_combinations:科目组合 字段名 含义 备注 code_combination_id 主键,科目编码ID,自动编号 segment1 分行代码 setgment2 是受益部门 segment3 科目代码 segment4 产品…

初识mapbox GL

一、概述 最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox GL的时候,能够有所启发、有所收获。 二、快速认识 …

支持Genero BDL 4gl语言的编辑器

内测版本出来啦。点此下载: FglDeveloper v1.0 →此版本已下架 还有bug,分享几张截图 模板产生器: 画面产生器: 编辑器各种变量提醒 详细功能小伙伴们下载后体验。

TOPGP5.3:导入jar包并在4GL中引用

查看环境$CLASSPATH 上传引用到的JAR包到以下目录 /u1/topprod/tiptop/ds4gl2/bin/javaad/jar 以上为GP5.3目录,其他版本系统可根据查看到的$CLASSPATH上传到相应目录设置环境变量 GP5.3系统中,$CLASSPATH环境变量的设置存在下图文件中: …

4gl调用WEB API,实现JSON传递(Demo)

测试环境: GP5.25 , fjs版本2.32,解析json所需要的jar依赖包 (PS: 如果没有记错是fjs2.32版本及以上才支持java bridge,所以GP 5.25以下的同学就不要用这种方式去测试) 测试内容: 利用此fjs版本对java bridge的支持,实现4gl调用WEB API,实现json传递 测试步骤如下: 1.下载本…

给大家展示一下4gl编辑器

(正式版已发布点击下载)特地为编辑器开发内置语法解析器,将在代码编辑过程中实时提示代码错误,并且错误提示都是中文显示(楼主英文太垃圾只有做中文了),不再需要频繁上传服务器了哦, 经过楼主努力已经把所有的内置函数…

【实习之T100开发】Genero FGL (TIPTOP4GL) 学习笔记(1)

Genero FGL 学习 Genero FGL 简介Genero FGL 开发(编译、连接、执行)第一个程序 Hello World变量与运算符变量定义(DEFINE)预定义变量变量集合(RECORD )数据结构(TYPE)变量赋值&…

win10忘记密码重置密码,一行代码帮你解决

步骤如下: 1.右击windows图标,选择进入Windows PowerShell(管理员) 2.敲入代码net user 加上你的用户名和新密码,Ok,问题解决,你就可以用你的新密码登陆了

win10 重置登录账户密码

在登陆界面按下强制关机(重复3次)。注意:不能进到登陆界面 出现下图时,选择“高级选项”: 选择“疑难解答”: 选择“高级选项”: 选择“命令提示符”: 在管理员窗口输入diskpart 回车…

服务器2008系统设置密码,win2008服务器设置密码

win2008服务器设置密码 内容精选 换一换 修改服务IP地址,并且将DNS地址指向本机,然后修改计算机名为server。安装AD域服务之后,机器名称会自动变成“主机名域名”的形式,例如server.huawei.com。在命令行下输入dcpromo.exe &#…

Win10系统修改开机密码

愚蠢的人才能进步,对于我这种记忆力差的人,密码这个东东随时忘,今天早上大无语事件,我自己都惊呆了,每天都用的办公电脑,今天死活想不起密码,死活打不开电脑,明明就是那些组合&#…

win10忘记密码_电脑忘记密码没关系,这招教你简单轻松改密码

相信"忘记电脑开机密码"这件事经常发生,忘记密码该怎么办呢?这个问题困扰了许多小伙伴,今天就教大家一种最简单的方法轻松重置电脑开机密码(本方法适用win10、win8、win7系统)。 划重点: 重置电脑开机密码一共分为三个步骤「 制作PE系统」「进入PE系统 」「重置密…

win10计算机默认用户名和密码是什么,win10共享的文件夹需要密码和用户名登陆...

一、共享文件夹所在电脑设置 1、右键我的电脑→管理→系统工具→本地用户和组→用户→中间空白区域右键→新用户; 2、输入自设的用户名和密码,如图勾选→创建; 3、右键需要共享的文件见→安全→编辑; 4、点击添加; 5、…

WIN10取消密码和休眠密码

安装Win10系统之后,发现每次开机都会出现登录密码?有些用户觉得很麻烦,所以想要取消Win10开机密码。那么,该如何操作呢? 按下winx组合键,启动快捷菜单 在弹出菜单选择运行,如下图所示 在运行框…

计算机共享网络的账号密码怎么设置密码,怎样才能给win10共享设置密码的操作方法...

怎样才能给win10共享设置密码呢?一些善于使用win10共享设置的小伙伴们,一定会为了隐私而设置win10的共享设置密码,为了可以完美的设置共享密码,小伙伴们找了好多方法,都没有解决,针对这一问题,小…