空間資料視覺化之ArcLayer詳解

2021-09-07 20:45:09 字數 3197 閱讀 9979

首先使用d3中的scalequantile將資料進行分類,scalequantile方法是d3中的一種資料分類方法(

}scalequantile是一種將連續的值轉化成離散的方法,最終離散成這幾種顏色分類

這裡還是使用了例項化的方法,先新增一堆例項化變數:

initializestate() ,

instancesourcecolors: ,

instancetargetcolors:

});/*eslint-enable max-len

*/}

然後是製作圖形,這裡使用50個點來模擬一條拋物線的效果

_getmodel(gl) 

const model = new

model(

gl,object.assign({},

this

.getshaders(),

}),isinstanced:

true

, shadercache:

this.context.shadercache //

快取著色器,我懷疑自己寫的hexagon偏慢也跟這個有關係

})//

繪製物體,這裡是5.x的版本在新的版本中還要設定instancecount引數,來控制繪製例項的數量

); model.setuniforms();

return

model;

}

下面是計算一些例項變數,根據data的數量來控制,但是luma好像會預設給例項變數的陣列分配大小,實際的value中有一些多餘的空間,如果資料量小的話,可能繪製不出來;比如:data有22條線,按照如下計算,instancepositions可用的value就只有88個元素。

calculateinstancepositions(attribute)  = this

.props;

const =attribute;

let i = 0;

for(const object of data)

} calculateinstancepositions64low(attribute) = this

.props;

const =attribute;

let i = 0;

for(const object of data)

} calculateinstancesourcecolors(attribute) = this

.props;

const =attribute;

let i = 0;

for(const object of data)

} calculateinstancetargetcolors(attribute) = this

.props;

const =attribute;

let i = 0;

for(const object of data)

}

#define shader_name arc-layer-vertex-shader

attribute vec3 positions;

//幾何圖形的座標,同時這裡面也編碼了一些資訊,x代表線段索引,y可以代表偏移方向

//本次可用的一些例項變數

attribute vec4 instancesourcecolors;//

起點的顏色

attribute vec4 instancetargetcolors; //

終點的顏色

attribute vec4 instancepositions; //

前兩個值記錄了起點經緯度,後兩個值記錄了終點經緯度

attribute vec3 instancepickingcolors;

uniform

float numsegments; //

拋物線的線段數量

uniform float strokewidth; //

線寬度uniform float

opacity;

varying vec4 vcolor;

//source和target是在3d空間中的單位,ratio代表本此線段在匯流排段數目的比值範圍在0~1,返回值時拋物線高度的平方

//這裡的方式決定高度單位與source/target的單位保持一致

float paraboloid(vec2 source, vec2 target, float

ratio)

//在螢幕空間中計算偏移值,最後在反算到裁切空間,也就是ndc空間

//offset_direction在position的y座標中記錄

//offset vector by strokewidth pixels

//offset_direction is -1 (left) or 1 (right)

vec2 getextrusionoffset(vec2 line_clipspace, float

offset_direction)

float getsegmentratio(float index)

vec3 getpos(vec2 source, vec2 target,

float segmentratio)

void main(void

)

空間資料視覺化

一 3d bar 立體動態圖示展示 以我目前的水平來看,資料就是乙個dataframe。效果如下圖。需要一些輔助工具 css,js,html等 二 空間柱狀圖 1 excel powermap 最終效果圖如下。加上乙個time欄位,可以生產動態效果圖。1 原始資料圖示,有經度,緯度,兩類。執行ctr...

空間資料視覺化之ArcLayer詳解

首先使用d3中的scalequantile將資料進行分類,scalequantile方法是d3中的一種資料分類方法 scalequantile是一種將連續的值轉化成離散的方法,最終離散成這幾種顏色分類 這裡還是使用了例項化的方法,先新增一堆例項化變數 initializestate instance...

五分鐘學GIS 空間資料視覺化渲染技術

空間資料視覺化在空間資訊和知識的發現過程中發揮著重要作用。它可以表達資料的理解和空間知識的呈現。在前端開發技術迅速發展的今天,針對空間資料視覺化渲染的技術,也湧現出很多優秀的產品,包括地相簿的渲染產品以及視覺化效果的視覺化庫。下面給大家介紹幾款主流的開源地相簿以及視覺化庫。1 主流的開源地相簿 op...