在之前数据瓦片方案的介绍中,我们提到过希望将瓦片裁剪放入 WebWorker 中进行,以保证主线程中用户流畅的地图交互(缩放、平移、旋转)。
大家好我是费老师,地图可视化神器kepler.gl终于带来了其3.0大版本的更新🎉,距离其上一个正式版本2.5.5的发布已经过去了两年多的时间,这次的版本更新也围绕巨量地理信息数据可视化的多个方面实现了显著的提升,今天的文章中,我就将为大家介绍kepler.gl新版本中的主要更新内容。
JavaScript API GL近期为支持物流行业实现了几何图形编辑器,用户可通过编辑器接口进行点、线、面、圆的绘制和编辑。在物流行业中常见的使用场景是配送区域及地理围栏的绘制,常会有对已有区域进行拆分或者合并的需要,所以编辑器也提供了相应的功能。本文介绍了如何基于Turf实现多边形的拆分及合并。
Turf.js是JavaScript 空间分析库,由Mapbox 提供,Turf 实现了
腾讯位置服务在半年前推出JavaScript API GL beta版,这期间很多开发者将其采用到自己的项目中,同时为我们反馈使用问题与建议,帮助JavaScript API GL得到快速成长。在持续了8个版本大迭代,几十次小迭代后,正式对外发布。 JavaScript API GL是新一代基于WebGL实现的高性能三维渲染引擎而封装的一套3D版本地图API,借助GPU的计算能力实现海量数据渲染,满足3D视角下的地图展示,旨在让地图呈现给用户最真实的世界。 3D效果与流畅体验于一身 缩放由
一、三角形的绘制 在OpenGL中,面是由多边形构成的。三角形可能是最简单的多边形,它有三条边。可以使用GL_TRIANGLES模式通过把三个顶点连接到一起而绘出三角形。 使用GL_TRIANGLE_STRIP模式可以绘制几个相连的三角形,系统根据前三个顶点绘制第一个多边形,以后每指定一个顶点,就与构成上一个三角形的后两个顶点绘制形的一个三角形。 使用GL_TRIANGLE_FAN模式可以绘制一组相连的三角形,这些三角形绕着一个中心点成扇形排列。 第一个顶点构成扇形的中心,用前三个顶点绘制会最初的三角形后,
最近公司项目需求,要做一个百度地图电子围栏的功能,在网上查了一下资料,看了很多博客,大多数都写的不是很详细,我看的云里雾里的,最后终于集合所有的几篇资料,自己做出了一个简单的demo,下面将过程记录和分享一下,希望给予有需要同学一些帮助,我这个人说话比较啰嗦,所以写的一定会很详细的,哈哈!闲言少叙,开始了。
PostGIS是一个空间数据库,空间数据库像存储和操作数据库中其他任何对象一样去存储和操作空间对象。
使用 glBegin(GL_POLYGON) 设置绘制多边形 , 不管有几个点 , 都按照指定的顺序连接起来 ;
目前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识。另外,我之前的工作中积攒了一些从零开始搭建 WebGL 地图引擎的微薄经验,虽然最终遗憾没有上线,但在其中学到的一些WebGL知识还是值得分享一下。WebGL 可以说是前端可视化技术领域难度最大的一项图形编程技术,所以今天就结合 WebGIS 这个话题顺带分享一些 WebGL 的相关知识,不会太深入,很细节的技术点在后续文章里再讲解。
定位器地图只有一项工作:显示某物在哪里。这意味着它只需要很少的信息:只需要一个特征区域的指示,以及足够的地理背景,让人们了解它在世界上的位置。保持定位器地图尽可能简单,以防止它在视觉上与主地图或主要故事竞争。
通过javascript可以对矩形区域进行操作,可以自由的绘制图形,文字等。而且,可以添加影子,进行涂色,另外还可以对绘制的图形进行旋转等操作。
通过一个基础案例来了解这些渲染技巧:正背面剔除、深度测试、多边形偏移。应该更容易理解。
上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。
作者 | 陈国栋 随着移动互联网的一路高歌,越来越多的 App 不满足系统原生的 UI 体系。开启了各种花式的玩法。早几年 ReactNative、Weex 等,企图尝试让系统组件可以像浏览器一样动态加载,从而提高发版本的效率。更早几年还有一众通过在系统 Webview 基础上面搭建起来的动态化方案,包括当下诸多的小程序平台等。Flutter 的发布仿佛给业界带来一丝新的生机,通过 Skia 渲染器完美的保证了在诸多平台渲染的一致性。但也带来专属于 Flutter 本身的一些问题。不过多的讨论关于 Flut
各位同学们大家好,又到了周末写文章的时间,之前群里有粉丝提问, 就是shader不是很理解。然后今天他就来了, 废话不多说,读完今天的这篇文章你可以学到以下几点:
面作为地图渲染的基本元素之一,在地图中可以代表各种形式的区域,例如海面、绿地等。面数据通常以离散点串形式存储,因此渲染时最关注的是如何将其展现为闭合的图形。
开发基于 OpenGL 的应用程序,必须先了解 OpenGL 的库函数。它采用 C 语言风格,提供大量的函数来进行图形的处理和显示。OpenGL 库函数的命名方式非常有规律。所有 OpenGL 函数采用了以下格式: . <库前缀><根命令><可选的参数个数><可选的参数类型> 库前缀有 gl、glu、aux、glut、wgl、glx、agl 等等,分别表示该函数属于openGL 的哪个开发库,从函数名后面中还可以看出需要多少个参数以及参数的类型。I 代表 int 型,f 代表 float 型,d 代表 double 型,u 代表无符号整型。 例如: glVertex3fv()表示了该函数属于 gl 库,参数是三个 float 型参数指针。我们用glVertex*()来表示这一类函数。
在OpenGL/OSG中,由于效率的原因,默认是直接显示的简单的凸多边形。如果直接强行显示凹多边形,渲染结果是不确定的。所以对于复杂的凹多边形,需要将其分解成简单的凸多边形,这个过程就是多边形分格化。在OSG中是通过osgUtil::Tessellator类来实现多边形分格化的。
如果要把一个对象的线框绘制出来,一般的方法是先绘制实体对象,然后通过gl.LINES的模式再绘制一遍模型,此时模型的线框就会被绘制出来。
前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现,希望能够帮到一些朋友。当然,如果有什么意见的可以直接跟我说,大家一起交流才会进步。 效果图 image.png http://www.hightopo.com/demo/subway/index.html 地图稍微内容有点多
本文要点在于Python扩展库pyopengl的应用,关于OpenGL函数参数含义可以查阅有关资料。 import sys from OpenGL.GL import * from OpenGL.GLUT import * from OpenGL.GLU import * class MyPyOpenGLTest: def __init__(self, width = 640, height = 480, title = b'OpenGL--gradient color'): glutI
片元着色器(Fragment Shader):顶点之间的轮廓中的所有像素都会经过片元着色器处理。(并行处理)
一款好用的数据标注工具对于创建高质量的AI训练数据集至关重要,您可以通过高效的标注工具提高数据标注速度,让工作流变得更为有序。随着计算机视觉技术的发展,我们可以在开源社区看到越来越多的图像标注工具,任何人都可以免费使用并从强大的功能中获益,我们在下文中列举了10款我们认为优秀的开源标注工具!
其实 Fabric.js 官网也有这个demo:Fabric.js demos · Custom controls, polygon 。但这个demo可能对于刚接触 Fabric.js 的工友来说有点过于复杂,所以本文就把该demo进一步简化,简化到老奶奶也能看得懂的!
了解曲线的生成原理,掌握几种常见的曲线生成算法,利用VC+OpenGL实现Bezier曲线生成算法。
(1)结合示范代码了解曲线生成原理与算法实现,尤其是Bezier曲线。 (2)调试、编译、修改示范程序。
kepler.gl是由Uber开发的进行空间数据可视化的开源工具,是Uber内部进行空间数据可视化的默认工具,通过其面向Python开放的接口包keplergl,我们可以在jupyter notebook中通过书写Python代码的方式传入多种格式的数据,在其嵌入notebook的交互窗口中使用其内建的多种丰富的空间数据可视化功能,本文就将针对在jupyter notebook中使用keplergl的基本用法进行介绍。
求值器能够描述任何角度的多项式或有理多项式样条或表面,包括B-样条,NURBS(非均匀有理B-样条)表面,Bezier曲线和表面,以及Hermite样条。由于求值器只提供了对曲线或表面底层描述,需要使用更高层次的NURBS接口来生成B样条曲面。 OpenGL提供了NURBS接口,该接口封装了大量代码,不仅包含渲染功能,也提供了修剪曲面等额外功能,NURBS函数使用平面多边形进行渲染。B样条曲面包含非均匀有理B-样条,另外Bezier的缺点是增加很多控制点时曲线变得不可控,而B样条曲面调整4个控制点可以得到较好的效果。 NURBS接口生成B样条曲面的过程如下。 (1)生成控制点和创建NURBS对象:
【产品动态·导读】 地点云全新发布 - 用自己的数据,建自己的地图 微信小程序插件 - 新增地图选点插件 JavaScript API GL连发3版 - 常用功能齐备,兼容性增强 地图SDK升级至v4.2.7 WebService - 网约车场景能力增强 工单体验持续优化 基础服务能力提升 地点云全新发布 - 用自己的数据,建自己的地图 地点云全新发布v1.0 beta,帮助开发者快速、低成本实现以下应用场景: 连锁网点地图:如门店地图、售货机地图、到店签到、办事网点等; 设备/设施管理:如摄像头、
本文将深入探讨 Geolocation API 的概念、使用方法、实际应用以及兼容性和优缺点等方面内容,帮助您更好地了解和应用这个有趣的 API。
前面发了一些关于 Shader 编程的文章,有读者反馈太碎片化了,希望这里能整理出来一个系列,方便系统的学习一下 Shader 编程。
#include <iostream> #include <fstream> #include<vector> #include <GL/glut.h> using namespace std;
Dash是基于Flask的Python可视化工具,严格说来由三个部分组成,首先是Flask提供了标准web环境,再次是plotly这个图表可视化工具,最后是与dash相配套的html、图表等交互式组件。本人也陆续试过pyechart,但就集成性和可视化而言,与dash还是有一定差距。
前面写了OpenGLES的入门篇,一些朋友觉得还不错,找到我问了一些知识,这次我有针对性的写下这篇文章,也为我OpenGLES进阶篇做个开始。 我已认证微信,感兴趣朋友可进我个人主页,点击微信小图标加
最近使用过深度学习图片标注工具 labelme,发现其中有个 “Create AI-Polygon” 功能,也就是创建 AI 多边形,发现好像网络上基本没有相关介绍的文章,所以我打算来抛砖引玉一下。
今年疫情以来,工作都比较紧凑,没能抽出时间来记录工作日常了。最近接触一个项目需要使用到百度地图的围栏功能,作为前期调研,先探探路。 经过一番搜搜,找到一篇不错的文章。专门介绍,百度地图围栏的。地址如下:https://www.cnblogs.com/CherishTheYouth/p/CherishTheYouth_20190416.html
最近一直缺乏原创文章,只因被各种琐事所累,难以静下心来写文章。这篇文章也非原创,分享下我知道的一些低多边形(Low-Poly)的素材。低多边形(Low-Poly)最近火得一塌糊涂——如果你关注国外的设计圈子的话。 低多边形(Low-Poly)简介 Low Poly 原是 3D 建模中的术语,指使用相对较少的点线面来制作的低精度模型,一般网游中的模型都属于低模。而现在,Low Poly 进入了平面设计领域,继扁平化(Flat Design)、长阴影(Long Shadow)之后,低多边形(Low Poly)火
在这篇文章中,我将分享一些与我在博士研究期间积累的图像注释相关的想法。 具体来说,我将讨论当前最先进的注释方法,它们的趋势和未来方向。 最后,我将简要介绍我们正在构建的注释软件,并对我们的公司进行一些简单叙述。
今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关, 因此,如果您决定使用不同的渲染器,不必重写材质。
这篇博客将介绍python中可视化比较棒的3D绘图包,pyecharts、matplotlib、openpyxl。基本的条形图、散点图、饼图、地图都有比较成熟的支持。
在本文中,我们将大致了解正向地理编码和反向地理编码的概念。 我们将使用 Mapbox 和 Vue.js 2.6.11 构建一个应用这些概念来显示特定位置的应用程序。
多边形地图是填充地图的一种补充,基于地理均码,数据文件绘制一个多边形的区域,实现自定义的填充地图。也可以这样理解:以矢量数据为基础,轮廓界线为多边形的一类地图。
建筑设计图纸或蓝图总是以 PDF 格式保存,因为它即使在不同的操作系统上也能保持文档的显示效果和质量。对于常见的 PDF 编辑器来说,标记、编辑和签名是必不可少的功能。在建筑、工程和施工(AEC)行业,对 PDF 测量工具的需求变得至关重要。
本想用自动纹理坐标生成做的,可是红宝书上说得一点都不明白。网上有个人的课程设计是自己画的球,就是一个个四边形的拼个球,然后再给四边形贴图。这样太麻烦了!逛啊逛,让我找到了另一种方法,仅仅几行代码: // 画地球 void OpenGL::DrawEarth(void) ...{ GLUquadricObj *quadObj = gluNewQuadric();//创建一个二次曲面物体 gluQuadricTexture(quadObj,GL_TRUE); //启用
本文主要是总结一下web页面中的旋转矩形的碰撞检测,碰撞算法本身并不难,只是需要注意web坐标系在计算中的影响。碰撞检测应该是在游戏等场景中很常见且基础的功能,本文记录了在JavaScript API GL遇到了这类碰撞问题的调研和实现的过程。
一直想在PyQt中找一个能显示有限元2D云图的部件,可惜QLinearGradient类只能使颜色在两个点之间插值变化,3个或以上点时则无能为力。还好我们可以使用PyOpenGL。
看似简单却具有极大的挑战性和趣味性,这就是其魅力所在!温馨提示,体验后再阅读此文体验更佳哦!
领取专属 10元无门槛券
手把手带您无忧上云