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

Merge branch 'rollup' into 'master' 

Rollup

瓦片地图WebWorker

升级打包工具为Rollup

重构buffer

增加3d热力图

See merge request !41
This commit is contained in:
thinkinggis 2019-08-01 19:02:11 +08:00
parent fd5d345efa f6d1a7e316
commit 73cbf8d8da
148 changed files with 3513 additions and 1355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -10,12 +10,11 @@ $ npm install
$ npm run test-live $ npm run test-live
# build watching file changes and run demos # build watching file changes and run demos
$ npm run dev $ npm run start
# run demos # run demos
$ npm run demos $ npm run demos
``` ```
visit online demo
https://antv.alipay.com/zh-cn/l7/1.x/demo/index.html
## How to Contribute ## How to Contribute

3
demos/01_animatePoint.html
View File

@ -43,7 +43,6 @@ return {
] ]
} }
} }
console.log(pointOnCircle(10))
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
mapStyle: 'light', // 样式URL mapStyle: 'light', // 样式URL
@ -76,7 +75,7 @@ scene.on('loaded', () => {
circleLayer.setData(pointOnCircle(timestamp / 1000)); circleLayer.setData(pointOnCircle(timestamp / 1000));
requestAnimationFrame(animateMarker); requestAnimationFrame(animateMarker);
} }
//animateMarker(0); animateMarker(0);
/** /**
const layerText = scene.PointLayer({ const layerText = scene.PointLayer({

42
demos/greatcircle.html → demos/01_circle.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" /> <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" />
<title>弧线图</title> <title>气泡图</title>
<style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;} <style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
#map { position:absolute; top:0; bottom:0; width:100%; } #map { position:absolute; top:0; bottom:0; width:100%; }
</style> </style>
@ -13,39 +13,37 @@
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script> <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://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="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="../build/L7.js"></script> <script src="../build/l7.js"></script>
<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<style> <style>
#map { position:absolute; top:0; bottom:0; width:100%; } #map { position:absolute; top:0; bottom:0; width:100%; }
</style> </style>
<script> <script>
var scene = new L7.Scene({ var scene = new L7.Scene({
id: 'map', id: 'map',
mapStyle: 'dark', // 样式URL mapStyle: 'light', // 样式URL
center: [116.2825, 39.9], center: [120.19382669582967, 30.258134],
pitch: 0, pitch: 0,
zoom: 4 zoom: 12
}); });
window.scene = scene;
scene.on('loaded', function() { scene.on('loaded', function() {
$.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', function(data) { $.get('https://gw.alipayobjects.com/os/rmsportal/epnZEheZeDgsiSjSPcCv.json', function(data) {
scene.PointLayer({
scene.LineLayer({
zIndex: 2 zIndex: 2
}).source(data, { }).source(data, {
parser:{ scale: {
type:'csv', min: 0,
x: 'lng1', max: 1000,
y: 'lat1', type: 'linear'
x1: 'lng2',
y1: 'lat2'
} }
} }).shape('circle').size('value', [5, 80]) // default 1
).color('rgb(13,64,140)').style({ .active(true).filter('value', function(field_8) {
opacity: 0.6 return field_8 * 1 > 500;
}) }).color('type', ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse()).style({
.shape('greatCircle') stroke: 'rgb(255,255,255)',
.size(1) strokeWidth: 1,
.render(); opacity: 0.9
}).render();
}); });
}); });
</script> </script>

3
demos/01_point_distribute.html
View File

@ -45,7 +45,8 @@ scene.on('loaded', () => {
.style({ .style({
stroke: 'rgb(255,255,255)', stroke: 'rgb(255,255,255)',
strokeWidth: 0, strokeWidth: 0,
opacity: 1.0 opacity: 1.0,
bending:'additive'
}) })
.render(); .render();
}); });

4
demos/03_1_extrude_polygon.html
View File

@ -31,6 +31,7 @@ const scene = new L7.Scene({
}); });
window.scene = scene; window.scene = scene;
scene.on('loaded', () => { scene.on('loaded', () => {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/xxvoBnsYNEPiAXGRmlPD.json', city => { $.getJSON('https://gw.alipayobjects.com/os/rmsportal/xxvoBnsYNEPiAXGRmlPD.json', city => {
citylayer = scene.PolygonLayer() citylayer = scene.PolygonLayer()
@ -39,7 +40,7 @@ scene.on('loaded', () => {
.shape('extrude') .shape('extrude')
.size('max',(value)=>{ .size('max',(value)=>{
if(value<0)value =0; if(value<0)value =1;
return value * 1000; return value * 1000;
}) })
.active(true) .active(true)
@ -48,7 +49,6 @@ scene.on('loaded', () => {
}) })
.render(); .render();
const citylayer2 = scene.PolygonLayer() const citylayer2 = scene.PolygonLayer()
.source(city) .source(city)
.shape('line') .shape('line')

6
demos/03_choropleths_polygon.html
View File

@ -81,7 +81,6 @@ scene.on('loaded', () => {
} }
}) })
.shape('fill') .shape('fill')
.pattern('id1')
.active(true) .active(true)
.style({ .style({
opacity: 1 opacity: 1
@ -97,7 +96,10 @@ scene.on('loaded', () => {
}) })
//.render(); //.render();
console.log(citylayer);
citylayer.on('mouseleave',(e)=>{
console.log(e);
})
citylayer.on('click',(e)=>{ citylayer.on('click',(e)=>{
$("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'}); $("#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>`); $("#info").html(`<p>${e.feature.properties.area || e.feature.properties.name }<span">${e.feature.properties.pm2_5_24h || 0}</span></p>`);

2
demos/06_text.html
View File

@ -29,7 +29,7 @@ const scene = new L7.Scene({
}); });
window.scene = scene; window.scene = scene;
scene.on('loaded', () => { scene.on('loaded', () => {
$.get('./data/provincePoint.json', data => { $.get('https://gw.alipayobjects.com/os/basement_prod/abcfe339-b8bc-46ce-8ff4-c96185b6235f.json', data => {
scene.PointLayer({ scene.PointLayer({
zIndex: 2 zIndex: 2
}) })

29
demos/08_arc_line.html
View File

@ -31,47 +31,26 @@ const scene = new L7.Scene({
}); });
scene.on('loaded', () => { scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => { $.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();
console.log(layer);
/**
scene.LineLayer({ scene.LineLayer({
zIndex: 2 zIndex: 2
}) })
.source(data, { // lng1,lat1,lng2,lat2 .source(data, { // lng1,lat1,lng2,lat2
parser:{
type: 'csv', type: 'csv',
x: 'lng1', x: 'lng1',
y: 'lat1', y: 'lat1',
x1: 'lng2', x1: 'lng2',
y1: 'lat2' y1: 'lat2'
}) }})
.shape('arc') .shape('arc')
.size(0.8) .size(0.8)
.color('rgb(13,64,140)') .color('rgb(13,64,140)')
.style({ .style({
opacity:0.6, opacity:0.6,
}) })
//.animate({enable:true})
.render(); .render();
**/
}); });
}); });
</script> </script>

81
demos/gaode.html Normal file
View File

@ -0,0 +1,81 @@
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script type="text/javascript">
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
html,body,.map{
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<title>简易行政区图-世界</title>
</head>
<body>
<div id="container" class="map" tabindex="0"></div>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
<script type="text/javascript">
var SOC = 'CHN'
var colors = {};
var getColorBySOC = function(SOC){
//可按需改为其他实现
if(SOC){
if(!colors[SOC]){
var R = SOC.charCodeAt(0)*2
var G = R;//SOC.charCodeAt(1)*2
var B = 255;
colors[SOC] = 'rgb('+R+','+G+','+B +')';
}
return colors[SOC]
}else{
return 'rgb(200,200,240)'
}
}
var disWorld = new AMap.DistrictLayer.World({
zIndex:10,
styles:{
// 颜色格式: #RRGGBB、rgba()、rgb()、[r,g,b,a]
'nation-stroke':function(props){
//props:{type:Nation_Border_China/Nation_Border_Foreign}
if(props.type=='Nation_Border_China'){
return 'red'
}else{
return 'white'
}
},
'coastline-stroke': [0.8, 0.63, 1, 1],
'fill':function(props){
//props:{NAME_CHH,NAME_ENG,SOC}
return getColorBySOC(props.SOC)
}
}
})
var map = new AMap.Map("container",{
zooms: [3, 15],
center:[100,36],
showIndoorMap:false,
zoom: 3,
isHotspot:false,
defaultCursor:'pointer',
touchZoomCenter:1,
pitch: 0,
layers:[
disWorld
],
viewMode:'3D',
resizeEnable: true
})
map.addControl(new AMap.Scale());
map.addControl(new AMap.ToolBar({liteStyle:true}));
</script>
</body>
</html>

43
demos/08_point_shape.html → demos/great_circle.html
View File

@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram"> <meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css"> <link rel="stylesheet" href="./assets/common.css">
<title>point_circle</title> <title>hexagon demo</title>
<style> <style>
#map { position:absolute; top:0; bottom:0; width:100%; } #map { position:absolute; top:0; bottom:0; width:100%; }
</style> </style>
@ -15,48 +15,45 @@
<body> <body>
<div id="map"></div> <div id="map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script> <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<script src="./assets/jquery-3.2.1.min.js"></script> <script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script> <script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script> <script src="../build/L7.js"></script>
<script> <script>
const color1 = [ 'rgba(37, 140, 249, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(255, 255, 255, 0.8)' ];
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
mapStyle: 'dark', // 样式URL mapStyle: 'dark', // 样式URL
center: [ 120.037828998113099, 30.086317611850635 ], center: [ 116.2825, 39.9 ],
pitch: 0, pitch: 0,
zoom: 5.44 zoom: 3
}); });
window.scene = scene;
var colorObj={
'黄色':'yellow',
'蓝色':'blue',
'橙色':'orange'
}
scene.on('loaded', () => { scene.on('loaded', () => {
$.get('./data/waringData.json', data => { $.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => {
scene.PointLayer({
scene.LineLayer({
zIndex: 2 zIndex: 2
}) })
.source(data, { .source(data, {
type: 'array', parser:{
x: 'lon', type: 'csv',
y: 'lat', x: 'lng1',
}) y: 'lat1',
.shape('2d:radar') x1: 'lng2',
.size(80 ) y1: 'lat2'
.active(false) }
.color('signallevel',(v)=>{
return colorObj[v];
}) })
.shape('greatCircle')
.size(0.8)
.color('rgb(13,64,140)')
.style({ .style({
shape:'radar' opacity:0.6,
}) })
.render(); .render();
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

9
demos/grid.html
View File

@ -53,16 +53,19 @@ scene.on('loaded', () => {
}, },
{ {
type: 'grid', type: 'grid',
size: 15000, size: 160000,
field:'v', field:'v',
method:'sum' method:'sum'
} }
] ]
}) })
.shape('grid') .shape('squareColumn')
.size('count',(value)=>{
return value * 1000;
})
.active({fill:'red'}) .active({fill:'red'})
.style({ .style({
coverage: 0.8 coverage: 0.6
}) })
.color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"]) .color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
.render(); .render();

11
demos/hexgon.html
View File

@ -25,7 +25,7 @@ const scene = new L7.Scene({
mapStyle: 'dark', // 样式URL mapStyle: 'dark', // 样式URL
center: [120.132624,30.281774], center: [120.132624,30.281774],
pitch: 0, pitch: 0,
zoom: 10 zoom: 7
}); });
scene.on('loaded', () => { scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => { $.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => {
@ -53,16 +53,19 @@ scene.on('loaded', () => {
}, },
{ {
type: 'hexagon', type: 'hexagon',
size: 6000, size: 10000,
field:'v', field:'v',
method:'sum' method:'sum'
} }
] ]
}) })
.active(true) .active(true)
.shape('hexagon') .size('count',(value)=>{
return value * 1000;
})
.shape('square')
.style({ .style({
coverage: 0.9, coverage: 0.8,
angle: 0, angle: 0,
}) })
.color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"]) .color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])

73
demos/hz.html Normal file
View File

@ -0,0 +1,73 @@
<!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>city demo</title>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id = 'gui' style="position:absolute;top:0px;right:0px;z-index:2;"></div>
<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="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.2.0-beta.1/build/l7.js"></script>
<script>
var buildLayer =null;
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [120.173104, 30.244072],
pitch: 66.50572,
zoom: 15.79,
minZoom:10
});
scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', data => {
scene.LineLayer({
zIndex: 2
})
.source(data)
.size(2)
.color('#ff893a')
.animate({
enable:false,
interval:0.2,
duration:5,
trailLength:0.1
})
.render();
});
$.get('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json', data => {
buildLayer = scene.PolygonLayer({
zIndex: 2
})
.source(data)
.shape('extrude')
.size('floor',[0,2000])
.color('rgba(242,246,250,1.0)')
.animate({enable:true})
.style({
opacity:1.0,
baseColor:'rgb(16,16,16)',
windowColor:'rgb(30,60,89)',
brightColor:'rgb(255,176,38)',
})
.render();
});
});
</script>
</body>
</html>

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="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/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script> <script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script> <script src="../build/l7.js"></script>
<script> <script>
var mapinstance = new AMap.Map('map',{ var mapinstance = new AMap.Map('map',{
center: [121.576757,31.279873 ], center: [121.576757,31.279873 ],
@ -32,105 +32,68 @@ var mapinstance = new AMap.Map('map',{
const scene = new L7.Scene({ const scene = new L7.Scene({
map:mapinstance, map:mapinstance,
//mapStyle: 'dark', // 样式URL mapStyle: 'dark', // 样式URL
}); });
const testdata = [ const testdata =[ {
{ 'type': 'Polygon',
"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" 'geometryCoord': [
},
{
"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": [
[ [
[ [
118.48068237304686, 115.1806640625,
32.120964197033615 30.637912028341123
], ],
[ [
118.49578857421874, 114.9609375,
32.037184191435145 29.152161283318915
], ],
[ [
118.57131958007811, 117.79541015625001,
32.061627957476404 27.430289738862594
], ],
[ [
118.57131958007811, 118.740234375,
32.13492006367728 29.420460341013133
], ],
[ [
118.48068237304686, 117.46582031249999,
32.120964197033615 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', () => { 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() citylayer = scene.PolygonLayer()
.source(data,{ .source(testdata,{
parser:{ parser:{
type:'json', type:'json',
coordinates:'areaGeometry' coordinates:'geometryCoord'
} }
}) })
.color('red') .color('red')
.shape('extrude') .shape('fill')
.active(true)
.size(1000) .style({
opacity: 1.0
})
.render();
citylayer = scene.LineLayer()
.source(testdata,{
parser:{
type:'json',
coordinates:'geometryCoord'
}
})
.color('#fff')
.shape('line')
.size(4)
.active(true) .active(true)
.style({ .style({
opacity: 1.0 opacity: 1.0

17
demos/taxi.html
View File

@ -54,24 +54,7 @@ scene.on('loaded', () => {
opacity:1.0, opacity:1.0,
baseColor:'rgb(16,16,16)', baseColor:'rgb(16,16,16)',
windowColor:'rgb(30,60,89)', windowColor:'rgb(30,60,89)',
//brightColor:'rgb(155,217,255)'
brightColor:'rgb(255,176,38)', brightColor:'rgb(255,176,38)',
lights: [
{
type: 'directional',
direction: [ 1, 10.5, 12 ],
ambient: [ 0.2, 0.2, 0.2 ],
diffuse: 'red',
specular: [ 0.1, 0.1, 0.1 ]
},
{
type: 'directional',
direction: [ 1, -10.5, 12 ],
ambient: [ 0.2, 0.2, 0.2 ],
diffuse: 'green',
specular: [ 0.1, 0.1, 0.1 ]
},
]
}) })
.render(); .render();

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>

49
demos/vectorTilepolygon.html
View File

@ -23,7 +23,7 @@
<script src="./assets/dat.gui.min.js"></script> <script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script> <script src="../build/L7.js"></script>
<script> <script>
window.L7 = L7;
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
mapStyle: 'dark', // 样式URL mapStyle: 'dark', // 样式URL
@ -38,51 +38,30 @@ var colorHash = new ColorHash();
scene.on('loaded', () => { scene.on('loaded', () => {
scene.ImageTileLayer({
zIndex:4
})
.source('http://t1.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=174705aebfe31b79b3587279e211cb9a')
.render();
const provinceSource = new L7.TileSource('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/province/{z}/{x}/{y}.pbf',{
parser:{
type: 'mvt',
sourceLayer:'layer',
idField:'code',
maxZoom: 5,
}
})
//
$.getJSON('https://gw.alipayobjects.com/os/basement_prod/b402ae15-c1ab-499b-834c-708e7c1a13be.json', city => {
const citylayer = scene.PolygonLayer()
.source(city)
.color('total', ['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506'])
.shape('line')
.size(2)
.active(true)
.style({
opacity: 1.0
})
.render();
});
const layer = scene.VectorTileLayer({ const layer = scene.VectorTileLayer({
zIndex:0, zIndex:0,
layerType:'polygon' layerType:'polygon'
}) })
.source(provinceSource) // http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/county/{z}/{x}/{y}.pbf
.source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/county/{z}/{x}/{y}.pbf',{
parser:{
type: 'mvt',
sourceLayer:'county',
idField:'id',
maxZoom: 9
}
})
.scale({ .scale({
total:{ 'OBJECTID':{
type:'linear',
min:0, min:0,
max:5000000 max:3000,
type:'linear'
} }
}) })
.shape('fill') .shape('fill')
.size(2) .size(2)
.active(false) .active(false)
.color('total', ['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506']) .color('OBJECTID',['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'])
.style({ .style({
opacity:1.0 opacity:1.0
}) })

93
demos/workerdemo.html Normal file
View File

@ -0,0 +1,93 @@
<!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,
});
scene.on('loaded', () => {
scene.addTileSource('test',{
url:'http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/county/{z}/{x}/{y}.pbf',
type:'vector',
minZoom: 0,
maxZoom:9
})
const layer = scene.PolygonLayer({
zIndex:0,
})
.source('test',{
parser:{
type: 'mvt',
sourceLayer:'county',
idField:'id'
}
})
.scale({
'OBJECTID':{
min:0,
max:3000,
type:'linear'
}
})
.shape('fill')
.size(1000000)
.active(false)
.color('OBJECTID',['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'])
.style({
opacity:1.0
})
.render();
const layer2 = scene.PolygonLayer({
zIndex:10,
})
.source('test',{
parser:{
type: 'mvt',
sourceLayer:'county',
idField:'id'
}
})
.shape('line')
.size(1)
.active(false)
.color('#fff')
.style({
opacity:1.0
})
.render();
});
</script>
</body>
</html>

13
package.json
View File

@ -48,6 +48,13 @@
"open": "~0.0.5", "open": "~0.0.5",
"parseurl": "~1.3.2", "parseurl": "~1.3.2",
"pre-commit": "~1.2.2", "pre-commit": "~1.2.2",
"rollup": "^1.16.2",
"rollup-plugin-buble": "^0.19.6",
"rollup-plugin-commonjs": "^9.2.1",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-resolve": "^4.0.1",
"rollup-plugin-terser": "^4.0.4",
"serve-static": "^1.13.2", "serve-static": "^1.13.2",
"shelljs": "~0.7.8", "shelljs": "~0.7.8",
"string-replace-loader": "~1.3.0", "string-replace-loader": "~1.3.0",
@ -58,6 +65,10 @@
"worker-loader": "^2.0.0" "worker-loader": "^2.0.0"
}, },
"scripts": { "scripts": {
"build-dev": "rollup -c --environment BUILD:dev && npm run demos-web",
"watch-dev": "rollup -c --environment BUILD:dev --watch & npm run demos-web ",
"build-prod": "rollup -c --environment BUILD:production",
"build-prod-min": "rollup -c --environment BUILD:production,MINIFY:true",
"build": "webpack", "build": "webpack",
"build-lib": "babel src --out-dir lib", "build-lib": "babel src --out-dir lib",
"bundler": "electron ./bundler/app.js", "bundler": "electron ./bundler/app.js",
@ -78,7 +89,7 @@
"mkdir-dist": "node ./bin/mkdir-dist.js", "mkdir-dist": "node ./bin/mkdir-dist.js",
"prepublishOnly": "npm run build-lib && npm run dist", "prepublishOnly": "npm run build-lib && npm run dist",
"screenshot": "node ./bin/screenshot.js", "screenshot": "node ./bin/screenshot.js",
"start": "npm run dev", "start": "npm run watch-dev",
"test": "torch --compile-opts ./.torch.compile.opts.js --compile --renderer --recursive test/unit", "test": "torch --compile-opts ./.torch.compile.opts.js --compile --renderer --recursive test/unit",
"test-all": "npm run test && npm run test-bugs", "test-all": "npm run test && npm run test-bugs",
"test-bugs": "torch --compile --renderer --recursive test/bugs", "test-bugs": "torch --compile --renderer --recursive test/bugs",

100
rollup.config.js Normal file
View File

@ -0,0 +1,100 @@
import fs from 'fs';
// import sourcemaps from 'rollup-plugin-sourcemaps';
import json from 'rollup-plugin-json';
import buble from 'rollup-plugin-buble';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import builtins from 'rollup-plugin-node-builtins';
import { createFilter } from 'rollup-pluginutils';
import { terser } from 'rollup-plugin-terser';
const { BUILD, MINIFY } = process.env;
const minified = MINIFY === 'true';
const production = BUILD === 'production';
const outputFile = !production
? 'build/L7.js'
: minified
? 'build/l7.js'
: 'build/l7-unminified.js';
const config = [
{
input: [ 'src/index.js', 'src/worker/worker.js' ],
output: {
dir: 'rollup/build/l7',
format: 'amd',
sourcemap: 'inline',
indent: false,
chunkFileNames: 'shared.js'
},
// experimentalCodeSplitting: true,
treeshake: production,
onwarn(warning, warn) {
if (warning.code === 'CIRCULAR_DEPENDENCY') return;
warn(warning);
},
plugins: [
glsl(
[ './src/geom/shader/*.glsl', './src/core/engine/picking/*.glsl', './src/geom/shader/**/*.glsl' ],
production
),
minified ? terser() : false,
json(),
buble({
transforms: { dangerousForOf: true },
objectAssign: 'Object.assign'
}),
resolve({
browser: true,
preferBuiltins: false
}),
commonjs({
ignoreGlobal: true
}),
builtins()
]
},
{
input: 'rollup/l7.js',
output: {
name: 'L7',
file: outputFile,
format: 'umd',
sourcemap: production ? true : 'inline',
indent: false,
intro: fs.readFileSync(
require.resolve('./rollup/bundle_prelude.js'),
'utf8'
)
},
treeshake: false,
plugins: [
]
}
];
export default config;
function glsl(include, minify) {
const filter = createFilter(include);
return {
name: 'glsl',
transform(code, id) {
if (!filter(id)) return;
// barebones GLSL minification
if (minify) {
code = code
.trim() // strip whitespace at the start/end
.replace(/\s*\/\/[^\n]*\n/g, '\n') // strip double-slash comments
.replace(/\n+/g, '\n') // collapse multi line breaks
.replace(/\n\s+/g, '\n') // strip identation
.replace(/\s?([+-\/*=,])\s?/g, '$1') // strip whitespace around operators
.replace(/([;\(\),\{\}])\n(?=[^#])/g, '$1'); // strip more line breaks
}
return {
code: `export default ${JSON.stringify(code)};`,
map: { mappings: '' }
};
}
};
}

19
rollup/bundle_prelude.js Normal file
View File

@ -0,0 +1,19 @@
/* eslint-disable */
var shared, worker, L7;
// define gets called three times: one for each chunk. we rely on the order
// they're imported to know which is which
function define(_, chunk) {
if (!shared) {
shared = chunk;
} else if (!worker) {
worker = chunk;
} else {
var workerBundleString = 'var sharedChunk = {}; (' + shared + ')(sharedChunk); (' + worker + ')(sharedChunk);'
var sharedChunk = {};
shared(sharedChunk);
L7 = chunk(sharedChunk);
L7.workerUrl = window.URL.createObjectURL(new Blob([workerBundleString], { type: 'text/javascript' }));
}
}

4
rollup/l7.js Normal file
View File

@ -0,0 +1,4 @@
import './build/l7/shared';
import './build/l7/worker';
import './build/l7/index';
export default L7;

78
src/attr/color-util.js
View File

@ -4,16 +4,32 @@
*/ */
import Util from '../util'; import Util from '../util';
const RGB_REG = /rgba?\(([\s.,0-9]+)\)/; const RGB_REG = /rgba?\(([\s.,0-9]+)\)/;
// const RGBA_REG = /rgba\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(\d+)\s*\)/; const ColorKeywords = {
aliceblue: '#F0F8FF', antiquewhite: '#FAEBD7', aqua: '#00FFFF', aquamarine: '#7FFFD4', azure: '#F0FFFF',
// 创建辅助 tag 取颜色 beige: '#F5F5DC', bisque: '#FFE4C4', black: '#000000', blanchedalmond: '#FFEBCD', blue: '#0000FF', blueviolet: '#8A2BE2',
function createTmp() { brown: '#A52A2A', burlywood: '#DEB887', cadetblue: '#5F9EA0', chartreuse: '#7FFF00', chocolate: '#D2691E', coral: '#FF7F50',
const i = document.createElement('i'); cornflowerblue: '#6495ED', cornsilk: '#FFF8DC', crimson: '#DC143C', cyan: '#00FFFF', darkblue: '#00008B', darkcyan: '#008B8B',
i.title = 'Web Colour Picker'; darkgoldenrod: '#B8860B', darkgray: '#A9A9A9', darkgreen: '#006400', darkgrey: '#A9A9A9', darkkhaki: '#BDB76B', darkmagenta: '#8B008B',
i.style.display = 'none'; darkolivegreen: '#556B2F', darkorange: '#FF8C00', darkorchid: '#9932CC', darkred: '#8B0000', darksalmon: '#E9967A', darkseagreen: '#8FBC8F',
document.body.appendChild(i); darkslateblue: '#483D8B', darkslategray: '#2F4F4F', darkslategrey: '#2F4F4F', darkturquoise: '#00CED1', darkviolet: '#9400D3',
return i; deeppink: '#FF1493', deepskyblue: '#00BFFF', dimgray: '#696969', dimgrey: '#696969', dodgerblue: '#1E90FF', firebrick: '#B22222',
} floralwhite: '#FFFAF0', forestgreen: '#228B22', fuchsia: '#FF00FF', gainsboro: '#DCDCDC', ghostwhite: '#F8F8FF', gold: '#FFD700',
goldenrod: '#DAA520', gray: '#808080', green: '#008000', greenyellow: '#ADFF2F', grey: '#808080', honeydew: '#F0FFF0', hotpink: '#FF69B4',
indianred: '#CD5C5C', indigo: '#4B0082', ivory: '#FFFFF0', khaki: '#F0E68C', lavender: '#E6E6FA', lavenderblush: '#FFF0F5', lawngreen: '#7CFC00',
lemonchiffon: '#FFFACD', lightblue: '#ADD8E6', lightcoral: '#F08080', lightcyan: '#E0FFFF', lightgoldenrodyellow: '#FAFAD2', lightgray: '#D3D3D3',
lightgreen: '#90EE90', lightgrey: '#D3D3D3', lightpink: '#FFB6C1', lightsalmon: '#FFA07A', lightseagreen: '#20B2AA', lightskyblue: '#87CEFA',
lightslategray: '#778899', lightslategrey: '#778899', lightsteelblue: '#B0C4DE', lightyellow: '#FFFFE0', lime: '#00FF00', limegreen: '#32CD32',
linen: '#FAF0E6', magenta: '#FF00FF', maroon: '#800000', mediumaquamarine: '#66CDAA', mediumblue: '#0000CD', mediumorchid: '#BA55D3',
mediumpurple: '#9370DB', mediumseagreen: '#3CB371', mediumslateblue: '#7B68EE', mediumspringgreen: '#00FA9A', mediumturquoise: '#48D1CC',
mediumvioletred: '#C71585', midnightblue: '#191970', mintcream: '#F5FFFA', mistyrose: '#FFE4E1', moccasin: '#FFE4B5', navajowhite: '#FFDEAD',
navy: '#000080', oldlace: '#FDF5E6', olive: '#808000', olivedrab: '#6B8E23', orange: '#FFA500', orangered: '#FF4500', orchid: '#DA70D6',
palegoldenrod: '#EEE8AA', palegreen: '#98FB98', paleturquoise: '#AFEEEE', palevioletred: '#DB7093', papayawhip: '#FFEFD5', peachpuff: '#FFDAB9',
peru: '#CD853F', pink: '#FFC0CB', plum: '#DDA0DD', powderblue: '#B0E0E6', purple: '#800080', rebeccapurple: '#663399', red: '#FF0000', rosybrown: '#BC8F8F',
royalblue: '#4169E1', saddlebrown: '#8B4513', salmon: '#FA8072', sandybrown: '#F4A460', seagreen: '#2E8B57', seashell: '#FFF5EE',
sienna: '#A0522D', silver: '#C0C0C0', skyblue: '#87CEEB', slateblue: '#6A5ACD', slategray: '#708090', slategrey: '#708090', snow: '#FFFAFA',
springgreen: '#00FF7F', steelblue: '#4682B4', tan: '#D2B48C', teal: '#008080', thistle: '#D8BFD8', tomato: '#FF6347', turquoise: '#40E0D0',
violet: '#EE82EE', wheat: '#F5DEB3', white: '#FFFFFF', whitesmoke: '#F5F5F5', yellow: '#FFFF00', yellowgreen: '#9ACD32'
};
// 获取颜色之间的插值 // 获取颜色之间的插值
function getValue(start, end, percent, index) { function getValue(start, end, percent, index) {
@ -36,13 +52,15 @@ function calColor(colors, percent) {
// rgb 颜色转换成数组 // rgb 颜色转换成数组
function rgb2arr(str) { function rgb2arr(str) {
const arr = []; const arr = [];
if (str.length === 4) {
str = `#${str[1]}${str[1]}${str[2]}${str[2]}${str[3]}${str[3]}`;
}
arr.push(parseInt(str.substr(1, 2), 16)); arr.push(parseInt(str.substr(1, 2), 16));
arr.push(parseInt(str.substr(3, 2), 16)); arr.push(parseInt(str.substr(3, 2), 16));
arr.push(parseInt(str.substr(5, 2), 16)); arr.push(parseInt(str.substr(5, 2), 16));
return arr; return arr;
} }
const colorCache = {}; const colorCache = {};
let iEl = null;
const ColorUtil = { const ColorUtil = {
/** /**
* 将颜色转换到 rgb 的格式 * 将颜色转换到 rgb 的格式
@ -51,33 +69,29 @@ const ColorUtil = {
*/ */
toRGB(color) { toRGB(color) {
// 如果已经是 rgb的格式 // 如果已经是 rgb的格式
if (color[0] === '#' && color.length === 7) { let colorArray = [ 255, 255, 255, 255 ];
const colorArray = rgb2arr(color); if (ColorKeywords[color]) { // color name 2 hex
const hexColor = ColorKeywords[color];
colorArray = rgb2arr(hexColor);
colorArray.push(255.0);
}
if (color[0] === '#' && (color.length === 7 || color.length === 4)) { // hex2array
colorArray = rgb2arr(color);
colorArray.push(255.0); colorArray.push(255.0);
return colorArray; return colorArray;
} }
if (!iEl) { // 防止防止在页头报错 if (RGB_REG.test(color)) {
iEl = createTmp(); const matchs = RGB_REG.exec(color);
colorArray = matchs[1].split(/\s*,\s*/);
if (colorArray.length === 4) {
colorArray[3] *= 255;
} }
let rst; if (colorArray.length === 3) {
if (colorCache[color]) { colorArray.push(255.0);
rst = colorCache[color];
} else {
iEl.style.color = color;
rst = document.defaultView.getComputedStyle(iEl, '').getPropertyValue('color');
const matchs = RGB_REG.exec(rst);
const cArray = matchs[1].split(/\s*,\s*/);
if (cArray.length === 4) {
cArray[3] *= 255;
} }
if (cArray.length === 3) {
cArray.push(255.0);
} }
colorCache[color] = colorArray;
colorCache[color] = cArray; return colorArray;
rst = cArray;
}
return rst;
}, },
// 转成 WebGl color buffer // 转成 WebGl color buffer
color2Arr(str) { color2Arr(str) {

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

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

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

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

2
src/core/engine/renderer.js
View File

@ -17,7 +17,7 @@ export default class Renderer {
this.renderer.setPixelRatio(this.pixelRatio); this.renderer.setPixelRatio(this.pixelRatio);
this.renderer.gammaInput = true; this.renderer.gammaInput = true;
this.renderer.gammaOutput = true; this.renderer.gammaOutput = true;
this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.enabled = false;
this.container.appendChild(this.renderer.domElement); this.container.appendChild(this.renderer.domElement);
} }
updateSize() { updateSize() {

36
src/core/layer.js
View File

@ -39,11 +39,12 @@ export default class Layer extends Base {
attrs: {}, attrs: {},
// 样式配置项 // 样式配置项
styleOptions: { styleOptions: {
stroke: 'none', stroke: [ 1, 1, 1, 1 ],
strokeWidth: 1.0, strokeWidth: 1.0,
opacity: 1.0, opacity: 1.0,
strokeOpacity: 1.0, strokeOpacity: 1.0,
texture: false texture: false,
blending: 'normal'
}, },
destroyed: false, destroyed: false,
// 选中时的配置项 // 选中时的配置项
@ -68,6 +69,8 @@ export default class Layer extends Base {
this._object3D.renderOrder = this.get('zIndex') || 0; this._object3D.renderOrder = this.get('zIndex') || 0;
this._mapEventHandlers = []; this._mapEventHandlers = [];
const layerId = this._getUniqueId(); const layerId = this._getUniqueId();
this.set('layerId', layerId);
this.set('mapType', this.scene.mapType);
this.layerId = layerId; this.layerId = layerId;
this._activeIds = null; this._activeIds = null;
const world = scene._engine.world; const world = scene._engine.world;
@ -75,7 +78,6 @@ export default class Layer extends Base {
this.layerMesh = null; this.layerMesh = null;
this.layerLineMesh = null; this.layerLineMesh = null;
this._initEvents(); this._initEvents();
} }
/** /**
* 将图层添加加到 Object * 将图层添加加到 Object
@ -127,7 +129,23 @@ export default class Layer extends Base {
this.set('visible', visible); this.set('visible', visible);
this._object3D.visible = this.get('visible'); this._object3D.visible = this.get('visible');
} }
// 兼容瓦片source，非瓦片source
source(data, cfg = {}) { source(data, cfg = {}) {
// 根据Source类型判断，是不是瓦片图层
if (this.scene.getTileSource(data)) {
this.set('layerType', 'tile');
this.set('sourceOption', {
id: data,
...cfg
});
this.scene.style.addLayer(this);
// 初始化tiles
this.tiles = new THREE.Object3D();
this._object3D.add(this.tiles);
return this;
}
if (data instanceof source) { if (data instanceof source) {
this.layerSource = data; this.layerSource = data;
return this; return this;
@ -244,9 +262,6 @@ export default class Layer extends Base {
Util.assign(animateOptions, cfg); Util.assign(animateOptions, cfg);
this.set('animateOptions', animateOptions); this.set('animateOptions', animateOptions);
return this; return this;
}
texture() {
} }
fitBounds() { fitBounds() {
const extent = this.layerSource.data.extent; const extent = this.layerSource.data.extent;
@ -276,13 +291,13 @@ export default class Layer extends Base {
} }
_setAttrOptions(attrName, attrCfg) { _setAttrOptions(attrName, attrCfg) {
const options = this.get('attrOptions'); const options = this.get('attrOptions');
if (attrName === 'size' && this._zoomScale) { if (attrName === 'size' && this._zoomScale) {
attrCfg.zoom = this.map.getZoom(); attrCfg.zoom = this.map.getZoom();
} }
options[attrName] = attrCfg; options[attrName] = attrCfg;
} }
_createAttrOption(attrName, field, cfg, defaultValues) { _createAttrOption(attrName, field, cfg, defaultValues) {
const attrCfg = {}; const attrCfg = {};
attrCfg.field = field; attrCfg.field = field;
if (cfg) { if (cfg) {
@ -306,6 +321,10 @@ export default class Layer extends Base {
} }
render() { render() {
if (this.get('layerType') === 'tile') {
this.scene.style.update(this._attrs);
return this;
}
this.init(); this.init();
this.scene._engine.update(); this.scene._engine.update();
return this; return this;
@ -386,8 +405,8 @@ export default class Layer extends Base {
const nextStyle = this.get('styleOptions'); const nextStyle = this.get('styleOptions');
if (preAttrs === undefined && preStyle === undefined) { // 首次渲染 if (preAttrs === undefined && preStyle === undefined) { // 首次渲染
// this._mapping(); // this._mapping();
// this._scaleByZoom();
this._setPreOption(); this._setPreOption();
this._scaleByZoom();
this._initInteraction(); this._initInteraction();
this._initMapEvent(); this._initMapEvent();
this.draw(); this.draw();
@ -460,6 +479,7 @@ export default class Layer extends Base {
this.scene.on('pick-' + this.layerId, e => { this.scene.on('pick-' + this.layerId, e => {
let { featureId, point2d, type } = e; let { featureId, point2d, type } = e;
// TODO 瓦片图层获取选中数据信息 // TODO 瓦片图层获取选中数据信息
const lnglat = this.scene.containerToLngLat(point2d); const lnglat = this.scene.containerToLngLat(point2d);
let feature = null; let feature = null;
let style = null; let style = null;

16
src/core/scene.js
View File

@ -3,12 +3,13 @@ import { LAYER_MAP } from '../layer';
import Base from './base'; import Base from './base';
import LoadImage from './image'; import LoadImage from './image';
import FontAtlasManager from '../geom/buffer/point/text/font-manager'; import FontAtlasManager from '../geom/buffer/point/text/font-manager';
// import WorkerPool from './worker';
// import { MapProvider } from '../map/AMap'; // import { MapProvider } from '../map/AMap';
import { getMap } from '../map/index'; import { getMap } from '../map/index';
import Global from '../global'; import Global from '../global';
import { getInteraction } from '../interaction/index'; import { getInteraction } from '../interaction/index';
import { compileBuiltinModules } from '../geom/shader'; import { compileBuiltinModules } from '../geom/shader';
import Style from './style';
import { epsg3857 } from '@antv/geo-coord/lib/geo/crs/crs-epsg3857';
export default class Scene extends Base { export default class Scene extends Base {
getDefaultCfg() { getDefaultCfg() {
return Global.scene; return Global.scene;
@ -16,6 +17,7 @@ export default class Scene extends Base {
constructor(cfg) { constructor(cfg) {
super(cfg); super(cfg);
this._initMap(); this._initMap();
this.crs = epsg3857;
// this._initAttribution(); // 暂时取消，后面作为组件去加载 // this._initAttribution(); // 暂时取消，后面作为组件去加载
this.addImage(); this.addImage();
this.fontAtlasManager = new FontAtlasManager(); this.fontAtlasManager = new FontAtlasManager();
@ -25,8 +27,8 @@ export default class Scene extends Base {
_initEngine(mapContainer) { _initEngine(mapContainer) {
this._engine = new Engine(mapContainer, this); this._engine = new Engine(mapContainer, this);
this.registerMapEvent(); // this.registerMapEvent();
// this._engine.run(); this._engine.run();
compileBuiltinModules(); compileBuiltinModules();
} }
// 为pickup场景添加 object 对象 // 为pickup场景添加 object 对象
@ -52,6 +54,7 @@ export default class Scene extends Base {
const interaction = new Ctor({ layer: this }); const interaction = new Ctor({ layer: this });
interaction._onHashChange(); interaction._onHashChange();
} }
this.style = new Style(this, {});
this.emit('loaded'); this.emit('loaded');
this._engine.update(); this._engine.update();
}); });
@ -66,6 +69,13 @@ export default class Scene extends Base {
} }
} }
// 添加 Tile Source
addTileSource(id, Sourcecfg) {
this.style.addSource(id, Sourcecfg);
}
getTileSource(id) {
return this.style.getSource(id);
}
on(type, hander) { on(type, hander) {
if (this.map) { this.map.on(type, hander); } if (this.map) { this.map.on(type, hander); }
super.on(type, hander); super.on(type, hander);

4
src/core/source.js
View File

@ -33,8 +33,10 @@ export default class Source extends Base {
// 数据转换 统计，聚合，分类 // 数据转换 统计，聚合，分类
this._executeTrans(); this._executeTrans();
// 坐标转换 // 坐标转换
if (!this.get('projected')) {
this._projectCoords(); this._projectCoords();
} }
}
setData(data, cfg = {}) { setData(data, cfg = {}) {
Object.assign(this._attrs, cfg); Object.assign(this._attrs, cfg);
const transform = this.get('transforms'); const transform = this.get('transforms');
@ -60,7 +62,7 @@ export default class Source extends Base {
// dataArray: clone(this.originData.dataArray) // dataArray: clone(this.originData.dataArray)
// }; // TODO 关闭数据备份 // }; // TODO 关闭数据备份
this.data = this.originData; this.data = this.originData;
if (this.data !== null) { if (this.data !== null && !this.get('projected')) {
this.data.extent = extent(this.data.dataArray); this.data.extent = extent(this.data.dataArray);
} }
} }

85
src/core/style.js Normal file
View File

@ -0,0 +1,85 @@
import Base from '../core/base';
import WorkerPool from '../worker/worker_pool';
import throttle from '../util/throttle';
import { toLngLat, Bounds } from '@antv/geo-coord';
import SourceCache from '../source/source_cache';
import WorkerController from '../worker/worker_controller';
// 统一管理所有的Source
// 统一管理地图样式
export default class Style extends Base {
constructor(scene, cfg) {
super(cfg);
this.scene = scene;
this._sourceCaches = {};
this.WorkerPool = new WorkerPool();
this._tileMap = {};
this.WorkerController = new WorkerController(this.WorkerPool, this);
this.layerStyles = {};
this.layers = [];
this.addMapEvent();
}
addSource(id, sourceCfg) {
if (this._sourceCaches[id] !== undefined) {
throw new Error('SourceID 已存在');
}
sourceCfg.sourceID = id;
this._sourceCaches[id] = new SourceCache(this.scene, sourceCfg);
}
getSource(id) {
return this._sourceCaches[id];
}
addLayer(layer) {
const id = layer.layerId;
this.layers[id] = layer;
}
// 设置
_addTileStyle(layerCfg) {
const layerid = layerCfg.layerId;
this.layerStyles[layerid] = layerCfg;
this._layerStyleGroupBySourceID();
this.WorkerController.broadcast('setLayers', this.layerStyles);
// TODO 更新 style
}
removeTileStyle(id) {
delete this.layerStyles[id];
this._layerStyleGroupBySourceID();
}
_layerStyleGroupBySourceID() {
const sourceStyles = [];
// 支持VectorLayer
for (const layerId in this.layerStyles) {
const sourceID = this.layerStyles[layerId].sourceOption.id;
const sourcelayer = this.layerStyles[layerId].sourceOption.parser.sourceLayer;
if (!sourceStyles[sourceID]) sourceStyles[sourceID] = {};
if (!sourceStyles[sourceID][sourcelayer]) sourceStyles[sourceID][sourcelayer] = [];
sourceStyles[sourceID][sourcelayer].push(this.layerStyles[layerId]);
}
this.sourceStyles = sourceStyles;
}
update(parameters) {
this._addTileStyle(parameters);
for (const key in this._sourceCaches) {
this._sourceCaches[key].update(this.layers, this.sourceStyles[key]);
}
}
addMapEvent() {
this.mapEventHander = throttle(() => {
requestAnimationFrame(() => {
for (const key in this._sourceCaches) {
this._sourceCaches[key].update(this.layers, this.sourceStyles[key]);
}
});
}, 200);
this.scene.map.on('zoomchange', this.mapEventHander);
this.scene.map.on('dragend', this.mapEventHander);
}
clearMapEvent() {
this.scene.map.off('zoomchange', this.mapEventHander);
this.scene.map.off('dragend', this.mapEventHander);
}
// 计算视野内的瓦片坐标
}

14
src/core/three.js
View File

@ -1,4 +1,5 @@
import 'three/src/polyfills.js'; import 'three/src/polyfills.js';
import { BufferAttribute } from 'three/src/core/BufferAttribute.js';
export * from 'three/src/constants.js'; export * from 'three/src/constants.js';
export { Scene } from 'three/src/scenes/Scene.js'; export { Scene } from 'three/src/scenes/Scene.js';
export { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js'; export { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js';
@ -30,7 +31,7 @@ export { DataTexture } from 'three/src/textures/DataTexture.js';
export { Color } from 'three/src/math/Color.js'; export { Color } from 'three/src/math/Color.js';
export { export {
Float64BufferAttribute, Float64BufferAttribute,
Float32BufferAttribute, // Float32BufferAttribute,
Uint32BufferAttribute, Uint32BufferAttribute,
Int32BufferAttribute, Int32BufferAttribute,
Uint16BufferAttribute, Uint16BufferAttribute,
@ -43,3 +44,14 @@ export {
export { InstancedBufferAttribute } from 'three/src/core/InstancedBufferAttribute' export { InstancedBufferAttribute } from 'three/src/core/InstancedBufferAttribute'
// export * from '../../build/three.js'; // export * from '../../build/three.js';
function Float32BufferAttribute( array, itemSize, normalized ) {
if(Array.isArray( array )){
array = new Float32Array( array )
}
BufferAttribute.call( this, array, itemSize, normalized );
}
Float32BufferAttribute.prototype = Object.create( BufferAttribute.prototype );
Float32BufferAttribute.prototype.constructor = Float32BufferAttribute;
export { Float32BufferAttribute }

1
src/core/worker.js
View File

@ -1,4 +1,3 @@
import Worker from '../worker/main.worker.js';
class WorkerPool { class WorkerPool {
constructor(workerCount) { constructor(workerCount) {
this.workerCount = workerCount || Math.max(Math.floor(window.navigator.hardwareConcurrency / 2), 1); this.workerCount = workerCount || Math.max(Math.floor(window.navigator.hardwareConcurrency / 2), 1);

124
src/geom/buffer/buffer.js Normal file
View File

@ -0,0 +1,124 @@
import Base from '../../core/base';
export default class BufferBase extends Base {
constructor(cfg) {
super(cfg);
this.attributes = {
};
this.verticesCount = 0;
this.indexCount = 0;
this.indexArray = new Int32Array(0);
this._init();
}
_init() {
this._calculateFeatures();
this._initAttributes();
this._buildFeatures();
}
_initAttributes() {
this.attributes.positions = new Float32Array(this.verticesCount * 3);
this.attributes.colors = new Float32Array(this.verticesCount * 4);
this.attributes.pickingIds = new Float32Array(this.verticesCount);
this.attributes.sizes = new Float32Array(this.verticesCount);
this.attributes.pickingIds = new Float32Array(this.verticesCount);
if (this.get('uv')) {
this.attributes.uv = new Float32Array(this.verticesCount * 2);
}
this.indexArray = new Int32Array(this.indexCount);
}
addFeature() {
}
// 更新渲染
upload() {
}
destroy() {
}
resize() {
}
checkIsClosed(points) {
const p1 = points[0][0];
const p2 = points[0][points[0].length - 1];
return (p1[0] === p2[0] && p1[1] === p2[1]);
}
concat(arrayType, arrays) {
let totalLength = 0;
for (const arr of arrays) {
totalLength += arr.length;
}
const arrayBuffer = new ArrayBuffer(totalLength * arrayType.BYTES_PER_ELEMENT);
let offset = 0;
const result = new arrayType(arrayBuffer);
for (const arr of arrays) {
result.set(arr, offset);
offset += arr.length;
}
return result;
}
_encodeArray(feature, num) {
const { color, id, pattern, size } = feature;
const { verticesOffset } = feature.bufferInfo;
const imagePos = this.get('imagePos');
const start1 = verticesOffset;
for (let i = 0; i < num; i++) {
if (feature.hasOwnProperty('color')) {
this.attributes.colors[start1 * 4 + i * 4] = color[0];
this.attributes.colors[start1 * 4 + i * 4 + 1] = color[1];
this.attributes.colors[start1 * 4 + i * 4 + 2] = color[2];
this.attributes.colors[start1 * 4 + i * 4 + 3] = color[3];
}
if (feature.hasOwnProperty('id')) {
this.attributes.pickingIds[start1 + i] = id;
}
if (feature.hasOwnProperty('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')) {
const patternPos = imagePos[pattern] || { x: 0, y: 0 };
this.attributes.patterns[start1 * 2 + i * 2 ] = patternPos.x;
this.attributes.patterns[start1 * 2 + i * 2 + 1] = patternPos.y;
}
}
}
_calculateWall(feature) {
const size = feature.size;
const { vertices, indexOffset, verticesOffset, faceNum } = feature.bufferInfo;
this._encodeArray(feature, faceNum * 4);
for (let i = 0; i < faceNum; i++) {
const prePoint = vertices.slice(i * 3, i * 3 + 3);
const nextPoint = vertices.slice(i * 3 + 3, i * 3 + 6);
this._calculateExtrudeFace(prePoint, nextPoint, verticesOffset + i * 4, indexOffset + i * 6, size);
feature.bufferInfo.verticesOffset += 4;
feature.bufferInfo.indexOffset += 6;
}
}
_calculateExtrudeFace(prePoint, nextPoint, positionOffset, indexOffset, size) {
this.attributes.positions.set([
prePoint[0], prePoint[1], size,
nextPoint[0], nextPoint[1], size,
prePoint[0], prePoint[1], 0,
nextPoint[0], nextPoint[1], 0
],
positionOffset * 3);
const indexArray = [ 1, 2, 0, 3, 2, 1 ].map(v => { return v + positionOffset; });
if (this.get('uv')) {
this.attributes.uv.set([ 0.1, 0, 0, 0, 0.1, size / 2000, 0, size / 2000 ], positionOffset * 2);
}
this.indexArray.set(indexArray, indexOffset);
}
}

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

@ -1,404 +0,0 @@
import Base from '../../core/base';
import * as THREE from '../../core/three';
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 normals = new Float32Array(indexCount * 3);
const colors = new Float32Array(indexCount * 4);
const pickingIds = new Float32Array(indexCount);
const pA = new THREE.Vector3();
const pB = new THREE.Vector3();
const pC = new THREE.Vector3();
const cb = new THREE.Vector3();
const ab = new THREE.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 _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];
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] = ax;
vertices[lastIndex * 9 + 1] = ay;
vertices[lastIndex * 9 + 2] = az;
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] = bx;
vertices[lastIndex * 9 + 4] = by;
vertices[lastIndex * 9 + 5] = bz;
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] = cx;
vertices[lastIndex * 9 + 7] = cy;
vertices[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,
faceUv: new Float32Array(polygon.faceUv),
sizes: new Float32Array(polygon.sizes)
};
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 THREE.Vector3();
const pB = new THREE.Vector3();
const pC = new THREE.Vector3();
const cb = new THREE.Vector3();
const ab = new THREE.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
};
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
};
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 THREE.Texture(canvas2);
// texture.anisotropy = renderer.getMaxAnisotropy();
texture.needsUpdate = true;
return texture;
}
}

89
src/geom/buffer/heatmap/grid_3d.js Normal file
View File

@ -0,0 +1,89 @@
import BufferBase from '../buffer';
export default class Grid3D extends BufferBase {
_buildFeatures() {
const layerData = this.get('layerData');
this._offset = 0;
const shapeType = this.get('shapeType');
layerData.forEach(feature => {
this._calculateTop(feature);
if (shapeType === 'squareColumn') {
this._calculateWall(feature);
}
delete feature.bufferInfo;
});
}
_initAttributes() {
super._initAttributes();
this.attributes.miters = new Float32Array(this.verticesCount * 3);
this.attributes.normals = new Float32Array(this.verticesCount * 3);
}
_calculateFeatures() {
const layerData = this.get('layerData');
const shapeType = this.get('shapeType');
if (shapeType === 'squareColumn') {
this.verticesCount = layerData.length * 20;
} else {
this.verticesCount = layerData.length * 4;
}
this.indexCount = this.verticesCount * 1.5;
}
_calculateTop(feature) {
const [ x, y ] = feature.coordinates;
let { size } = feature;
feature.bufferInfo = {
verticesOffset: this._offset
};
const shapeType = this.get('shapeType');
if (shapeType !== 'squareColumn') {
size = 0;
}
this._encodeArray(feature, 4);
this.attributes.positions.set([ x, y, size, x, y, size, x, y, size, x, y, size ], this._offset * 3);
this.attributes.miters.set([ -1, 1, 1, 1, 1, 1, -1, -1, 1, 1, -1, 1 ], this._offset * 3);
this.attributes.normals.set([ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1 ], this._offset * 3); // top normal
const indexArray = [ 0, 2, 1, 2, 3, 1 ].map(v => { return v + this._offset; });
this.indexArray.set(indexArray, this._offset * 1.5);
this._offset += 4;
}
_calculateWall(feature) {
const { size } = feature;
const [ x, y ] = feature.coordinates;
const vertices = [ 1, -1, 1, -1, -1, 1, -1, 1, 1, 1, 1, 1, 1, -1, 1 ];
feature.bufferInfo = {
verticesOffset: this._offset
};
this._encodeArray(feature, 20);
// front left, back right
this.attributes.normals.set([
0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, // bottom
-1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, // left
0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, // top
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0 // right
], this._offset * 3); // top normal
for (let i = 0; i < 4; i++) {
this.attributes.positions.set([ x, y, 1, x, y, 1, x, y, 1, x, y, 1 ], this._offset * 3);
const prePoint = vertices.slice(i * 3, i * 3 + 3);
const nextPoint = vertices.slice(i * 3 + 3, i * 3 + 6);
this._calculateExtrudeFace(prePoint, nextPoint, this._offset, this._offset * 1.5, size);
this._offset += 4;
}
}
_calculateExtrudeFace(prePoint, nextPoint, positionOffset, indexOffset, size) {
this.attributes.miters.set([
prePoint[0], prePoint[1], size,
nextPoint[0], nextPoint[1], size,
prePoint[0], prePoint[1], 0,
nextPoint[0], nextPoint[1], 0
],
positionOffset * 3);
const indexArray = [ 0, 1, 2, 1, 3, 2 ].map(v => { return v + positionOffset; });
if (this.get('uv')) {
// temp 点亮城市demo
this.attributes.uv.set([ 0.1, 0, 0, 0, 0.1, size / 2000, 0, size / 2000 ], positionOffset * 2);
}
this.indexArray.set(indexArray, indexOffset);
}
}

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 { colorScales } from '../../../attr/colorscales';
import * as THREE from '../../../core/three'; import * as THREE from '../../../core/three';
import Base from '../../../core/base';
export default class HeatmapBuffer extends Base {
export default class HeatmapBuffer extends BufferBase { constructor(cfg) {
geometryBuffer() { super(cfg);
this.init();
}
init() {
const data = this.get('data'); const data = this.get('data');
const positions = []; const positions = [];
const dirs = []; const dirs = [];

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

@ -1,31 +0,0 @@
import { fill } from '../../shape/polygon';
export default function hexagonBuffer(layerData) {
const attribute = {
vertices: [],
miter: [],
colors: [],
pickingIds: []
};
const a = Math.cos(Math.PI / 6);
const points = [
[ 0, -1, 0 ],
[ -a, -0.5, 0 ],
[ -a, 0.5, 0 ],
[ 0, 1, 0 ],
[ a, 0.5, 0 ],
[ a, -0.5, 0 ],
[ 0, -1, 0 ]
];
// const hexgonPoints = polygonPath(6);
const hexgonFill = fill([ points ]);
const { positionsIndex, positions } = hexgonFill;
layerData.forEach(element => {
positionsIndex.forEach(pointIndex => {
attribute.vertices.push(...element.coordinates);
attribute.miter.push(positions[pointIndex][0], positions[pointIndex][1]);
attribute.pickingIds.push(element.id);
attribute.colors.push(...element.color);
});
});
return attribute;
}

40
src/geom/buffer/heatmap/hexagon_3d.js Normal file
View File

@ -0,0 +1,40 @@
/**
* instantcebufferGeometry的组装方式
*/
import BufferBase from '../buffer';
import { fillPolygon, extrude_Polygon } from '../../extrude';
import Global from '../../../global';
import * as shapePath from '../../shape/path';
export default class Hexagon3D extends BufferBase {
_buildFeatures() {
const layerData = this.get('layerData');
this._offset = 0;
layerData.forEach(feature => {
this._calculateFill(feature);
});
}
_calculateFeatures() {
const shape = this.get('shapeType');
const hexgonFill = this.getShape(shape);
const layerData = this.get('layerData');
this.verticesCount = layerData.length;
this.indexCount = 0;
this.instanceGeometry = hexgonFill;
}
_calculateFill(feature) {
feature.bufferInfo = { verticesOffset: this._offset };
const { coordinates } = feature;
this._encodeArray(feature, 1);
this.attributes.positions.set(coordinates, this._offset * 3);
this._offset++;
}
getShape(shape) {
const { pointShape } = Global;
if (pointShape['3d'].indexOf(shape) !== -1) return extrude_Polygon([ shapePath[shape]() ]);
if (pointShape['2d'].indexOf(shape) !== -1) return fillPolygon([ shapePath[shape]() ]);
return fillPolygon([ shapePath[shape]() ]);
}
}

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 Util from '../../util';
import * as THREE from '../../core/three'; import * as THREE from '../../core/three';
import Base from '../../core/base';
export default class ImageBuffer extends BufferBase { export default class ImageBuffer extends Base {
geometryBuffer() { constructor(cfg) {
super(cfg);
this.init();
}
init() {
const layerData = this.get('layerData'); const layerData = this.get('layerData');
const coordinates = layerData[0].coordinates; const coordinates = layerData[0].coordinates;
const images = layerData[0].images; const images = layerData[0].images;

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

@ -1,5 +1,46 @@
export { default as PolygonBuffer } from './polygon';
export { default as PointBuffer } from './point'; // Polygon
export { default as LineBuffer } from './line';
export { default as polygonLineBuffer } from './polygon-line'; import FillBuffer from './polygon/fill_buffer';
// export { default as textBuffer } from './textBuffer'; 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';
import ArcLineBuffer from './line/arcline';
// heatmap
import Grid3D from './heatmap/grid_3d';
import Hexagon3D from './heatmap/hexagon_3d';
// 3D Shape
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);
// line
registerBuffer('line', 'line', MeshLineBuffer);
registerBuffer('line', 'arc', ArcLineBuffer);
registerBuffer('line', 'greatCircle', ArcLineBuffer);
// heatmap
// registerBuffer('heatmap', 'square', Grid3D);
// registerBuffer('heatmap', 'squareColumn', Grid3D);
registerBuffer('heatmap', 'shape', Hexagon3D);
registerBuffer('point', 'shape', Hexagon3D);
// 3D Shape
registerBuffer('shape', 'extrude', Shape_3D);
export { getBuffer };

35
src/geom/buffer/line/arcline.js Normal file
View File

@ -0,0 +1,35 @@
import BufferBase from '../buffer';
export default class ArcLineBuffer extends BufferBase {
_buildFeatures() {
const layerData = this.get('layerData');
layerData.forEach((feature, index) => {
this._calculateArc(feature, index);
});
}
_initAttributes() {
super._initAttributes();
this.attributes.instanceArray = new Float32Array(this.verticesCount * 4);
}
_calculateArc(feature, offset) {
const { segNum = 30 } = this.get('style');
const { coordinates } = feature;
for (let i = 0; i < segNum; i++) {
this.attributes.positions.set([ i, 1, i, i, -1, i ], offset * segNum * 6 + i * 6);
this.attributes.instanceArray.set([ coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1],
coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1] ], offset * segNum * 8 + i * 8);
if (i !== segNum - 1) {
const indexArray = [ 0, 1, 2, 1, 3, 2 ].map(v => { return offset * segNum * 2 + i * 2 + v; });
this.indexArray.set(indexArray, offset * segNum * 6 + i * 6 - offset * 6);
}
}
feature.bufferInfo = { verticesOffset: offset * segNum * 2 };
this._encodeArray(feature, segNum * 2);
}
_calculateFeatures() {
const layerData = this.get('layerData');
const segNum = this.get('segNum') || 30;
this.verticesCount = layerData.length * segNum * 2;
this.indexCount = this.verticesCount * 3 - layerData.length * 6;
}
}

62
src/geom/buffer/line/meshline.js Normal file
View File

@ -0,0 +1,62 @@
import BufferBase from '../buffer';
import getNormals from '../../../util/polyline-normals';
export default class MeshLineBuffer extends BufferBase {
_buildFeatures() {
const layerData = this.get('layerData');
layerData.forEach(feature => {
this._calculateLine(feature);
delete feature.bufferInfo;
});
}
_initAttributes() {
super._initAttributes();
this.attributes.dashArray = new Float32Array(this.verticesCount);
this.attributes.attrDistance = new Float32Array(this.verticesCount);
this.attributes.totalDistances = new Float32Array(this.verticesCount);
this.attributes.patterns = new Float32Array(this.verticesCount * 2);
this.attributes.miters = new Float32Array(this.verticesCount);
this.attributes.normals = new Float32Array(this.verticesCount * 3);
}
_calculateFeatures() {
const layerData = this.get('layerData');
// 计算长
layerData.forEach(feature => {
const bufferInfo = {};
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;
bufferInfo.positions = attrPos;
bufferInfo.attrDistance = attrDistance;
bufferInfo.miters = miters;
bufferInfo.verticesOffset = this.verticesCount;
bufferInfo.indexOffset = this.indexCount;
this.verticesCount += attrPos.length / 3;
this.indexCount += attrIndex.length;
feature.bufferInfo = bufferInfo;
});
}
_calculateLine(feature) {
const { normals, arrayIndex, positions, attrDistance, miters, verticesOffset, indexOffset } = feature.bufferInfo;
const { dashArray = 200 } = this.get('style');
this._encodeArray(feature, positions.length / 3);
const totalLength = attrDistance[attrDistance.length - 1];
// 增加长度
const totalDistances = Array(positions.length / 3).fill(totalLength);
// 虚线比例
const ratio = dashArray / totalLength;
const dashArrays = Array(positions.length / 3).fill(ratio);
this.attributes.positions.set(positions, verticesOffset * 3);
this.indexArray.set(arrayIndex, indexOffset);
this.attributes.miters.set(miters, verticesOffset);
this.attributes.normals.set(normals, verticesOffset * 3);
this.attributes.attrDistance.set(attrDistance, verticesOffset);
this.attributes.totalDistances.set(totalDistances, verticesOffset);
this.attributes.dashArray.set(dashArrays, verticesOffset);
}
}

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

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

@ -1,64 +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 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 (shape !== 'line') {
// 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);
this.faceTexture = this._generateTexture();
} else {
this.attributes = this._toPolygonLineAttributes(this.bufferStruct);
}
}
}

55
src/geom/buffer/polygon/extrude_buffer.js Normal file
View File

@ -0,0 +1,55 @@
import BufferBase from '../buffer';
import earcut from 'earcut';
export default class ExtrudeButffer extends BufferBase {
_buildFeatures() {
const layerData = this.get('layerData');
layerData.forEach(feature => {
this._calculateTop(feature);
this._calculateWall(feature);
delete feature.bufferInfo;
});
}
_calculateFeatures() {
const layerData = this.get('layerData');
// 计算长
layerData.forEach(feature => {
const { coordinates } = feature;
const bufferInfo = {};
const flattengeo = earcut.flatten(coordinates);
const n = this.checkIsClosed(coordinates[0]) ? coordinates[0].length - 1 : coordinates[0].length;
const { vertices, dimensions, holes } = flattengeo;
const indexArray = earcut(vertices, holes, dimensions).map(v => { return this.verticesCount + v; });
bufferInfo.vertices = vertices;
bufferInfo.indexArray = indexArray;
bufferInfo.verticesOffset = this.verticesCount + 0;
bufferInfo.indexOffset = this.indexCount + 0;
bufferInfo.faceNum = n;
this.indexCount += indexArray.length + n * 6;
this.verticesCount += vertices.length / 3 + n * 4;
feature.bufferInfo = bufferInfo;
});
}
_calculateTop(feature) {
const size = feature.size;
const { indexArray, vertices, indexOffset, verticesOffset } = feature.bufferInfo;
const pointCount = vertices.length / 3;
this._encodeArray(feature, vertices.length / 3);
// 添加顶点
for (let i = 0; i < pointCount; i++) {
this.attributes.positions.set([ vertices[ i * 3 ], vertices[i * 3 + 1 ], size ], (verticesOffset + i) * 3);
// 顶部文理坐标计算
if (this.get('uv')) {
// TODO 用过BBox计算纹理坐标
this.attributes.uv.set([ -1, -1 ], (verticesOffset + i) * 2);
}
}
feature.bufferInfo.verticesOffset += pointCount;
// 添加顶点索引
this.indexArray.set(indexArray, indexOffset); // 顶部坐标
feature.bufferInfo.indexOffset += indexArray.length;
}
}

51
src/geom/buffer/polygon/fill_buffer.js Normal file
View File

@ -0,0 +1,51 @@
import BufferBase from '../buffer';
import earcut from 'earcut';
export default class FillBuffer extends BufferBase {
_buildFeatures() {
const layerData = this.get('layerData');
layerData.forEach(feature => {
this._calculateFill(feature);
delete feature.bufferInfo;
});
}
_calculateFill(feature) {
const { indexArray, vertices, indexOffset, verticesOffset } = feature.bufferInfo;
const pointCount = vertices.length / 3;
this._encodeArray(feature, vertices.length / 3);
// 添加顶点
for (let i = 0; i < pointCount; i++) {
this.attributes.positions.set([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 0 ], (verticesOffset + i) * 3);
if (this.get('uv')) {
// TODO 用过BBox计算纹理坐标
this.attributes.uv.set([ 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0 ], (verticesOffset + i) * 3);
}
}
feature.bufferInfo.verticesOffset += pointCount;
// 添加顶点索引
this.indexArray.set(indexArray, indexOffset); // 顶部坐标
feature.bufferInfo.indexOffset += indexArray.length;
}
_calculateFeatures() {
const layerData = this.get('layerData');
// 计算长
layerData.forEach(feature => {
const { coordinates } = feature;
const bufferInfo = {};
const flattengeo = earcut.flatten(coordinates);
const { vertices, dimensions, holes } = flattengeo;
const indexArray = earcut(vertices, holes, dimensions).map(v => { return this.verticesCount + v; });
bufferInfo.vertices = vertices;
bufferInfo.indexArray = indexArray;
bufferInfo.verticesOffset = this.verticesCount + 0;
bufferInfo.indexOffset = this.indexCount + 0;
this.indexCount += indexArray.length;
this.verticesCount += vertices.length / 3;
feature.bufferInfo = bufferInfo;
});
}
}

77
src/geom/buffer/polygon/line_buffer.js Normal file
View File

@ -0,0 +1,77 @@
import BufferBase from '../buffer';
export default class LineBuffer extends BufferBase {
_buildFeatures() {
const layerData = this.get('layerData');
let offsetVertices = 0;
let offsetIndex = 0;
let offset = 0;
layerData.forEach(feature => {
const { coordinates } = feature;
coordinates.forEach(coord => {
const n = coord.length;
feature.bufferInfo = {
verticesOffset: offsetVertices
};
this._encodeArray(feature, n);
for (let i = 0; i < n; i++) {
this.attributes.positions[offsetVertices * 3] = coord[i][0];
this.attributes.positions[offsetVertices * 3 + 1] = coord[i][1];
this.attributes.positions[offsetVertices * 3 + 2] = coord[i][2];
this.indexArray[offsetIndex * 2] = i + offset;
this.indexArray[offsetIndex * 2 + 1] = i + offset + 1;
if (i === n - 1) {
this.indexArray[offsetIndex * 2 + 1] = offsetVertices - n + 1;
}
offsetVertices++;
offsetIndex++;
}
offset += n;
});
});
}
_calculateBufferLength() {
const layerData = this.get('layerData');
layerData.forEach(feature => {
const { coordinates } = feature;
coordinates.forEach(coord => {
this.verticesCount += coord.length;
this.indexCount += (coord.length * 2 - 2);
});
});
}
_calculateFeatures() {
const layerData = this.get('layerData');
layerData.forEach(feature => {
const { coordinates } = feature;
coordinates.forEach(coord => {
this.verticesCount += coord.length;
this.indexCount += (coord.length * 2);
});
});
}
_calculateLine(feature) {
let { indexOffset, verticesOffset } = feature.bufferInfo;
feature.coordinates.forEach(coord => {
const n = coord.length;
this._encodeArray(feature, n);
for (let i = 0; i < n; i++) {
this.attributes.positions[(verticesOffset + i) * 3] = coord[i][0];
this.attributes.positions[(verticesOffset + i) * 3 + 1] = coord[i][1];
this.attributes.positions[(verticesOffset + i) * 3 + 2] = coord[i][2];
this.indexArray[(indexOffset + i) * 2] = i + verticesOffset * 2;
this.indexArray[(indexOffset + i) * 2 + 1] = i + verticesOffset * 2 + 1;
if (i === n - 1) {
this.indexArray[(indexOffset + i) * 2 + 1] = verticesOffset + 1;
}
}
verticesOffset += n;
indexOffset += n;
});
}
}

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

68
src/geom/extrude.js
View File

@ -1,5 +1,5 @@
import earcut from 'earcut'; import earcut from 'earcut';
import * as THREE from '../core/three';
/** /**
* 计算是否拉伸 * 计算是否拉伸
* @param {Array} points 点坐标数组 * @param {Array} points 点坐标数组
@ -14,7 +14,6 @@ export default function extrudePolygon(points, extrude) {
if (p1[0] === p2[0] && p1[1] === p2[1]) { if (p1[0] === p2[0] && p1[1] === p2[1]) {
points[0] = points[0].slice(0, points[0].length - 1); points[0] = points[0].slice(0, points[0].length - 1);
} }
const n = points[0].length; const n = points[0].length;
const flattengeo = earcut.flatten(points); const flattengeo = earcut.flatten(points);
const positions = []; const positions = [];
@ -60,7 +59,7 @@ export default function extrudePolygon(points, extrude) {
} }
} }
} }
points = [];
return { return {
positions, positions,
faceUv, faceUv,
@ -100,8 +99,71 @@ export function extrudePolygonLine(points, extrude) {
} }
} }
} }
points = [];
return { return {
positions, positions,
positionsIndex: cells positionsIndex: cells
}; };
} }
export function fillPolygon(points) {
const flattengeo = earcut.flatten(points);
const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions);
return {
positions: flattengeo.vertices,
indexArray: triangles
};
}
export function extrude_Polygon(points) {
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 = [];
const indexArray = [];
const normals = [];
// 设置顶部z值
for (let j = 0; j < flattengeo.vertices.length / 3; j++) {
flattengeo.vertices[j * 3 + 2] = 1;
normals.push(0, 0, 1);
}
positions.push(...flattengeo.vertices);
const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions);
indexArray.push(...triangles);
for (let i = 0; i < n; i++) {
const prePoint = flattengeo.vertices.slice(i * 3, i * 3 + 3);
let nextPoint = flattengeo.vertices.slice(i * 3 + 3, i * 3 + 6);
nextPoint.length === 0 && (nextPoint = flattengeo.vertices.slice(0, 3));
const indexOffset = positions.length / 3;
positions.push(prePoint[0], prePoint[1], 1, nextPoint[0], nextPoint[1], 1, prePoint[0], prePoint[1], 0, nextPoint[0], nextPoint[1], 0);
const normal = computeNormal([ nextPoint[0], nextPoint[1], 1 ], [ prePoint[0], prePoint[1], 0 ], [ prePoint[0], prePoint[1], 1 ]);
normals.push(...normal, ...normal, ...normal, ...normal);
indexArray.push(...[ 1, 2, 0, 3, 2, 1 ].map(v => { return v + indexOffset; }));
}
return {
positions,
indexArray,
normals
};
}
function computeNormal(v1, v2, v3) {
const pA = new THREE.Vector3();
const pB = new THREE.Vector3();
const pC = new THREE.Vector3();
const cb = new THREE.Vector3();
const ab = new THREE.Vector3();
pA.set(...v1);
pB.set(...v2);
pC.set(...v3);
cb.subVectors(pC, pB);
ab.subVectors(pA, pB);
cb.cross(ab);
cb.normalize();
const { x, y, z } = cb;
return [ x, y, z ];
};

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

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

9
src/geom/material/grid.js
View File

@ -1,5 +1,6 @@
import Material from './material'; import Material from './material';
import { getModule } from '../../util/shaderModule'; import { getModule, wrapUniforms } from '../../util/shaderModule';
import merge from '@antv/util/lib/deep-mix';
export default class GridMaterial extends Material { export default class GridMaterial extends Material {
getDefaultParameters() { getDefaultParameters() {
return { return {
@ -19,9 +20,9 @@ export default class GridMaterial extends Material {
} }
constructor(_uniforms, _defines, parameters) { constructor(_uniforms, _defines, parameters) {
super(parameters); super(parameters);
const { uniforms, defines } = this.getDefaultParameters(); const { defines } = this.getDefaultParameters();
const { vs, fs } = getModule('grid'); const { vs, fs, uniforms } = getModule('grid');
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms)); this.uniforms = wrapUniforms(merge(uniforms, _uniforms));
this.type = 'GridMaterial'; this.type = 'GridMaterial';
this.defines = Object.assign(defines, _defines); this.defines = Object.assign(defines, _defines);
this.vertexShader = vs; this.vertexShader = vs;

9
src/geom/material/hexagon.js
View File

@ -1,5 +1,6 @@
import Material from './material'; import Material from './material';
import { getModule } from '../../util/shaderModule'; import { getModule, wrapUniforms } from '../../util/shaderModule';
import merge from '@antv/util/lib/deep-mix';
export default class hexagonMaterial extends Material { export default class hexagonMaterial extends Material {
getDefaultParameters() { getDefaultParameters() {
return { return {
@ -19,9 +20,9 @@ export default class hexagonMaterial extends Material {
} }
constructor(_uniforms, _defines, parameters) { constructor(_uniforms, _defines, parameters) {
super(parameters); super(parameters);
const { uniforms, defines } = this.getDefaultParameters(); const { defines } = this.getDefaultParameters();
const { vs, fs } = getModule('hexagon'); const { vs, fs, uniforms } = getModule('hexagon');
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms)); this.uniforms = wrapUniforms(merge(uniforms, _uniforms));
this.type = 'hexagonMaterial'; this.type = 'hexagonMaterial';
this.defines = Object.assign(defines, _defines); this.defines = Object.assign(defines, _defines);
this.vertexShader = vs; this.vertexShader = vs;

8
src/geom/material/material.js
View File

@ -1,5 +1,10 @@
import * as THREE from '../../core/three'; import * as THREE from '../../core/three';
const blendingEnum = {
normal: 'NormalBlending',
additive: 'AdditiveBlending',
subtractive: 'SubtractiveBlending'
};
export default class Material extends THREE.ShaderMaterial { export default class Material extends THREE.ShaderMaterial {
setUniformsValue(name, value) { setUniformsValue(name, value) {
if (!this.uniforms[name]) { return; } if (!this.uniforms[name]) { return; }
@ -26,4 +31,7 @@ export default class Material extends THREE.ShaderMaterial {
} }
} }
} }
setBending(type) {
this.blending = THREE[blendingEnum[type]] || THREE.NormalBlending;
}
} }

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

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

@ -6,6 +6,7 @@
if(v_color.a == 0.){ if(v_color.a == 0.){
discard; discard;
} }
#pragma include "pick"
gl_FragColor = v_color; gl_FragColor = v_color;
gl_FragColor.a = v_color.a*u_opacity; 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) { if(pickingId == u_activeId) {
v_color = u_activeColor; v_color = u_activeColor;
} }
#ifdef PICK
worldId = id_toPickColor(pickingId); 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" #pragma include "sdf_2d"
void main() { 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; lowp float antialiasblur = v_data.z;
float antialiased_blur = -max(u_blur, antialiasblur); float antialiased_blur = -max(u_blur, antialiasblur);
@ -57,5 +58,6 @@ void main() {
inner_df 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"
} }

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

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

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

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

@ -1,5 +1,5 @@
precision highp float; precision highp float;
attribute vec2 miter; attribute vec3 miter;
attribute vec4 a_color; attribute vec4 a_color;
uniform float u_xOffset; uniform float u_xOffset;
uniform float u_yOffset; uniform float u_yOffset;
@ -9,15 +9,29 @@ uniform float u_activeId;
uniform vec4 u_activeColor; uniform vec4 u_activeColor;
varying vec4 v_color; varying vec4 v_color;
#pragma include "lighting"
void main() { void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color; v_color = a_color;
v_color.a *= u_opacity; v_color.a *= u_opacity;
if(pickingId == u_activeId) { if(pickingId == u_activeId) {
v_color = u_activeColor; v_color = u_activeColor;
} }
float x = position.x + miter.x * u_xOffset * u_coverage; float x = position.x + miter.x * u_xOffset * u_coverage;
float y = position.y + miter.y * u_yOffset * u_coverage; float y = position.y + miter.y * u_yOffset * u_coverage;
gl_Position = matModelViewProjection * vec4(x, y, position.z, 1.0); float z = position.z + miter.z;
#ifdef LIGHTING
vec3 viewDir = normalize(cameraPosition - vec3(x, y, z));
v_color.rgb *= calc_lighting(vec3(x, y, z), normal, viewDir);
#endif
gl_Position = matModelViewProjection * vec4(x, y, z, 1.0);
#ifdef PICK
worldId = id_toPickColor(pickingId); worldId = id_toPickColor(pickingId);
#endif
} }

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

@ -1,7 +1,6 @@
precision highp float; precision highp float;
uniform float u_opacity;
varying vec4 v_color; varying vec4 v_color;
void main() { void main() {
vec4 color = v_color; gl_FragColor = v_color;
gl_FragColor = color; #pragma include "pick"
} }

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

@ -1,14 +1,20 @@
precision highp float; precision highp float;
attribute vec2 miter; // attribute vec2 miter;
attribute vec3 miter;
attribute vec3 a_shape;
attribute float a_size;
attribute vec4 a_color; attribute vec4 a_color;
uniform float u_radius; uniform float u_radius;
uniform float u_coverage; uniform float u_coverage;
uniform float u_opacity; uniform float u_opacity;
uniform float u_angle; uniform float u_angle;
uniform float u_activeId; uniform float u_activeId;
uniform vec4 u_activeColor; uniform vec4 u_activeColor;
varying vec4 v_color; varying vec4 v_color;
#pragma include "lighting"
void main() { void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle)); mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
@ -17,10 +23,21 @@ void main() {
if(pickingId == u_activeId) { if(pickingId == u_activeId) {
v_color = u_activeColor; v_color = u_activeColor;
} }
vec2 offset =vec2(rotationMatrix * miter * u_radius * u_coverage ); vec2 offset =vec2(rotationMatrix * miter.xy * u_radius * u_coverage );
// vec2 offset =vec2(rotationMatrix * a_shape.xy * u_radius * u_coverage );
float x = position.x + offset.x; float x = position.x + offset.x;
float y = position.y + offset.y; float y = position.y + offset.y;
gl_Position = matModelViewProjection * vec4(x, y, position.z, 1.0); // float z = a_shape.z * a_size;
float z = miter.z * a_size;
#ifdef LIGHTING
vec3 viewDir = normalize(cameraPosition - vec3(x, y, z));
v_color.rgb *= calc_lighting(vec3(x, y, z), normal, viewDir);
#endif
gl_Position = matModelViewProjection * vec4(x, y, z, 1.0);
#ifdef PICK
worldId = id_toPickColor(pickingId); 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_frag from '../shader/point_meshLine_frag.glsl';
import point_line_vert from '../shader/point_meshLine_vert.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_frag from '../shader/meshline_frag.glsl';
import mesh_line_vert from '../shader/meshline_vert.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 pick_color from './shaderChunks/pick_color.glsl';
import decode from './shaderChunks/decode.glsl'; import decode from './shaderChunks/decode.glsl';
import lighting from './shaderChunks/lighting.glsl'; import lighting from './shaderChunks/lighting.glsl';
import pick from './shaderChunks/pick.glsl';
import sdf_2d from './shaderChunks/sdf_2d.glsl'; import sdf_2d from './shaderChunks/sdf_2d.glsl';
import project from './shaderChunks/project.glsl'; import project from './shaderChunks/project.glsl';
@ -67,6 +72,7 @@ export function compileBuiltinModules() {
registerModule('common', { vs: common, fs: common }); registerModule('common', { vs: common, fs: common });
registerModule('decode', { vs: decode, fs: '' }); registerModule('decode', { vs: decode, fs: '' });
registerModule('lighting', { vs: lighting, fs: '' }); registerModule('lighting', { vs: lighting, fs: '' });
registerModule('pick', { vs: '', fs: pick });
registerModule('sdf_2d', { vs: '', fs: sdf_2d }); registerModule('sdf_2d', { vs: '', fs: sdf_2d });
registerModule('project', { vs: project, fs: '' }); registerModule('project', { vs: project, fs: '' });
registerModule('pick_color', { vs: pick_color, fs: pick_color }); 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('grid', { vs: grid_vert, fs: grid_frag });
registerModule('hexagon', { vs: hexagon_vert, fs: hexagon_frag }); registerModule('hexagon', { vs: hexagon_vert, fs: hexagon_frag });
registerModule('pointline', { vs: point_line_vert, fs: point_line_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('meshline', { vs: mesh_line_vert, fs: mesh_line_frag });
registerModule('arcline', { vs: arc_line_vert, fs: arc_line_frag }); registerModule('arcline', { vs: arc_line_vert, fs: arc_line_frag });
registerModule('greatcircle', { vs: great_circle_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; color.a= color.a * vTime * 1.5;
#endif #endif
gl_FragColor = color; gl_FragColor = color;
#pragma include "pick"
} }

2
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.; // vTime = 1.0- (28800. + mod(u_time* 10.,28800.)- position.z / 1000.) / 100.;
#endif #endif
gl_Position = matModelViewProjection * vec4(position.xy, 10., 1.0); gl_Position = matModelViewProjection * vec4(position.xy, 10., 1.0);
#ifdef PICK
worldId = id_toPickColor(pickingId); worldId = id_toPickColor(pickingId);
#endif
} }

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

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

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

@ -67,5 +67,7 @@ void main() {
if(pickingId == u_activeId) { if(pickingId == u_activeId) {
v_color = u_activeColor; v_color = u_activeColor;
} }
#ifdef PICK
worldId = id_toPickColor(pickingId); 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
}

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

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

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

@ -11,4 +11,5 @@ void main() {
} }
#endif #endif
gl_FragColor = v_color; 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 * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * scale / 2.0 * a_miter); vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * scale / 2.0 * a_miter);
gl_Position = matModelViewProjection * vec4(pointPos, 1.0); 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 #ifdef SHAPE
v_shape = a_shape; v_shape = a_shape;
#endif #endif
#ifdef PICK
worldId = id_toPickColor(pickingId); worldId = id_toPickColor(pickingId);
#endif
} }

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

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

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

@ -16,7 +16,7 @@ varying vec4 v_color;
uniform float u_zoom : 0; uniform float u_zoom : 0;
uniform float u_opacity : 1.0; uniform float u_opacity : 1.0;
uniform float u_activeId : 0; uniform float u_activeId : -1;
uniform vec4 u_activeColor : [1.0, 0.0, 0.0, 1.0]; uniform vec4 u_activeColor : [1.0, 0.0, 0.0, 1.0];
#pragma include "lighting" #pragma include "lighting"
@ -37,7 +37,7 @@ void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position + offset, 1.); gl_Position = projectionMatrix * modelViewMatrix * vec4(position + offset, 1.);
#ifdef LIGHTING #ifdef LIGHTING
if (normal != vec3(0., 0., 1.)) { if (normal != vec3(0., 0., 1.0)) {
vec3 viewDir = normalize(cameraPosition - position); vec3 viewDir = normalize(cameraPosition - position);
v_color.rgb *= calc_lighting(position, normal, viewDir); v_color.rgb *= calc_lighting(position, normal, viewDir);
} }
@ -46,5 +46,7 @@ void main() {
if(pickingId == u_activeId) { if(pickingId == u_activeId) {
v_color = u_activeColor; v_color = u_activeColor;
} }
#ifdef PICK
worldId = id_toPickColor(pickingId); 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_color=u_activeColor;
} }
v_texcoord=uv/u_textTextureSize; v_texcoord=uv/u_textTextureSize;
worldId=id_toPickColor(pickingId); #ifdef PICK
worldId = id_toPickColor(pickingId);
#endif
} }

2
src/geom/shader/tile/mask_quard_frag.glsl
View File

@ -1,4 +1,4 @@
precision highp float; precision highp float;
void main() { void main() {
gl_FragColor = vec4(1.0); gl_FragColor = vec4(0.0,0.,0.,1.0);
} }

2
src/geom/shape/path.js
View File

@ -33,7 +33,7 @@ export function polygonPath(pointCount, start = 0) {
const step = Math.PI * 2 / pointCount; const step = Math.PI * 2 / pointCount;
const line = []; const line = [];
for (let i = 0; i < pointCount; i++) { for (let i = 0; i < pointCount; i++) {
line.push(step * i - start * Math.PI / 12); line.push(step * i + start * Math.PI / 12);
} }
const path = line.map(t => { const path = line.map(t => {
const x = Math.sin(t + Math.PI / 4), const x = Math.sin(t + Math.PI / 4),

3
src/global.js
View File

@ -3,9 +3,10 @@
* @author dxq613 * @author dxq613
*/ */
// const Global = {}; // const Global = {};
import version from './util/version';
const FONT_FAMILY = '"-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",SimSun, "sans-serif"'; const FONT_FAMILY = '"-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",SimSun, "sans-serif"';
const Global = { const Global = {
version: '1.2.0-beta.3', version,
scene: { scene: {
mapType: 'AMAP', mapType: 'AMAP',
zoom: 5, zoom: 5,

8
src/index.js
View File

@ -1,14 +1,12 @@
// import Util from './util';
import Scene from './core/scene'; import Scene from './core/scene';
import Global from './global'; import Global from './global';
import Source from './core/source'; import Source from './core/source';
import TileSource from './source/tileSource'; import TileSource from './source/tile_source';
import { registerParser, registerTransform } from './source'; import { registerParser, registerTransform } from './source';
import { registerInteraction, getInteraction } from './interaction'; import { registerInteraction, getInteraction } from './interaction';
import { registerLayer } from './layer'; import { registerLayer } from './layer';
const version = Global.version; const version = Global.version;
export { const exported = {
version, version,
Scene, Scene,
Source, Source,
@ -19,4 +17,4 @@ export {
registerInteraction, registerInteraction,
getInteraction getInteraction
}; };
export default exported;

4
src/interaction/hash.js
View File

@ -1,5 +1,5 @@
import Interaction from './base'; import Interaction from './base';
import { throttle } from '@antv/util'; import throttle from '../util/throttle';
export default class Hash extends Interaction { export default class Hash extends Interaction {
constructor(cfg) { constructor(cfg) {
super({ super({
@ -7,7 +7,7 @@ export default class Hash extends Interaction {
...cfg ...cfg
}); });
window.addEventListener('hashchange', this._onHashChange.bind(this), false); window.addEventListener('hashchange', this._onHashChange.bind(this), false);
this._updateHash = throttle(this._updateHashUnthrottled.bind(this), 20 * 1000 / 100); this._updateHash = throttle(this._updateHashUnthrottled.bind(this), 30 * 1000 / 100);
} }
end() { end() {
this._updateHash(); this._updateHash();

4
src/layer/heatmapLayer.js → src/layer/heatmap_layer.js
View File

@ -8,6 +8,8 @@ export default class HeatMapLayer extends Layer {
} }
draw() { draw() {
this.type = 'heatmap'; this.type = 'heatmap';
this.add(getRender('heatmap', this.shapeType || 'heatmap')(this.layerData, this, this.layerSource)); if (!this.shapeType) this.shapeType = 'heatmap';
const renderType = this.shapeType === 'heatmap' ? 'heatmap' : 'shape';
this.add(getRender('heatmap', renderType)(this.layerData, this, this.layerSource));
} }
} }

0
src/layer/imageLayer.js → src/layer/image_layer.js
View File

18
src/layer/index.js
View File

@ -1,13 +1,13 @@
import { registerLayer } from './factory'; import { registerLayer } from './factory';
import PolygonLayer from './polygonLayer'; import PolygonLayer from './polygon_layer';
import PointLayer from './pointLayer'; import PointLayer from './point_layer';
import LineLayer from './lineLayer'; import LineLayer from './line_layer';
import ImageLayer from './imageLayer'; import ImageLayer from './image_layer';
import RasterLayer from './rasterLayer'; import RasterLayer from './raster_layer';
import HeatmapLayer from './heatmapLayer'; import HeatmapLayer from './heatmap_layer';
import TileLayer from './tile/tileLayer'; import TileLayer from './tile/tile_layer';
import ImageTileLayer from './tile/imageTileLayer'; import ImageTileLayer from './tile/image_tile_layer';
import VectorTileLayer from './tile/VectorTileLayer'; import VectorTileLayer from './tile/vector_tile_layer';
registerLayer('PolygonLayer', PolygonLayer); registerLayer('PolygonLayer', PolygonLayer);
registerLayer('PointLayer', PointLayer); registerLayer('PointLayer', PointLayer);

5
src/layer/lineLayer.js → src/layer/line_layer.js
View File

@ -1,5 +1,5 @@
import Layer from '../core/layer'; import Layer from '../core/layer';
import { getRender } from './render/'; import { getRender } from './render';
export default class LineLayer extends Layer { export default class LineLayer extends Layer {
shape(type) { shape(type) {
this.shapeType = type; this.shapeType = type;
@ -18,6 +18,7 @@ export default class LineLayer extends Layer {
} }
draw() { draw() {
this.type = 'line'; this.type = 'line';
this.add(getRender('line', this.shapeType || 'line')(this.layerData, this, this.layerSource)); this.add(getRender('line', this.shapeType || 'line')(this.layerData, this));
} }
} }
LineLayer.type = 'line';

13
src/layer/pointLayer.js → src/layer/point_layer.js
View File

@ -1,6 +1,6 @@
import Layer from '../core/layer'; import Layer from '../core/layer';
import Global from '../global'; import Global from '../global';
import { getRender } from './render/'; import { getRender } from './render';
const { pointShape } = Global; const { pointShape } = Global;
/** /**
* point shape 2d circle, traingle text,image * point shape 2d circle, traingle text,image
@ -10,10 +10,14 @@ const { pointShape } = Global;
*/ */
export default class PointLayer extends Layer { export default class PointLayer extends Layer {
constructor(scene, cfg) {
super(scene, cfg);
this.set('type', 'point');
}
draw() { draw() {
this.type = 'point'; this.type = 'point';
this.shapeType = this._getShape(); 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); this.add(mesh);
} }
@ -31,9 +35,9 @@ export default class PointLayer extends Layer {
// 2D circle 特殊处理 // 2D circle 特殊处理
if (pointShape['2d'].indexOf(shape) !== -1) { if (pointShape['2d'].indexOf(shape) !== -1) {
return 'circle';
} else if (pointShape['3d'].indexOf(shape) !== -1) {
return 'fill'; return 'fill';
} else if (pointShape['3d'].indexOf(shape) !== -1) {
return 'extrude';
} else if (this.scene.image.imagesIds.indexOf(shape) !== -1) { } else if (this.scene.image.imagesIds.indexOf(shape) !== -1) {
return 'image'; return 'image';
} }
@ -73,3 +77,4 @@ export default class PointLayer extends Layer {
} }
} }
} }
PointLayer.type = 'point';

11
src/layer/polygonLayer.js → src/layer/polygon_layer.js
View File

@ -1,12 +1,18 @@
import Layer from '../core/layer'; import Layer from '../core/layer';
import { getRender } from './render/'; import { getRender } from './render';
export default class PolygonLayer extends Layer { export default class PolygonLayer extends Layer {
constructor(scene, cfg) {
super(scene, cfg);
this.set('type', 'polygon');
}
shape(type) { shape(type) {
this.shape = type; this.shape = type;
this.set('shape', type);
this.set('shapeType', 'polygon');
return this; return this;
} }
draw() { draw() {
this.init(); // this.init();
this.type = 'polygon'; this.type = 'polygon';
const animateOptions = this.get('animateOptions'); const animateOptions = this.get('animateOptions');
if (animateOptions.enable) { if (animateOptions.enable) {
@ -18,3 +24,4 @@ export default class PolygonLayer extends Layer {
this.updateFilter(this.layerMesh); this.updateFilter(this.layerMesh);
} }
} }
PolygonLayer.type = 'polygon';

6
src/layer/rasterLayer.js → src/layer/raster_layer.js
View File

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

Some files were not shown because too many files have changed in this diff Show More