p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(pick)

This commit is contained in:
thinkinggis 2019-08-01 18:14:52 +08:00
parent 573165ab50
commit 5ce5656934
70 changed files with 730 additions and 1160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
demos/01_circle.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" />
<title>气泡图</title>
<style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="../build/l7.js"></script>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var scene = new L7.Scene({
id: 'map',
mapStyle: 'light', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 12
});
window.scene = scene;
scene.on('loaded', function() {
$.get('https://gw.alipayobjects.com/os/rmsportal/epnZEheZeDgsiSjSPcCv.json', function(data) {
scene.PointLayer({
zIndex: 2
}).source(data, {
scale: {
min: 0,
max: 1000,
type: 'linear'
}
}).shape('circle').size('value', [5, 80]) // default 1
.active(true).filter('value', function(field_8) {
return field_8 * 1 > 500;
}).color('type', ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse()).style({
stroke: 'rgb(255,255,255)',
strokeWidth: 1,
opacity: 0.9
}).render();
});
});
</script>
</body>
</html>

5
demos/03_choropleths_polygon.html
View File

@ -96,7 +96,10 @@ scene.on('loaded', () => {
})
//.render();
console.log(citylayer);
citylayer.on('mouseleave',(e)=>{
console.log(e);
})
citylayer.on('click',(e)=>{
$("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'});
$("#info").html(`<p>${e.feature.properties.area || e.feature.properties.name }<span">${e.feature.properties.pm2_5_24h || 0}</span></p>`);

29
demos/08_arc_line.html
View File

@ -31,47 +31,26 @@ const scene = new L7.Scene({
});
scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => {
const rows = data.split('\n');
var features =[];
for(var i =1;i<rows.length-1;i++){
var row = rows[i].split(',');
var start = turf.point([row[4], row[5]]);
var end = turf.point([row[6], row[7]]);
var greatCircle = turf.greatCircle(start, end, {'npoints': 50});
features.push(greatCircle);
}
var fc = turf.featureCollection(features);
const layer = scene.LineLayer({
zIndex: 2
})
.source(fc)
.color('rgb(13,64,140)')
.style({
opacity:0.6,
})
//.animate({enable:true})
.render();
/**
scene.LineLayer({
zIndex: 2
})
.source(data, { // lng1,lat1,lng2,lat2
type: 'csv',
parser:{
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2'
})
}})
.shape('arc')
.size(0.8)
.color('rgb(13,64,140)')
.style({
opacity:0.6,
})
//.animate({enable:true})
.render();
**/
});
});
</script>

0
demos/json.html Normal file
View File

43
demos/meshline.html
View File

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css">
<title>line demo</title>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script>
<script>
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [ 120.3672, 36.0968 ],
pitch: 0,
zoom: 13
});
scene.on('loaded', () => {
$.getJSON('./data/contour.json', contourData => {
const color = [ 'rgb(22,32,101)', 'rgb(28,43,127)', 'rgb(36,68,142)', 'rgb(45,94,158)', 'rgb(53,119,174)', 'rgb(61,145,190)', 'rgb(70,170,206)', 'rgb(98,190,210)', 'rgb(138,205,206)', 'rgb(179,221,204)', 'rgb(220,236,201)' ];
//contourData.features = contourData.features.slice(0,1);
const layer = scene.LineLayer()
.source(contourData)
.color('ELEV', color)
.size([ 1, 0 ])
.shape('meshLine')
.render();
});
})
</script>
</body>
</html>

115
demos/polygon_jsondata.html
View File

@ -19,7 +19,7 @@
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script>
<script src="../build/l7.js"></script>
<script>
var mapinstance = new AMap.Map('map',{
center: [121.576757,31.279873 ],
@ -32,105 +32,68 @@ var mapinstance = new AMap.Map('map',{
const scene = new L7.Scene({
map:mapinstance,
//mapStyle: 'dark', // 样式URL
mapStyle: 'dark', // 样式URL
});
const testdata = [
{
"areaGeometry": "121.576757,31.279873;121.576904,31.279129;121.577422,31.279135;121.577425,31.279401;121.577604,31.279486;121.577873,31.279668;121.577854,31.280147;121.577873,31.280517;121.577713,31.280483;121.577604,31.280365;121.577051,31.279928;121.576757,31.279873;121.576757,31.279873"
},
{
"areaGeometry": "121.588443,31.260267;121.587893,31.260332;121.587385,31.260387;121.586751,31.26045;121.586099,31.260505;121.585549,31.260584;121.585499,31.260641;121.585475,31.260702;121.585469,31.26076;121.585473,31.260797;121.585721,31.261172;121.585957,31.261529;121.58623,31.261987;121.586426,31.26235;121.586646,31.262795;121.586791,31.263137;121.586924,31.263478;121.587054,31.263788;121.587256,31.264224;121.587319,31.264276;121.587421,31.264337;121.587503,31.264368;121.587542,31.264373;121.588431,31.264357;121.589115,31.264355;121.589253,31.264357;121.589339,31.264331;121.589409,31.264288;121.589547,31.264049;121.589752,31.263696;121.589973,31.263313;121.590156,31.262965;121.59029,31.262682;121.590285,31.262557;121.590257,31.262498;121.5902,31.262459;121.589712,31.262265;121.589543,31.262197;121.5895,31.262125;121.589484,31.262072;121.589499,31.262005;121.589638,31.261714;121.589709,31.261579;121.589911,31.261242;121.590037,31.261031;121.590413,31.261176;121.591041,31.26141;121.591095,31.261317;121.59128,31.26097;121.59132,31.260872;121.591495,31.26061;121.591573,31.260552;121.591628,31.26051;121.591846,31.260295;121.592266,31.259879;121.592656,31.259516;121.592781,31.259401;121.5928,31.259343;121.592801,31.259301;121.592789,31.259261;121.592718,31.259196;121.592689,31.259156;121.592266,31.25884;121.591889,31.258548;121.591681,31.258396;121.591423,31.258196;121.590993,31.257889;121.59091,31.257892;121.590849,31.257903;121.590782,31.257971;121.590504,31.25835;121.590177,31.258758;121.589896,31.259137;121.589722,31.259395;121.589449,31.259807;121.58932,31.260028;121.589223,31.26024;121.588443,31.260267;121.588443,31.260267"
}
]
const data2 = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
const testdata =[ {
'type': 'Polygon',
'geometryCoord': [
[
[
118.48068237304686,
32.120964197033615
115.1806640625,
30.637912028341123
],
[
118.49578857421874,
32.037184191435145
114.9609375,
29.152161283318915
],
[
118.57131958007811,
32.061627957476404
117.79541015625001,
27.430289738862594
],
[
118.57131958007811,
32.13492006367728
118.740234375,
29.420460341013133
],
[
118.48068237304686,
32.120964197033615
117.46582031249999,
31.50362930577303
],
[
115.1806640625,
30.637912028341123
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
118.71414184570311,
31.966143862120095
],
[
118.67156982421875,
31.811062019751912
],
[
118.77044677734375,
31.75502854729287
],
[
118.85696411132814,
31.927689274849715
],
[
118.71414184570311,
31.966143862120095
]
]
]
}
}
]
}
scene.on('loaded', () => {
const data = testdata.map(item=>{
const coordStr = item.areaGeometry;
coordStr.split(';');
const coordinates = coordStr.split(';').map(lnglat=>{
return lnglat.split(',');
})
item.areaGeometry = [coordinates];
return item;
})
citylayer = scene.PolygonLayer()
.source(data,{
.source(testdata,{
parser:{
type:'json',
coordinates:'areaGeometry'
coordinates:'geometryCoord'
}
})
.color('red')
.shape('extrude')
.size(1000)
.shape('fill')
.active(true)
.style({
opacity: 1.0
})
.render();
citylayer = scene.LineLayer()
.source(testdata,{
parser:{
type:'json',
coordinates:'geometryCoord'
}
})
.color('#fff')
.shape('line')
.size(4)
.active(true)
.style({
opacity: 1.0

106
demos/vector2.html Normal file
View File

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css">
<link rel="stylesheet" href="./assets/info.css">
<title>hexagon demo</title>
<style>
body {margin: 0;}
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script>
<script>
const scene = new L7.Scene({
id: 'map',
mapStyle: 'light', // 样式URL
center: [104.838088,34.075889 ],
pitch: 0,
hash:false,
zoom: 3,
});
// 高德数据服务 https://mvt.amap.com/district/CHN2/{z}/{x}/{y}/4096?key=608d75903d29ad471362f8c58c550daf
scene.on('loaded', () => {
scene.addTileSource('test',{
url:'http://127.0.0.1:8080/{z}/{x}/{y}.pbf',
type:'vector',
minZoom: 0,
maxZoom:9
})
const layer = scene.PolygonLayer({
zIndex:0,
})
.source('test',{
parser:{
type: 'mvt',
sourceLayer:'boundaries_admin_3',
idField:'id'
}
})
.shape('fill')
.active(false)
//.color('adcode_cit',['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'])
.color('#f46d43')
.style({
opacity:1.0
})
.render();
const layer2 = scene.PolygonLayer({
zIndex:10,
})
.source('test',{
parser:{
type: 'mvt',
sourceLayer:'boundaries_admin_3',
idField:'id'
}
})
.shape('line')
.size(1)
.active(false)
.color('#fff')
.style({
opacity:1.0
})
.render();
const layer3 = scene.PointLayer({
zIndex:10,
})
.source('test',{
parser:{
type: 'mvt',
sourceLayer:'points_admin_3',
idField:'id'
}
})
.shape('circle')
.size(4)
.active(false)
.color('#F77472')
.style({
opacity:1.0
})
.render();
});
</script>
</body>
</html>

3
src/core/controller/pick.js
View File

@ -38,7 +38,8 @@ export default class PickContoller {
}
addPickMesh(mesh) {
const pickmaterial = mesh.material.clone();
pickmaterial.fragmentShader = pickingFragmentShader;
pickmaterial.defines.PICK = true;
// pickmaterial.fragmentShader = pickingFragmentShader;
const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial);
pickingMesh.name = mesh.name;
pickingMesh.onBeforeRender = () => {

3
src/core/engine/picking/pickingMaterial.js
View File

@ -7,6 +7,9 @@ export default function PickingMaterial(options) {
uniforms: {
u_zoom: { value: options.u_zoom || 1 }
},
defines: {
PICK: true
},
vertexShader: options.vs,
fragmentShader: picking_frag,
transparent: false

2
src/core/layer.js
View File

@ -39,7 +39,7 @@ export default class Layer extends Base {
attrs: {},
// 样式配置项
styleOptions: {
stroke: 'none',
stroke: [ 1, 1, 1, 1 ],
strokeWidth: 1.0,
opacity: 1.0,
strokeOpacity: 1.0,

9
src/geom/buffer/buffer.js
View File

@ -74,7 +74,14 @@ export default class BufferBase extends Base {
this.attributes.pickingIds[start1 + i] = id;
}
if (feature.hasOwnProperty('size')) {
this.attributes.sizes[start1 + i ] = size[0] || size;
let size2 = size;
if (Array.isArray(size) && size.length === 2) {
size2 = [ size[0] ];
}
if (!Array.isArray(size)) {
size2 = [ size ];
}
this.attributes.sizes.set(size2, (start1 + i) * size2.length);
}
if (feature.hasOwnProperty('pattern')) {

377
src/geom/buffer/bufferBase.js
View File

@ -1,377 +0,0 @@
import Base from '../../core/base';
// import * as from '../../core/three';
import { Vector3 } from 'three/src/math/Vector3';
import { Texture } from 'three/src/textures/Texture';
import { faceNormals } from '../normals';
import extrude from '../extrude';
export default class BufferBase extends Base {
constructor(cfg) {
super(cfg);
this.bufferStruct = {
};
this.geometryBuffer();
}
geometryBuffer() {
}
_normals() {
const { position, indices, normals = [] } = this.bufferStruct;
indices.forEach((index, i) => {
normals.push(faceNormals(index, position[i]));
});
this.bufferStruct.normals = normals;
}
_extrude(coordinate, heightValue) {
const extrudeData = extrude(coordinate, heightValue);
return extrudeData;
}
_mergeAttributes(attributes) {
const lengths = {};
// Find array lengths
attributes.forEach(_attributes => {
for (const k in _attributes) {
if (!lengths[k]) {
lengths[k] = 0;
}
lengths[k] += _attributes[k].length;
}
});
const mergedAttributes = {};
// Set up arrays to merge into
for (const k in lengths) {
mergedAttributes[k] = new Float32Array(lengths[k]);
}
const lastLengths = {};
attributes.forEach(_attributes => {
for (const k in _attributes) {
if (!lastLengths[k]) {
lastLengths[k] = 0;
}
mergedAttributes[k].set(_attributes[k], lastLengths[k]);
lastLengths[k] += _attributes[k].length;
}
});
return mergedAttributes;
}
_toPolygonAttributes(polygon) {
// Three components per vertex per face (3 x 3 = 9)
const { style, indices, position, indexCount } = polygon;
const vertices = new Float32Array(indexCount * 3);
const colors = new Float32Array(indexCount * 4);
const pickingIds = new Float32Array(indexCount);
let lastIndex = 0;
indices.forEach((indice, pIndex) => {
for (let i = 0; i < indice.length / 3; i++) {
let index = indice[i * 3];
const color = style[pIndex].color;
const _pickingId = style[pIndex].id;
const ax = position[pIndex][index][0];
const ay = position[pIndex][index][1];
const az = position[pIndex][index][2];
index = indice[i * 3 + 1];
const bx = position[pIndex][index][0];
const by = position[pIndex][index][1];
const bz = position[pIndex][index][2];
index = indice[i * 3 + 2];
const cx = position[pIndex][index][0];
const cy = position[pIndex][index][1];
const cz = position[pIndex][index][2];
vertices.set([ ax, ay, az, bx, by, bz, cx, cy, cz ], lastIndex * 9);
colors.set([ color[0], color[1], color[2], color[3], color[0], color[1], color[2], color[3], color[0], color[1], color[2], color[3] ], lastIndex * 12);
pickingIds.fill(_pickingId, lastIndex * 3 + 0, lastIndex * 3 + 3);
// vertices[lastIndex * 9 + 0] = ax;
// vertices[lastIndex * 9 + 1] = ay;
// vertices[lastIndex * 9 + 2] = az;
// colors[lastIndex * 12 + 0] = color[0];
// colors[lastIndex * 12 + 1] = color[1];
// colors[lastIndex * 12 + 2] = color[2];
// colors[lastIndex * 12 + 3] = color[3];
// vertices[lastIndex * 9 + 3] = bx;
// vertices[lastIndex * 9 + 4] = by;
// vertices[lastIndex * 9 + 5] = bz;
// colors[lastIndex * 12 + 4] = color[0];
// colors[lastIndex * 12 + 5] = color[1];
// colors[lastIndex * 12 + 6] = color[2];
// colors[lastIndex * 12 + 7] = color[3];
// vertices[lastIndex * 9 + 6] = cx;
// vertices[lastIndex * 9 + 7] = cy;
// vertices[lastIndex * 9 + 8] = cz;
// colors[lastIndex * 12 + 8] = color[0];
// colors[lastIndex * 12 + 9] = color[1];
// colors[lastIndex * 12 + 10] = color[2];
// colors[lastIndex * 12 + 11] = color[3];
// pickingIds[lastIndex * 3 + 0] = _pickingId;
// pickingIds[lastIndex * 3 + 1] = _pickingId;
// pickingIds[lastIndex * 3 + 2] = _pickingId;
lastIndex++;
}
});
console.timeEnd(indexCount+':buffer');
const attributes = {
vertices,
colors,
pickingIds,
faceUv: new Float32Array(polygon.faceUv),
sizes: new Float32Array(polygon.sizes)
};
polygon = {};
return attributes;
}
_toPointShapeAttributes(polygon) {
// Three components per vertex per face (3 x 3 = 9)
const { style, indices, position, indexCount, shapes, sizes } = polygon;
const vertices = new Float32Array(indexCount * 3);
const shapePositions = new Float32Array(indexCount * 3);
const a_size = new Float32Array(indexCount * 3);
const normals = new Float32Array(indexCount * 3);
const colors = new Float32Array(indexCount * 4);
const pickingIds = new Float32Array(indexCount);
const pA = new Vector3();
const pB = new Vector3();
const pC = new Vector3();
const cb = new Vector3();
const ab = new Vector3();
let lastIndex = 0;
indices.forEach((indice, pIndex) => {
for (let i = 0; i < indice.length / 3; i++) {
let index = indice[i * 3];
const color = style[pIndex].color;
const coor1 = position[pIndex];
const size = sizes[pIndex];
const _pickingId = style[pIndex].id;
const ax = shapes[pIndex][index][0];
const ay = shapes[pIndex][index][1];
const az = shapes[pIndex][index][2];
index = indice[i * 3 + 1];
const bx = shapes[pIndex][index][0];
const by = shapes[pIndex][index][1];
const bz = shapes[pIndex][index][2];
index = indice[i * 3 + 2];
const cx = shapes[pIndex][index][0];
const cy = shapes[pIndex][index][1];
const cz = shapes[pIndex][index][2];
pA.set(ax, ay, az);
pB.set(bx, by, bz);
pC.set(cx, cy, cz);
cb.subVectors(pC, pB);
ab.subVectors(pA, pB);
cb.cross(ab);
cb.normalize();
const nx = cb.x;
const ny = cb.y;
const nz = cb.z;
vertices[lastIndex * 9 + 0] = coor1[0];
vertices[lastIndex * 9 + 1] = coor1[1];
vertices[lastIndex * 9 + 2] = coor1[2];
shapePositions[lastIndex * 9 + 0] = ax;
shapePositions[lastIndex * 9 + 1] = ay;
shapePositions[lastIndex * 9 + 2] = az;
a_size[lastIndex * 9 + 0] = size[0];
a_size[lastIndex * 9 + 1] = size[1];
a_size[lastIndex * 9 + 2] = size[2];
normals[lastIndex * 9 + 0] = nx;
normals[lastIndex * 9 + 1] = ny;
normals[lastIndex * 9 + 2] = nz;
colors[lastIndex * 12 + 0] = color[0];
colors[lastIndex * 12 + 1] = color[1];
colors[lastIndex * 12 + 2] = color[2];
colors[lastIndex * 12 + 3] = color[3];
vertices[lastIndex * 9 + 3] = coor1[0];
vertices[lastIndex * 9 + 4] = coor1[1];
vertices[lastIndex * 9 + 5] = coor1[2];
shapePositions[lastIndex * 9 + 3] = bx;
shapePositions[lastIndex * 9 + 4] = by;
shapePositions[lastIndex * 9 + 5] = bz;
a_size[lastIndex * 9 + 3] = size[0];
a_size[lastIndex * 9 + 4] = size[1];
a_size[lastIndex * 9 + 5] = size[2];
normals[lastIndex * 9 + 3] = nx;
normals[lastIndex * 9 + 4] = ny;
normals[lastIndex * 9 + 5] = nz;
colors[lastIndex * 12 + 4] = color[0];
colors[lastIndex * 12 + 5] = color[1];
colors[lastIndex * 12 + 6] = color[2];
colors[lastIndex * 12 + 7] = color[3];
vertices[lastIndex * 9 + 6] = coor1[0];
vertices[lastIndex * 9 + 7] = coor1[1];
vertices[lastIndex * 9 + 8] = coor1[2];
a_size[lastIndex * 9 + 6] = size[0];
a_size[lastIndex * 9 + 7] = size[1];
a_size[lastIndex * 9 + 8] = size[2];
shapePositions[lastIndex * 9 + 6] = cx;
shapePositions[lastIndex * 9 + 7] = cy;
shapePositions[lastIndex * 9 + 8] = cz;
normals[lastIndex * 9 + 6] = nx;
normals[lastIndex * 9 + 7] = ny;
normals[lastIndex * 9 + 8] = nz;
colors[lastIndex * 12 + 8] = color[0];
colors[lastIndex * 12 + 9] = color[1];
colors[lastIndex * 12 + 10] = color[2];
colors[lastIndex * 12 + 11] = color[3];
pickingIds[lastIndex * 3 + 0] = _pickingId;
pickingIds[lastIndex * 3 + 1] = _pickingId;
pickingIds[lastIndex * 3 + 2] = _pickingId;
lastIndex++;
}
});
const attributes = {
vertices,
normals,
colors,
pickingIds,
shapePositions,
a_size,
faceUv: new Float32Array(polygon.faceUv)
};
return attributes;
}
_toPolygonLineAttributes(polygonline) {
const { style, indices, position, indexCount } = polygonline;
const vertices = new Float32Array(indexCount * 3);
const colors = new Float32Array(indexCount * 4);
const pickingIds = new Float32Array(indexCount);
let lastIndex = 0;
indices.forEach((indice, pIndex) => {
for (let i = 0; i < indice.length; i++) {
const index = indice[i];
const color = style[pIndex].color;
const _pickingId = style[pIndex].id;
vertices[lastIndex * 3] = position[pIndex][index][0];
vertices[lastIndex * 3 + 1] = position[pIndex][index][1];
vertices[lastIndex * 3 + 2] = position[pIndex][index][2];
colors[lastIndex * 4] = color[0];
colors[lastIndex * 4 + 1] = color[1];
colors[lastIndex * 4 + 2] = color[2];
colors[lastIndex * 4 + 3] = color[3];
pickingIds[lastIndex] = _pickingId;
lastIndex++;
}
});
const attributes = {
vertices,
colors,
pickingIds
};
polygonline = {};
return attributes;
}
_toPointsAttributes(point) {
const { style, position } = point;
const count = position.length;
const vertices = new Float32Array(count * 3);
const colors = new Float32Array(count * 4);
const sizes = new Float32Array(count);
const shapes = new Float32Array(count);
const pickingIds = new Float32Array(count);
position.forEach((pos, index) => {
vertices[index * 3] = pos[0];
vertices[index * 3 + 1] = pos[1];
vertices[index * 3 + 2] = pos[2];
colors[index * 4] = style[index].color[0];
colors[index * 4 + 1] = style[index].color[1];
colors[index * 4 + 2] = style[index].color[2];
colors[index * 4 + 3] = style[index].color[3];
pickingIds[index] = style[index].id;
sizes[index] = style[index].size * window.devicePixelRatio;
if (style[index].shape) { shapes[index] = style[index].shape; }
});
const attributes = {
vertices,
colors,
sizes,
shapes,
pickingIds
};
point = {};
return attributes;
}
_generateTexture() {
// build a small canvas 32x64 and paint it in white
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 64;
const context = canvas.getContext('2d');
// plain it in white
context.fillStyle = '#ffffff';
context.fillRect(0, 0, 32, 64);
// draw the window rows - with a small noise to simulate light variations in each room
for (let y = 8; y < 64; y += 8) {
for (let x = 0; x < 32; x += 2) {
const value = Math.floor(Math.random() * 64);
context.fillStyle = 'rgb(' + [ value, value, value ].join(',') + ')';
context.fillRect(x, y, 2, 4);
}
}
context.fillStyle = '#105CB3';
context.fillRect(0, 60, 32, 64);
// build a bigger canvas and copy the small one in it
// This is a trick to upscale the texture without filtering
const canvas2 = document.createElement('canvas');
canvas2.width = 512;
canvas2.height = 1024;
const context2 = canvas2.getContext('2d');
// disable smoothing
context2.imageSmoothingEnabled = false;
context2.webkitImageSmoothingEnabled = false;
context2.mozImageSmoothingEnabled = false;
// then draw the image
context2.drawImage(canvas, 0, 0, canvas2.width, canvas2.height);
// return the just built canvas2
const texture = new Texture(canvas2);
// texture.anisotropy = renderer.getMaxAnisotropy();
texture.needsUpdate = true;
return texture;
}
}

12
src/geom/buffer/heatmap/heatmap.js
View File

@ -1,10 +1,14 @@
import BufferBase from '../bufferBase';
// import BufferBase from '../bufferBase';
import { colorScales } from '../../../attr/colorscales';
import * as THREE from '../../../core/three';
import Base from '../../../core/base';
export default class HeatmapBuffer extends BufferBase {
geometryBuffer() {
export default class HeatmapBuffer extends Base {
constructor(cfg) {
super(cfg);
this.init();
}
init() {
const data = this.get('data');
const positions = [];
const dirs = [];

61
src/geom/buffer/heatmap/hexagon.js
View File

@ -1,61 +0,0 @@
import BufferBase from '../buffer';
import Global from '../../../global';
import { fillPolygon, extrude_Polygon } from '../../extrude';
import { polygonPath } from '../../shape/path';
export default class Shape_3D extends BufferBase {
_buildFeatures() {
const layerData = this.get('layerData');
this._offset = 0;
layerData.forEach(feature => {
this._calculateFill(feature);
});
}
_initAttributes() {
super._initAttributes();
this.attributes.miters = new Float32Array(this.verticesCount * 3);
this.attributes.normals = new Float32Array(this.verticesCount * 3);
}
_calculateFeatures() {
this._calcultateGeometry();
const layerData = this.get('layerData');
const { positions, indexArray } = this.instanceGeometry;
const numFeature = layerData.length;
this.verticesCount = positions.length * numFeature / 3;
this.indexCount = indexArray.length * numFeature;
}
_calcultateGeometry() {
const shape = this.get('shapeType');
const hexgonFill = this.getShapeFunction(shape)([ this._getPoints(6) ]);
this.instanceGeometry = hexgonFill;
}
_calculateFill(feature) {
feature.bufferInfo = { verticesOffset: this._offset };
const { coordinates } = feature;
const numPoint = this.instanceGeometry.positions.length / 3;
this._encodeArray(feature, numPoint);
this.attributes.miters.set(this.instanceGeometry.positions, this._offset * 3);
const indexArray = this.instanceGeometry.indexArray.map(v => { return v + this._offset; });
this.indexArray.set(indexArray, this._offset);
if (this.instanceGeometry.normals) {
this.attributes.normals.set(this.instanceGeometry.normals, this._offset * 3);
}
const position = [];
for (let i = 0; i < numPoint; i++) {
position.push(...coordinates);
}
this.attributes.positions.set(position, this._offset * 3);
this._offset += numPoint;
}
_getPoints(num) {
return polygonPath(num, 1);
}
getShapeFunction(shape) {
const { pointShape } = Global;
if (pointShape['3d'].indexOf(shape) !== -1) return extrude_Polygon;
return fillPolygon;
}
}

12
src/geom/buffer/image.js
View File

@ -1,9 +1,13 @@
import BufferBase from './bufferBase';
// import BufferBase from './bufferBase';
import Util from '../../util';
import * as THREE from '../../core/three';
export default class ImageBuffer extends BufferBase {
geometryBuffer() {
import Base from '../../core/base';
export default class ImageBuffer extends Base {
constructor(cfg) {
super(cfg);
this.init();
}
init() {
const layerData = this.get('layerData');
const coordinates = layerData[0].coordinates;
const images = layerData[0].images;

10
src/geom/buffer/index.js
View File

@ -4,6 +4,8 @@
import FillBuffer from './polygon/fill_buffer';
import LineBuffer from './polygon/line_buffer';
import ExtrudeBuffer from './polygon/extrude_buffer';
// Point
import PointFillBuffer from './point/fill_buffer2';
// Line
import MeshLineBuffer from './line/meshline';
@ -15,10 +17,14 @@ import Grid3D from './heatmap/grid_3d';
import Hexagon3D from './heatmap/hexagon_3d';
// 3D Shape
import Shape_3D from './heatmap/hexagon';
import Shape_3D from './point/extrude_buffer';
import { registerBuffer, getBuffer } from './factory';
// Point
registerBuffer('point', 'fill', PointFillBuffer);
// polygon
registerBuffer('polygon', 'fill', FillBuffer);
registerBuffer('polygon', 'extrude', ExtrudeBuffer);
registerBuffer('polygon', 'line', LineBuffer);
@ -33,7 +39,7 @@ registerBuffer('line', 'greatCircle', ArcLineBuffer);
// registerBuffer('heatmap', 'square', Grid3D);
// registerBuffer('heatmap', 'squareColumn', Grid3D);
registerBuffer('heatmap', 'shape', Hexagon3D);
registerBuffer('point', 'shape', Hexagon3D);
// 3D Shape
registerBuffer('shape', 'extrude', Shape_3D);

6
src/geom/buffer/line/meshline.js
View File

@ -19,11 +19,13 @@ export default class MeshLineBuffer extends BufferBase {
}
_calculateFeatures() {
const layerData = this.get('layerData');
// 计算长
layerData.forEach(feature => {
const bufferInfo = {};
const { coordinates } = feature;
let { coordinates } = feature;
if (Array.isArray(coordinates[0][0])) {
coordinates = coordinates[0];
}
const { normals, attrIndex, attrPos, attrDistance, miters } = getNormals(coordinates, false, this.verticesCount);
bufferInfo.normals = normals;
bufferInfo.arrayIndex = attrIndex;

127
src/geom/buffer/point.js
View File

@ -1,127 +0,0 @@
import BufferBase from './bufferBase';
import { regularShape } from '../shape/index';
import * as polygonPath from '../shape/path';
import * as polygonShape from '../shape/polygon';
import * as lineShape from '../shape/line';
import Global from '../../global';
import Util from '../../util';
const { pointShape } = Global;
export default class PointBuffer extends BufferBase {
geometryBuffer() {
const type = this.get('type');
switch (type) {
case 'image' : this._imageBuffer();
break;
case '2d': this._3dRegularBuffer();
break;
case '3d': this._3dRegularBuffer();
break;
case 'Model':this._ModelBuffer();
break;
default:
this._sdfRegularBuffer();
}
}
_imageBuffer() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const imagePos = this.get('imagePos');
const uv = new Float32Array(properties.length * 2);
for (let i = 0; i < properties.length; i++) {
const { x, y } = imagePos[properties[i].shape];
uv[i * 2] = x;
uv[i * 2 + 1] = y;
}
this.bufferStruct.position = coordinates;
this.bufferStruct.uv = uv;
this.bufferStruct.style = properties;
this.attributes = this._toPointsAttributes(this.bufferStruct);
this.attributes.uvs = uv;
}
_sdfRegularBuffer() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
this.bufferStruct.position = coordinates;
this.bufferStruct.style = properties;
this.attributes = this._toPointsAttributes(this.bufferStruct);
}
_3dRegularBuffer() {
const lineAttribute = {
shapes: [],
normal: [],
miter: [],
indexArray: [],
sizes: [],
positions: []
};
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const style = this.get('style');
const type = this.get('type');
const positions = [];
const shapes = [];
const sizes = [];
const uvs = [];
const positionsIndex = [];
let indexCount = 0;
this.bufferStruct.style = properties;
coordinates.forEach((geo, index) => {
let { size, shape } = properties[index];
// let shapeType = '';
if (type === '2d' || (type === '3d' && size[2] === 0)) {
// let shapeType = 'fill';
Util.isArray(size) || (size = [ size, size, 0 ]);
} else {
Util.isArray(size) || (size = [ size, size, size ]);
}
if (regularShape[shape] == null) {
uvs.push(0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0);
shape = 'square';
}
properties[index].size = size;
const [ vert, polygonLine ] = this._getShape(properties[index], style, lineAttribute.miter.length);
polygonLine.miter.forEach(() => {
lineAttribute.positions.push(...geo);
lineAttribute.sizes.push(...size);
});
lineAttribute.shapes.push(...polygonLine.positions);
lineAttribute.normal.push(...polygonLine.normal);
lineAttribute.miter.push(...polygonLine.miter);
lineAttribute.indexArray.push(...polygonLine.indexArray);
shapes.push(vert.positions);
positions.push(geo);
sizes.push(size);
positionsIndex.push(vert.positionsIndex);
indexCount += vert.positionsIndex.length;
});
this.bufferStruct.indices = positionsIndex;
this.bufferStruct.position = positions;
this.bufferStruct.indexCount = indexCount;
this.bufferStruct.shapes = shapes;
this.bufferStruct.sizes = sizes;
this.bufferStruct.faceUv = uvs;
this.attributes = this._toPointShapeAttributes(this.bufferStruct);
this.lineAttribute = lineAttribute;
}
_getShape(props, style, positionsIndex) {
const { shape } = props;
const { stroke, strokeWidth } = style;
const path = polygonPath[shape]();
let polygon = null;
let polygonLine = null;
if (pointShape['3d'].indexOf(shape) === -1) {
polygon = polygonShape.fill([ path ]);
polygonLine = lineShape.Line(path, { size: [ strokeWidth, 0 ], color: stroke }, positionsIndex);
} else {
polygon = polygonShape.extrude([ path ]);
}
return [ polygon, polygonLine ];
}
}

82
src/geom/buffer/point/extrude_buffer.js Normal file
View File

@ -0,0 +1,82 @@
/**
* bufferGeometry的顶点组装方式
*/
import BufferBase from '../buffer';
import Global from '../../../global';
import { fillPolygon, extrude_Polygon } from '../../extrude';
import { polygonPath } from '../../shape/path';
import * as shapePath from '../../shape/path';
export default class ExtrudeBuffer extends BufferBase {
_buildFeatures() {
const layerData = this.get('layerData');
this._offset = 0;
this._indexOffset = 0;
layerData.forEach(feature => {
this._calculateFill(feature);
});
}
_initAttributes() {
super._initAttributes();
this.attributes.miters = new Float32Array(this.verticesCount * 3);
this.attributes.normals = new Float32Array(this.verticesCount * 3);
this.attributes.sizes = new Float32Array(this.verticesCount * 3);
}
_calculateFeatures() {
const layerData = this.get('layerData');
this.geometryMap = {};
layerData.forEach(feature => {
const { shape } = feature;
const { positions, indexArray } = this.getShape(shape);
this.verticesCount += positions.length / 3;
this.indexCount += indexArray.length;
});
}
_calcultateGeometry() {
const shape = this.get('shapeType');
const hexgonFill = this.getShapeFunction(shape)([ this._getPoints(6) ]);
this.instanceGeometry = hexgonFill;
}
_calculateFill(feature) {
feature.bufferInfo = { verticesOffset: this._offset };
const { coordinates, shape } = feature;
const instanceGeometry = this.getShape(shape);
const numPoint = instanceGeometry.positions.length / 3;
this._encodeArray(feature, numPoint);
this.attributes.miters.set(instanceGeometry.positions, this._offset * 3);
const indexArray = instanceGeometry.indexArray.map(v => { return v + this._offset; });
this.indexArray.set(indexArray, this._indexOffset);
if (instanceGeometry.normals) {
this.attributes.normals.set(instanceGeometry.normals, this._offset * 3);
}
const position = [];
for (let i = 0; i < numPoint; i++) {
position.push(...coordinates);
}
this.attributes.positions.set(position, this._offset * 3);
this._offset += numPoint;
this._indexOffset += indexArray.length;
}
_getPoints(num) {
return polygonPath(num, 1);
}
getShape(shape) {
const { pointShape } = Global;
if (this.geometryMap[shape]) {
return this.geometryMap[shape];
}
let geometry = null;
if (pointShape['3d'].indexOf(shape) !== -1) {
geometry = extrude_Polygon([ shapePath[shape]() ]);
} else if (pointShape['2d'].indexOf(shape) !== -1) {
geometry = fillPolygon([ shapePath[shape]() ]);
} else {
geometry = fillPolygon([ shapePath[shape]() ]);
}
this.geometryMap[shape] = geometry;
return geometry;
}
}

21
src/geom/buffer/point/circleBuffer.js → src/geom/buffer/point/fill_buffer.js
View File

@ -11,15 +11,17 @@ const LEFT_SHIFT21 = 2097152.0;
const LEFT_SHIFT23 = 8388608.0;
// const LEFT_SHIFT24 = 16777216.0;
export default function circleBuffer(layerData) {
export default function FillBuffer(data) {
const index = [];
const aPosition = [];
const aPackedData = [];
const { layerData } = data;
layerData.forEach(({ size = 0, color, id, coordinates, shape }, i) => {
const shapeIndex = pointShape['2d'].indexOf(shape) || 0;
let newCoord = coordinates;
if (coordinates.length === 1) {
newCoord = coordinates[0][0];
}
if (isNaN(size)) {
size = 0;
}
@ -46,14 +48,15 @@ export default function circleBuffer(layerData) {
id
);
});
// TODO：如果使用相对瓦片坐标，还可以进一步压缩
aPosition.push(...coordinates, ...coordinates, ...coordinates, ...coordinates);
aPosition.push(...newCoord, ...newCoord, ...newCoord, ...newCoord);
index.push(...[ 0, 1, 2, 0, 2, 3 ].map(n => n + i * 4));
});
return {
aPosition,
index,
aPackedData
attributes: {
aPosition: new Float32Array(aPosition),
aPackedData: new Float32Array(aPackedData)
},
indexArray: new Int32Array(index)
};
}

79
src/geom/buffer/point/fill_buffer2.js Normal file
View File

@ -0,0 +1,79 @@
import BufferBase from '../buffer';
import Global from '../../../global';
import { fillPolygon, extrude_Polygon } from '../../extrude';
import { polygonPath } from '../../shape/path';
import * as shapePath from '../../shape/path';
const { pointShape } = Global;
export default class PointFillBuffer extends BufferBase {
_buildFeatures() {
const layerData = this.get('layerData');
this._offset = 0;
this._indexOffset = 0;
layerData.forEach(feature => {
this._calculateFill(feature);
});
}
_initAttributes() {
super._initAttributes();
this.attributes.miters = new Float32Array(this.verticesCount * 2);
this.attributes.sizes = new Float32Array(this.verticesCount);
this.attributes.shapes = new Float32Array(this.verticesCount);
}
_calculateFeatures() {
const layerData = this.get('layerData');
this.verticesCount = layerData.length * 4;
this.indexCount = layerData.length * 6;
}
_calcultateGeometry() {
const shape = this.get('shapeType');
const hexgonFill = this.getShapeFunction(shape)([ this._getPoints(6) ]);
this.instanceGeometry = hexgonFill;
}
_calculateFill(feature) {
feature.bufferInfo = { verticesOffset: this._offset };
const { coordinates, shape } = feature;
const shapeIndex = pointShape['2d'].indexOf(shape) || 0;
let newCoord = coordinates;
if (coordinates.length === 1) {
newCoord = coordinates[0][0];
}
feature.bufferInfo = {
verticesOffset: this._offset
};
this._encodeArray(feature, 4);
this.attributes.shapes.set([ shapeIndex, shapeIndex, shapeIndex, shapeIndex ], this._offset);
this.attributes.miters.set([ -1, -1, 1, -1, 1, 1, -1, 1 ], this._offset * 2);
const indexArray = [ 0, 1, 2, 0, 2, 3 ].map(n => n + this._offset);
this.indexArray.set(indexArray, this._offset * 1.5);
const position = [];
for (let i = 0; i < 4; i++) {
position.push(...newCoord);
}
this.attributes.positions.set(position, this._offset * 3);
this._offset += 4;
}
_getPoints(num) {
return polygonPath(num, 1);
}
getShape(shape) {
const { pointShape } = Global;
if (this.geometryMap[shape]) {
return this.geometryMap[shape];
}
let geometry = null;
if (pointShape['3d'].indexOf(shape) !== -1) {
geometry = extrude_Polygon([ shapePath[shape]() ]);
} else if (pointShape['2d'].indexOf(shape) !== -1) {
geometry = fillPolygon([ shapePath[shape]() ]);
} else {
geometry = fillPolygon([ shapePath[shape]() ]);
}
this.geometryMap[shape] = geometry;
return geometry;
}
}

0
src/geom/buffer/point/imageBuffer.js → src/geom/buffer/point/image_buffer.js
View File

4
src/geom/buffer/point/index.js
View File

@ -1,5 +1,5 @@
export { default as FillBuffer } from './fillBuffer';
export { default as StrokeBuffer } from './strokeBuffer';
export { default as ImageBuffer } from './imageBuffer';
export { default as ImageBuffer } from './image_buffer';
export { default as NormalBuffer } from './normalBuffer';
export { default as CircleBuffer } from './circleBuffer';
export { default as CircleBuffer } from './fill_buffer';

35
src/geom/buffer/polygon-line.js
View File

@ -1,35 +0,0 @@
import { polygonShape } from '../shape/index';
import BufferBase from './bufferBase';
export default class polygonLineBuffer extends BufferBase {
geometryBuffer() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const shape = this.get('shape');
const positions = [];
const positionsIndex = [];
let vertsCount = 0;
this.bufferStruct.style = properties;
const isExtrude = properties[0].hasOwnProperty('size');
coordinates.forEach((geo, index) => {
const heightValue = properties[index].size;
let extrudeData = [];
if (isExtrude && shape === 'extrudeline') {
extrudeData = polygonShape.extrudeline(geo);
extrudeData.positions = extrudeData.positions.map(pos => {
pos[2] *= heightValue;
return pos;
});
} else {
extrudeData = polygonShape.line(geo);
}
positions.push(extrudeData.positions);
positionsIndex.push(...extrudeData.positionsIndex.map(index => { return index + vertsCount; }));
vertsCount += extrudeData.positions.length;
});
this.bufferStruct.indexs = positionsIndex;
this.bufferStruct.verts = positions;
this.bufferStruct.vertsCount = vertsCount;
}
}

62
src/geom/buffer/polygon.js
View File

@ -1,62 +0,0 @@
import { polygonShape } from '../shape';
import BufferBase from './bufferBase';
export default class PolygonBuffer extends BufferBase {
geometryBuffer() {
const layerData = this.get('layerData');
const shape = this.get('shape');
const needFaceUv = this.get('faceUv');
const positions = [];
const faceUv = [];
const sizes = [];
const positionsIndex = [];
let indexCount = 0;
this.bufferStruct.style = layerData;
const isExtrude = layerData[0].hasOwnProperty('size');
// indices, normals, colors, UVs
layerData.forEach(item => {
const heightValue = item.size;
let extrudeData = polygonShape[shape](item.coordinates);
if (isExtrude && shape === 'extrude') {
extrudeData = polygonShape.extrude(item.coordinates);
extrudeData.positions = extrudeData.positions.map(pos => {
pos[2] *= heightValue;
return pos;
});
}
positions.push(extrudeData.positions);
if (needFaceUv) {
// faceUv.push(...extrudeData.faceUv);
const count = extrudeData.faceUv.length / 2;
for (let i = 0; i < count; i++) {
// uv 系数生成等大小的窗户
let x = extrudeData.faceUv[i * 2];
let y = extrudeData.faceUv[i * 2 + 1];
if (x !== -1) {
x = x * 0.1;
y = y * heightValue / 2000;
}
faceUv.push(x, y);
sizes.push((1.0 - extrudeData.faceUv[i * 2 + 1]) * heightValue);
}
}
indexCount += extrudeData.positionsIndex.length;
positionsIndex.push(extrudeData.positionsIndex);
});
this.bufferStruct.indices = positionsIndex;
this.bufferStruct.position = positions;
this.bufferStruct.indexCount = indexCount;
this.bufferStruct.style = layerData;
this.bufferStruct.faceUv = faceUv;
this.bufferStruct.sizes = sizes;
if (shape !== 'line') {
this.attributes = this._toPolygonAttributes(this.bufferStruct);
} else {
this.attributes = this._toPolygonLineAttributes(this.bufferStruct);
}
}
}

23
src/geom/buffer/raster.js
View File

@ -1,8 +1,13 @@
import BufferBase from './bufferBase';
// import BufferBase from './bufferBase';
import { colorScales } from '../../attr/colorscales';
import * as THREE from '../../core/three';
export class RasterBuffer extends BufferBase {
geometryBuffer() {
import Base from '../../core/base';
export class RasterBuffer extends Base {
constructor(cfg) {
super(cfg);
this.init();
}
init() {
const layerData = this.get('layerData');
const { coordinates, width, data, height } = layerData.dataArray[0];
const positions = [
@ -21,12 +26,12 @@ export class RasterBuffer extends BufferBase {
const colors = this.get('rampColors');
const colorImageData = this.getColorRamp(colors);
const colorTexture = this._getTexture(colorImageData); // 颜色纹理
this.bufferStruct.position = positions;
this.bufferStruct.uv = imgPosUv;
this.bufferStruct.u_raster = texture;//
this.bufferStruct.u_extent = [ coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1] ];
this.bufferStruct.u_colorTexture = colorTexture; // 颜色表‘=
const triangles = this._buildTriangles(width, height, size, this.bufferStruct.u_extent);
this.position = positions;
this.uv = imgPosUv;
this.u_raster = texture;//
this.u_extent = [ coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1] ];
this.u_colorTexture = colorTexture; // 颜色表‘=
const triangles = this._buildTriangles(width, height, size, this.u_extent);
const attributes = {
vertices: new Float32Array(triangles.vertices),
uvs: new Float32Array(triangles.uvs),

107
src/geom/extrude copy.js
View File

@ -1,107 +0,0 @@
import earcut from 'earcut';
/**
* 计算是否拉伸
* @param {Array} points 点坐标数组
* @param {boolean} extrude 是否拉伸
* @return {object} 顶点坐标顶点索引
*/
export default function extrudePolygon(points, extrude) {
// height += Math.random() * 100; // 解决 depth
const p1 = points[0][0];
const p2 = points[0][points[0].length - 1];
const faceUv = [];
if (p1[0] === p2[0] && p1[1] === p2[1]) {
points[0] = points[0].slice(0, points[0].length - 1);
}
const n = points[0].length;
const flattengeo = earcut.flatten(points);
const positions = [];
let cells = [];
const { dimensions } = flattengeo;
const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions);
cells = triangles;
const pointCount = flattengeo.vertices.length / dimensions;
const { vertices } = flattengeo;
extrude ? full() : flat();
function flat() {
for (let i = 0; i < pointCount; i++) {
positions.push([ vertices[ i * dimensions ], vertices[i * dimensions + 1 ], 0 ]);
}
}
function full() {
// 顶部纹理
triangles.forEach(() => {
faceUv.push(-1, -1);
});
// 顶部坐标
for (let i = 0; i < pointCount; i++) {
positions.push([ vertices[ i * dimensions ], vertices[i * dimensions + 1 ], 1 ]);
}
for (let i = 0; i < pointCount; i++) {
positions.push([ vertices[ i * dimensions ], vertices[i * dimensions + 1 ], 0 ]);
}
for (let i = 0; i < n; i++) {
if (i === (n - 1)) {
cells.push(i, n, i + n);
faceUv.push(1, 0, 0, 1, 1, 1);
cells.push(i, 0, n);
faceUv.push(1, 0, 0, 0, 0, 1);
} else {
cells.push(i + n, i, i + n + 1);
faceUv.push(1, 1, 1, 0, 0, 1);
cells.push(i, i + 1, i + n + 1);
faceUv.push(1, 0, 0, 0, 0, 1);
}
}
}
points = [];
return {
positions,
faceUv,
positionsIndex: cells
};
}
export function extrudePolygonLine(points, extrude) {
// height += Math.random() * 100; // 解决 depth
const p1 = points[0][0];
const p2 = points[0][points[0].length - 1];
if (p1[0] === p2[0] && p1[1] === p2[1]) {
points[0] = points[0].slice(0, points[0].length - 1);
}
const n = points[0].length;
const flattengeo = earcut.flatten(points);
const positions = [];
let cells = [];
const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions);
cells = triangles.map(e => e);
extrude === 0 ? flat() : full();
function flat() {
points[0].forEach(p => { positions.push([ p[0], p[1], 0 ]); }); // top
}
function full() {
points[0].forEach(p => { positions.push([ p[0], p[1], 1 ]); }); // top
points[0].forEach(p => { positions.push([ p[0], p[1], 0 ]); }); // bottom
for (let i = 0; i < n; i++) {
if (i === (n - 1)) {
cells.push(i + n, n, i);
cells.push(0, i, n);
} else {
cells.push(i + n, i + n + 1, i);
cells.push(i + 1, i, i + n + 1);
}
}
}
points = [];
return {
positions,
positionsIndex: cells
};
}

3
src/geom/material/circleMaterial.js
View File

@ -1,9 +1,8 @@
import Material from './material';
import { getModule, wrapUniforms } from '../../util/shaderModule';
import merge from '@antv/util/lib/deep-mix';
export default class CircleMaterial extends Material {
constructor(_uniforms, _defines, parameters) {
constructor(_uniforms, _defines = {}, parameters) {
super(parameters);
const { vs, fs, uniforms } = getModule('circle');
this.uniforms = wrapUniforms(merge(uniforms, _uniforms));

33
src/geom/material/normal_point.js Normal file
View File

@ -0,0 +1,33 @@
import Material from './material';
import * as THREE from '../../core/three';
import { getModule } from '../../util/shaderModule';
export default class PointMaterial extends Material {
getDefaultParameters() {
return {
uniforms: {
u_opacity: { value: 1 },
u_stroke: { value: [ 1.0, 1.0, 1.0, 1.0 ] },
u_strokeWidth: { value: 1 },
u_activeId: { value: 0 }
},
defines: {
SHAPE: false,
TEXCOORD_0: false
}
};
}
constructor(_uniforms, _defines, parameters) {
super(parameters);
const { uniforms, defines } = this.getDefaultParameters();
const { vs, fs } = getModule('pointnormal');
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
this.defines = Object.assign(defines, _defines);
this.type = 'PointMaterial';
this.vertexShader = vs;
this.fragmentShader = fs;
this.transparent = true;
this.blending = THREE.AdditiveBlending;
}
}

5
src/geom/material/pointMaterial.js
View File

@ -1,6 +1,8 @@
import Material from './material';
import * as THREE from '../../core/three';
import { getModule } from '../../util/shaderModule';
import picking_frag from '../../core/engine/picking//picking_frag.glsl';
export default class PointMaterial extends Material {
getDefaultParameters() {
return {
@ -26,7 +28,8 @@ export default class PointMaterial extends Material {
this.vertexShader = vs;
this.fragmentShader = fs;
this.transparent = true;
// if (!this.uniforms.shape) { this.blending = THREE.AdditiveBlending; }
if (!this.uniforms.shape) { this.blending = THREE.AdditiveBlending; }
if (this.uniforms.u_texture) {
this.defines.TEXCOORD_0 = true;
}

1
src/geom/shader/arcline_frag.glsl
View File

@ -6,6 +6,7 @@
if(v_color.a == 0.){
discard;
}
#pragma include "pick"
gl_FragColor = v_color;
gl_FragColor.a = v_color.a*u_opacity;

2
src/geom/shader/arcline_vert.glsl
View File

@ -61,6 +61,8 @@ void main() {
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

6
src/geom/shader/circle_frag.glsl
View File

@ -11,7 +11,8 @@ varying float v_radius;
#pragma include "sdf_2d"
void main() {
int shape = int(floor(v_data.w + 0.5));
// int shape = int(floor(v_data.w + 0.5));
int shape = 0;
lowp float antialiasblur = v_data.z;
float antialiased_blur = -max(u_blur, antialiasblur);
@ -57,5 +58,6 @@ void main() {
inner_df
);
gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity, color_t);
gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity * v_color.a, color_t);
#pragma include "pick"
}

50
src/geom/shader/circle_vert.glsl
View File

@ -1,4 +1,8 @@
attribute vec4 a_packed_data;
// attribute vec4 a_packed_data;
attribute vec4 a_color;
attribute float a_size;
attribute float a_shape;
attribute vec2 miter;
uniform float u_zoom : 1;
uniform float u_stroke_width : 2;
@ -13,43 +17,47 @@ varying float v_radius;
void main() {
// unpack color(vec2)
v_color = decode_color(a_packed_data.xy);
// unpack picking_id
float picking_id = a_packed_data.w;
// v_color = decode_color(a_packed_data.xy);
v_color = a_color;
// unpack pickingId
// float pickingId = a_packed_data.w;
// float pickingId = .w;
// unpack data(extrude(4-bit), radius(16-bit))
float compressed = a_packed_data.z;
// float compressed = a_packed_data.z;
// extrude(4-bit)
vec2 extrude;
extrude.x = floor(compressed * SHIFT_RIGHT23);
compressed -= extrude.x * SHIFT_LEFT23;
extrude.x = extrude.x - 1.;
// // extrude(4-bit)
vec2 extrude = miter;
// extrude.x = floor(compressed * SHIFT_RIGHT23);
// compressed -= extrude.x * SHIFT_LEFT23;
// extrude.x = extrude.x - 1.;
extrude.y = floor(compressed * SHIFT_RIGHT21);
compressed -= extrude.y * SHIFT_LEFT21;
extrude.y = extrude.y - 1.;
// extrude.y = floor(compressed * SHIFT_RIGHT21);
// compressed -= extrude.y * SHIFT_LEFT21;
// extrude.y = extrude.y - 1.;
float shape_type = floor(compressed * SHIFT_RIGHT17);
compressed -= shape_type * SHIFT_LEFT17;
// float shape_type = floor(compressed * SHIFT_RIGHT17);
// compressed -= shape_type * SHIFT_LEFT17;
// radius(16-bit)
float radius = compressed;
float radius = a_size;
v_radius = radius;
float zoom_scale = pow(2., 20. - u_zoom);
vec2 offset = extrude * (radius + u_stroke_width) * zoom_scale;
vec2 offset = miter * (radius + u_stroke_width) * zoom_scale;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy + offset, 0.0, 1.0);
// anti-alias
float antialiasblur = 1.0 / (radius + u_stroke_width);
// construct point coords
v_data = vec4(extrude, antialiasblur, shape_type);
v_data = vec4(extrude, antialiasblur, a_shape);
// picking
if(picking_id == u_activeId) {
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
worldId = id_toPickColor(picking_id);
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

2
src/geom/shader/great_circle_line_vert.glsl
View File

@ -90,6 +90,8 @@ void main() {
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

1
src/geom/shader/grid_frag.glsl
View File

@ -2,4 +2,5 @@
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
#pragma include "pick"
}

4
src/geom/shader/grid_vert.glsl
View File

@ -31,5 +31,7 @@ void main() {
gl_Position = matModelViewProjection * vec4(x, y, z, 1.0);
worldId = id_toPickColor(pickingId);
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

1
src/geom/shader/hexagon_frag.glsl
View File

@ -2,4 +2,5 @@
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
#pragma include "pick"
}

4
src/geom/shader/hexagon_vert.glsl
View File

@ -37,5 +37,7 @@ void main() {
gl_Position = matModelViewProjection * vec4(x, y, z, 1.0);
worldId = id_toPickColor(pickingId);
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

7
src/geom/shader/index.js
View File

@ -13,6 +13,10 @@ import circle_vert from './circle_vert.glsl';
import point_line_frag from '../shader/point_meshLine_frag.glsl';
import point_line_vert from '../shader/point_meshLine_vert.glsl';
// 原生点
import normal_point_frag from './normal_point_frag.glsl';
import normal_point_vert from './normal_point_vert.glsl';
// 有宽度的线
import mesh_line_frag from '../shader/meshline_frag.glsl';
import mesh_line_vert from '../shader/meshline_vert.glsl';
@ -59,6 +63,7 @@ import { registerModule } from '../../util/shaderModule';
import pick_color from './shaderChunks/pick_color.glsl';
import decode from './shaderChunks/decode.glsl';
import lighting from './shaderChunks/lighting.glsl';
import pick from './shaderChunks/pick.glsl';
import sdf_2d from './shaderChunks/sdf_2d.glsl';
import project from './shaderChunks/project.glsl';
@ -67,6 +72,7 @@ export function compileBuiltinModules() {
registerModule('common', { vs: common, fs: common });
registerModule('decode', { vs: decode, fs: '' });
registerModule('lighting', { vs: lighting, fs: '' });
registerModule('pick', { vs: '', fs: pick });
registerModule('sdf_2d', { vs: '', fs: sdf_2d });
registerModule('project', { vs: project, fs: '' });
registerModule('pick_color', { vs: pick_color, fs: pick_color });
@ -75,6 +81,7 @@ export function compileBuiltinModules() {
registerModule('grid', { vs: grid_vert, fs: grid_frag });
registerModule('hexagon', { vs: hexagon_vert, fs: hexagon_frag });
registerModule('pointline', { vs: point_line_vert, fs: point_line_frag });
registerModule('pointnormal', { vs: normal_point_vert, fs: normal_point_frag });
registerModule('meshline', { vs: mesh_line_vert, fs: mesh_line_frag });
registerModule('arcline', { vs: arc_line_vert, fs: arc_line_frag });
registerModule('greatcircle', { vs: great_circle_line_vert, fs: arc_line_frag });

1
src/geom/shader/line_frag.glsl
View File

@ -11,4 +11,5 @@
color.a= color.a * vTime * 1.5;
#endif
gl_FragColor = color;
#pragma include "pick"
}

4
src/geom/shader/line_vert.glsl
View File

@ -19,5 +19,7 @@ void main() {
// vTime = 1.0- (28800. + mod(u_time* 10.,28800.)- position.z / 1000.) / 100.;
#endif
gl_Position = matModelViewProjection * vec4(position.xy, 10., 1.0);
worldId = id_toPickColor(pickingId);
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

1
src/geom/shader/meshline_frag.glsl
View File

@ -45,4 +45,5 @@ void main() {
// anti-alias
float blur = 1. - smoothstep(u_blur, 1., length(v_normal));
gl_FragColor.a *= blur;
#pragma include "pick"
}

4
src/geom/shader/meshline_vert.glsl
View File

@ -67,5 +67,7 @@ void main() {
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
worldId = id_toPickColor(pickingId);
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

5
src/geom/shader/normal_point_frag.glsl Normal file
View File

@ -0,0 +1,5 @@
precision highp float;
varying vec4 v_color;
void main(){
gl_FragColor=v_color;
}

23
src/geom/shader/normal_point_vert.glsl Normal file
View File

@ -0,0 +1,23 @@
precision highp float;
attribute vec4 a_color;
attribute float a_size;
varying vec4 v_color;
uniform float u_activeId;
uniform vec4 u_activeColor;
uniform float u_opacity;
void main(){
mat4 matModelViewProjection=projectionMatrix*modelViewMatrix;
v_color=a_color;
v_color.a*=u_opacity;
if(pickingId==u_activeId){
v_color=u_activeColor;
}
gl_Position=matModelViewProjection*vec4(position,1.);
gl_PointSize=a_size;
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

88
src/geom/shader/point_frag.glsl
View File

@ -12,64 +12,64 @@ varying vec2 v_rs;
varying vec2 v_uv;
varying vec4 v_color;
varying float v_shape;
const float u_buffer = 0.75;
const float u_buffer=.75;
// const float u_gamma = 2.0 * 1.4142 / 10.0;
const float u_gamma = 0.08;
const float u_gamma=.08;
// const float u_scale = 128.0;
const vec3 halo = vec3( 1.0 );
void main() {
const vec3 halo=vec3(1.);
void main(){
// 纹理坐标
#ifdef TEXCOORD_0
vec2 pos = v_uv + gl_PointCoord / 512.0 * 64.0;
pos.y = 1.0 - pos.y;
vec4 textureColor = texture2D(u_texture, pos);
gl_FragColor =textureColor;
return;
vec2 pos=v_uv+gl_PointCoord/512.*64.;
pos.y=1.-pos.y;
vec4 textureColor=texture2D(u_texture,pos);
gl_FragColor=textureColor;
return;
#endif
if(v_color.a == 0.)
discard;
vec4 pcolor = v_color;
float ro = v_rs.x;
float ri = v_rs.y;
float d = 0.0;
if(ro < 3.0) {
gl_FragColor = pcolor;
return;
if(v_color.a==0.)
discard;
vec4 pcolor=v_color;
float ro=v_rs.x;
float ri=v_rs.y;
float d=0.;
if(ro<3.){
gl_FragColor=pcolor;
return;
}
// vec4 textureColor = texture2D(u_texture, gl_PointCoord);
vec2 st = gl_PointCoord * 2. - 1.;
float a = atan(st.x,st.y)+PI ;
float r = TWO_PI/ v_shape;
float ratio =1.0 + (1.1 - smoothstep(2.8, 6.0,v_shape));
float dis2center = cos(floor(.5+a/r)*r-a)*length(st) * ro * ratio;
float alpha = smoothstep(ro,ro+0.1, dis2center);
if(alpha == 1.) {
discard;
// vec4 textureColor = texture2D(u_texture, gl_PointCoord);
vec2 st=gl_PointCoord*2.-1.;
float a=atan(st.x,st.y)+PI;
float r=TWO_PI/v_shape;
float ratio=1.+(1.1-smoothstep(2.8,6.,v_shape));
float dis2center=cos(floor(.5+a/r)*r-a)*length(st)*ro*ratio;
float alpha=smoothstep(ro,ro+.1,dis2center);
if(alpha==1.){
discard;
}
if(u_strokeWidth > 0.0){//有border
if(dis2center> ro- u_strokeWidth ){
gl_FragColor = vec4(u_stroke.xyz,u_stroke.a*(ro- dis2center));
if(u_strokeWidth>0.){//有border
if(dis2center>ro-u_strokeWidth){
gl_FragColor=vec4(u_stroke.xyz,u_stroke.a*(ro-dis2center));
return;
}else if(dis2center>ri){
gl_FragColor= u_stroke;
gl_FragColor=u_stroke;
return;
}
}
if(dis2center > ri- u_strokeWidth){
float factor = ri-dis2center;//填充色的百分比
if (u_strokeWidth == 0.0) {
float a = pcolor.a*factor;
gl_FragColor = vec4(pcolor.rgb, a);
} else {
float a = u_stroke.a*(1.0-factor) +pcolor.a*factor;
gl_FragColor = vec4(u_stroke.rgb * (1.0-factor) + pcolor.rgb * factor, a);
}
} else{
gl_FragColor= pcolor;
if(dis2center>ri-u_strokeWidth){
float factor=ri-dis2center;//填充色的百分比
if(u_strokeWidth==0.){
float a=pcolor.a*factor;
gl_FragColor=vec4(pcolor.rgb,a);
}else{
float a=u_stroke.a*(1.-factor)+pcolor.a*factor;
gl_FragColor=vec4(u_stroke.rgb*(1.-factor)+pcolor.rgb*factor,a);
}
}else{
gl_FragColor=pcolor;
}
}

1
src/geom/shader/point_meshLine_frag.glsl
View File

@ -11,4 +11,5 @@ void main() {
}
#endif
gl_FragColor = v_color;
#pragma include "pick"
}

4
src/geom/shader/point_meshLine_vert.glsl
View File

@ -30,6 +30,8 @@ if(v_pickingId == u_activeId) {
//vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * scale / 2.0 * a_miter);
gl_Position = matModelViewProjection * vec4(pointPos, 1.0);
worldId = id_toPickColor(pickingId);
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

2
src/geom/shader/point_vert.glsl
View File

@ -29,6 +29,8 @@ void main() {
#ifdef SHAPE
v_shape = a_shape;
#endif
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

3
src/geom/shader/polygon_frag.glsl
View File

@ -13,7 +13,7 @@ varying vec2 v_texCoord;
#endif
varying vec4 v_color;
varying vec4 worldId;
vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {
float s = step(hot, n);
@ -109,5 +109,6 @@ void main() {
#else
gl_FragColor = vec4(v_color.xyz , v_color.w);
#endif
#pragma include "pick"
}

4
src/geom/shader/polygon_vert.glsl
View File

@ -46,5 +46,7 @@ void main() {
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
worldId = id_toPickColor(pickingId);
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

8
src/geom/shader/shaderChunks/pick.glsl Normal file
View File

@ -0,0 +1,8 @@
#ifdef PICK
if(worldId.x == 0. &&worldId.y == 0. && worldId.z==0.){
discard;
return;
}
gl_FragColor = worldId;
return;
#endif

1
src/geom/shader/text_frag.glsl
View File

@ -28,4 +28,5 @@ void main(){
}
}
#pragma include "pick"
}

4
src/geom/shader/text_vert.glsl
View File

@ -21,6 +21,8 @@ void main(){
v_color=u_activeColor;
}
v_texcoord=uv/u_textTextureSize;
worldId=id_toPickColor(pickingId);
#ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
}

10
src/layer/point_layer.js
View File

@ -10,10 +10,14 @@ const { pointShape } = Global;
*/
export default class PointLayer extends Layer {
constructor(scene, cfg) {
super(scene, cfg);
this.set('type', 'point');
}
draw() {
this.type = 'point';
this.shapeType = this._getShape();
const mesh = getRender(this.type, this.shapeType)(this.layerData, this, this.layerSource);
const mesh = getRender(this.type, this.shapeType)(this.layerData, this);
this.add(mesh);
}
@ -31,9 +35,9 @@ export default class PointLayer extends Layer {
// 2D circle 特殊处理
if (pointShape['2d'].indexOf(shape) !== -1) {
return 'circle';
} else if (pointShape['3d'].indexOf(shape) !== -1) {
return 'fill';
} else if (pointShape['3d'].indexOf(shape) !== -1) {
return 'extrude';
} else if (this.scene.image.imagesIds.indexOf(shape) !== -1) {
return 'image';
}

6
src/layer/raster_layer.js
View File

@ -17,10 +17,10 @@ export default class RasterLayer extends Layer {
this.initGeometry(buffer.attributes);
const rasterConfig = source.data.dataArray[0];
const material = new RasterMaterial({
u_texture: buffer.bufferStruct.u_raster,
u_colorTexture: buffer.bufferStruct.u_colorTexture,
u_texture: buffer.u_raster,
u_colorTexture: buffer.u_colorTexture,
u_opacity: 1.0,
u_extent: buffer.bufferStruct.u_extent,
u_extent: buffer.u_extent,
u_min: rasterConfig.min,
u_max: rasterConfig.max,
u_dimension: buffer.attributes.dimension

10
src/layer/render/index.js
View File

@ -19,26 +19,28 @@ registerRender('line', 'arc', DrawArcLine);
registerRender('line', 'greatCircle', DrawArcLine);
// point
import DrawPointFill from './point/drawFill';
// import DrawPointFill from './point/drawFill';
import DrawPointImage from './point/drawImage';
import DrawPointNormal from './point/drawNormal';
import DrawPointStroke from './point/drawStroke';
import DrawPointText from './point/drawText';
import DrawPointCircle from './point/drawCircle';
import DrawHexagon from './heatmap/hexagon';
registerRender('point', 'fill', DrawPointFill);
// registerRender('point', 'fill', DrawPointFill);
registerRender('point', 'image', DrawPointImage);
registerRender('point', 'normal', DrawPointNormal);
registerRender('point', 'stroke', DrawPointStroke);
registerRender('point', 'text', DrawPointText);
registerRender('point', 'circle', DrawPointCircle);
registerRender('point', 'fill', DrawPointCircle);
registerRender('point', 'shape', Draw3DShape);
registerRender('point', 'extrude', Draw3DShape);
// heatmap
import DrawGrid from './heatmap/gird';
import DrawHeatmap from './heatmap/heatmap';
import DrawHexagon from './heatmap/hexagon';
registerRender('heatmap', 'square', DrawGrid);
registerRender('heatmap', 'squareColumn', DrawGrid);

30
src/layer/render/point/drawCircle.js
View File

@ -3,18 +3,33 @@
* 手动构建点阵坐标系，便于实现描边、反走样效果
*/
import * as THREE from '../../../core/three';
import * as PointBuffer from '../../../geom/buffer/point/index';
import CircleMaterial from '../../../geom/material/circleMaterial';
export default function drawCircle(layerData, layer) {
import { getBuffer } from '../../../geom/buffer/';
export default function drawCircle(layerData, layer, buffer) {
const style = layer.get('styleOptions');
const activeOption = layer.get('activedOptions');
if (!buffer) {
const geometryBuffer = getBuffer(layer.type, layer.shapeType);
buffer = new geometryBuffer({
layerData
});
const { aPosition, aPackedData, index } = PointBuffer.CircleBuffer(layerData, style);
}
// const { aPosition, aPackedData } = buffer.attributes;
const { attributes, indexArray } = buffer;
const geometry = new THREE.BufferGeometry();
geometry.setIndex(index);
geometry.addAttribute('position', new THREE.Float32BufferAttribute(aPosition, 3));
geometry.addAttribute('a_packed_data', new THREE.Float32BufferAttribute(aPackedData, 4));
if (buffer.indexArray) {
geometry.setIndex(new THREE.Uint32BufferAttribute(indexArray, 1));
}
// geometry.addAttribute('position', new THREE.Float32BufferAttribute(aPosition, 3));
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('miter', new THREE.Float32BufferAttribute(attributes.miters, 2));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapes, 1));
// geometry.addAttribute('a_packed_data', new THREE.Float32BufferAttribute(aPackedData, 4));
const material = new CircleMaterial({
u_opacity: style.opacity,
u_activeColor: activeOption.fill,
@ -26,8 +41,5 @@ export default function drawCircle(layerData, layer) {
material.depthTest = false;
material.setBending(style.blending);
const fillMesh = new THREE.Mesh(geometry, material);
aPosition.length = 0;
aPackedData.length = 0;
index.length = 0;
return fillMesh;
}

10
src/layer/render/point/drawFill.js
View File

@ -22,16 +22,6 @@ export default function DrawFill(layerData, layer) {
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapePositions, 3));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.a_size, 3));
// const instancedGeometry = new THREE.InstancedBufferGeometry();
// instancedGeometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
// instancedGeometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapePositions, 3));
// // instanced attributes
// instancedGeometry.addAttribute('position', new THREE.InstancedBufferAttribute(new Float32Array(attributes.vertices), 3));
// instancedGeometry.addAttribute('a_color', new THREE.InstancedBufferAttribute(new Float32Array(attributes.colors), 4));
// instancedGeometry.addAttribute('pickingId', new THREE.InstancedBufferAttribute(new Float32Array(attributes.pickingIds), 1));
// instancedGeometry.addAttribute('a_size', new THREE.InstancedBufferAttribute(new Float32Array(attributes.a_size), 3));
const material = new PolygonMaterial({
u_opacity: style.opacity,
u_activeColor: activeOption.fill,

5
src/layer/render/point/drawNormal.js
View File

@ -3,7 +3,7 @@
*/
import * as THREE from '../../../core/three';
import * as PointBuffer from '../../../geom/buffer/point/index';
import PointMaterial from '../../../geom/material/pointMaterial';
import PointMaterial from '../../../geom/material/normal_point';
export default function DrawNormal(layerData, layer) {
const geometry = new THREE.BufferGeometry();
@ -19,10 +19,7 @@ export default function DrawNormal(layerData, layer) {
u_opacity: opacity,
u_activeColor: activeOption.fill
}, {
SHAPE: false,
TEXCOORD_0: false
}, style);
material.setBending(style.blending);
const strokeMesh = new THREE.Points(geometry, material);
return strokeMesh;
}

34
src/layer/render/point/draw_3d_shape.js
View File

@ -1,13 +1,10 @@
import * as THREE from '../../../core/three';
import GridMaterial from '../../../geom/material/hexagon';
import { getBuffer } from '../../../geom/buffer/';
import PolygonMaterial from '../../../geom/material/polygonMaterial';
import { generateLightingUniforms } from '../../../util/shaderModule';
export default function Draw3DShape(layerData, layer, source) {
export default function Draw3DShape(layerData, layer) {
const style = layer.get('styleOptions');
const { fill } = layer.get('activedOptions');
const { radius } = source.data;
// const attributes = new hexagonBuffer(layerdata);
const { opacity, angle, coverage, lights } = style;
const activeOption = layer.get('activedOptions');
const geometryBuffer = getBuffer('shape', 'extrude');
const buffer = new geometryBuffer({
layerData,
@ -17,25 +14,24 @@ export default function Draw3DShape(layerData, layer, source) {
const geometry = new THREE.BufferGeometry();
geometry.setIndex(new THREE.Uint32BufferAttribute(indexArray, 1));
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3));
geometry.addAttribute('miter', new THREE.Float32BufferAttribute(attributes.miters, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.miters, 3));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 3));
const material = new GridMaterial({
u_opacity: opacity,
u_radius: radius,
u_angle: angle / 180 * Math.PI,
u_coverage: coverage,
u_activeColor: fill,
...generateLightingUniforms(lights)
const material = new PolygonMaterial({
u_opacity: style.opacity,
u_activeColor: activeOption.fill,
u_zoom: layer.scene.getZoom(),
...generateLightingUniforms(style.lights)
}, {
SHAPE: false,
SHAPE: true,
LIGHTING: true
});
const hexgonMesh = new THREE.Mesh(geometry, material);
return hexgonMesh;
material.setDefinesvalue('SHAPE', true);
material.setBending(style.blending);
const fillMesh = new THREE.Mesh(geometry, material);
return fillMesh;
}

1
src/layer/render/polygon/drawAnimate.js
View File

@ -1,5 +1,4 @@
import * as THREE from '../../../core/three';
import PolygonBuffer from '../../../geom/buffer/polygon';
import PolygonMaterial from '../../../geom/material/polygonMaterial';
import { getBuffer } from '../../../geom/buffer/';
import { generateLightingUniforms } from '../../../util/shaderModule';

28
src/layer/tile/vector_tile_mesh.js
View File

@ -29,15 +29,15 @@ export default class VectorTileMesh {
this._createMesh(data);
}
_createMesh(data) {
const layerData = data.layerData;
if (this.layer.get('type') === 'point') {
this.layer.shape = this.layer._getShape(layerData);
}
this.mesh = getRender(this.layer.get('type'), this.layer.shape)(null, this.layer, data.buffer);
// this._setTilePositon();
this.mesh = getRender(this.layer.get('type'), data.shape)(null, this.layer, data.buffer);
if (this.mesh.type !== 'composer') { // 热力图的情况
this.mesh.onBeforeRender = renderer => {
this._renderMask(renderer);
const zoom = this.layer.scene.getZoom();
updateObjecteUniform(this._object3D, {
u_time: this.layer.scene._engine.clock.getElapsedTime(),
u_zoom: zoom
});
};
this.mesh.onAfterRender = renderer => {
const context = renderer.context;
@ -55,9 +55,9 @@ export default class VectorTileMesh {
}
_renderMask(renderer) {
// if (this.layer.get('layerType') === 'point') { // 点图层目前不需要mask
// return;
// }
if (this.layer.get('layerType') === 'point') { // 点图层目前不需要mask
return;
}
const context = renderer.context;
renderer.autoClear = false;
renderer.clearDepth();
@ -79,16 +79,6 @@ export default class VectorTileMesh {
context.stencilFunc(context.EQUAL, 1, 0xffffffff); // draw if == 1
context.stencilOp(context.KEEP, context.KEEP, context.KEEP);
}
_setTilePositon() {
const tr = this._tileLnglatBounds.getNorthWest();
const zoom = this.layer.scene.getZoom();
// const centerPoint = this.layer.scene.crs.lngLatToPoint(tr, 20);
const position = aProjectFlat([ tr.lng, tr.lat ]);
// this.mesh.position.x = position.x;
// this.mesh.position.y = position.y;
// this.mesh.scale.x = 2 << (20 - this._tile[2]);
// this.mesh.scale.y = 2 << (20 - this._tile[2]);
}
_tileMaskMesh() {
const tilebound = this._tileBounds;
const bl = [ tilebound.getBottomLeft().x, tilebound.getBottomLeft().y, 0 ];

4
src/source/parser/json.js
View File

@ -1,5 +1,6 @@
import rewind from '@mapbox/geojson-rewind';
export default function json(data, cfg) {
const { x, y, x1, y1, coordinates } = cfg;
const resultdata = [];
data.forEach((col, featureIndex) => {
@ -11,11 +12,10 @@ export default function json(data, cfg) {
if (coordinates) {
const geometry = {
type: 'Polygon',
coordinates: col[coordinates]
coordinates: [ ...col[coordinates] ]
};
rewind(geometry, true);
coords = geometry.coordinates;
delete col[coordinates];
}
col._id = featureIndex + 1;

1
src/source/parser/mvt.js
View File

@ -14,7 +14,6 @@ export default function mvt(data, cfg) {
const geofeature = feature.toGeoJSON(cfg.tile[0], cfg.tile[1], cfg.tile[2]);
features.push(geofeature);
}
// console.log(features);
const geodata = {
type: 'FeatureCollection',
features

5
src/source/parser/vector.js
View File

@ -13,7 +13,7 @@ export default function vector(data, cfg) {
return [ x1, -y2, 0 ];
});
}
let index = 0;
for (let i = 0; i < data.length; i++) {
const feature = data.feature(i);
const coords = feature.loadGeometry();
@ -23,7 +23,7 @@ export default function vector(data, cfg) {
const value = properties[cfg.idField];
id = djb2hash(value) % 1000019;
featureKeys[id] = {
index: i++,
index,
idField: value
};
}
@ -32,6 +32,7 @@ export default function vector(data, cfg) {
const geo = geocoords[j].map(coord => {
return covertP20(coord);
});
index++;
resultdata.push({
...properties,
_id: feature.id || id,

6
src/util/shaderModule.js
View File

@ -10,7 +10,8 @@ const moduleCache = {};
const rawContentCache = {};
const precisionRegExp = /precision\s+(high|low|medium)p\s+float/;
const globalDefaultprecision = '#ifdef GL_FRAGMENT_PRECISION_HIGH\n precision highp float;\n #else\n precision mediump float;\n#endif\n';
const globalDefaultAttribute = 'attribute float pickingId;\n varying vec4 worldId;\n';
const globalDefaultAttribute = 'attribute float pickingId;\n #ifdef PICK \n varying vec4 worldId; \n #endif \n';
const globalFSDefaultAttribute = '#ifdef PICK \n varying vec4 worldId; \n #endif \n';
const globalDefaultInclude = '#pragma include "pick_color"\n';
const includeRegExp = /#pragma include (["^+"]?["\ "[a-zA-Z_0-9](.*)"]*?)/g;
const uniformRegExp = /uniform\s+(bool|float|int|vec2|vec3|vec4|ivec2|ivec3|ivec4|mat2|mat3|mat4|sampler2D|samplerCube)\s+([\s\S]*?);/g;
@ -137,9 +138,10 @@ export function getModule(moduleName) {
}
let rawVS = rawContentCache[moduleName][SHADER_TYPE.VS];
const rawFS = rawContentCache[moduleName][SHADER_TYPE.FS];
let rawFS = rawContentCache[moduleName][SHADER_TYPE.FS];
rawVS = globalDefaultAttribute + globalDefaultInclude + rawVS;
rawFS = globalFSDefaultAttribute + rawFS;
const { content: vs, includeList: vsIncludeList } = processModule(rawVS, [], SHADER_TYPE.VS);
let { content: fs, includeList: fsIncludeList } = processModule(rawFS, [], SHADER_TYPE.FS);

30
src/worker/workerTile.js
View File

@ -1,6 +1,8 @@
import TileMapping from '../core/controller/tile_mapping';
import { getBuffer } from '../geom/buffer/index';
import Source from '../core/source';
import Global from '../global';
const { pointShape } = Global;
export default class WorkerTile {
constructor(params) {
@ -33,6 +35,9 @@ export default class WorkerTile {
for (let i = 0; i < sourceStyle[sourcelayer].length; i++) {
const style = sourceStyle[sourcelayer][i];
const tileMapping = new TileMapping(tileSource2, style);
if (style.type === 'point') {
style.shape = this._getPointShape(tileMapping);
}
const geometryBuffer = getBuffer(style.type, style.shape);
const buffer = new geometryBuffer({
layerData: tileMapping.layerData,
@ -45,6 +50,7 @@ export default class WorkerTile {
},
// layerData: tileMapping.layerData,
// sourceData: tileSource.data,
shape: style.shape,
layerId: style.layerId,
sourcelayer,
tileId: this.tileID
@ -66,4 +72,28 @@ export default class WorkerTile {
}
return sourceStyles;
}
_getPointShape(tileMapping) {
let shape = null;
if (!tileMapping.layerData[0].hasOwnProperty('shape')) {
return 'normal';
}
for (let i = 0; i < tileMapping.layerData.length; i++) {
shape = tileMapping.layerData[i].shape;
if (shape !== undefined) {
break;
}
}
// 2D circle 特殊处理
if (pointShape['2d'].indexOf(shape) !== -1) {
return 'fill';
} else if (pointShape['3d'].indexOf(shape) !== -1) {
return 'extrude';
}
// TODO 图片支持
// else if (this.scene.image.imagesIds.indexOf(shape) !== -1) {
// return 'image';
// }
return 'text';
}
}

54
src/worker/worker_pool.1.js
View File

@ -1,54 +0,0 @@
import WebWorker from './web_worker';
export default class WorkerPool {
constructor(workerCount) {
this.workerCount = workerCount || Math.max(Math.floor(window.navigator.hardwareConcurrency / 2), 1);
this.workers = []; // worker线程池
this.workerQueue = []; // 任务队列
this._initWorker(); // 初始化线程池
}
_initWorker() {
while (this.workers.length < this.workerCount) {
this.workers.push(new WebWorker());
}
}
runTask(payload) {
return new Promise((resolve, reject) => {
if (this.workers.length > 0) {
const worker = this.workers.shift(); // 从线程池取出一个worker
worker.postMessage(payload); // 向线程发送数据
const workerCallback = e => {
resolve(e.data); // 成功则返回数据
// 移除事件监听
worker.removeEventListener('message', workerCallback);
// 重新放回线程池
this.workers.push(worker);
// 如果任务队列的数据还有则从任务队列继续取数据执行任务
if (this.workerQueue.length > 0) {
const queueData = this.workerQueue.shift();
this.runTask(queueData.payload).then(data => {
queueData.resolve(data);
});
}
};
// 监听worker事件
worker.addEventListener('message', workerCallback);
worker.addEventListener('error', e => {
reject('filename:' + e.filename + '\nmessage:' + e.message + '\nlineno:' + e.lineno);
});
} else {
// 如果线程池都被占用，则将数据丢入任务队列，并保存对应的resolve和reject
this.workerQueue.push({
payload,
resolve,
reject
});
}
});
}
release() {
this.workers.forEach(worker => {
worker.terminate();
});
}
}