精华内容
下载资源
问答
  • Vue 包装器注意:这个包装器让你使用底图技术渲染可视化,请前往deck.gl 官方文档了解更多相关信息。 安装 从 NPM 安装包。 这个包需要在你当前的项目中安装@deck.gl/core 。 安装 Deck.gl npm i @deck.gl/core ...
  • deck.gl-data:数据可视化库deck.gl示例的数据(https:uber.github.iodeck.gl#)
  • 打字 TypeScript声明文件 ...declare module "deck.gl" { export namespace DeckTypings {} } 版本对应 deck.gl版本 卡纸型 5.xx 1.xx 6.xx 2.xx 7.xx 3.xx 8.xx 4.xx 已知的问题 这些类型现在是v4,
  • deck.gl点动画演示 一个使用deck.gl和MapBox为点设置动画的演示。 使用的数据集是美国的所有公共图书馆。 演示版 用于DelayedPointLayer演示(经度擦除动画) 为DelayedPointLayer演示(目标波纹动画) 有关...
  • 自定义的deck.gl图层,可沿ArcLayer设置3D立方体的ArcLayer 。 多维数据集定向为面向圆弧路径。 立方体在10秒的循环中每秒移动弧长的1/10 。 参考起始代码: ...
  • Google Maps JS API / deck.gl示例应用程序 此存储库包含示例应用程序,这些应用程序展示了如何将与数据可视化框架一起使用。 如果您是第一次查看这些示例,请从开始,该显示了我们当前在单个UI中拥有示例的所有...
  • DECK.GL时间滑块的实现 :hourglass_done: 我需要一些咖啡因来工作:) 一个React-Redux Time Slider实现,允许您呈现时态(甚至非时态)数据。 该示例与库完全集成, 库是WebGL支持的框架,用于对大型数据集进行可视...
  • R库可让您使用Mapbox GLDeck.gl在交互式地图上绘制大型数据集(尽可能多的GPU和浏览器可以处理)。 什么是mapbox? Mapbox是用于移动和Web应用程序的位置数据平台。 我们提供了构建基块,以将位置特征(如地图,...
  • git clone git@github.com:uber/nebula.gl.git cd nebula.gl yarn cd examples/advanced yarn export MapboxAccessToken='<Add your key>' yarn start-local 您现在可以查看和编辑几何图形。 安装 ...
  • 用法 yarn install yarn start 资料格式 样本数据存储在data文件夹中。
  • uber's deck.gl

    2019-03-14 17:57:14
    deck.gl is designed to make visualization of large data sets simple. It enables users to quickly get impressive visual results with limited effort through composition of existing layers, while ...
  • @ superset-ui / plugins-deckgl :electric_plug: :light_bulb: 演示(故事书) 最新版本: : 当前的主人: : 配套 包裹 版本 贡献与发展指南 请阅读,其中包括开发环境设置以及您在此存储库中应了解的有关编码...
  • 传单的deck.gl插件 安装 npm install deck.gl-leaflet 要么 [removed][removed] 用法 import { LeafletLayer } from 'deck.gl-leaflet'; const map = L.map(...); const deckLayer = new LeafletLayer({ views...
  • google-maps-deckgl-overlay 在Deck.gl中使用Google Maps的示例。 叠加层逻辑主要来自 来自航班数据 演示版 查看
  • 构建在,它支持使用和deck.gl的构建的地图。 在尝试 阅读 在上获取它,该版本具有Plotly发布的最新版本。 在社区维护的软件包索引)上获取它。 为确保此版本为最新版本,请在PyPi页面上进行验证。 入门 快速入门...
  • 数据集 使用san_francisco 左侧配置 配置在这三种可视化中都是一样的: ...这里的Height相当于直方图中...deck.gl 3D Hexagon可视化结果 deck.gl Grid可视化结果 deck.gl Screen Grid可视化结果 ...

    数据集

    使用https://github.com/apache-superset/examples-data中的

    san_francisco.csv.gz

     

    左侧配置

    配置在这三种可视化中都是一样的:

    这里的Height相当于直方图中的y轴,如果改成sum(number)会导致显示效果不明显.

     

    deck.gl 3D Hexagon可视化结果

     

     

    deck.gl Grid可视化结果

     

     

    deck.gl Screen Grid可视化结果

    展开全文
  • deck.gl是由uber开发出来的基于WebGL的开源大数据量可视化框架,具有提供不同类型可视化图层,能够和mapbox-gl集成。 deck.gl项目地址: https://github.com/visgl/deck.gl deck.gl和mapbox-gl集成有两种方式: 1、...

    deck.gl是由uber开发出来的基于WebGL的开源大数据量可视化框架,具有提供不同类型可视化图层,能够和mapbox-gl集成。
    deck.gl项目地址:
    https://github.com/visgl/deck.gl
    deck.gl和mapbox-gl集成有两种方式:
    1、以扩展图层的形式,将deck.gl作为mapbox-gl的一个图层加载进去,这里是mapbox-gl作为主体;

    //引用mapbox-gl和deck.gl的类库
           const {  MapboxLayer,
    		   ScatterplotLayer,
    		    GeoJsonLayer
    		  } = deck;
    	const AIR_PORTS ='json数据位置'//定义deck.gl图层
                 const myDeckLayer = new MapboxLayer({
    			id: 'mydecklayer',
    			type: GeoJsonLayer,
    			data: AIR_PORTS, 
    			pickable: false,
    			stroked: true,
    			filled: true,
    			autoHighlight: false,
    			highlightColor: [0, 180, 0, 200],
    			extruded: false,
    			lineWidthScale: 0,
    			lineWidthMinPixels: 1,
    			getFillColor: [0, 0, 180, 0],
    			getLineColor: [255, 0, 0, 255],
    			getRadius: 0,
    			wireframe: false,
    			getLineWidth: 10,
    			getElevation: 8000  
    			});
    
                       //初始化mapbox-gl
              let  map = new mapboxgl.Map({
               container: 'map',
               style:  mapbox地图样式配置,
    		   center: [116, 37],
               zoom: 9
    				});
                            //添加deck.gl图层
                 map.addLayer(myDeckLayer);
                           //根据id移除图层
                 map.removeLayer('mydecklayer');  
    

    2、以deck.gl为主体,设置deck.gl中使用的地图是mapbox-gl;

    //初始化deck.gl的对象,嵌入mapbox-gl的相关信息
                 deckgl = new deck.DeckGL({
    				container: 'map',
    				mapStyle: 'mapbox-gl地图的样式',
    				latitude: 36,
    				longitude: 117,
    				zoom: 5,
    				bearing: 0,
    				pitch: 30
    		 });
    

    以mapbox-gl作为主体时,添加的deck.gl的图层并不能够响应对应的鼠标事件,反之,以deck.gl作为主体,在mapbox-gl中添加的图层,也不能响应对应的鼠标事件。
    集成deck.gl能够丰富地图的大数据展示效果,实现mapbox-gl本身不能实现的一些效果,增强地图的可视化效果。
    比如mapbox-gl中加载的面状图层,不支持带高程的显示,但是deck.gl就能够实现。
    在这里插入图片描述
    不过deck.gl不能支持中文注记的显示,这个在使用中要注意。
    更多的deck.gl效果,可以参见官网的例子进行集成实现。

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

    展开全文
  • mapbox-gl开发:deck.gl轨迹图效果

    千次阅读 2020-10-29 09:00:27
    apbox-gl中能够集成deck.gl的图层,参见mapbox-gl开发:集成deck.gl,扩展集成的形式是使用mapbox-gl的自定义图层(CustomLayer),参见mapbox-gl API说明: ...

    apbox-gl中能够集成deck.gl的图层,参见mapbox-gl开发:集成deck.gl,扩展集成的形式是使用mapbox-gl的自定义图层(CustomLayer),参见mapbox-gl API说明:
    https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface

    动态轨迹图的效果,在echarts里有,同样deck.gl中也有对应的例子。
    echarts官方效果页面:
    https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effect
    deck.gl的样例是TripsLayer,有时网络的原因不一定能够浏览到。
    https://deck.gl/examples

    在mapbox-gl集成的过程:
    把官网的trips-v7.json下载下来,进行数据测试,其中的数据格式如下图,有多条这样的数据组成:
    在这里插入图片描述
    引入deck.gl使用的图层:

    const {MapboxLayer,TripsLayer} = deck;
    

    定义一个deck.gl的mapbox自定义图层:

    //定义当前时间,这个时间的变化实现轨迹动态效果
    var  time = 100;
            myDeckLayer = new MapboxLayer({
    		id: 'mydecklayer',
         //设置图层类型为轨迹图
    		type: TripsLayer,
                    //使用trip数据
    		data: tripdata,
                    //获得数据中的路线和时间数据
    		getPath: d =>{  
    		return d.path;
    		},
    
    		getTimestamps: d => d.timestamps,
                    //设置轨迹颜色、透明度、长度等信息
    		getColor: [253, 128, 0],
    		opacity: 0.5,
    		widthMinPixels: 5,
    		 rounded: true,
    		trailLength: 100,
                    //使用time变量,之后变化time的值实现动态效果
    		currentTime: time
    		}); 
           //mapbox-gl添加图层
    map.addLayer(myDeckLayer);
    //循环修改时间,实现轨迹的动态效果
                 function animate() {
    		time = (time+1.5)%1800;
    		myDeckLayer.setProps({ currentTime: time });
    		requestAnimationFrame(animate); 
    	     }
    

    效果如下图:
    在这里插入图片描述
    更多文章请关注公众号查看!
    在这里插入图片描述

    展开全文
  • 因此,我们创建了一个程序包,该程序包使您可以直接在Viewer,Markdown Docs或使用Shiny中从R可视化deck.gl中的数据。 。 我们可以使用Deck.gl中提供的现有图层(例如;)来可视化我们的数据。 线,六边形,图标,...
  • deck.gl | WebGL2支持的高性能大规模数据可视化 deck.gl旨在简化基于WebGL的高性能大型数据集可视化。 用户可以通过组合现有的图层或使用deck.gl的可扩展体系结构来满足自定义需求,以最小的努力快速获得令人印象...
  • Deck.gl 相关

    千次阅读 2019-11-26 20:06:20
    github:https://github.com/uber/deck.gl 官网:https://deck.gl/ demo:https://deck.gl/#/examples/ 1. 到https://www.mapbox.com/申请 Key; 2. clone github项目下来; 3. 进入 /examples/website 目录下的任意...

    github:  https://github.com/uber/deck.gl

    官网: https://deck.gl/

    demo: https://deck.gl/#/examples/

    1. 到 https://www.mapbox.com/ 申请 Key;

    2. clone github项目下来;

    3. 进入  /examples/website 目录下的任意一个文件夹;

    4. npm install  / yarn 安装依赖;

    5. 修改目录下 package.json 中的 start 命令: 其中的 MapboxAccessToken 是你在 mapbox 申请到的 key 

    "scripts": {
        "start-local": "webpack-dev-server --env.local --progress --hot --open",
        "start": "MapboxAccessToken='pk.kxxxxxx' webpack-dev-server --progress --hot --open"
      },

    6. 终端运行 npm run start ;

    展开全文
  • purescript-deck-gl 这是Uber的库的React包装器-一个用于在map-gl之上创建数据可视化的库。 每个虚拟化(例如图标绘制,屏幕网格等)都作为“图层”附加。 每个单独的层都有其自己的配置选项,并且在所有层中共有...
  • import React, {Component} from 'react'; import {render} from 'react-dom'; import {StaticMap} from 'react-map-gl'...import {AmbientLight, PointLight, LightingEffect} from '@deck.gl/core'; import {Hexag...
  • import React, {Component} from 'react'; import {render} from 'react-dom'; import {StaticMap} from 'react-map-gl'; import DeckGL from '@deck.gl/react'...import {ScatterplotLayer} from '@deck.gl/layers'...
  • 最近在项目中需要用到地图,并且需要在上面绘制图层,这篇文章来记录如何利用deck.gl实现图层的绘制功能。 代码参考deck.gl官网api写的 主要代码: 在创建多边形图层前,需要先将多边形图层的数据转换成geoJson格式...
  • 问题1:Deck.gl中vertex-shader中的attribute数据是如何通过layer.props更新的? 问题2:layer的props中函数型accessor是如何传入到vertex-shader中的? 首先,这两个问题并不太容易理解。第一个问题的背景如下...
  • 数据集 注意: 仔细看这里的LON和LAT哈,都有一大堆的小数,如果前面导入的设置不注意... 左侧设置 deck.gl Scatterplot与MapBox的设置都是只要设置经度和纬度就好. deck.gl Scatterplot可视化效果 MapBox可视化效果
  • Deck.gl应用 这个项目是bootstra 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm...
  • 简单使用deck.g框架,操作说明详解,小白可以进去看
  • import React, { PureComponent } from 'react'; import { render } from 'react-dom'; import { StaticMap } from 'react-map-gl';...import DeckGL from '@deck.gl/react'; import { HeatmapLayer ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 431
精华内容 172
关键字:

deck.gl