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

feat(point):size by pixl

This commit is contained in:
李正学 2018-11-16 16:52:25 +08:00
parent f8131c657e
commit 305d3142e6
58 changed files with 1187 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
demos/01_point_circle.html
View File

@ -44,7 +44,7 @@
<script src="../build/L7.js"></script>
<script>
const colorObj ={
blue: ["#E8FCFF", "#CFF6FF", "#98E3FA", "#65CEF7", "#3CB4F0", "#2894E0", "#1A76C7", "#105CB3", "#0D408C", "#002466"].reverse(),
blue: ["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse(),
red: ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse(),
orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"].reverse(),
green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"].reverse(),
@ -66,14 +66,21 @@ scene.on('loaded', () => {
const circleLayer = scene.PointLayer({
zIndex: 2
})
.source(data)
.source(data,{
scale:{
min:0,
max:1000,
type:'linear'
}
})
.shape('2d:circle')
.size('value', [ 1000, 5000]) // default 1
.active({fill:'blue'})
.size('value', [ 3, 60]) // default 1
//.size('value', [ 10, 300]) // default 1
.active(true)
.filter('value', field_8 => {
return field_8 * 1 > 500;
})
.color('type', colorObj.blue.reverse())
.color('type', colorObj.red)
.style({
stroke: 'rgb(255,255,255)',
strokeWidth: 1,

28
demos/01_point_column.html
View File

@ -22,24 +22,28 @@
const scene = new L7.Scene({
id: 'map',
mapStyle: 'light', // 样式URL
center: [ 116.155185, 39.96644],
pitch: 25,
zoom: 9.6
mapStyle: 'dark', // 样式URL
center: [ 120.037828998113099, 30.086317611850635 ],
pitch: 36.002858,
zoom: 5.44
});
window.scene = scene;
scene.on('loaded', () => {
$.get('./data/spot.geojson', data => {
$.get('./data/rainfall.json', data => {
scene.PointLayer({
zIndex: 2
})
.source(data)
.shape('3d:hexagon')
.size('level',(level)=>{
return [10000,10000,Math.pow(10,level)];
}) // default 1
.active(true)
.color('level', [ '#ffffd4', '#fed98e', '#fe9929', '#d95f0e', '#993404' ])
.source(data.list, {
type: 'array',
x: 'j',
y: 'w',
})
.shape('3d:circle')
.size('t',(level)=> {
return [4,4,(level+40)];
})
.active(false)
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
.render();
});
});

2
demos/01_point_distribute.html
View File

@ -28,7 +28,7 @@ const scene = new L7.Scene({
});
window.scene = scene;
scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/rmsportal/mUQPWCYaxOfiSznuANvG.txt', data => {
$.get('./data/mUQPWCYaxOfiSznuANvG.txt', data => {
scene.PointLayer({
zIndex: 2
})

80
demos/01_point_image.html
View File

@ -15,8 +15,8 @@
<body>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="https://unpkg.com/supercluster@4.1.1/dist/supercluster.min.js"></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>
@ -31,48 +31,76 @@ const scene = new L7.Scene({
});
window.scene = scene;
scene.image.addImage('bike', './image/Bike.png');
scene.image.addImage('marker', './image/marker.png');
scene.on('loaded', () => {
$.get('./data/pointbike.json', data => {
var extent = [ 110,29.2378,122.189,33.3173]
var dataindex = supercluster({radius:80});
dataindex.load(data.features);
var clusterData = dataindex.getClusters(extent,13);
console.log(clusterData);
scene.PointLayer({
zIndex: 2
zIndex: 4
})
.source(data)
.color('#0198BD')
.size(40.0)
.shape('image:bike')
//.render();
.source({
"type": "FeatureCollection",
"features":clusterData
})
.color('#6492E9')
.size('point_count',[1,30])
.shape('2d:circle')
.style({
opacity:0.8
})
.render();
});
$.get('./data/fence.json', data => {
scene.PolygonLayer({
scene.LineLayer({
zIndex: 5
})
.source(data)
.shape('meshLine')
.size([2,0])
.color('#2F54EB')
.style({
opacity:1.0,
})
.render();
scene.PolygonLayer({
zIndex: 0
})
.source(data)
.shape('line')
.color('#0198BD')
.style({
opacity:0.5
})
.render();
});
$.getJSON('./data/pointZone.json', data => {
const fenceLayer = scene.PolygonLayer({
zIndex: 1
})
.source(data)
.shape('fill')
.active({fill:'blue'})
.color("#F04850")
.size([2,0])
.color('#2F54EB')
.style({
opacity:0.05,
})
.render();
});
$.getJSON('./data/pointZone.json', data => {
const fenceLayer = scene.LineLayer({
zIndex: 1,
minZoom:16,
})
.source(data)
.size([1.5,0])
.shape('meshLine')
.color("#2F54EB")
.style({
opacity:1.0
opacity:1.0,
'lineType':'solid'
})
.render();
fenceLayer.on('click',(e)=>{
console.log(e.feature.properties._id);
})
});
});
</script>
</body>
</html>

8
demos/02_arc_line.html
View File

@ -41,12 +41,12 @@ scene.on('loaded', () => {
y1: 'lat2'
})
.shape('arc')
.size(2.0)
.color('rgba(41,66,166,255)')
.size(0.8)
.color('rgb(13,64,140)')
.style({
opacity:0.5,
opacity:0.6,
})
.animate({enable:true})
// .animate({enable:true})
.render();
});
});

25
demos/02_normal_line.html → demos/02_contour.html
View File

@ -17,6 +17,7 @@
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="./assets/geotiff.browserify.min.js"></script>
<script src="../build/L7.js"></script>
<script>
@ -24,22 +25,28 @@ const color1 = [ 'rgba(37, 140, 249, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(255
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [ 116.2825, 39.9 ],
pitch: 0,
zoom: 5,
minZoom: 5,
maxZoom: 10
center: [ 102.615023, 23.107799],
pitch: 15,
zoom: 14,
});
scene.on('loaded', () => {
// $.get('https://gw.alipayobjects.com/os/rmsportal/lZGtNaYGNHtAIkcjVvfp.json', data => {
$.get('https://gw.alipayobjects.com/os/rmsportal/lZGtNaYGNHtAIkcjVvfp.json', data => {
$.get('./data/contour.geojson', data => {
scene.LineLayer({
zIndex: 2
})
.source(data)
.color('#3CB4F0')
.source(data)
.shape('meshLine')
.size('ELEV',(value)=>{
return [1,(value-1000)*7];
})
.shape('meshLine')
.color('ELEV',["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse())
.style({
'lineType':'solid'
})
.render();
});
});
</script>

107
demos/02_oneBletoneRoad.html Normal file
View File

@ -0,0 +1,107 @@
<!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>one belt one road </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: 'light', // 样式URL
center: [ 120.3672, 36.0968 ],
pitch: 0,
zoom: 3
});
scene.on('loaded', () => {
scene.image.addImage('marker', './data/onebelt/marker.png');
scene.image.addImage('local', './image/local.png');
$.getJSON('./data/onebelt/regions.json', region => {
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)' ];
var points = region.features.map((feature)=>{
return feature.properties;
})
const layer = scene.PolygonLayer({
zIndex:1,
})
.source(region)
.color('cname',(value)=>{
return (value =='中国' ? 'rgba(46,149,169,0.45)': 'rgba(227,244,244,0.1)');
})
.shape('fill')
.render();
});
$.getJSON('./data/onebelt/seaway.geojson', contourData => {
const layer = scene.LineLayer({
zIndex:2}
)
.source(contourData)
.color('rgb(79,147,234)')
.size([ 1.5, 0 ])
.shape('meshLine')
.style({
'lineType':'solid'
})
.render();
});
$.getJSON('./data/onebelt/landway.json', contourData => {
const landlayer = scene.LineLayer(
{zIndex:2}
)
.source(contourData)
.color('rgb(11,94,69)')
.size([ 1.5, 0 ])
.shape('meshLine')
.style({
// 'lineType':'solid'
})
.render();
});
$.getJSON('./data/onebelt/city.geojson', city => {
var makerLayer = scene.PointLayer({
zIndex: 4
})
.source(city)
.size(20.0)
.shape('image:local')
.color('#0D408C')
.render();
var makerText = scene.PointLayer({
zIndex: 8,
minZoom:5,
})
.source(city)
.size(14.0)
.shape('name', 'text')
.color('rgba(0,0,0,0.85)')
.style({
textOffset:[-20,22],
stroke: '#fff',
strokeWidth: 4,
})
.render();
})
})
</script>
</body>
</html>

25
demos/03_1_extrude_polygon.html
View File

@ -35,20 +35,31 @@ const scene = new L7.Scene({
});
window.scene = scene;
scene.on('loaded', () => {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/oOzMjBOaxFROWLBYeqTB.json', city => {
$.getJSON('./data/chinandvohexagon.geojson', city => {
citylayer = scene.PolygonLayer()
.source(city)
.color('gdp', [ '#002466', '#0D408C', '#105CB3', '#1A76C7', '#2894E0', '#3CB4F0', '#65CEF7', '#98E3FA', '#CFF6FF', '#E8FCFF' ])
.color('sum', ["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"])
.shape('extrude')
.filter('gdp', gdp => {
return gdp > 0;
.size('max',(value)=>{
return value * 1000;
})
.size('gdp', [ 1000, 5000000 ])
// .active({ fill: 'red' })
.active(true)
.style({
opacity: 1
opacity: 1.0
})
.render();
const citylayer2 = scene.PolygonLayer()
.source(city)
.shape('line')
.color('#fff')
.style({
opacity: 1
})
.render();
});
});

50
demos/03_choropleths_polygon.html
View File

@ -19,24 +19,6 @@
<div id="map"></div>
<div id ="info" class ="tooltip" style="display:none">
</div>
<div class='info-panel top-right'>
<h4>全国各地市空气质量指数</h4>
<p>
<label>min</label><input name="minaqi" type="range" step="1" min="0" max="120" value=0> <label></label>
</p>
<p>
<label>max</label><input name="maxaqi" type="range" step="1" min="0" max="120" value="120"><label></label>
</p>
<p><label>color</label><select>
<option value ="blue">blue</option>
<option value ="red">red</option>
<option value="orange">orange</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="purple">purple</option>
</select> </p>
<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>
@ -61,20 +43,44 @@ const scene = new L7.Scene({
});
window.scene = scene;
scene.on('loaded', () => {
var colors = ["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"];
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => {
const citylayer = scene.PolygonLayer()
.source(city)
.color('pm2_5_24h',["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"],)
//.color('pm2_5_24h',["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"])
.color('pm2_5_24h',(p)=>{
if(p>120){
return colors[5];
} else if(p>65){
return colors[4];
} else if(p>30) {
return colors[3];
} else if(p>15){
return colors[2];
} else if(p>8){
return colors[1];
}else {
return colors[0];
}
})
.shape('fill')
.active({ fill: "#5B2899" })
.active(true)
.style({
opacity: 1
})
.render();
const citylayer2 = scene.PolygonLayer()
.source(city)
.shape('line')
.color('#fff')
.style({
opacity: 0.1
})
.render();
citylayer.on('click',(e)=>{
$("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'});
$("#info").html(`<p>${e.feature.properties.area || e.feature.properties.name }<span">${e.feature.properties.aqi || 0}</span></p>`);
$("#info").html(`<p>${e.feature.properties.area || e.feature.properties.name }<span">${e.feature.properties.pm2_5_24h || 0}</span></p>`);
})
});
});

14
demos/04_image.html
View File

@ -23,22 +23,24 @@
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [ 110.770672, 34.159869 ],
center: [ 121.2680, 30.3628 ],
pitch: 0,
zoom: 5,
zoom: 15,
minZoom: 4,
maxZoom: 6
maxZoom: 18
});
scene.on('loaded', () => {
// https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png
//
const imageLayer = scene.ImageLayer().
source({
url: 'https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png',
extent: [ 73, 18, 136, 54 ]
url: './image/hangzhoubay.jpg',
// extent: [ 73, 18, 136, 54 ]
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
})
.style({
opacity:0.8,
opacity:1.0,
})
.render();

5
demos/06_text.html
View File

@ -36,12 +36,11 @@ scene.on('loaded', () => {
.source(data)
.shape('name', 'text')
.size(10) // default 1
.color('name', [ '#ffffd4', '#fed98e', '#fe9929', '#d95f0e', '#993404' ].reverse())
.color('#fff')
.style({
stroke: '#999',
strokeWidth: 2,
color: '#fff',
opacity: 0.9
opacity: 0.85
})
.render();
});

29
demos/07_city.html
View File

@ -22,10 +22,10 @@
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [120.174865, 30.245345],
pitch: 45,
zoom: 14.63,
mapStyle: 'light', // 样式URL
center: [120.173104, 30.244072],
pitch: 66.50572,
zoom: 15.79,
minZoom:10
});
window.scene = scene;
@ -36,7 +36,7 @@ scene.on('loaded', () => {
})
.source(data)
.shape('fill')
.color('rgb(71,148,218)')
.color('rgb(79,174,234)')
.render();
});
$.get('./data/land.geojson', data => {
@ -45,7 +45,7 @@ scene.on('loaded', () => {
})
.source(data)
.shape('fill')
.color('rgb(176,211,122)')
.color('rgb(156,194,116)')
.render();
});
$.get('./data/river.geojson', data => {
@ -53,16 +53,9 @@ scene.on('loaded', () => {
zIndex: 2
})
.source(data)
.color('rgb(126,204,243)')
.render();
});
$.get('./data/road.geojson', data => {
scene.LineLayer({
zIndex: 2
})
.source(data)
.color('rgb(245,227,199)')
.shape('meshLine')
.size([3,0])
.color('rgb(79,174,234)')
.render();
});
@ -72,8 +65,8 @@ scene.on('loaded', () => {
})
.source(data)
.shape('extrude')
.size('floor',[10,1000])
.color('rgba(250,250,250,0.9)')
.size('floor',[10,2000])
.color('rgba(242,246,250,0.96)')
.render();
});
});

BIN
demos/assets/03_choropleths_polygon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
demos/assets/screenshots/01_point_circle.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
demos/assets/screenshots/01_point_column.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 926 KiB

After

Width:  |  Height:  |  Size: 332 KiB

BIN
demos/assets/screenshots/01_point_image.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
demos/assets/screenshots/02_arc_line.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 502 KiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
demos/assets/screenshots/02_contour.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 647 KiB

BIN
demos/assets/screenshots/02_oneBletoneRoad.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

BIN
demos/assets/screenshots/03_1_extrude_polygon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 234 KiB

After

Width:  |  Height:  |  Size: 438 KiB

BIN
demos/assets/screenshots/03_choropleths_polygon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 378 KiB

After

Width:  |  Height:  |  Size: 205 KiB

BIN
demos/assets/screenshots/04_image.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 612 KiB

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
demos/assets/screenshots/07_city.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 MiB

After

Width:  |  Height:  |  Size: 2.1 MiB

43
demos/meshline.html Normal file
View File

@ -0,0 +1,43 @@
<!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>

43
demos/taxi.html
View File

@ -13,12 +13,31 @@
</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="../build/L7.js"></script>
<script>
const gui = new dat.GUI({ autoPlace: false });
const customContainer = document.getElementById('gui');
customContainer.appendChild(gui.domElement);
var palette = {
baseColor: '#3CB4F0', // CSS string
windowColor: '#65CEF7', // RGB array
brightColor: '#98E3FA', // RGB with alpha
};
gui.addColor(palette, 'baseColor').onChange(()=>{
changeStyle();
});
gui.addColor(palette, 'windowColor').onChange(()=>{
changeStyle();
});
gui.addColor(palette, 'brightColor').onChange(()=>{
changeStyle();
});
var buildLayer =null;
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
@ -39,18 +58,36 @@ scene.on('loaded', () => {
.render();
});
$.get('./data/2.geojson', data => {
scene.PolygonLayer({
buildLayer = scene.PolygonLayer({
zIndex: 2
})
.source(data)
.shape('extrude')
.size('floor',[0,3000])
.color('rgba(240,240,240,1.0)')
.size('floor',[0,2000])
.color('rgb(240,240,240)')
.animate({enable:true})
.style({
opacity:0.8,
baseColor:'#3CB4F0',
windowColor:'#65CEF7',
brightColor:'#98E3FA',
})
.render();
});
});
function changeStyle(e){
buildLayer.style({
opacity:0.8,
baseColor:palette.baseColor,
windowColor:palette.windowColor,
brightColor:palette.brightColor,
}
).render();
}
</script>
</body>
</html>

20
src/core/image.js
View File

@ -5,13 +5,14 @@ import { getImage } from '../util/ajax';
export default class LoadImage extends EventEmitter {
constructor() {
super();
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.ctx.fillStyle = '#FF0000';
this.ctx.fillRect(0, 0, 512, 512);
this.imageWidth = 64;
this.canvas = document.createElement('canvas');
this.canvas.style.cssText += 'height: 512px;width: 512px;';
this.canvas.width = this.imageWidth * 8;
this.canvas.height = this.imageWidth * 8;
this.ctx = this.canvas.getContext('2d');
this.images = [];
this.imagesCount = 0;
this.imagePos = {};
@ -22,16 +23,17 @@ export default class LoadImage extends EventEmitter {
const x = imageCount % 8 * 64;
const y = parseInt(imageCount / 8) * 64;
this.imagePos[id] = { x: x / 512, y: y / 512 };
this.texture = new THREE.Texture(this.canvas);
if (typeof opt === 'string') {
getImage({ url: opt }, (err, img) => {
img.id = id;
this.images.push(img);
this.ctx.drawImage(img, x, y, 64, 64);
const texture = new THREE.Texture(this.canvas);
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearFilter;
texture.needsUpdate = true;
this.texture = texture;
this.texture.magFilter = THREE.LinearFilter;
this.texture.minFilter = THREE.LinearFilter;
this.texture.needsUpdate = true;
if (this.images.length === this.imagesCount) {
this.emit('imageLoaded');
}

48
src/core/layer.js
View File

@ -40,14 +40,14 @@ export default class Layer extends Base {
stroke: [ 1.0, 1.0, 1.0, 1.0 ],
strokeWidth: 1.0,
opacity: 1.0,
texture:false
texture: false
},
// 选中时的配置项
selectedOptions: null,
// active 时的配置项
activedOptions: null,
animateOptions: {
enable:false,
enable: false
}
};
}
@ -62,8 +62,6 @@ export default class Layer extends Base {
const layerId = this._getUniqueId();
this.layerId = layerId;
this._activeIds = null;
// todo 用户参数
this._object3D.position.z = this.get('zIndex') * 100;
scene._engine._scene.add(this._object3D);
this.layerMesh = null;
@ -74,9 +72,16 @@ export default class Layer extends Base {
*/
add(object) {
this.layerMesh = object;
this.layerMesh.onBeforeRender=()=>{
this.layerMesh.material.setUniformsValue('u_time',this.scene._engine.clock.getElapsedTime())
}
this._visibleWithZoom();
this.scene.on('zoomchange', () => {
this._visibleWithZoom();
});
this.layerMesh.onBeforeRender = () => {
const zoom = this.scene.getZoom();
this.layerMesh.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime());
this.layerMesh.material.setUniformsValue('u_zoom', zoom);
};
// 更新
if (this._needUpdateFilter) {
this._updateFilter();
@ -148,7 +153,7 @@ export default class Layer extends Base {
}
style(field, cfg) {
const colorItem = [ 'fill', 'stroke', 'color' ];
const colorItem = [ 'fill', 'stroke', 'color', 'baseColor', 'brightColor', 'windowColor' ];
let styleOptions = this.get('styleOptions');
if (!styleOptions) {
styleOptions = {};
@ -178,10 +183,10 @@ export default class Layer extends Base {
this._createAttrOption('filter', field, values, true);
return this;
}
animate(field,cfg) {
let styleOptions = this.get('animateOptions');
if (!styleOptions) {
styleOptions = {};
animate(field, cfg) {
let animateOptions = this.get('animateOptions');
if (!animateOptions) {
animateOptions = {};
this.set('animateOptions', animateOptions);
}
if (Util.isObject(field)) {
@ -192,10 +197,9 @@ export default class Layer extends Base {
if (field) {
fields = parseFields(field);
}
styleOptions.fields = fields;
Util.assign(styleOptions, cfg);
this.set('styleOptions', styleOptions);
return this;
animateOptions.fields = fields;
Util.assign(animateOptions, cfg);
this.set('animateOptions', animateOptions);
return this;
}
texture() {
@ -578,6 +582,18 @@ export default class Layer extends Base {
this._needUpdateFilter = false;
this._needUpdateColor = false;
}
_visibleWithZoom(){
const zoom =this.scene.getZoom();
const minZoom = this.get('minZoom');
const maxZoom = this.get('maxZoom');
// z-fighting
this._object3D.position.z = this._object3D.renderOrder * Math.pow(2,22-zoom);
if(zoom<minZoom || zoom > maxZoom){
this._object3D.visible =false;
}else if(this.get('visible')){
this._object3D.visible =true;
}
}
/**
* 重置高亮要素
*/

5
src/core/scene.js
View File

@ -3,7 +3,6 @@ import * as THREE from './three';
import * as layers from '../layer';
import Base from './base';
import LoadImage from './image';
import Utils from '../util';
import { MapProvider } from '../map/provider';
import GaodeMap from '../map/gaodeMap';
import Global from '../global';
@ -55,6 +54,10 @@ export default class Scene extends Base {
};
}
}
on(type, hander) {
if (this.map) { this.map.on(type, hander); }
super.on(type, hander);
}
_initAttribution() {
const message = '<a href="http://antv.alipay.com/zh-cn/index.html title="Large-scale WebGL-powered Geospatial Data Visualization">AntV | L7 </a>';
const element = document.createElement('div');

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

@ -84,24 +84,15 @@ export default class BufferBase extends Base {
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];
// Flat face normals
// From: http://threejs.org/examples/webgl_buffergeometry.html
pA.set(ax, ay, az);
pB.set(bx, by, bz);
pC.set(cx, cy, cz);
@ -170,7 +161,141 @@ export default class BufferBase extends Base {
colors,
pickingIds,
faceUv: new Float32Array(polygon.faceUv),
sizes:new Float32Array(polygon.sizes)
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,
};
@ -224,7 +349,7 @@ export default class BufferBase extends Base {
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;
sizes[index] = style[index].size * window.devicePixelRatio;
if (style[index].shape) { shapes[index] = style[index].shape; }
});
const attributes = {
@ -255,7 +380,7 @@ export default class BufferBase extends Base {
}
}
context.fillStyle = '#105CB3';
context.fillRect(0,60, 32, 64);
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');

104
src/geom/buffer/line.js
View File

@ -3,51 +3,117 @@ import { lineShape } from '../shape';
export default class LineBuffer extends BufferBase {
geometryBuffer() {
const self = this;
const coordinates = self.get('coordinates');
const properties = self.get('properties');
const propertiesData = self.get('propertiesData');
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const shapeType = this.shapeType = this.get('shapeType');
const positions = [];
const positionsIndex = [];
const instances = [];
if (shapeType === 'meshLine') {
this.attributes = this._getMeshLineAttributes();
return;
} else if (shapeType === 'arc') {
this.attributes = this._getArcLineAttributes();
return;
}
coordinates.forEach((geo, index) => {
const props = properties[index];
const attrData = self._getShape(geo, props, index);
const attrData = this._getShape(geo, props, index);
positions.push(...attrData.positions);
positionsIndex.push(...attrData.indexes);
if (attrData.hasOwnProperty('instances')) {
instances.push(...attrData.instances);
}
});
self.bufferStruct.style = properties;
self.bufferStruct.verts = positions;
self.bufferStruct.indexs = positionsIndex;
self.shape = properties[0].shape || 'default';
this.bufferStruct.style = properties;
this.bufferStruct.verts = positions;
this.bufferStruct.indexs = positionsIndex;
if (instances.length > 0) {
self.bufferStruct.instances = instances;
this.bufferStruct.instances = instances;
}
self.attributes = this._toAttributes(self.bufferStruct, propertiesData);
this.attributes = this._toAttributes(this.bufferStruct);
}
_getShape(geo, props, index) {
if (!props.hasOwnProperty('shape')) {
if (!this.shapeType) {
return lineShape.defaultLine(geo, index);
}
const shape = props.shape;
const shape = this.shapeType;
if (shape === 'meshLine') {
return lineShape[shape](geo, props, index);
} else if (shape === 'tubeLine') {
return lineShape[shape](geo, props, index);
} else if (shape === 'arc') {
return lineShape[shape](geo, index);
return lineShape[shape](geo, props, index);
}
return lineShape.Line(geo, props, index);
}
_toAttributes(bufferStruct, propertiesData) {
_getArcLineAttributes() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const positions = [];
const colors = [];
const indexArray = [];
const sizes = [];
const instances = [];
coordinates.forEach((geo, index) => {
const props = properties[index];
const positionCount = positions.length / 3;
const attrData = this._getShape(geo, props, positionCount);
positions.push(...attrData.positions);
colors.push(...attrData.colors);
indexArray.push(...attrData.indexArray);
instances.push(...attrData.instances);
sizes.push(...attrData.sizes);
});
return {
positions,
colors,
indexArray,
sizes,
instances
};
}
_getMeshLineAttributes() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const { lineType } = this.get('style');
const positions = [];
const normal = [];
const miter = [];
const colors = [];
const indexArray = [];
const sizes = [];
const attrDistance = [];
coordinates.forEach((geo, index) => {
const props = properties[index];
const positionCount = positions.length / 3;
const attr = lineShape.Line(geo, props, positionCount, (lineType !== 'soild'));
positions.push(...attr.positions);
normal.push(...attr.normal);
miter.push(...attr.miter);
colors.push(...attr.colors);
indexArray.push(...attr.indexArray);
sizes.push(...attr.sizes);
attrDistance.push(...attr.attrDistance);
});
return {
positions,
normal,
miter,
colors,
indexArray,
sizes,
attrDistance
};
}
_toAttributes(bufferStruct) {
const vertCount = bufferStruct.verts.length;
const vertices = new Float32Array(vertCount * 3);
const inposs = new Float32Array(vertCount * 4);
const colors = new Float32Array(vertCount * 4);
const times = new Float32Array(vertCount);
for (let i = 0; i < vertCount; i++) {
const index = bufferStruct.indexs[i];
const color = bufferStruct.style[index].color;
@ -58,18 +124,18 @@ export default class LineBuffer extends BufferBase {
colors[i * 4 + 1] = color[1];
colors[i * 4 + 2] = color[2];
colors[i * 4 + 3] = color[3];
if (bufferStruct.instances) {
if (bufferStruct.instances) { // 弧线
inposs[i * 4] = bufferStruct.instances[i][0];
inposs[i * 4 + 1] = bufferStruct.instances[i][1];
inposs[i * 4 + 2] = bufferStruct.instances[i][2];
inposs[i * 4 + 3] = bufferStruct.instances[i][3];
}
}
return {
vertices,
colors,
inposs,
inposs
};
}
}

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

@ -2,15 +2,7 @@ import BufferBase from './bufferBase';
import { regularShape } from '../shape/index';
import Util from '../../util';
import * as THREE from '../../core/three';
const shapeObj = {
circle: 30,
square: 4,
triangle: 3,
hexagon: 6
};
export default class PointBuffer extends BufferBase {
geometryBuffer() {
const type = this.get('type');
switch (type) {
@ -23,7 +15,7 @@ export default class PointBuffer extends BufferBase {
case 'Model':this._ModelBuffer();
break;
default:
this._2dRegularBuffer();
this._sdfRegularBuffer();
}
}
@ -32,7 +24,6 @@ export default class PointBuffer extends BufferBase {
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;
@ -45,17 +36,10 @@ export default class PointBuffer extends BufferBase {
this.attributes = this._toPointsAttributes(this.bufferStruct);
this.attributes.uvs = uv;
}
_2dRegularBuffer() {
_sdfRegularBuffer() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const shapes = [];
for (let i = 0; i < properties.length; i++) {
const shape = shapeObj[properties[i].shape];
properties[i].shape = shape;
}
this.bufferStruct.position = coordinates;
properties.shapes = shapes;
this.bufferStruct.style = properties;
this.attributes = this._toPointsAttributes(this.bufferStruct);
}
@ -64,6 +48,8 @@ export default class PointBuffer extends BufferBase {
const properties = this.get('properties');
const type = this.get('type');
const positions = [];
const shapes = [];
const sizes =[];
const positionsIndex = [];
let indexCount = 0;
this.bufferStruct.style = properties;
@ -74,33 +60,29 @@ export default class PointBuffer extends BufferBase {
if (type === '2d' || (type === '3d' && size[2] === 0)) {
shapeType = 'fill';
Util.isArray(size) || (size = [ size, size, 0 ]);
geo[2] += Math.random() * 100;
} else{
Util.isArray(size) || (size = [ size, size, size ]);
}
const vert = regularShape[shape](shapeType);
shapes.push(vert.positions);
m1.setPosition(new THREE.Vector3(...geo));
m1.scale(new THREE.Vector3(...size));
vert.positions = vert.positions.map(coor => {
const vector = new THREE.Vector4(...coor, 1);
vector.applyMatrix4(m1);
return vector.toArray();
});// 旋转矩阵
positions.push(vert.positions);
// vert.positions = vert.positions.map(coor => {
// const vector = new THREE.Vector4(...coor, 1);
// vector.applyMatrix4(m1);
// return vector.toArray();
// });// 旋转矩阵
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.attributes = this._toPolygonAttributes(this.bufferStruct);
this.bufferStruct.shapes = shapes;
this.bufferStruct.sizes = sizes;
this.attributes = this._toPointShapeAttributes(this.bufferStruct);
}
_ModelBuffer() {
}
_textBuffer() {
}
}

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

@ -26,15 +26,22 @@ export default class PolygonBuffer extends BufferBase {
}
positions.push(extrudeData.positions);
if (shape !== 'line') {
if (shape !== 'line') {
// faceUv.push(...extrudeData.faceUv);
const count = extrudeData.faceUv.length /2;
for(let i=0;i<count;i++){
faceUv.push(extrudeData.faceUv[i*2]*0.1,extrudeData.faceUv[i*2+1] * heightValue/3000);
sizes.push((1.0 - extrudeData.faceUv[i*2+1]) * heightValue)
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 / 3000;
}
faceUv.push(x, y);
sizes.push((1.0 - extrudeData.faceUv[i * 2 + 1]) * heightValue);
}
}
}
indexCount += extrudeData.positionsIndex.length;
positionsIndex.push(extrudeData.positionsIndex);
});

18
src/geom/buffer/text.js
View File

@ -13,10 +13,11 @@ export default class TextBuffer extends BufferBase {
};
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const { textOffset = [ 0, 0 ] } = this.get('style');
const chars = [];
properties.forEach(element => {
const text = element.shape;
let text = element.shape || '';
text = text.toString();
for (let j = 0; j < text.length; j++) {
const code = text.charCodeAt(j);
if (chars.indexOf(code) === -1) {
@ -24,6 +25,7 @@ export default class TextBuffer extends BufferBase {
}
}
});
this._loadTextInfo(chars);
this.on('SourceLoaded', () => {
const textureElements = [];
const colors = [];
@ -31,11 +33,12 @@ export default class TextBuffer extends BufferBase {
const textSizes = [];
const textOffsets = [];
properties.forEach((element, index) => {
const text = element.shape;
const size = element.size;
const pos = coordinates[index];
// const pen = { x: pos[0] - dimensions.advance / 2, y: pos[1] };
const pen = { x: 0, y: 0 };
const pen = { x: textOffset[0], y: textOffset[1] };
let text = element.shape || '';
text = text.toString();
for (let i = 0; i < text.length; i++) {
const chr = text.charCodeAt(i);
@ -53,11 +56,10 @@ export default class TextBuffer extends BufferBase {
};
this.emit('completed');
});
this._loadTextInfo(chars);
}
_loadTextInfo(chars) {
getJSON({
url: `${Global.sdfHomeUrl}/getsdfdata?chars=${chars.join('|')}`
}, (e, info) => {
@ -111,8 +113,8 @@ export default class TextBuffer extends BufferBase {
// Add a quad (= two triangles) per glyph.
const originX = (horiBearingX - buffer + width / 2) * scale;
// const originY = -(height / 2 - horiBearingY) * scale;
const originY = (height / 2 - horiBearingY) * scale;
const originY = -(height / 2 - horiBearingY) * scale;
// const originY = (height / 2 - horiBearingY) * scale;
// const originY = 0;
const offsetWidth = width / 2 * scale / (1.0 - horiBearingX * 1.5 / horiAdvance);
const offsetHeight = (horiAdvance / 2) * scale;

4
src/geom/extrude.js
View File

@ -11,7 +11,6 @@ export default function extrudePolygon(points, extrude) {
const p1 = points[0][0];
const p2 = points[0][points[0].length - 1];
const faceUv = [];
const sizes =[];
if (p1[0] === p2[0] && p1[1] === p2[1]) {
points[0] = points[0].slice(0, points[0].length - 1);
}
@ -23,6 +22,7 @@ export default function extrudePolygon(points, extrude) {
const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions);
cells = triangles;
// 顶部纹理
triangles.forEach(() => {
faceUv.push(-1, -1);
});
@ -40,7 +40,7 @@ export default function extrudePolygon(points, extrude) {
function full() {
// 顶部坐标
for (let i = 0; i < pointCount; i++) {
positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 1 ]);
positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 1 ]);
}
for (let i = 0; i < pointCount; i++) {
positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 0 ]);

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

@ -1,9 +1,8 @@
import * as THREE from '../../core/three';
import image_frag from '../shader/image_frag.glsl';
import image_vert from '../shader/image_vert.glsl';
import Material from './material';
export default function ImageMaterial(options) {
const material = new Material ({
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity },
u_texture: { value: options.u_texture }

45
src/geom/material/lineMaterial.js
View File

@ -1,14 +1,21 @@
import * as THREE from '../../core/three';
import Material from './material';
import line_frag from '../shader/line_frag.glsl';
import line_vert from '../shader/line_vert.glsl';
import Material from './material';
import arcline_frag from '../shader/arcline_frag.glsl';
import arcline_vert from '../shader/arcline_vert.glsl';
import meshline_vert from '../shader/meshline_vert.glsl';
import meshline_frag from '../shader/meshline_frag.glsl';
import dashline_frag from '../shader/dashline_frag.glsl';
import dashline_vert from '../shader/dashline_vert.glsl';
export function LineMaterial(options) {
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
u_time: { value: options.u_time || 0 }
u_time: { value: options.u_time || 0 },
u_zoom: { value: options.u_zoom || 10 }
},
vertexShader: line_vert,
fragmentShader: line_frag,
@ -21,7 +28,9 @@ export function ArcLineMaterial(options) {
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
segmentNumber: { value: 50 }
segmentNumber: { value: 49 },
u_time: { value: 0 },
u_zoom: { value: options.u_zoom || 10 }
},
vertexShader: arcline_vert,
fragmentShader: arcline_frag,
@ -31,3 +40,33 @@ export function ArcLineMaterial(options) {
return material;
}
export function MeshLineMaterial(options) {
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
u_time: { value: options.u_time || 0 },
u_zoom: { value: options.u_zoom }
},
vertexShader: meshline_vert,
fragmentShader: meshline_frag,
transparent: true
});
return material;
}
export function DashLineMaterial(options) {
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
u_time: { value: options.u_time || 0 },
u_zoom: { value: options.u_zoom },
u_dashSteps: { value: options.u_dashSteps || 12 },
u_dashSmooth: { value: options.u_dashSmooth || 0.01 },
u_dashDistance: { value: options.u_dashDistance || 0.2 }
},
vertexShader: dashline_vert,
fragmentShader: dashline_frag,
transparent: true
});
return material;
}

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

@ -2,6 +2,7 @@
import * as THREE from '../../core/three';
export default class Material extends THREE.ShaderMaterial {
setUniformsValue(name, value) {
if (!this.uniforms[name]) { return; }
this.uniforms[name].value = value;
this.uniforms.needsUpdate = true;
}
@ -18,4 +19,11 @@ export default class Material extends THREE.ShaderMaterial {
}
return uniforms;
}
upDateUninform(option) {
for (const key in option) {
if (key.substr(0, 2) === 'u_') {
this.setUniformsValue(key, option[key]);
}
}
}
}

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

@ -12,7 +12,7 @@ export default class PointMaterial extends Material {
u_strokeWidth: { value: 1 }
},
defines: {
SHAPE: true,
SHAPE: false,
TEXCOORD_0: false
}
};

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

@ -1,13 +1,16 @@
import * as THREE from '../../core/three';
import polygon_frag from '../shader/polygon_frag.glsl';
import polygon_vert from '../shader/polygon_vert.glsl';
import Material from './material';
export default function PolygonMaterial(options) {
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity },
u_opacity: { value: options.u_opacity || 1.0 },
u_texture: { value: options.u_texture },
u_time: { value: options.u_time || 0 }
u_time: { value: options.u_time || 0 },
u_zoom: { value: options.u_zoom || 0 },
u_baseColor: { value: options.u_baseColor || [ 1.0, 0, 0, 1.0 ] },
u_brightColor: { value: options.u_brightColor || [ 1.0, 0, 0, 1.0 ] },
u_windowColor: { value: options.u_windowColor || [ 1.0, 0, 0, 1.0 ] }
},
vertexShader: polygon_vert,
fragmentShader: polygon_frag,

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

@ -3,8 +3,10 @@
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
gl_FragColor.a = v_color.a*u_opacity;
if(v_color.a == 0.){
discard;
}
gl_FragColor = v_color;
gl_FragColor.a = v_color.a*u_opacity;
}

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

@ -1,9 +1,15 @@
precision mediump float;
attribute vec4 a_color;
attribute vec4 a_instance;
attribute float a_size;
uniform float u_zoom;
uniform float u_time;
uniform mat4 matModelViewProjection;
uniform float segmentNumber;
varying vec4 v_color;
float maps (float value, float start1, float stop1, float start2, float stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
}
float getSegmentRatio(float index) {
return smoothstep(0.0, 1.0, index / (segmentNumber - 1.0));
@ -11,30 +17,51 @@ float getSegmentRatio(float index) {
float paraboloid(vec2 source, vec2 target, float ratio) {
vec2 x = mix(source, target, ratio);
vec2 center = mix(source, target, 0.3);
vec2 center = mix(source, target, 0.5);
float dSourceCenter = distance(source, center);
float dXCenter = distance(x, center);
return (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter)*0.6;
return (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter);
}
vec3 getPos(vec2 source, vec2 target, float height, float segmentRatio) {
vec3 getPos(vec2 source, vec2 target, float segmentRatio) {
float vertex_height = paraboloid(source, target, segmentRatio);
return vec3(
mix(source, target, segmentRatio),
sqrt(max(0.0, height))
sqrt(max(0.0, vertex_height))
);
}
vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {
// normalized direction of the line
vec2 dir_screenspace = normalize(line_clipspace);
// rotate by 90 degrees
dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
vec2 offset = dir_screenspace * offset_direction * a_size * pow(2.0,20.0-u_zoom) / 2.0;
return offset;
}
void main() {
float visindex =mod(u_time *10.,segmentNumber);
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
vec2 source = a_instance.rg;
vec2 target = a_instance.ba;
float segmentIndex = position.x;
float segmentRatio = getSegmentRatio(segmentIndex);
vec3 c1 = vec3(0.929,0.972,0.917);
vec3 c2 = vec3(0.062,0.325,0.603);
float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
vec3 curr = getPos(source, target, segmentRatio);
vec3 next = getPos(source, target, nextSegmentRatio);
vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, position.y);
gl_Position =matModelViewProjection * vec4(vec3(curr + vec3(offset, 0.0)),1.0);
// float apha = 0.;
// if( position.x> 0. && position.x <visindex)
// apha =1.0;
// vec3 c1 = vec3(0.929,0.972,0.917);
// vec3 c2 = vec3(0.062,0.325,0.603);
// v_color = mix(c1, c2, segmentRatio);
v_color = a_color;
float height = paraboloid(source, target, segmentRatio);
vec3 position = getPos(source,target,height,segmentRatio);
gl_Position = matModelViewProjection * vec4(position, 1.0);
}

11
src/geom/shader/dashline_frag.glsl Normal file
View File

@ -0,0 +1,11 @@
varying float v_lineU;
uniform float u_opacity;
uniform float u_dashSteps;
uniform float u_dashSmooth;
uniform float u_dashDistance;
varying vec4 v_color;
void main() {
float lineUMod = mod(v_lineU, 1.0/u_dashSteps) * u_dashSteps;
float dash = smoothstep(u_dashDistance, u_dashDistance+u_dashSmooth, length(lineUMod-0.5));
gl_FragColor = vec4(v_color.xyz * vec3(dash), v_color.a*u_opacity * dash);
}

15
src/geom/shader/dashline_vert.glsl Normal file
View File

@ -0,0 +1,15 @@
precision highp float;
attribute float a_miter;
attribute vec4 a_color;
attribute float a_size;
uniform float u_zoom;
varying vec4 v_color;
attribute float a_distance;
varying float v_lineU;
void main() {
v_lineU = a_distance;
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
vec3 pointPos = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
v_color = a_color;
gl_Position = matModelViewProjection * vec4(pointPos, 1.0);
}

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

@ -1,14 +1,16 @@
precision highp float;
uniform float u_opacity;
varying vec4 v_color;
varying float vTime;
void main() {
vec4 color = v_color;
#ifdef ANIMATE
if (vTime > 1.0 || vTime < 0.0) {
discard;
}
color.a= color.a * vTime;
#endif
gl_FragColor =color;
gl_FragColor = color;
gl_FragColor.a =color.a*u_opacity;
}

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

@ -8,7 +8,7 @@
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color;
#ifdef ANIMATE
vTime = 1.0- (mod(u_time*100.,3600.)- position.z) / 100.;
vTime = 1.0- (mod(u_time*100.,3600.)- position.z) / 100.;
#endif
gl_Position = matModelViewProjection * vec4(position.xy,0., 1.0);
}

7
src/geom/shader/meshline_frag.glsl Normal file
View File

@ -0,0 +1,7 @@
precision highp float;
uniform float u_opacity;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
gl_FragColor.a = v_color.a * u_opacity ;
}

13
src/geom/shader/meshline_vert.glsl Normal file
View File

@ -0,0 +1,13 @@
precision highp float;
attribute float a_miter;
attribute vec4 a_color;
attribute float a_size;
uniform float u_zoom;
varying vec4 v_color;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
vec3 pointPos = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
v_color = a_color;
gl_Position = matModelViewProjection * vec4(pointPos, 1.0);
}

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

@ -1,3 +1,4 @@
precision highp float;
#define PI 3.14159265359
#define TWO_PI 6.28318530718
@ -18,15 +19,7 @@ const float u_gamma = 0.08;
const vec3 halo = vec3( 1.0 );
void main() {
//vec4 tcolor = texture2D(u_texture, v_uv + gl_PointCoord / 2048.0 * 30.0);
// float alpha = smoothstep(u_buffer - u_gamma, u_buffer + u_gamma, tcolor.x);
// float haloWeight = smoothstep( 0.0, 1.0, 1.0 - tcolor.r );
// haloWeight = step( 0.8, tcolor.r );
// vec3 targetColor = mix( v_color.rgb, halo, haloWeight );
// gl_FragColor= vec4(v_color.rgb, alpha * v_color.a);;
// gl_FragColor = vec4( targetColor, alpha );
// 纹理坐标
#ifdef TEXCOORD_0
vec2 pos = v_uv + gl_PointCoord / 512.0 * 64.0;
pos.y = 1.0 - pos.y;

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

@ -15,12 +15,13 @@ varying float v_shape;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color;
float zoom = pow(2.0,(18.0 - u_zoom));
gl_Position = matModelViewProjection * vec4(position, 1.0);
gl_PointSize = a_size;
gl_PointSize = a_size;
v_rs = vec2(a_size / 2.0, a_size / 2.0- u_strokeWidth);
#ifdef TEXCOORD_0
v_uv = uv;
v_uv = uv;
#endif
#ifdef SHAPE
v_shape = a_shape;

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

@ -1,6 +1,9 @@
precision highp float;
uniform float u_opacity;
uniform sampler2D u_texture;
uniform vec4 u_baseColor;
uniform vec4 u_brightColor;
uniform vec4 u_windowColor;
uniform float u_time;
varying vec2 v_texCoord;
varying vec4 v_color;
@ -20,13 +23,14 @@ void main() {
discard;
return;
}
vec3 baseColor = vec3(0.0078,0.054,0.06);
vec3 brightColor = vec3(0.312,0.283,0.935);
vec3 windowColor = vec3(0.038,0.078,0.115);
vec3 baseColor = u_baseColor.xyz;
vec3 brightColor = u_brightColor.xyz;
vec3 windowColor = u_windowColor.xyz;
float targetColId = 5.;
#ifdef ANIMATE
if(v_texCoord.x < 0.0) { //顶部颜色
gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);
if(v_texCoord.x < 0.) { //顶部颜色
//gl_FragColor = vec4(1.0,0.,0.,1.0); // v_color.w * u_opacity
gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);
}else { // 侧面颜色
//vec4 color = texture2D(u_texture,v_texCoord) * v_color;
vec2 st = v_texCoord;
@ -40,7 +44,7 @@ void main() {
float ux = floor(UvScale.x/tStep);
float uy = floor(UvScale.y/tStep);
float n = random(vec2(ux,uy));
float lightP = u_time /2.0;
float lightP = u_time;
float head = 1.0- step(0.005,st.y);
/*step3*/
// 将窗户颜色和墙面颜色区别开来
@ -52,8 +56,7 @@ void main() {
float sCol = step(targetColId - 0.5, curColId) - step(targetColId + 0.5, curColId);
float mLightP = mod(lightP, 2.);
float sRow = step(mLightP - 0.1, st.y) - step(mLightP, st.y);
//vec3 color = mix(baseColor, windowColor, s);
float sRow = step(mLightP - 0.2, st.y) - step(mLightP, st.y);
if(ux == targetColId){
n =0.;
}
@ -63,7 +66,7 @@ void main() {
if (st.y<0.01){
color = baseColor;
}
if(head ==1.0) {
if(head ==1.0) { // 顶部亮线
color = brightColor;
}
gl_FragColor = vec4(color * v_lightWeight,1.0);
@ -71,6 +74,6 @@ void main() {
}
#else
gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);
#endif
#endif
}

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

@ -5,20 +5,29 @@ precision highp float;
attribute vec4 a_color;
attribute vec4 a_idColor;
attribute vec2 faceUv;
attribute float a_size;
attribute vec3 a_shape;
attribute vec3 a_size;
uniform float u_zoom;
varying vec2 v_texCoord;
varying vec4 v_color;
varying float v_lightWeight;
varying float v_size;
void main() {
float scale = pow(2.0,(20.0 - u_zoom));
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
vec3 newposition = position;
#ifdef SHAPE
newposition =position + a_size * scale* a_shape;
#endif
v_texCoord = faceUv;
if(normal == vec3(0.,0.,1.)){
v_color = a_color;
gl_Position = matModelViewProjection * vec4(position, 1.0);
gl_Position = matModelViewProjection * vec4(newposition, 1.0);
return;
}
vec3 worldPos = vec3(vec4(position,1.0) * modelMatrix);
vec3 worldPos = vec3(vec4(newposition,1.0) * modelMatrix);
vec3 worldNormal = vec3(vec4(normal,1.0) * modelMatrix);
// //cal light weight
vec3 viewDir = normalize(cameraPosition - worldPos);
@ -34,6 +43,6 @@ void main() {
v_texCoord = faceUv;
v_lightWeight = lightWeight;
// v_size = a_size;
v_color =vec4(a_color.rgb * lightWeight, a_color.w);
gl_Position = matModelViewProjection * vec4(position, 1.0);
v_color =vec4(a_color.rgb*lightWeight, a_color.w);
gl_Position = matModelViewProjection * vec4(newposition, 1.0);
}

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

@ -19,6 +19,6 @@ void main() {
floor(16.0 * (1.0 - value1)) / 16.0);
v_color = texture2D(u_colorTexture,ramp_pos);
vec2 range = u_extent.zw - u_extent.xy;
gl_Position = matModelViewProjection * vec4(position.xy, 0., 1.0);
gl_Position = matModelViewProjection * vec4(position.xy, value, 1.0);
}

155
src/geom/shader/scanline_frag.glsl Normal file
View File

@ -0,0 +1,155 @@
//Sci-fi radar based on the work of gmunk for Oblivion
//http://work.gmunk.com/OBLIVION-GFX
precision highp float;
#define SMOOTH(r,R) (1.0-smoothstep(R-0.01,R+0.01, r))
#define RANGE(a,b,x) ( step(a,x)*(1.0-step(b,x)) )
#define RS(a,b,x) ( smoothstep(a-0.01,a+0.01,x)*(1.0-smoothstep(b-0.01,b+0.01,x)) )
#define M_PI 3.1415926535897932384626433832795
#define blue1 vec3(0.74,0.95,1.00)
#define blue2 vec3(0.87,0.98,1.00)
#define blue3 vec3(0.35,0.76,0.83)
#define blue4 vec3(0.953,0.969,0.89)
#define red vec3(1.00,0.38,0.227)
#define MOV(a,b,c,d,t) (vec2(a*cos(t)+b*cos(0.1*(t)), c*sin(t)+d*cos(0.1*(t))))
uniform float u_time;
float movingLine(vec2 uv, vec2 center, float radius)
{
//angle of the line
float theta0 = 90. * u_time;
vec2 d = uv - center;
float r = sqrt( dot( d, d ) );
if(r<radius)
{
//compute the distance to the line theta=theta0
vec2 p = radius*vec2(cos(theta0*M_PI/180.0),
-sin(theta0*M_PI/180.0));
float l = length( d - p*clamp( dot(d,p)/dot(p,p), 0.0, 1.0) );
d = normalize(d);
//compute gradient based on angle difference to theta0
float theta = mod(180.0*atan(d.y,d.x)/M_PI+theta0,360.0);
float gradient = clamp(1.0-theta/90.0,0.0,1.0);
return SMOOTH(l,0.01) + 0.9*gradient;
// return SMOOTH(l,1.);
}
else return 0.0;
}
float circle(vec2 uv, vec2 center, float radius, float width)
{
float r = length(uv - center);
return SMOOTH(r-width/2.0,radius)-SMOOTH(r+width/2.0,radius);
}
float circle2(vec2 uv, vec2 center, float radius, float width, float opening)
{
vec2 d = uv - center;
float r = sqrt( dot( d, d ) );
d = normalize(d);
if( abs(d.y) > opening )
return SMOOTH(r-width/2.0,radius)-SMOOTH(r+width/2.0,radius);
else
return 0.0;
}
float circle3(vec2 uv, vec2 center, float radius, float width)
{
vec2 d = uv - center;
float r = sqrt( dot( d, d ) );
d = normalize(d);
float theta = 180.0*(atan(d.y,d.x)/M_PI);
return smoothstep(2.0, 2.1, abs(mod(theta+2.0,45.0)-2.0)) *
mix( 0.5, 1.0, step(45.0, abs(mod(theta, 180.0)-90.0)) ) *
(SMOOTH(r-width/2.0,radius)-SMOOTH(r+width/2.0,radius));
}
float triangles(vec2 uv, vec2 center, float radius)
{
vec2 d = uv - center;
return RS(-0.08, 0.0, d.x-radius) * (1.0-smoothstep( 0.07+d.x-radius,0.09+d.x-radius, abs(d.y)))
+ RS( 0.0, 0.08, d.x+radius) * (1.0-smoothstep( 0.07-d.x-radius,0.09-d.x-radius, abs(d.y)))
+ RS(-0.08, 0.0, d.y-radius) * (1.0-smoothstep( 0.07+d.y-radius,0.09+d.y-radius, abs(d.x)))
+ RS( 0.0, 0.08, d.y+radius) * (1.0-smoothstep( 0.07-d.y-radius,0.09-d.y-radius, abs(d.x)));
}
float _cross(vec2 uv, vec2 center, float radius)
{
vec2 d = uv - center;
float x = uv.x;
float y = uv.y;
float r = sqrt( dot( d, d ) );
float w = abs(uv.x)-abs(uv.y);
float z1 = smoothstep(-0.020,-0.012,w);
float z2 = smoothstep(-0.02,-0.012,-w);
float z3 = z1*z2 * (1.0 - step(radius,r));
return z3;
// float x = uv.x;
// float y = uv.y;
//color = vec3(1.0-smoothstep(.4,.41,d));
//return smoothstep()
// float r = sqrt( dot( d, d ) );
// if( (r<radius) && ( (x==y) || (x==-y) ) )
// return 1.0;
// else return 0.0;
}
float dots(vec2 uv, vec2 center, float radius)
{
vec2 d = uv - center;
float r = sqrt( dot( d, d ) );
if( r <= 2.5 )
return 1.0;
if( ( r<= radius) && ( (abs(d.y+0.5)<=1.0) && ( mod(d.x+1.0, 50.0) < 2.0 ) ) )
return 1.0;
else if ( (abs(d.y+0.5)<=1.0) && ( r >= 50.0 ) && ( r < 115.0 ) )
return 0.5;
else
return 0.0;
}
float bip1(vec2 uv, vec2 center)
{
return SMOOTH(length(uv - center),0.03);
}
float bip2(vec2 uv, vec2 center)
{
float r = length(uv - center);
float R = 0.2+mod(0.1*u_time, 0.30);
return (0.5-0.6*cos(30.0*u_time)) * SMOOTH(r,0.06)
+ SMOOTH(0.1,r)-SMOOTH(0.12,r)
+ smoothstep(max(0.1,R-0.2),R,r)-SMOOTH(R,r);
}
void main()
{
vec3 finalColor;
vec2 uv = gl_PointCoord.xy * 2.0 - 1.0;
//center of the image
vec2 c = vec2(0.,0.);
finalColor = vec3( 0.3 * _cross(uv, c, 0.6) );
finalColor += ( circle(uv, c, 0.2, 0.01)
+ circle(uv, c, 0.4, 0.01) ) * blue1;
finalColor += (circle(uv, c, 0.6, 0.02) );//+ dots(uv,c,240.0)) * blue4;
finalColor += circle3(uv, c, 0.8, 0.04) * blue1;
finalColor += triangles(uv, c, 0.85 + 0.1*sin(u_time)) * blue2;
finalColor += movingLine(uv, c, 0.6) * blue3;
finalColor += circle(uv, c, 0.1, 0.01) * blue3;
finalColor += circle2(uv, c, 0.65, 0.01, 0.5+0.2*cos(u_time)) * blue3;
if( length(uv-c) < 0.6 )
{
//animate some bips with random movements
vec2 p = 0.6*MOV(0.013,0.01,0.01,0.014,0.03+0.01*u_time);
finalColor += bip1(uv, c+p) * vec3(1,1,1);
p = 0.6*MOV(0.009,-0.01,0.017,0.08,-2.0+sin(0.1*u_time)+0.15*u_time);
//finalColor += bip1(uv, c+p) * vec3(1,1,1);
p = 0.50*MOV(-0.354,0.37,-0.237,0.28,sin(1.*u_time+0.07)+0.2*u_time);
finalColor += bip2(uv,c+ p) * red;
}
float alpha = 1.0;
if(finalColor==vec3(0.)) alpha = 0.;
gl_FragColor = vec4(finalColor, alpha);
}

96
src/geom/shape/line.js
View File

@ -1,4 +1,5 @@
import { Vector3 } from '../../core/three';
import getNormal from 'polyline-normals';
/**
* shape meshLine
* @param {array} geo 坐标点
@ -62,21 +63,43 @@ export function meshLine(geo, props, index) {
* @return {object} 顶点坐标，起始点坐标，索引坐标
*/
export function arc(geo, index) {
export function arc(geo, props, positionsIndex) {
const segNum = 50;
const posArray = [];
const instanceArray = [];
const sizes = [];
const colors = [];
const { size, color } = props;
const defaultInstance = [ geo[0][0], geo[0][1], geo[1][0], geo[1][1] ];
const indexArray = [];
for (let i = 1; i < segNum; i++) {
posArray.push([ i - 1, i - 1, i - 1 ]);
posArray.push([ i, i, i ]);
indexArray.push(index);
indexArray.push(index);
instanceArray.push(defaultInstance);
instanceArray.push(defaultInstance);
let c = 0;
let index = positionsIndex;
for (let i = 0; i < segNum; i++) {
posArray.push(i, 1, i);
posArray.push(i, -1, i);
instanceArray.push(...defaultInstance);
instanceArray.push(...defaultInstance);
sizes.push(size, size);
colors.push(...color);
colors.push(...color);
if (i !== segNum - 1) {
indexArray[c++] = index + 0;
indexArray[c++] = index + 1;
indexArray[c++] = index + 2;
indexArray[c++] = index + 1;
indexArray[c++] = index + 3;
indexArray[c++] = index + 2;
}
index += 2;
}
return { positions: posArray, indexes: indexArray, instances: instanceArray };
return {
positions: posArray,
indexArray,
instances: instanceArray,
colors,
sizes
};
}
/**
@ -96,3 +119,58 @@ export function defaultLine(geo, index) {
return { positions, indexes: indexArray };
}
export function Line(path, props, positionsIndex, dash = false) {
if (path.length === 1) path = path[0];// 面坐标转线坐标
const positions = [];
const normal = [];
const miter = [];
const colors = [];
const indexArray = [];
const normals = getNormal(path);
const attrDistance = [];
const sizes = [];
let c = 0;
let index = positionsIndex;
const { size, color } = props;
path.forEach((point, pointIndex, list) => {
const i = index;
colors.push(...color);
colors.push(...color);
sizes.push(size[0]);
sizes.push(size[0]);
if (pointIndex !== list.length - 1) {
indexArray[c++] = i + 0;
indexArray[c++] = i + 3;
indexArray[c++] = i + 1;
indexArray[c++] = i + 0;
indexArray[c++] = i + 2;
indexArray[c++] = i + 3;
}
point[2] = size[1];
positions.push(...point);
positions.push(...point);
if (dash) {
const d = pointIndex / (list.length - 1);
attrDistance.push(d, d);
}
index += 2;
});
normals.forEach(n => {
const norm = n[0];
const m = n[1];
normal.push(norm[0], norm[1], 0);
normal.push(norm[0], norm[1], 0);
miter.push(-m);
miter.push(m);
});
return {
positions,
normal,
indexArray,
miter,
colors,
sizes,
attrDistance
};
}

2
src/global.js
View File

@ -17,7 +17,7 @@ const Global = {
animate: true,
snapArray: [ 0, 1, 2, 4, 5, 10 ],
height: 0,
activeColor: 'rgb(255,255,191)',
activeColor: '#2f54eb',
colors: [ 'rgb(103,0,31)', 'rgb(178,24,43)', 'rgb(214,96,77)', 'rgb(244,165,130)', 'rgb(253,219,199)', 'rgb(247,247,247)', 'rgb(209,229,240)', 'rgb(146,197,222)', 'rgb(67,147,195)', 'rgb(33,102,172)', 'rgb(5,48,97)' ],
// 指定固定 tick 数的逼近值
snapCountArray: [ 0, 1, 1.2, 1.5, 1.6, 2, 2.2, 2.4, 2.5, 3, 4, 5, 6, 7.5, 8, 10 ],

69
src/layer/lineLayer.js
View File

@ -2,53 +2,82 @@
import Layer from '../core/layer';
import * as THREE from '../core/three';
import { LineBuffer } from '../geom/buffer/index';
import { LineMaterial, ArcLineMaterial } from '../geom/material/lineMaterial';
import { LineMaterial, ArcLineMaterial, MeshLineMaterial, DashLineMaterial } from '../geom/material/lineMaterial';
export default class MeshlineLayer extends Layer {
shape(type) {
this.shapeType = type;
return this;
}
render() {
this.type = 'polyline';
this.init();
const source = this.layerSource;
const StyleData = this.StyleData;
const style = this.get('styleOptions');
const buffer = new LineBuffer({
coordinates: source.geoData,
properties: StyleData,
propertiesData: source.propertiesData
shapeType: this.shapeType,
style
});
const { opacity} = this.get('styleOptions');
const animateOptions= this.get('animateOptions');
const { opacity } = this.get('styleOptions');
const animateOptions = this.get('animateOptions');
const geometry = new THREE.BufferGeometry();
const { attributes } = buffer;
const shape = buffer.shape;
if (shape === 'arc') {
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
if (this.shapeType === 'arc') {
geometry.setIndex(attributes.indexArray);
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('a_instance', new THREE.Float32BufferAttribute(attributes.inposs, 4))
console.log(opacity)
geometry.addAttribute('a_instance', new THREE.Float32BufferAttribute(attributes.instances, 4));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
const material = new ArcLineMaterial({
u_opacity: opacity
u_opacity: opacity,
u_zoom: this.scene.getZoom()
});
const mesh = new THREE.Line(geometry, material);
// const mesh = new THREE.Line(geometry, material);
const mesh = new THREE.Mesh(geometry, material);
this.add(mesh);
} else if (shape === 'meshLine') {
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
} else if (this.shapeType === 'meshLine') {
geometry.setIndex(attributes.indexArray);
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
const material = new LineMaterial({
u_opacity: opacity
});
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normal, 3));
geometry.addAttribute('a_miter', new THREE.Float32BufferAttribute(attributes.miter, 1));
// geometry.setIndex(new THREE.BufferAttribute(new THREE.Float32BufferAttribute(attributes.indexArray, 1)));
const lineType = style.lineType;
let material;
if (lineType !== 'dash') {
material = new MeshLineMaterial({
u_opacity: opacity,
u_zoom: this.scene.getZoom()
});
} else {
geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1));
material = new DashLineMaterial({
u_opacity: opacity,
u_zoom: this.scene.getZoom()
});
}
const mesh = new THREE.Mesh(geometry, material);
this.add(mesh);
} else { // 直线
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
const material = new LineMaterial({
u_opacity: opacity,
u_time: 0
});
if(animateOptions.enable){
material.setDefinesvalue('ANIMATE',true)
if (animateOptions.enable) {
material.setDefinesvalue('ANIMATE', true);
}
const mesh = new THREE.LineSegments(geometry, material);
this.add(mesh);
}

32
src/layer/pointLayer.js
View File

@ -5,7 +5,6 @@ import PointMaterial from '../geom/material/pointMaterial';
import PolygonMaterial from '../geom/material/polygonMaterial';
import TextBuffer from '../geom/buffer/text';
import TextMaterial from '../geom/material/textMaterial';
import PickingMaterial from '../core/engine/picking/pickingMaterial';
/**
* point shape 2d circle, traingle text,image
@ -19,6 +18,7 @@ export default class PointLayer extends Layer {
render() {
this.type = 'point';
this.init();
if (!this._hasRender) {
this._prepareRender(this.shapeType);
@ -31,6 +31,7 @@ export default class PointLayer extends Layer {
}
_prepareRender() {
if (this.shapeType === 'text') { // 绘制文本图层
this._textPoint();
return;
}
@ -44,12 +45,13 @@ export default class PointLayer extends Layer {
});
const geometry = this.geometry = new THREE.BufferGeometry();
let mtl;
if (this.shapeType !== 'image') {
if (this.shapeType === '2d' || this.shapeType === '3d') {
mtl = new PolygonMaterial({
u_opacity: opacity
u_opacity: opacity,
u_zoom: this.scene.getZoom()
});
} else {
mtl.setDefinesvalue('SHAPE', true);
} else { // sdf 绘制点
mtl = new PointMaterial({
u_opacity: opacity,
u_strokeWidth: strokeWidth,
@ -63,22 +65,28 @@ export default class PointLayer extends Layer {
}
const { attributes } = this._buffer;
console.log(attributes);
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
if (this.shapeType === 'image') {
geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uvs, 2));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
} else {
} else { // 多边形面
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapePositions, 3));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.a_size, 3));
}
let mesh;
if (this.shapeType == 'image') {
if (this.shapeType === 'image') {
mesh = new THREE.Points(geometry, mtl);
} else {
const pickmaterial = new PickingMaterial();
mesh = new THREE.Mesh(geometry, mtl);
} else if (this.shapeType === undefined) { // 散点图
mesh = new THREE.Points(geometry, mtl);
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
} else {
mesh = new THREE.Mesh(geometry, mtl);
}
this.add(mesh);
@ -108,8 +116,8 @@ export default class PointLayer extends Layer {
u_strokeWidth: 1,
u_stroke: stroke,
u_textSize: buffer.bufferStruct.textSize,
u_gamma: 0.08,
u_buffer: 0.75,
u_gamma: 0.11,
u_buffer: 0.8,
u_color: color,
u_glSize: [ width, height ]
});

28
src/layer/polygonLayer.js
View File

@ -3,7 +3,6 @@ import Layer from '../core/layer';
import PolygonBuffer from '../geom/buffer/polygon';
import PolygonMaterial from '../geom/material/polygonMaterial';
import { LineMaterial } from '../geom/material/lineMaterial';
import PickingMaterial from '../core/engine/picking/pickingMaterial';
export default class PolygonLayer extends Layer {
shape(type) {
this.shape = type;
@ -17,6 +16,14 @@ export default class PolygonLayer extends Layer {
this._initAttrs();
(this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter() : null;
const { opacity, baseColor, brightColor, windowColor } = this.get('styleOptions');
this.layerMesh.material.upDateUninform({
u_opacity: opacity,
u_baseColor: baseColor,
u_brightColor: brightColor,
u_windowColor: windowColor
});
}
@ -53,22 +60,25 @@ export default class PolygonLayer extends Layer {
}
_renderPolygon() {
const animateOptions= this.get('animateOptions');
const { opacity } = this.get('styleOptions');
const animateOptions = this.get('animateOptions');
const { opacity, baseColor, brightColor, windowColor } = this.get('styleOptions');
const material = new PolygonMaterial({
u_opacity: opacity,
u_baseColor: baseColor,
u_brightColor: brightColor,
u_windowColor: windowColor
});
const { attributes } = this._buffer;
console.log(attributes);
this.geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
if(animateOptions.enable){
material.setDefinesvalue('ANIMATE',true)
if (animateOptions.enable) {
material.setDefinesvalue('ANIMATE', true);
this.geometry.addAttribute('faceUv', new THREE.Float32BufferAttribute(attributes.faceUv, 2));
this.geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
}
const pickmaterial = new PickingMaterial();
// const pickmaterial = new PickingMaterial();
const polygonMesh = new THREE.Mesh(this.geometry, material);
this.add(polygonMesh);
}