首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

(数据科学学习手札156)地图可视化神器kepler.gl 3.0版本发布

1 简介   大家好我是费老师,地图可视化神器kepler.gl终于带来了其3.0大版本的更新,距离其上一个正式版本2.5.5的发布已经过去了两年多的时间,这次的版本更新也围绕巨量地理信息数据可视化的多个方面实现了显著的提升...,今天的文章中,我就将为大家介绍kepler.gl新版本中的主要更新内容。...2 kepler.gl 3.0版本主要更新内容介绍 2.1 新增渲染特效功能   从3.0版本开始,kepler.gl右侧的功能按钮中新增effect panel面板:   通过它我们可以实现非常丰富多样的渲染特效功能...而在新版本中,kepler.gl新增了对Apache Arrow中特有的GeoArrow格式的支持,在官方的测试示例中,读取及解析百万行级别的多边形矢量表数据,arrow格式速度比geojson快了超过...从3.0版本开始正式将底层地图框架更换成相兼容的开源高性能地图框架Maplibre(这也是费老师我在日常GIS平台研发工作中使用的主力框架,强烈推荐)。

49010
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    mapbox没有tokentoken失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.

    2、找到mapbox-gl.js文件 在mapbox-gl文件夹下,按照如下的文件层级找到mapbox-gl.js文件 mapbox-gl/dist/mapbox-gl.js 3、...可能具体内容随着mapbox版本内容的差异有细微的变化,但mapbox3.x版本基本都有这个结构。...它的作用就是对你的token请求进行判断:如果含token的请求在mapbox服务器对应接口上没有拿到数据,返回状态码是401(即token无效),那么就报错:"A valid Mapbox access...既然本地已经拿到了数据,那么只需要找到拦截的部分,并将拦截部分的代码改掉,那么理论上就能正常显示地图。...那么直接在源码中搜索401,这么一大段代码里面一共只有5个地方出现过401,挨个检查一遍,其中有三个401是一大串数字中的一部分,剩下两个一个对应的报错是:“you may have provided

    11400

    React 地图组件 Mapbox 入门指南

    Mapbox 是一个强大的地图平台,提供了丰富的地图数据和工具,支持多种开发语言和框架。在 React 项目中使用 Mapbox 可以轻松实现地图的显示、标记、路径规划等功能。...基础概念Mapbox:Mapbox 是一个开源的地图平台,提供了地图数据、样式编辑器、地理编码、路线规划等服务。Mapbox GL JS 是一个用于在 Web 上渲染地图的 JavaScript 库。...基本用法3.1 初始化地图在 React 组件中初始化 Mapbox 地图的基本步骤如下:import React, { useEffect, useRef } from 'react';import...解决方法:确保使用的地图样式 ID 正确。可以在 Mapbox Studio 中创建和管理自定义样式,并使用生成的样式 ID。...style: 'mapbox://styles/your-username/your-style-id'4.4 地图性能问题问题:地图在移动设备上性能较差。解决方法:优化地图的加载和渲染性能。

    30910

    地图开发中WebGL着色器32位浮点数精度损失问题

    提供丰富的功能接口,包括点、线、面绘制,自定义图层、个性化样式及绘图、测距工具等,使开发者更加容易的实现产品构思。...继续尝试发现mapbox中也有类似问题:https://github.com/mapbox/mapbox-gl-js/issues/7268 mapbox这里也是使用了转换到视空间。...也有可能是在某些机型上即使设置了highp实际使用的浮点数也是32位的,按照这篇文章说法https://blog.csdn.net/abcdu1/article/details/75095781来看,下面这个确实是得到...对于project_uCommonUnitsPerWorldUnit2来说这里面用了一个泰勒级数的二阶展开(咨询了下管戈,泰勒级数展开项越多代表模拟值误差越小,这里用到了第二级)主要是在着色器中在project_uCommonUnitsPerWorldUnit...,为后续的点、线、面、seiya都做了精度基础。

    1.7K51

    Mapbox添加行政区矢量图层,Mapbox添加分级设色图层,Mapbox添加文本标记图层,Mapbox给行政区矢量数据添加名称,Mapbox自定义鼠标悬浮框,Mapbox添加天地图底图

    实时更新:Mapbox 提供的地图服务可以实时更新,确保地图信息的准确性和最新性。 多平台支持:Mapbox 的API和服务支持多种平台和语言,包括Web、iOS、Android等。...地图SDK:Mapbox 提供了软件开发工具包(SDK),使得开发者可以快速地在自己的应用中集成地图功能。...这里有一个额外引入的数据源,是一个点shpfile转化的geojson,这个点是用来规定显示文本注记的位置的,也可以直接在原先面数据源的基础上使用文本注记,那么文本注记会直接显示在每一个闭合曲线(拓扑展现就是一个面...)上显示。..."mapbox-gl"; import "mapbox-gl/dist/mapbox-gl.css"; // import MapboxLanguage from "@mapbox/mapbox-gl-language

    11900

    大头针显隐跟随楼层功能探索

    背景 mapbox 提供的大头针默认没有楼层相关属性,无法实现切换楼层时,只显示对应楼层的大头针效果。客户端同事无法解决此问题,希望我在 SDK 端解决此问题,故进行相关探索(‍♀️)。...由于有段时间没有做地图 SDK 开发了,故进行了如下各种踩坑尝试。...尝试思路 在 mapbox 提供的原有类和方法基础上实现; 尽可能不影响客户端已使用的 mapbox 原有大头针 api 相关代码。 思路一 思路来源:面向协议编程!...如果能够新增一个协议,使 mapbox 原大头针相关类遵守此协议,然后实现楼层属性,在使用时对楼层属性赋值,在 SDK 内部进行逻辑判定,就实现功能就好了! 想到这,不禁感慨,不愧是我!...改进思路:先移除,再添加与显示楼层相同的 或 未遵守HTMIndoorMapAnnotationAutoHide协议的 大头针(使客户端可以保留不受楼层切换影响的大头针显示效果)。

    1.8K60

    OpenGL与OpenGL在移动端的应用

    ,在这里我们使用OpenGLES 3.0,由于3.0兼容2.0并且功能更强,为何不用更好的呢 //注:在iOS上,可以支持opengles3.0的最低环境是iphone5s ios7.0....这就是标准化设备坐标,只有在这个范围内的坐标才会最终呈现在屏幕上(在这个范围以外的坐标都不会显示)。 我们通常会自己设定一个坐标的范围,之后再在顶点着色器中将这些坐标转换为标准化设备坐标。...接着对装配好的图元进行裁剪(clip):保留完全在视锥体中的图元,丢弃完全不在视锥体中的图元,对一半在一半不在的图元进行裁剪;接着再对在视锥体中的图元进行剔除处理(cull):这个过程可编码来决定是剔除正面...这些片元接着被送到片元着色器中处理。这是从顶点数据到可渲染在显示设备上的像素的质变过程。 5).Fragment Shader 片元着色器通过可编程的方式实现对每个片元的操作。...五.绘制 OpenGL ES可绘制的基本图元是点、线和三角形,如下我们分析一段绘制的代码(代码已经过处理): -(void)render { [EAGLContext setCurrentContext

    2.7K30

    大头针显隐跟随楼层功能探索

    目录 背景 尝试思路 思路一 思路二 思路三 思路四 集成 代码逻辑 新建自定义类 添加大头针管理控制器 增加设置大头针图片素材代理 SDK内部创建大头针管理控制器 SDK内部增加大头针显隐判定 立刻显示与当前显示楼层相同楼层的大头针...客户端同事无法解决此问题,希望我在 SDK 端解决此问题,故进行相关探索(?‍♀️)。由于有段时间没有做地图 SDK 开发了,故进行了如下各种踩坑尝试。...尝试思路 在 mapbox 提供的原有类和方法基础上实现; 尽可能不影响客户端已使用的 mapbox 原有大头针 api 相关代码。 思路一 思路来源:面向协议编程!...如果能够新增一个协议,使 mapbox 原大头针相关类遵守此协议,然后实现楼层属性,在使用时对楼层属性赋值,在 SDK 内部进行逻辑判定,就实现功能就好了! 想到这,不禁感慨,不愧是我!?...改进思路:先移除,再添加与显示楼层相同的 或 未遵守HTMIndoorMapAnnotationAutoHide协议的 大头针(使客户端可以保留不受楼层切换影响的大头针显示效果)。

    1.7K20

    OPengl、DirectX、OPenCV、OpenCL

    本文链接:https://blog.csdn.net/daoer_sofu/article/details/48548659 ###1.Opengl   GLSL:Opengl着色器语言,在GPU上执行的可编程渲染管线...OpenGL 1.0 版本中,支持固定管线,而 OpenGL 2.0 版本不再支持固定管线,只支持可编程管线。OpenGL ES是Opengl子集,支持嵌入式设备。...版本(否则有一些异常问题出现)   OpenGL中的gl库是核心库,glu是实用库,glut是实用工具库,gl是核心,glu是对gl的部分封装,glut是OpenGL的跨平台工具库   OPenGL...分为:核心模式(不支持以前版本)和兼容模式(支持以前版本的函数) 状态变量:   1.Opengl State Value,保存Opengl中的相关参数设置,如glClearColor设置清除颜色保存在...GL_COLOR_BUFFER_BIT变量中,可以把OPengl当做状态机,通过不同的状态变量开关(glEnable、glDisable只有两个状态的变量)控制,实现不同的显示效果。

    2.2K50

    WebGL开发地图可视化系统

    技术选型:WebGL 框架:选择 Three.js、Mapbox GL JS 或 Deck.gl。后端支持:如果需要动态数据,选择后端技术栈(如 Node.js、Python)。...纹理映射:将地图瓦片作为纹理映射到 WebGL 的几何体上。层级细节(LOD):根据缩放级别动态调整地图细节,优化性能。4.数据可视化目标:在地图上叠加可视化数据(如点、线、面)。...步骤:数据预处理:将原始数据转换为适合 WebGL 渲染的格式(如顶点数据、颜色数据)。渲染技术:点数据:使用粒子系统或点精灵(point sprites)。线数据:使用线段或带状几何体。...图例:显示可视化数据的颜色编码和含义。数据面板:显示点击查询或区域选择的结果。7.测试与部署目标:确保系统的功能、性能和稳定性。步骤:功能测试:测试地图渲染、数据可视化和交互功能。...性能测试:测试系统在大数据量和复杂场景下的性能表现。跨平台测试:测试系统在不同浏览器和设备上的兼容性。部署:将系统部署到 Web 服务器或云平台(如 AWS、Azure)。

    6910

    可视化 | Uber 工程智能大数据可视分析案例

    UBER 平台每天都要处理数十亿的基于地理信息的GPS实时定位数据,要将这些数据进行可视化和可视分析,是一个巨大的挑战。 拖动鼠标在既定的半径区域内显示峭壁地形分布。...UBER 可视化团队,根据不同的客户开发了多个地图应用程序。一种客户是在UBER 覆盖的400多座城市中的普通管理人员和城市运维团队。这个群体需要实时了解供应和需求分布信息。...react-map-gl 提供 React-friendly 顶层的 MapboxGL,程序库的Mapbox 来自数据量庞大的UBER 后台。...在Travis Kalanick的TED演讲视频中,可以一览UBER 团队制作的数据可视化的展示案例,通过对比使用uberPOOL街段交通和未使用uberPOOL的阶段交通的交通流量,呈现城市交通状况。...在做内部产品可视化分析时,数据处理是又一项充满挑战的工作,但视觉上的美观起着至关重要的作用,在视觉刺激和人对信息的消化总往往比信息技术更加有效,设计拥有更大的优先权。

    2K90

    设计高性能树形菜单,支持数十万条数据加载。

    Geobuilding是一款傻瓜化高可用的GIS数据生产工具,可以导出GEOJSON、SHP、三维模型等格式。在软件中增加[自定义树形菜单]一直悬而未决,直到最近更新了增加树形菜单功能。...如果是5级结构,选择最底数据时,他的父级会全部展开。这又会产生大量dom。 如何解决大数据量的树形数据展示、选择? 下图是在***Geobuilding***软件中绘制的几个polygon要素。...我们知道Geojson数据有点/线/面。而高德地图、maplibre-gl、mapbox-gl、openlayers等都可以自定义样式渲染geojson数据,比如线颜色、面填充色、文字标记等。...数组 } }); 添加三个层 1 面层用于填充按钮背景 mian 2 线层对按钮描边 xian 3 符号层 显示文字 dian arduino复制代码map.addLayer...添加点击事件 javascript复制代码//在面图层上监听点击事件 map.on('click', 'mian', function (e) { let prop = e.features[0

    14400

    opengl入门教程pdf

    OpenGL的高效实现(利用了图形加速硬件)存在于Windows,部分UNIX平台和Mac OS。这些实现一般由显示设备厂商提供,而且非常依赖于该厂商提供的硬件。...线 在OpenGL中,线代表线段(Line Segment),不是数学意义上的那种沿轴两个方向无限延伸的线。这里的线由一系列顶点顺次连结而成,有闭合和不闭合两种。...将特定范围内的坐标转化到标准化设备坐标系的过程(而且它很容易被映射到2D观察空间坐标)被称之为投影(Projection),因为使用投影矩阵能将3D坐标投影(Project)到很容易映射到2D的标准化设备坐标系中...多重纹理,多重纹理允许应用几个纹理,在纹理操作管线中把它们逐个应用到同一个多边形上。 。。。...参数format和type描述了纹理映射的格式和数据类型,它们在这里的意义与在函数glDrawPixels()中的意义相同,事实上,纹理数据与glDrawPixels()所用的数据有同样的格式。

    3.2K31

    OpenGL ES 着色器语言丨音视频基础

    和 GLSL ES 3.0 上,意思就是说在 OpenGL ES 2.0 上编写的着色器无需修改就可以迁移到 OpenGL ES 3.0 中运行,但是反过来则是用 GLSL ES 3.0 写的 Shader...不能直接运行在 OpenGL ES 2.0 上,所以这篇文章我们以 OpenGL ES 2.0 对应的 GLSL ES 1.00.17 版本来讲解,也会对 OpenGL ES 3.0 对应的 GLSL...在同一渲染管线中,前一阶段的被 out、centroid out 修饰的变量的值会被拷贝到下一阶段用 in、centroid in 修饰的同名变量。...uniform 修饰的变量也有数量限制,但是定义了未使用的变量不算入限制数量中。...default > :在没有显示指定参数限定符的情况下,默认 in 修饰函数参数,作用就如同 C/C++ 中的形参。

    1.6K10

    【笔记】《计算机图形学》(17)——使用图形硬件

    这里的实时渲染通常指的是以60Hz频率在屏幕上刷新显示的渲染, 如果刷新频率长期在15Hz以下我们便不再认为它是实时渲染....显示缓冲与屏幕像素是一一对应的, 设置的目的是防止由于屏幕刷新间隔内画面还没有渲染好引起的画面撕裂情况, Cycle of Refresh 刷新循环 将显示缓冲中的数据刷新到屏幕上就需要两个相同的缓冲区...在每个渲染循环结束的时侯, 当前的后缓冲区数据会被复制到前缓冲区中, 从而显示在屏幕里, 后缓冲区则会被清空用于下次写入....在着色器代码中, 我们都可以将这些数据当作一个独立元素来进行操作, 着色器会自动使用SIMD并行交给GPU处理. // 指明此着色器使用的GLSL版本 #version 330 core // layout...GPU上, 然后在GPU上编译执行, 下面的三个函数是每个着色器应用前都需要调用的: glCreateShader 得到硬件上放置着色器的句柄 glShaderSource 将着色器载入到GPU的显存中

    1.6K30

    Uber大数据可视分析:让数据为用户讲故事

    拖动鼠标在既定的半径区域内显示峭壁地形分布 UBER 可视化团队,根据不同的客户开发了多个地图应用程序。一种客户是在UBER 覆盖的400多座城市中的普通管理人员和城市运维团队。...react-map-gl 提供 React-friendly 顶层的 MapboxGL,程序库的Mapbox 来自数据量庞大的UBER 后台。...数据可视化的强有力的作用是视觉上的叙述和数据的艺术形式。 面向公众: 让数据讲故事 UBER 的数据可视化有很多种方式为我们讲故事。...在Travis Kalanick的TED演讲视频中,可以一览UBER 团队制作的数据可视化的展示案例,通过对比使用uberPOOL街段交通和未使用uberPOOL的阶段交通的交通流量,呈现城市交通状况。...在做内部产品可视化分析时,数据处理是又一项充满挑战的工作,但视觉上的美观起着至关重要的作用,在视觉刺激和人对信息的消化总往往比信息技术更加有效,设计拥有更大的优先权。

    1.4K40

    OpenGL ES 3.0 简介

    main(){ v_color = a_color; # 读取输入属性并写入输出属性上 # 内建变量gl_Position 是自动声明的 gl_Position = u_mvpMatrix...对于每个图元,会抛弃图元不在 视锥体(屏幕可见的区域)内的部分,在视锥体内的区域的部分经过裁剪之后,将顶点位置转换为屏幕坐标。然后传递到管线的下一阶段 —— 光栅化阶段。...(Xw,Yw)的片段只能修改 帧缓冲区 中位置为(Xw,Yw)的像素。...下图描述了OpenGL ES 3.0 逐片段操作阶段。 像素归属测试——确定帧缓区中的位置(Xw,Yw)的像素是不是归OpenGL ES 所有。...被遮挡的像素则不属于OpenGL ES 的上下文,从而不显示这些像素。此过程在OpenGL ES 内部处理,不由开发人员控制。

    1.4K20
    领券