mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'rollup' into 'master'
Rollup 瓦片地图WebWorker 升级打包工具为Rollup 重构buffer 增加3d热力图 See merge request !41
This commit is contained in:
thinkinggis
commit
73cbf8d8da
|
|
@ -10,12 +10,11 @@ $ npm install
|
|||
$ npm run test-live
|
||||
|
||||
# build watching file changes and run demos
|
||||
$ npm run dev
|
||||
$ npm run start
|
||||
|
||||
# run demos
|
||||
$ npm run demos
|
||||
```
|
||||
visit online demo
|
||||
https://antv.alipay.com/zh-cn/l7/1.x/demo/index.html
|
||||
|
||||
|
||||
## How to Contribute
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ return {
|
|||
]
|
||||
}
|
||||
}
|
||||
console.log(pointOnCircle(10))
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'light', // 样式URL
|
||||
|
|
@ -76,7 +75,7 @@ scene.on('loaded', () => {
|
|||
circleLayer.setData(pointOnCircle(timestamp / 1000));
|
||||
requestAnimationFrame(animateMarker);
|
||||
}
|
||||
//animateMarker(0);
|
||||
animateMarker(0);
|
||||
|
||||
/**
|
||||
const layerText = scene.PointLayer({
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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;}
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
</style>
|
||||
|
|
@ -13,39 +13,37 @@
|
|||
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
|
||||
<script src="../build/L7.js"></script>
|
||||
<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
|
||||
<script src="../build/l7.js"></script>
|
||||
<style>
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
</style>
|
||||
<script>
|
||||
var scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'dark', // 样式URL
|
||||
center: [116.2825, 39.9],
|
||||
mapStyle: 'light', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 4
|
||||
zoom: 12
|
||||
});
|
||||
window.scene = scene;
|
||||
scene.on('loaded', function() {
|
||||
$.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', function(data) {
|
||||
|
||||
scene.LineLayer({
|
||||
$.get('https://gw.alipayobjects.com/os/rmsportal/epnZEheZeDgsiSjSPcCv.json', function(data) {
|
||||
scene.PointLayer({
|
||||
zIndex: 2
|
||||
}).source(data, {
|
||||
parser:{
|
||||
type:'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
scale: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
type: 'linear'
|
||||
}
|
||||
}
|
||||
).color('rgb(13,64,140)').style({
|
||||
opacity: 0.6
|
||||
})
|
||||
.shape('greatCircle')
|
||||
.size(1)
|
||||
.render();
|
||||
}).shape('circle').size('value', [5, 80]) // default 1
|
||||
.active(true).filter('value', function(field_8) {
|
||||
return field_8 * 1 > 500;
|
||||
}).color('type', ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse()).style({
|
||||
stroke: 'rgb(255,255,255)',
|
||||
strokeWidth: 1,
|
||||
opacity: 0.9
|
||||
}).render();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -45,7 +45,8 @@ scene.on('loaded', () => {
|
|||
.style({
|
||||
stroke: 'rgb(255,255,255)',
|
||||
strokeWidth: 0,
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
bending:'additive'
|
||||
})
|
||||
.render();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ const scene = new L7.Scene({
|
|||
|
||||
});
|
||||
window.scene = scene;
|
||||
|
||||
scene.on('loaded', () => {
|
||||
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/xxvoBnsYNEPiAXGRmlPD.json', city => {
|
||||
citylayer = scene.PolygonLayer()
|
||||
|
|
@ -39,7 +40,7 @@ scene.on('loaded', () => {
|
|||
.shape('extrude')
|
||||
|
||||
.size('max',(value)=>{
|
||||
if(value<0)value =0;
|
||||
if(value<0)value =1;
|
||||
return value * 1000;
|
||||
})
|
||||
.active(true)
|
||||
|
|
@ -48,7 +49,6 @@ scene.on('loaded', () => {
|
|||
})
|
||||
.render();
|
||||
|
||||
|
||||
const citylayer2 = scene.PolygonLayer()
|
||||
.source(city)
|
||||
.shape('line')
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@ scene.on('loaded', () => {
|
|||
}
|
||||
})
|
||||
.shape('fill')
|
||||
.pattern('id1')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 1
|
||||
|
|
@ -97,7 +96,10 @@ scene.on('loaded', () => {
|
|||
})
|
||||
//.render();
|
||||
|
||||
console.log(citylayer);
|
||||
|
||||
citylayer.on('mouseleave',(e)=>{
|
||||
console.log(e);
|
||||
})
|
||||
citylayer.on('click',(e)=>{
|
||||
$("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'});
|
||||
$("#info").html(`<p>${e.feature.properties.area || e.feature.properties.name }<span">${e.feature.properties.pm2_5_24h || 0}</span></p>`);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const scene = new L7.Scene({
|
|||
});
|
||||
window.scene = scene;
|
||||
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({
|
||||
zIndex: 2
|
||||
})
|
||||
|
|
|
|||
|
|
@ -31,47 +31,26 @@ const scene = new L7.Scene({
|
|||
});
|
||||
scene.on('loaded', () => {
|
||||
$.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => {
|
||||
const rows = data.split('\n');
|
||||
var features =[];
|
||||
for(var i =1;i<rows.length-1;i++){
|
||||
var row = rows[i].split(',');
|
||||
var start = turf.point([row[4], row[5]]);
|
||||
var end = turf.point([row[6], row[7]]);
|
||||
var greatCircle = turf.greatCircle(start, end, {'npoints': 50});
|
||||
features.push(greatCircle);
|
||||
}
|
||||
var fc = turf.featureCollection(features);
|
||||
const layer = scene.LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(fc)
|
||||
.color('rgb(13,64,140)')
|
||||
.style({
|
||||
opacity:0.6,
|
||||
})
|
||||
//.animate({enable:true})
|
||||
.render();
|
||||
console.log(layer);
|
||||
/**
|
||||
|
||||
scene.LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data, { // lng1,lat1,lng2,lat2
|
||||
parser:{
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
})
|
||||
}})
|
||||
.shape('arc')
|
||||
.size(0.8)
|
||||
.color('rgb(13,64,140)')
|
||||
.style({
|
||||
opacity:0.6,
|
||||
})
|
||||
//.animate({enable:true})
|
||||
.render();
|
||||
**/
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,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>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="geometry" content="diagram">
|
||||
<link rel="stylesheet" href="./assets/common.css">
|
||||
<title>point_circle</title>
|
||||
<title>hexagon demo</title>
|
||||
<style>
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
</style>
|
||||
|
|
@ -15,48 +15,45 @@
|
|||
<body>
|
||||
<div id="map"></div>
|
||||
<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/dat.gui.min.js"></script>
|
||||
<script src="../build/L7.js"></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({
|
||||
id: 'map',
|
||||
mapStyle: 'dark', // 样式URL
|
||||
center: [ 120.037828998113099, 30.086317611850635 ],
|
||||
center: [ 116.2825, 39.9 ],
|
||||
pitch: 0,
|
||||
zoom: 5.44
|
||||
zoom: 3
|
||||
});
|
||||
window.scene = scene;
|
||||
var colorObj={
|
||||
'黄色':'yellow',
|
||||
'蓝色':'blue',
|
||||
'橙色':'orange'
|
||||
|
||||
}
|
||||
scene.on('loaded', () => {
|
||||
$.get('./data/waringData.json', data => {
|
||||
scene.PointLayer({
|
||||
$.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => {
|
||||
|
||||
scene.LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data, {
|
||||
type: 'array',
|
||||
x: 'lon',
|
||||
y: 'lat',
|
||||
})
|
||||
.shape('2d:radar')
|
||||
.size(80 )
|
||||
.active(false)
|
||||
.color('signallevel',(v)=>{
|
||||
return colorObj[v];
|
||||
parser:{
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
|
||||
})
|
||||
.shape('greatCircle')
|
||||
.size(0.8)
|
||||
.color('rgb(13,64,140)')
|
||||
.style({
|
||||
shape:'radar'
|
||||
opacity:0.6,
|
||||
})
|
||||
.render();
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -53,16 +53,19 @@ scene.on('loaded', () => {
|
|||
},
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
size: 160000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('grid')
|
||||
.shape('squareColumn')
|
||||
.size('count',(value)=>{
|
||||
return value * 1000;
|
||||
})
|
||||
.active({fill:'red'})
|
||||
.style({
|
||||
coverage: 0.8
|
||||
coverage: 0.6
|
||||
})
|
||||
.color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||||
.render();
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const scene = new L7.Scene({
|
|||
mapStyle: 'dark', // 样式URL
|
||||
center: [120.132624,30.281774],
|
||||
pitch: 0,
|
||||
zoom: 10
|
||||
zoom: 7
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
$.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => {
|
||||
|
|
@ -53,16 +53,19 @@ scene.on('loaded', () => {
|
|||
},
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 6000,
|
||||
size: 10000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.active(true)
|
||||
.shape('hexagon')
|
||||
.size('count',(value)=>{
|
||||
return value * 1000;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
})
|
||||
.color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
|
||||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||||
<script src="./assets/dat.gui.min.js"></script>
|
||||
<script src="../build/L7.js"></script>
|
||||
<script src="../build/l7.js"></script>
|
||||
<script>
|
||||
var mapinstance = new AMap.Map('map',{
|
||||
center: [121.576757,31.279873 ],
|
||||
|
|
@ -32,105 +32,68 @@ var mapinstance = new AMap.Map('map',{
|
|||
|
||||
const scene = new L7.Scene({
|
||||
map:mapinstance,
|
||||
//mapStyle: 'dark', // 样式URL
|
||||
mapStyle: 'dark', // 样式URL
|
||||
});
|
||||
const testdata = [
|
||||
{
|
||||
"areaGeometry": "121.576757,31.279873;121.576904,31.279129;121.577422,31.279135;121.577425,31.279401;121.577604,31.279486;121.577873,31.279668;121.577854,31.280147;121.577873,31.280517;121.577713,31.280483;121.577604,31.280365;121.577051,31.279928;121.576757,31.279873;121.576757,31.279873"
|
||||
},
|
||||
{
|
||||
"areaGeometry": "121.588443,31.260267;121.587893,31.260332;121.587385,31.260387;121.586751,31.26045;121.586099,31.260505;121.585549,31.260584;121.585499,31.260641;121.585475,31.260702;121.585469,31.26076;121.585473,31.260797;121.585721,31.261172;121.585957,31.261529;121.58623,31.261987;121.586426,31.26235;121.586646,31.262795;121.586791,31.263137;121.586924,31.263478;121.587054,31.263788;121.587256,31.264224;121.587319,31.264276;121.587421,31.264337;121.587503,31.264368;121.587542,31.264373;121.588431,31.264357;121.589115,31.264355;121.589253,31.264357;121.589339,31.264331;121.589409,31.264288;121.589547,31.264049;121.589752,31.263696;121.589973,31.263313;121.590156,31.262965;121.59029,31.262682;121.590285,31.262557;121.590257,31.262498;121.5902,31.262459;121.589712,31.262265;121.589543,31.262197;121.5895,31.262125;121.589484,31.262072;121.589499,31.262005;121.589638,31.261714;121.589709,31.261579;121.589911,31.261242;121.590037,31.261031;121.590413,31.261176;121.591041,31.26141;121.591095,31.261317;121.59128,31.26097;121.59132,31.260872;121.591495,31.26061;121.591573,31.260552;121.591628,31.26051;121.591846,31.260295;121.592266,31.259879;121.592656,31.259516;121.592781,31.259401;121.5928,31.259343;121.592801,31.259301;121.592789,31.259261;121.592718,31.259196;121.592689,31.259156;121.592266,31.25884;121.591889,31.258548;121.591681,31.258396;121.591423,31.258196;121.590993,31.257889;121.59091,31.257892;121.590849,31.257903;121.590782,31.257971;121.590504,31.25835;121.590177,31.258758;121.589896,31.259137;121.589722,31.259395;121.589449,31.259807;121.58932,31.260028;121.589223,31.26024;121.588443,31.260267;121.588443,31.260267"
|
||||
}
|
||||
]
|
||||
const data2 = {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
const testdata =[ {
|
||||
'type': 'Polygon',
|
||||
'geometryCoord': [
|
||||
[
|
||||
[
|
||||
118.48068237304686,
|
||||
32.120964197033615
|
||||
115.1806640625,
|
||||
30.637912028341123
|
||||
],
|
||||
[
|
||||
118.49578857421874,
|
||||
32.037184191435145
|
||||
114.9609375,
|
||||
29.152161283318915
|
||||
],
|
||||
[
|
||||
118.57131958007811,
|
||||
32.061627957476404
|
||||
117.79541015625001,
|
||||
27.430289738862594
|
||||
],
|
||||
[
|
||||
118.57131958007811,
|
||||
32.13492006367728
|
||||
118.740234375,
|
||||
29.420460341013133
|
||||
],
|
||||
[
|
||||
118.48068237304686,
|
||||
32.120964197033615
|
||||
117.46582031249999,
|
||||
31.50362930577303
|
||||
],
|
||||
[
|
||||
115.1806640625,
|
||||
30.637912028341123
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
118.71414184570311,
|
||||
31.966143862120095
|
||||
],
|
||||
[
|
||||
118.67156982421875,
|
||||
31.811062019751912
|
||||
],
|
||||
[
|
||||
118.77044677734375,
|
||||
31.75502854729287
|
||||
],
|
||||
[
|
||||
118.85696411132814,
|
||||
31.927689274849715
|
||||
],
|
||||
[
|
||||
118.71414184570311,
|
||||
31.966143862120095
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
scene.on('loaded', () => {
|
||||
|
||||
const data = testdata.map(item=>{
|
||||
const coordStr = item.areaGeometry;
|
||||
coordStr.split(';');
|
||||
const coordinates = coordStr.split(';').map(lnglat=>{
|
||||
return lnglat.split(',');
|
||||
})
|
||||
item.areaGeometry = [coordinates];
|
||||
return item;
|
||||
})
|
||||
|
||||
citylayer = scene.PolygonLayer()
|
||||
.source(data,{
|
||||
.source(testdata,{
|
||||
parser:{
|
||||
type:'json',
|
||||
coordinates:'areaGeometry'
|
||||
coordinates:'geometryCoord'
|
||||
}
|
||||
})
|
||||
.color('red')
|
||||
.shape('extrude')
|
||||
|
||||
.size(1000)
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
})
|
||||
.render();
|
||||
citylayer = scene.LineLayer()
|
||||
.source(testdata,{
|
||||
parser:{
|
||||
type:'json',
|
||||
coordinates:'geometryCoord'
|
||||
}
|
||||
})
|
||||
.color('#fff')
|
||||
.shape('line')
|
||||
.size(4)
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
|
|
|
|||
|
|
@ -54,24 +54,7 @@ scene.on('loaded', () => {
|
|||
opacity:1.0,
|
||||
baseColor:'rgb(16,16,16)',
|
||||
windowColor:'rgb(30,60,89)',
|
||||
//brightColor:'rgb(155,217,255)'
|
||||
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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<script src="./assets/dat.gui.min.js"></script>
|
||||
<script src="../build/L7.js"></script>
|
||||
<script>
|
||||
|
||||
window.L7 = L7;
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'dark', // 样式URL
|
||||
|
|
@ -38,51 +38,30 @@ var colorHash = new ColorHash();
|
|||
|
||||
|
||||
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({
|
||||
zIndex:0,
|
||||
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({
|
||||
total:{
|
||||
type:'linear',
|
||||
'OBJECTID':{
|
||||
min:0,
|
||||
max:5000000
|
||||
max:3000,
|
||||
type:'linear'
|
||||
}
|
||||
})
|
||||
.shape('fill')
|
||||
.size(2)
|
||||
.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({
|
||||
opacity:1.0
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
13
package.json
|
|
@ -48,6 +48,13 @@
|
|||
"open": "~0.0.5",
|
||||
"parseurl": "~1.3.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",
|
||||
"shelljs": "~0.7.8",
|
||||
"string-replace-loader": "~1.3.0",
|
||||
|
|
@ -58,6 +65,10 @@
|
|||
"worker-loader": "^2.0.0"
|
||||
},
|
||||
"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-lib": "babel src --out-dir lib",
|
||||
"bundler": "electron ./bundler/app.js",
|
||||
|
|
@ -78,7 +89,7 @@
|
|||
"mkdir-dist": "node ./bin/mkdir-dist.js",
|
||||
"prepublishOnly": "npm run build-lib && npm run dist",
|
||||
"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-all": "npm run test && npm run test-bugs",
|
||||
"test-bugs": "torch --compile --renderer --recursive test/bugs",
|
||||
|
|
|
|||
|
|
@ -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: '' }
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -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' }));
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import './build/l7/shared';
|
||||
import './build/l7/worker';
|
||||
import './build/l7/index';
|
||||
export default L7;
|
||||
|
|
@ -4,16 +4,32 @@
|
|||
*/
|
||||
import Util from '../util';
|
||||
const RGB_REG = /rgba?\(([\s.,0-9]+)\)/;
|
||||
// const RGBA_REG = /rgba\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(\d+)\s*\)/;
|
||||
|
||||
// 创建辅助 tag 取颜色
|
||||
function createTmp() {
|
||||
const i = document.createElement('i');
|
||||
i.title = 'Web Colour Picker';
|
||||
i.style.display = 'none';
|
||||
document.body.appendChild(i);
|
||||
return i;
|
||||
}
|
||||
const ColorKeywords = {
|
||||
aliceblue: '#F0F8FF', antiquewhite: '#FAEBD7', aqua: '#00FFFF', aquamarine: '#7FFFD4', azure: '#F0FFFF',
|
||||
beige: '#F5F5DC', bisque: '#FFE4C4', black: '#000000', blanchedalmond: '#FFEBCD', blue: '#0000FF', blueviolet: '#8A2BE2',
|
||||
brown: '#A52A2A', burlywood: '#DEB887', cadetblue: '#5F9EA0', chartreuse: '#7FFF00', chocolate: '#D2691E', coral: '#FF7F50',
|
||||
cornflowerblue: '#6495ED', cornsilk: '#FFF8DC', crimson: '#DC143C', cyan: '#00FFFF', darkblue: '#00008B', darkcyan: '#008B8B',
|
||||
darkgoldenrod: '#B8860B', darkgray: '#A9A9A9', darkgreen: '#006400', darkgrey: '#A9A9A9', darkkhaki: '#BDB76B', darkmagenta: '#8B008B',
|
||||
darkolivegreen: '#556B2F', darkorange: '#FF8C00', darkorchid: '#9932CC', darkred: '#8B0000', darksalmon: '#E9967A', darkseagreen: '#8FBC8F',
|
||||
darkslateblue: '#483D8B', darkslategray: '#2F4F4F', darkslategrey: '#2F4F4F', darkturquoise: '#00CED1', darkviolet: '#9400D3',
|
||||
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) {
|
||||
|
|
@ -36,13 +52,15 @@ function calColor(colors, percent) {
|
|||
// rgb 颜色转换成数组
|
||||
function rgb2arr(str) {
|
||||
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(3, 2), 16));
|
||||
arr.push(parseInt(str.substr(5, 2), 16));
|
||||
return arr;
|
||||
}
|
||||
const colorCache = {};
|
||||
let iEl = null;
|
||||
const ColorUtil = {
|
||||
/**
|
||||
* 将颜色转换到 rgb 的格式
|
||||
|
|
@ -51,33 +69,29 @@ const ColorUtil = {
|
|||
*/
|
||||
toRGB(color) {
|
||||
// 如果已经是 rgb的格式
|
||||
if (color[0] === '#' && color.length === 7) {
|
||||
const colorArray = rgb2arr(color);
|
||||
let colorArray = [ 255, 255, 255, 255 ];
|
||||
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);
|
||||
return colorArray;
|
||||
}
|
||||
if (!iEl) { // 防止防止在页头报错
|
||||
iEl = createTmp();
|
||||
if (RGB_REG.test(color)) {
|
||||
const matchs = RGB_REG.exec(color);
|
||||
colorArray = matchs[1].split(/\s*,\s*/);
|
||||
if (colorArray.length === 4) {
|
||||
colorArray[3] *= 255;
|
||||
}
|
||||
let rst;
|
||||
if (colorCache[color]) {
|
||||
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 (colorArray.length === 3) {
|
||||
colorArray.push(255.0);
|
||||
}
|
||||
if (cArray.length === 3) {
|
||||
cArray.push(255.0);
|
||||
}
|
||||
|
||||
colorCache[color] = cArray;
|
||||
rst = cArray;
|
||||
}
|
||||
return rst;
|
||||
colorCache[color] = colorArray;
|
||||
return colorArray;
|
||||
},
|
||||
// 转成 WebGl color buffer
|
||||
color2Arr(str) {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@ export default class PickContoller {
|
|||
}
|
||||
addPickMesh(mesh) {
|
||||
const pickmaterial = mesh.material.clone();
|
||||
pickmaterial.fragmentShader = pickingFragmentShader;
|
||||
pickmaterial.defines.PICK = true;
|
||||
// pickmaterial.fragmentShader = pickingFragmentShader;
|
||||
const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial);
|
||||
pickingMesh.name = mesh.name;
|
||||
pickingMesh.onBeforeRender = () => {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ export default function PickingMaterial(options) {
|
|||
uniforms: {
|
||||
u_zoom: { value: options.u_zoom || 1 }
|
||||
},
|
||||
defines: {
|
||||
PICK: true
|
||||
},
|
||||
vertexShader: options.vs,
|
||||
fragmentShader: picking_frag,
|
||||
transparent: false
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default class Renderer {
|
|||
this.renderer.setPixelRatio(this.pixelRatio);
|
||||
this.renderer.gammaInput = true;
|
||||
this.renderer.gammaOutput = true;
|
||||
this.renderer.shadowMap.enabled = true;
|
||||
this.renderer.shadowMap.enabled = false;
|
||||
this.container.appendChild(this.renderer.domElement);
|
||||
}
|
||||
updateSize() {
|
||||
|
|
|
|||
|
|
@ -39,11 +39,12 @@ export default class Layer extends Base {
|
|||
attrs: {},
|
||||
// 样式配置项
|
||||
styleOptions: {
|
||||
stroke: 'none',
|
||||
stroke: [ 1, 1, 1, 1 ],
|
||||
strokeWidth: 1.0,
|
||||
opacity: 1.0,
|
||||
strokeOpacity: 1.0,
|
||||
texture: false
|
||||
texture: false,
|
||||
blending: 'normal'
|
||||
},
|
||||
destroyed: false,
|
||||
// 选中时的配置项
|
||||
|
|
@ -68,6 +69,8 @@ export default class Layer extends Base {
|
|||
this._object3D.renderOrder = this.get('zIndex') || 0;
|
||||
this._mapEventHandlers = [];
|
||||
const layerId = this._getUniqueId();
|
||||
this.set('layerId', layerId);
|
||||
this.set('mapType', this.scene.mapType);
|
||||
this.layerId = layerId;
|
||||
this._activeIds = null;
|
||||
const world = scene._engine.world;
|
||||
|
|
@ -75,7 +78,6 @@ export default class Layer extends Base {
|
|||
this.layerMesh = null;
|
||||
this.layerLineMesh = null;
|
||||
this._initEvents();
|
||||
|
||||
}
|
||||
/**
|
||||
* 将图层添加加到 Object
|
||||
|
|
@ -127,7 +129,23 @@ export default class Layer extends Base {
|
|||
this.set('visible', visible);
|
||||
this._object3D.visible = this.get('visible');
|
||||
}
|
||||
// 兼容瓦片source，非瓦片source
|
||||
|
||||
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) {
|
||||
this.layerSource = data;
|
||||
return this;
|
||||
|
|
@ -244,9 +262,6 @@ export default class Layer extends Base {
|
|||
Util.assign(animateOptions, cfg);
|
||||
this.set('animateOptions', animateOptions);
|
||||
return this;
|
||||
}
|
||||
texture() {
|
||||
|
||||
}
|
||||
fitBounds() {
|
||||
const extent = this.layerSource.data.extent;
|
||||
|
|
@ -276,13 +291,13 @@ export default class Layer extends Base {
|
|||
}
|
||||
_setAttrOptions(attrName, attrCfg) {
|
||||
const options = this.get('attrOptions');
|
||||
|
||||
if (attrName === 'size' && this._zoomScale) {
|
||||
attrCfg.zoom = this.map.getZoom();
|
||||
}
|
||||
options[attrName] = attrCfg;
|
||||
}
|
||||
_createAttrOption(attrName, field, cfg, defaultValues) {
|
||||
|
||||
const attrCfg = {};
|
||||
attrCfg.field = field;
|
||||
if (cfg) {
|
||||
|
|
@ -306,6 +321,10 @@ export default class Layer extends Base {
|
|||
}
|
||||
|
||||
render() {
|
||||
if (this.get('layerType') === 'tile') {
|
||||
this.scene.style.update(this._attrs);
|
||||
return this;
|
||||
}
|
||||
this.init();
|
||||
this.scene._engine.update();
|
||||
return this;
|
||||
|
|
@ -386,8 +405,8 @@ export default class Layer extends Base {
|
|||
const nextStyle = this.get('styleOptions');
|
||||
if (preAttrs === undefined && preStyle === undefined) { // 首次渲染
|
||||
// this._mapping();
|
||||
// this._scaleByZoom();
|
||||
this._setPreOption();
|
||||
this._scaleByZoom();
|
||||
this._initInteraction();
|
||||
this._initMapEvent();
|
||||
this.draw();
|
||||
|
|
@ -460,6 +479,7 @@ export default class Layer extends Base {
|
|||
this.scene.on('pick-' + this.layerId, e => {
|
||||
let { featureId, point2d, type } = e;
|
||||
// TODO 瓦片图层获取选中数据信息
|
||||
|
||||
const lnglat = this.scene.containerToLngLat(point2d);
|
||||
let feature = null;
|
||||
let style = null;
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@ import { LAYER_MAP } from '../layer';
|
|||
import Base from './base';
|
||||
import LoadImage from './image';
|
||||
import FontAtlasManager from '../geom/buffer/point/text/font-manager';
|
||||
// import WorkerPool from './worker';
|
||||
// import { MapProvider } from '../map/AMap';
|
||||
import { getMap } from '../map/index';
|
||||
import Global from '../global';
|
||||
import { getInteraction } from '../interaction/index';
|
||||
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 {
|
||||
getDefaultCfg() {
|
||||
return Global.scene;
|
||||
|
|
@ -16,6 +17,7 @@ export default class Scene extends Base {
|
|||
constructor(cfg) {
|
||||
super(cfg);
|
||||
this._initMap();
|
||||
this.crs = epsg3857;
|
||||
// this._initAttribution(); // 暂时取消，后面作为组件去加载
|
||||
this.addImage();
|
||||
this.fontAtlasManager = new FontAtlasManager();
|
||||
|
|
@ -25,8 +27,8 @@ export default class Scene extends Base {
|
|||
|
||||
_initEngine(mapContainer) {
|
||||
this._engine = new Engine(mapContainer, this);
|
||||
this.registerMapEvent();
|
||||
// this._engine.run();
|
||||
// this.registerMapEvent();
|
||||
this._engine.run();
|
||||
compileBuiltinModules();
|
||||
}
|
||||
// 为pickup场景添加 object 对象
|
||||
|
|
@ -52,6 +54,7 @@ export default class Scene extends Base {
|
|||
const interaction = new Ctor({ layer: this });
|
||||
interaction._onHashChange();
|
||||
}
|
||||
this.style = new Style(this, {});
|
||||
this.emit('loaded');
|
||||
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) {
|
||||
if (this.map) { this.map.on(type, hander); }
|
||||
super.on(type, hander);
|
||||
|
|
|
|||
|
|
@ -33,8 +33,10 @@ export default class Source extends Base {
|
|||
// 数据转换 统计，聚合，分类
|
||||
this._executeTrans();
|
||||
// 坐标转换
|
||||
if (!this.get('projected')) {
|
||||
this._projectCoords();
|
||||
}
|
||||
}
|
||||
setData(data, cfg = {}) {
|
||||
Object.assign(this._attrs, cfg);
|
||||
const transform = this.get('transforms');
|
||||
|
|
@ -60,7 +62,7 @@ export default class Source extends Base {
|
|||
// dataArray: clone(this.originData.dataArray)
|
||||
// }; // TODO 关闭数据备份
|
||||
this.data = this.originData;
|
||||
if (this.data !== null) {
|
||||
if (this.data !== null && !this.get('projected')) {
|
||||
this.data.extent = extent(this.data.dataArray);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
// 计算视野内的瓦片坐标
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import 'three/src/polyfills.js';
|
||||
import { BufferAttribute } from 'three/src/core/BufferAttribute.js';
|
||||
export * from 'three/src/constants.js';
|
||||
export { Scene } from 'three/src/scenes/Scene.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 {
|
||||
Float64BufferAttribute,
|
||||
Float32BufferAttribute,
|
||||
// Float32BufferAttribute,
|
||||
Uint32BufferAttribute,
|
||||
Int32BufferAttribute,
|
||||
Uint16BufferAttribute,
|
||||
|
|
@ -43,3 +44,14 @@ export {
|
|||
|
||||
export { InstancedBufferAttribute } from 'three/src/core/InstancedBufferAttribute'
|
||||
// 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,4 +1,3 @@
|
|||
import Worker from '../worker/main.worker.js';
|
||||
class WorkerPool {
|
||||
constructor(workerCount) {
|
||||
this.workerCount = workerCount || Math.max(Math.floor(window.navigator.hardwareConcurrency / 2), 1);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,10 +1,14 @@
|
|||
import BufferBase from '../bufferBase';
|
||||
// import BufferBase from '../bufferBase';
|
||||
import { colorScales } from '../../../attr/colorscales';
|
||||
import * as THREE from '../../../core/three';
|
||||
import Base from '../../../core/base';
|
||||
|
||||
|
||||
export default class HeatmapBuffer extends BufferBase {
|
||||
geometryBuffer() {
|
||||
export default class HeatmapBuffer extends Base {
|
||||
constructor(cfg) {
|
||||
super(cfg);
|
||||
this.init();
|
||||
}
|
||||
init() {
|
||||
const data = this.get('data');
|
||||
const positions = [];
|
||||
const dirs = [];
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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]() ]);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
import BufferBase from './bufferBase';
|
||||
// import BufferBase from './bufferBase';
|
||||
import Util from '../../util';
|
||||
import * as THREE from '../../core/three';
|
||||
|
||||
export default class ImageBuffer extends BufferBase {
|
||||
geometryBuffer() {
|
||||
import Base from '../../core/base';
|
||||
export default class ImageBuffer extends Base {
|
||||
constructor(cfg) {
|
||||
super(cfg);
|
||||
this.init();
|
||||
}
|
||||
init() {
|
||||
const layerData = this.get('layerData');
|
||||
const coordinates = layerData[0].coordinates;
|
||||
const images = layerData[0].images;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,46 @@
|
|||
export { default as PolygonBuffer } from './polygon';
|
||||
export { default as PointBuffer } from './point';
|
||||
export { default as LineBuffer } from './line';
|
||||
export { default as polygonLineBuffer } from './polygon-line';
|
||||
// export { default as textBuffer } from './textBuffer';
|
||||
|
||||
// Polygon
|
||||
|
||||
import FillBuffer from './polygon/fill_buffer';
|
||||
import LineBuffer from './polygon/line_buffer';
|
||||
import ExtrudeBuffer from './polygon/extrude_buffer';
|
||||
// Point
|
||||
import PointFillBuffer from './point/fill_buffer2';
|
||||
|
||||
// Line
|
||||
import MeshLineBuffer from './line/meshline';
|
||||
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 };
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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 ];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,15 +11,17 @@ const LEFT_SHIFT21 = 2097152.0;
|
|||
const LEFT_SHIFT23 = 8388608.0;
|
||||
// const LEFT_SHIFT24 = 16777216.0;
|
||||
|
||||
export default function circleBuffer(layerData) {
|
||||
export default function FillBuffer(data) {
|
||||
const index = [];
|
||||
const aPosition = [];
|
||||
const aPackedData = [];
|
||||
|
||||
const { layerData } = data;
|
||||
layerData.forEach(({ size = 0, color, id, coordinates, shape }, i) => {
|
||||
|
||||
const shapeIndex = pointShape['2d'].indexOf(shape) || 0;
|
||||
|
||||
let newCoord = coordinates;
|
||||
if (coordinates.length === 1) {
|
||||
newCoord = coordinates[0][0];
|
||||
}
|
||||
if (isNaN(size)) {
|
||||
size = 0;
|
||||
}
|
||||
|
|
@ -46,14 +48,15 @@ export default function circleBuffer(layerData) {
|
|||
id
|
||||
);
|
||||
});
|
||||
|
||||
// TODO：如果使用相对瓦片坐标，还可以进一步压缩
|
||||
aPosition.push(...coordinates, ...coordinates, ...coordinates, ...coordinates);
|
||||
aPosition.push(...newCoord, ...newCoord, ...newCoord, ...newCoord);
|
||||
index.push(...[ 0, 1, 2, 0, 2, 3 ].map(n => n + i * 4));
|
||||
});
|
||||
return {
|
||||
aPosition,
|
||||
index,
|
||||
aPackedData
|
||||
attributes: {
|
||||
aPosition: new Float32Array(aPosition),
|
||||
aPackedData: new Float32Array(aPackedData)
|
||||
},
|
||||
indexArray: new Int32Array(index)
|
||||
};
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
export { default as FillBuffer } from './fillBuffer';
|
||||
export { default as StrokeBuffer } from './strokeBuffer';
|
||||
export { default as ImageBuffer } from './imageBuffer';
|
||||
export { default as ImageBuffer } from './image_buffer';
|
||||
export { default as NormalBuffer } from './normalBuffer';
|
||||
export { default as CircleBuffer } from './circleBuffer';
|
||||
export { default as CircleBuffer } from './fill_buffer';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
import BufferBase from './bufferBase';
|
||||
// import BufferBase from './bufferBase';
|
||||
import { colorScales } from '../../attr/colorscales';
|
||||
import * as THREE from '../../core/three';
|
||||
export class RasterBuffer extends BufferBase {
|
||||
geometryBuffer() {
|
||||
import Base from '../../core/base';
|
||||
export class RasterBuffer extends Base {
|
||||
constructor(cfg) {
|
||||
super(cfg);
|
||||
this.init();
|
||||
}
|
||||
init() {
|
||||
const layerData = this.get('layerData');
|
||||
const { coordinates, width, data, height } = layerData.dataArray[0];
|
||||
const positions = [
|
||||
|
|
@ -21,12 +26,12 @@ export class RasterBuffer extends BufferBase {
|
|||
const colors = this.get('rampColors');
|
||||
const colorImageData = this.getColorRamp(colors);
|
||||
const colorTexture = this._getTexture(colorImageData); // 颜色纹理
|
||||
this.bufferStruct.position = positions;
|
||||
this.bufferStruct.uv = imgPosUv;
|
||||
this.bufferStruct.u_raster = texture;//
|
||||
this.bufferStruct.u_extent = [ coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1] ];
|
||||
this.bufferStruct.u_colorTexture = colorTexture; // 颜色表‘=
|
||||
const triangles = this._buildTriangles(width, height, size, this.bufferStruct.u_extent);
|
||||
this.position = positions;
|
||||
this.uv = imgPosUv;
|
||||
this.u_raster = texture;//
|
||||
this.u_extent = [ coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1] ];
|
||||
this.u_colorTexture = colorTexture; // 颜色表‘=
|
||||
const triangles = this._buildTriangles(width, height, size, this.u_extent);
|
||||
const attributes = {
|
||||
vertices: new Float32Array(triangles.vertices),
|
||||
uvs: new Float32Array(triangles.uvs),
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import earcut from 'earcut';
|
||||
|
||||
import * as THREE from '../core/three';
|
||||
/**
|
||||
* 计算是否拉伸
|
||||
* @param {Array} points 点坐标数组
|
||||
|
|
@ -14,7 +14,6 @@ export default function extrudePolygon(points, extrude) {
|
|||
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 = [];
|
||||
|
|
@ -60,7 +59,7 @@ export default function extrudePolygon(points, extrude) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
points = [];
|
||||
return {
|
||||
positions,
|
||||
faceUv,
|
||||
|
|
@ -100,8 +99,71 @@ export function extrudePolygonLine(points, extrude) {
|
|||
}
|
||||
}
|
||||
}
|
||||
points = [];
|
||||
return {
|
||||
positions,
|
||||
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 ];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import Material from './material';
|
||||
import { getModule, wrapUniforms } from '../../util/shaderModule';
|
||||
import merge from '@antv/util/lib/deep-mix';
|
||||
|
||||
export default class CircleMaterial extends Material {
|
||||
constructor(_uniforms, _defines, parameters) {
|
||||
constructor(_uniforms, _defines = {}, parameters) {
|
||||
super(parameters);
|
||||
const { vs, fs, uniforms } = getModule('circle');
|
||||
this.uniforms = wrapUniforms(merge(uniforms, _uniforms));
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
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 {
|
||||
getDefaultParameters() {
|
||||
return {
|
||||
|
|
@ -19,9 +20,9 @@ export default class GridMaterial extends Material {
|
|||
}
|
||||
constructor(_uniforms, _defines, parameters) {
|
||||
super(parameters);
|
||||
const { uniforms, defines } = this.getDefaultParameters();
|
||||
const { vs, fs } = getModule('grid');
|
||||
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
|
||||
const { defines } = this.getDefaultParameters();
|
||||
const { vs, fs, uniforms } = getModule('grid');
|
||||
this.uniforms = wrapUniforms(merge(uniforms, _uniforms));
|
||||
this.type = 'GridMaterial';
|
||||
this.defines = Object.assign(defines, _defines);
|
||||
this.vertexShader = vs;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
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 {
|
||||
getDefaultParameters() {
|
||||
return {
|
||||
|
|
@ -19,9 +20,9 @@ export default class hexagonMaterial extends Material {
|
|||
}
|
||||
constructor(_uniforms, _defines, parameters) {
|
||||
super(parameters);
|
||||
const { uniforms, defines } = this.getDefaultParameters();
|
||||
const { vs, fs } = getModule('hexagon');
|
||||
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
|
||||
const { defines } = this.getDefaultParameters();
|
||||
const { vs, fs, uniforms } = getModule('hexagon');
|
||||
this.uniforms = wrapUniforms(merge(uniforms, _uniforms));
|
||||
this.type = 'hexagonMaterial';
|
||||
this.defines = Object.assign(defines, _defines);
|
||||
this.vertexShader = vs;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
|
||||
import * as THREE from '../../core/three';
|
||||
const blendingEnum = {
|
||||
normal: 'NormalBlending',
|
||||
additive: 'AdditiveBlending',
|
||||
subtractive: 'SubtractiveBlending'
|
||||
};
|
||||
export default class Material extends THREE.ShaderMaterial {
|
||||
setUniformsValue(name, value) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
|
||||
import Material from './material';
|
||||
import * as THREE from '../../core/three';
|
||||
import { getModule } from '../../util/shaderModule';
|
||||
import picking_frag from '../../core/engine/picking//picking_frag.glsl';
|
||||
export default class PointMaterial extends Material {
|
||||
getDefaultParameters() {
|
||||
return {
|
||||
|
|
@ -26,7 +28,8 @@ export default class PointMaterial extends Material {
|
|||
this.vertexShader = vs;
|
||||
this.fragmentShader = fs;
|
||||
this.transparent = true;
|
||||
// if (!this.uniforms.shape) { this.blending = THREE.AdditiveBlending; }
|
||||
|
||||
if (!this.uniforms.shape) { this.blending = THREE.AdditiveBlending; }
|
||||
if (this.uniforms.u_texture) {
|
||||
this.defines.TEXCOORD_0 = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
if(v_color.a == 0.){
|
||||
discard;
|
||||
}
|
||||
#pragma include "pick"
|
||||
gl_FragColor = v_color;
|
||||
gl_FragColor.a = v_color.a*u_opacity;
|
||||
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@ void main() {
|
|||
if(pickingId == u_activeId) {
|
||||
v_color = u_activeColor;
|
||||
}
|
||||
#ifdef PICK
|
||||
worldId = id_toPickColor(pickingId);
|
||||
#endif
|
||||
|
||||
}
|
||||
|
|
@ -11,7 +11,8 @@ varying float v_radius;
|
|||
#pragma include "sdf_2d"
|
||||
|
||||
void main() {
|
||||
int shape = int(floor(v_data.w + 0.5));
|
||||
// int shape = int(floor(v_data.w + 0.5));
|
||||
int shape = 0;
|
||||
|
||||
lowp float antialiasblur = v_data.z;
|
||||
float antialiased_blur = -max(u_blur, antialiasblur);
|
||||
|
|
@ -57,5 +58,6 @@ void main() {
|
|||
inner_df
|
||||
);
|
||||
|
||||
gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity, color_t);
|
||||
gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity * v_color.a, color_t);
|
||||
#pragma include "pick"
|
||||
}
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
attribute vec4 a_packed_data;
|
||||
// attribute vec4 a_packed_data;
|
||||
attribute vec4 a_color;
|
||||
attribute float a_size;
|
||||
attribute float a_shape;
|
||||
attribute vec2 miter;
|
||||
|
||||
uniform float u_zoom : 1;
|
||||
uniform float u_stroke_width : 2;
|
||||
|
|
@ -13,43 +17,47 @@ varying float v_radius;
|
|||
|
||||
void main() {
|
||||
// unpack color(vec2)
|
||||
v_color = decode_color(a_packed_data.xy);
|
||||
// unpack picking_id
|
||||
float picking_id = a_packed_data.w;
|
||||
// v_color = decode_color(a_packed_data.xy);
|
||||
v_color = a_color;
|
||||
// unpack pickingId
|
||||
// float pickingId = a_packed_data.w;
|
||||
// float pickingId = .w;
|
||||
|
||||
// unpack data(extrude(4-bit), radius(16-bit))
|
||||
float compressed = a_packed_data.z;
|
||||
// float compressed = a_packed_data.z;
|
||||
|
||||
// extrude(4-bit)
|
||||
vec2 extrude;
|
||||
extrude.x = floor(compressed * SHIFT_RIGHT23);
|
||||
compressed -= extrude.x * SHIFT_LEFT23;
|
||||
extrude.x = extrude.x - 1.;
|
||||
// // extrude(4-bit)
|
||||
vec2 extrude = miter;
|
||||
// extrude.x = floor(compressed * SHIFT_RIGHT23);
|
||||
// compressed -= extrude.x * SHIFT_LEFT23;
|
||||
// extrude.x = extrude.x - 1.;
|
||||
|
||||
extrude.y = floor(compressed * SHIFT_RIGHT21);
|
||||
compressed -= extrude.y * SHIFT_LEFT21;
|
||||
extrude.y = extrude.y - 1.;
|
||||
// extrude.y = floor(compressed * SHIFT_RIGHT21);
|
||||
// compressed -= extrude.y * SHIFT_LEFT21;
|
||||
// extrude.y = extrude.y - 1.;
|
||||
|
||||
float shape_type = floor(compressed * SHIFT_RIGHT17);
|
||||
compressed -= shape_type * SHIFT_LEFT17;
|
||||
// float shape_type = floor(compressed * SHIFT_RIGHT17);
|
||||
// compressed -= shape_type * SHIFT_LEFT17;
|
||||
|
||||
// radius(16-bit)
|
||||
float radius = compressed;
|
||||
float radius = a_size;
|
||||
v_radius = radius;
|
||||
|
||||
float zoom_scale = pow(2., 20. - u_zoom);
|
||||
vec2 offset = extrude * (radius + u_stroke_width) * zoom_scale;
|
||||
vec2 offset = miter * (radius + u_stroke_width) * zoom_scale;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy + offset, 0.0, 1.0);
|
||||
|
||||
// anti-alias
|
||||
float antialiasblur = 1.0 / (radius + u_stroke_width);
|
||||
|
||||
// construct point coords
|
||||
v_data = vec4(extrude, antialiasblur, shape_type);
|
||||
v_data = vec4(extrude, antialiasblur, a_shape);
|
||||
|
||||
// picking
|
||||
if(picking_id == u_activeId) {
|
||||
if(pickingId == u_activeId) {
|
||||
v_color = u_activeColor;
|
||||
}
|
||||
worldId = id_toPickColor(picking_id);
|
||||
#ifdef PICK
|
||||
worldId = id_toPickColor(pickingId);
|
||||
#endif
|
||||
}
|
||||
|
|
@ -90,6 +90,8 @@ void main() {
|
|||
if(pickingId == u_activeId) {
|
||||
v_color = u_activeColor;
|
||||
}
|
||||
#ifdef PICK
|
||||
worldId = id_toPickColor(pickingId);
|
||||
#endif
|
||||
|
||||
}
|
||||
|
|
@ -2,4 +2,5 @@
|
|||
varying vec4 v_color;
|
||||
void main() {
|
||||
gl_FragColor = v_color;
|
||||
#pragma include "pick"
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
precision highp float;
|
||||
attribute vec2 miter;
|
||||
attribute vec3 miter;
|
||||
attribute vec4 a_color;
|
||||
uniform float u_xOffset;
|
||||
uniform float u_yOffset;
|
||||
|
|
@ -9,15 +9,29 @@ uniform float u_activeId;
|
|||
uniform vec4 u_activeColor;
|
||||
varying vec4 v_color;
|
||||
|
||||
#pragma include "lighting"
|
||||
|
||||
void main() {
|
||||
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
|
||||
v_color = a_color;
|
||||
v_color.a *= u_opacity;
|
||||
|
||||
if(pickingId == u_activeId) {
|
||||
v_color = u_activeColor;
|
||||
}
|
||||
float x = position.x + miter.x * u_xOffset * 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);
|
||||
#endif
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
precision highp float;
|
||||
uniform float u_opacity;
|
||||
varying vec4 v_color;
|
||||
void main() {
|
||||
vec4 color = v_color;
|
||||
gl_FragColor = color;
|
||||
gl_FragColor = v_color;
|
||||
#pragma include "pick"
|
||||
}
|
||||
|
|
@ -1,14 +1,20 @@
|
|||
precision highp float;
|
||||
attribute vec2 miter;
|
||||
// attribute vec2 miter;
|
||||
attribute vec3 miter;
|
||||
attribute vec3 a_shape;
|
||||
attribute float a_size;
|
||||
attribute vec4 a_color;
|
||||
uniform float u_radius;
|
||||
uniform float u_coverage;
|
||||
uniform float u_opacity;
|
||||
uniform float u_angle;
|
||||
|
||||
uniform float u_activeId;
|
||||
uniform vec4 u_activeColor;
|
||||
varying vec4 v_color;
|
||||
|
||||
#pragma include "lighting"
|
||||
|
||||
void main() {
|
||||
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
|
||||
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) {
|
||||
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 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);
|
||||
#endif
|
||||
}
|
||||
|
|
@ -13,6 +13,10 @@ import circle_vert from './circle_vert.glsl';
|
|||
import point_line_frag from '../shader/point_meshLine_frag.glsl';
|
||||
import point_line_vert from '../shader/point_meshLine_vert.glsl';
|
||||
|
||||
// 原生点
|
||||
import normal_point_frag from './normal_point_frag.glsl';
|
||||
import normal_point_vert from './normal_point_vert.glsl';
|
||||
|
||||
// 有宽度的线
|
||||
import mesh_line_frag from '../shader/meshline_frag.glsl';
|
||||
import mesh_line_vert from '../shader/meshline_vert.glsl';
|
||||
|
|
@ -59,6 +63,7 @@ import { registerModule } from '../../util/shaderModule';
|
|||
import pick_color from './shaderChunks/pick_color.glsl';
|
||||
import decode from './shaderChunks/decode.glsl';
|
||||
import lighting from './shaderChunks/lighting.glsl';
|
||||
import pick from './shaderChunks/pick.glsl';
|
||||
import sdf_2d from './shaderChunks/sdf_2d.glsl';
|
||||
import project from './shaderChunks/project.glsl';
|
||||
|
||||
|
|
@ -67,6 +72,7 @@ export function compileBuiltinModules() {
|
|||
registerModule('common', { vs: common, fs: common });
|
||||
registerModule('decode', { vs: decode, fs: '' });
|
||||
registerModule('lighting', { vs: lighting, fs: '' });
|
||||
registerModule('pick', { vs: '', fs: pick });
|
||||
registerModule('sdf_2d', { vs: '', fs: sdf_2d });
|
||||
registerModule('project', { vs: project, fs: '' });
|
||||
registerModule('pick_color', { vs: pick_color, fs: pick_color });
|
||||
|
|
@ -75,6 +81,7 @@ export function compileBuiltinModules() {
|
|||
registerModule('grid', { vs: grid_vert, fs: grid_frag });
|
||||
registerModule('hexagon', { vs: hexagon_vert, fs: hexagon_frag });
|
||||
registerModule('pointline', { vs: point_line_vert, fs: point_line_frag });
|
||||
registerModule('pointnormal', { vs: normal_point_vert, fs: normal_point_frag });
|
||||
registerModule('meshline', { vs: mesh_line_vert, fs: mesh_line_frag });
|
||||
registerModule('arcline', { vs: arc_line_vert, fs: arc_line_frag });
|
||||
registerModule('greatcircle', { vs: great_circle_line_vert, fs: arc_line_frag });
|
||||
|
|
|
|||
|
|
@ -11,4 +11,5 @@
|
|||
color.a= color.a * vTime * 1.5;
|
||||
#endif
|
||||
gl_FragColor = color;
|
||||
#pragma include "pick"
|
||||
}
|
||||
|
|
@ -19,5 +19,7 @@ void main() {
|
|||
// vTime = 1.0- (28800. + mod(u_time* 10.,28800.)- position.z / 1000.) / 100.;
|
||||
#endif
|
||||
gl_Position = matModelViewProjection * vec4(position.xy, 10., 1.0);
|
||||
#ifdef PICK
|
||||
worldId = id_toPickColor(pickingId);
|
||||
#endif
|
||||
}
|
||||
|
|
@ -45,4 +45,5 @@ void main() {
|
|||
// anti-alias
|
||||
float blur = 1. - smoothstep(u_blur, 1., length(v_normal));
|
||||
gl_FragColor.a *= blur;
|
||||
#pragma include "pick"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,5 +67,7 @@ void main() {
|
|||
if(pickingId == u_activeId) {
|
||||
v_color = u_activeColor;
|
||||
}
|
||||
#ifdef PICK
|
||||
worldId = id_toPickColor(pickingId);
|
||||
#endif
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
precision highp float;
|
||||
varying vec4 v_color;
|
||||
void main(){
|
||||
gl_FragColor=v_color;
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
@ -12,63 +12,63 @@ varying vec2 v_rs;
|
|||
varying vec2 v_uv;
|
||||
varying vec4 v_color;
|
||||
varying float v_shape;
|
||||
const float u_buffer = 0.75;
|
||||
const float u_buffer=.75;
|
||||
// const float u_gamma = 2.0 * 1.4142 / 10.0;
|
||||
const float u_gamma = 0.08;
|
||||
const float u_gamma=.08;
|
||||
// const float u_scale = 128.0;
|
||||
const vec3 halo = vec3( 1.0 );
|
||||
void main() {
|
||||
const vec3 halo=vec3(1.);
|
||||
void main(){
|
||||
// 纹理坐标
|
||||
#ifdef TEXCOORD_0
|
||||
vec2 pos = v_uv + gl_PointCoord / 512.0 * 64.0;
|
||||
pos.y = 1.0 - pos.y;
|
||||
vec4 textureColor = texture2D(u_texture, pos);
|
||||
gl_FragColor =textureColor;
|
||||
vec2 pos=v_uv+gl_PointCoord/512.*64.;
|
||||
pos.y=1.-pos.y;
|
||||
vec4 textureColor=texture2D(u_texture,pos);
|
||||
gl_FragColor=textureColor;
|
||||
return;
|
||||
#endif
|
||||
if(v_color.a == 0.)
|
||||
if(v_color.a==0.)
|
||||
discard;
|
||||
vec4 pcolor = v_color;
|
||||
float ro = v_rs.x;
|
||||
float ri = v_rs.y;
|
||||
float d = 0.0;
|
||||
if(ro < 3.0) {
|
||||
gl_FragColor = pcolor;
|
||||
vec4 pcolor=v_color;
|
||||
float ro=v_rs.x;
|
||||
float ri=v_rs.y;
|
||||
float d=0.;
|
||||
if(ro<3.){
|
||||
gl_FragColor=pcolor;
|
||||
return;
|
||||
}
|
||||
|
||||
// vec4 textureColor = texture2D(u_texture, gl_PointCoord);
|
||||
vec2 st = gl_PointCoord * 2. - 1.;
|
||||
float a = atan(st.x,st.y)+PI ;
|
||||
float r = TWO_PI/ v_shape;
|
||||
float ratio =1.0 + (1.1 - smoothstep(2.8, 6.0,v_shape));
|
||||
float dis2center = cos(floor(.5+a/r)*r-a)*length(st) * ro * ratio;
|
||||
float alpha = smoothstep(ro,ro+0.1, dis2center);
|
||||
vec2 st=gl_PointCoord*2.-1.;
|
||||
float a=atan(st.x,st.y)+PI;
|
||||
float r=TWO_PI/v_shape;
|
||||
float ratio=1.+(1.1-smoothstep(2.8,6.,v_shape));
|
||||
float dis2center=cos(floor(.5+a/r)*r-a)*length(st)*ro*ratio;
|
||||
float alpha=smoothstep(ro,ro+.1,dis2center);
|
||||
|
||||
if(alpha == 1.) {
|
||||
if(alpha==1.){
|
||||
discard;
|
||||
}
|
||||
if(u_strokeWidth > 0.0){//有border
|
||||
if(dis2center> ro- u_strokeWidth ){
|
||||
gl_FragColor = vec4(u_stroke.xyz,u_stroke.a*(ro- dis2center));
|
||||
if(u_strokeWidth>0.){//有border
|
||||
if(dis2center>ro-u_strokeWidth){
|
||||
gl_FragColor=vec4(u_stroke.xyz,u_stroke.a*(ro-dis2center));
|
||||
return;
|
||||
}else if(dis2center>ri){
|
||||
gl_FragColor= u_stroke;
|
||||
gl_FragColor=u_stroke;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if(dis2center > ri- u_strokeWidth){
|
||||
float factor = ri-dis2center;//填充色的百分比
|
||||
if (u_strokeWidth == 0.0) {
|
||||
float a = pcolor.a*factor;
|
||||
gl_FragColor = vec4(pcolor.rgb, a);
|
||||
} else {
|
||||
float a = u_stroke.a*(1.0-factor) +pcolor.a*factor;
|
||||
gl_FragColor = vec4(u_stroke.rgb * (1.0-factor) + pcolor.rgb * factor, a);
|
||||
if(dis2center>ri-u_strokeWidth){
|
||||
float factor=ri-dis2center;//填充色的百分比
|
||||
if(u_strokeWidth==0.){
|
||||
float a=pcolor.a*factor;
|
||||
gl_FragColor=vec4(pcolor.rgb,a);
|
||||
}else{
|
||||
float a=u_stroke.a*(1.-factor)+pcolor.a*factor;
|
||||
gl_FragColor=vec4(u_stroke.rgb*(1.-factor)+pcolor.rgb*factor,a);
|
||||
}
|
||||
} else{
|
||||
gl_FragColor= pcolor;
|
||||
}else{
|
||||
gl_FragColor=pcolor;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,4 +11,5 @@ void main() {
|
|||
}
|
||||
#endif
|
||||
gl_FragColor = v_color;
|
||||
#pragma include "pick"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@ if(v_pickingId == u_activeId) {
|
|||
//vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
|
||||
vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * scale / 2.0 * a_miter);
|
||||
gl_Position = matModelViewProjection * vec4(pointPos, 1.0);
|
||||
worldId = id_toPickColor(pickingId);
|
||||
#ifdef PICK
|
||||
worldId = id_toPickColor(pickingId);
|
||||
#endif
|
||||
|
||||
}
|
||||
|
|
@ -29,6 +29,8 @@ void main() {
|
|||
#ifdef SHAPE
|
||||
v_shape = a_shape;
|
||||
#endif
|
||||
#ifdef PICK
|
||||
worldId = id_toPickColor(pickingId);
|
||||
#endif
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ varying vec2 v_texCoord;
|
|||
#endif
|
||||
|
||||
varying vec4 v_color;
|
||||
varying vec4 worldId;
|
||||
|
||||
|
||||
vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {
|
||||
float s = step(hot, n);
|
||||
|
|
@ -109,5 +109,6 @@ void main() {
|
|||
#else
|
||||
gl_FragColor = vec4(v_color.xyz , v_color.w);
|
||||
#endif
|
||||
#pragma include "pick"
|
||||
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ varying vec4 v_color;
|
|||
|
||||
uniform float u_zoom : 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];
|
||||
|
||||
#pragma include "lighting"
|
||||
|
|
@ -37,7 +37,7 @@ void main() {
|
|||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position + offset, 1.);
|
||||
|
||||
#ifdef LIGHTING
|
||||
if (normal != vec3(0., 0., 1.)) {
|
||||
if (normal != vec3(0., 0., 1.0)) {
|
||||
vec3 viewDir = normalize(cameraPosition - position);
|
||||
v_color.rgb *= calc_lighting(position, normal, viewDir);
|
||||
}
|
||||
|
|
@ -46,5 +46,7 @@ void main() {
|
|||
if(pickingId == u_activeId) {
|
||||
v_color = u_activeColor;
|
||||
}
|
||||
#ifdef PICK
|
||||
worldId = id_toPickColor(pickingId);
|
||||
#endif
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
#ifdef PICK
|
||||
if(worldId.x == 0. &&worldId.y == 0. && worldId.z==0.){
|
||||
discard;
|
||||
return;
|
||||
}
|
||||
gl_FragColor = worldId;
|
||||
return;
|
||||
#endif
|
||||
|
|
@ -28,4 +28,5 @@ void main(){
|
|||
}
|
||||
|
||||
}
|
||||
#pragma include "pick"
|
||||
}
|
||||
|
|
@ -21,6 +21,8 @@ void main(){
|
|||
v_color=u_activeColor;
|
||||
}
|
||||
v_texcoord=uv/u_textTextureSize;
|
||||
worldId=id_toPickColor(pickingId);
|
||||
#ifdef PICK
|
||||
worldId = id_toPickColor(pickingId);
|
||||
#endif
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
precision highp float;
|
||||
void main() {
|
||||
gl_FragColor = vec4(1.0);
|
||||
gl_FragColor = vec4(0.0,0.,0.,1.0);
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ export function polygonPath(pointCount, start = 0) {
|
|||
const step = Math.PI * 2 / pointCount;
|
||||
const line = [];
|
||||
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 x = Math.sin(t + Math.PI / 4),
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
* @author dxq613
|
||||
*/
|
||||
// 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 Global = {
|
||||
version: '1.2.0-beta.3',
|
||||
version,
|
||||
scene: {
|
||||
mapType: 'AMAP',
|
||||
zoom: 5,
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
|
||||
// import Util from './util';
|
||||
import Scene from './core/scene';
|
||||
import Global from './global';
|
||||
import Source from './core/source';
|
||||
import TileSource from './source/tileSource';
|
||||
import TileSource from './source/tile_source';
|
||||
import { registerParser, registerTransform } from './source';
|
||||
import { registerInteraction, getInteraction } from './interaction';
|
||||
import { registerLayer } from './layer';
|
||||
const version = Global.version;
|
||||
export {
|
||||
const exported = {
|
||||
version,
|
||||
Scene,
|
||||
Source,
|
||||
|
|
@ -19,4 +17,4 @@ export {
|
|||
registerInteraction,
|
||||
getInteraction
|
||||
};
|
||||
|
||||
export default exported;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Interaction from './base';
|
||||
import { throttle } from '@antv/util';
|
||||
import throttle from '../util/throttle';
|
||||
export default class Hash extends Interaction {
|
||||
constructor(cfg) {
|
||||
super({
|
||||
|
|
@ -7,7 +7,7 @@ export default class Hash extends Interaction {
|
|||
...cfg
|
||||
});
|
||||
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() {
|
||||
this._updateHash();
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ export default class HeatMapLayer extends Layer {
|
|||
}
|
||||
draw() {
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import { registerLayer } from './factory';
|
||||
import PolygonLayer from './polygonLayer';
|
||||
import PointLayer from './pointLayer';
|
||||
import LineLayer from './lineLayer';
|
||||
import ImageLayer from './imageLayer';
|
||||
import RasterLayer from './rasterLayer';
|
||||
import HeatmapLayer from './heatmapLayer';
|
||||
import TileLayer from './tile/tileLayer';
|
||||
import ImageTileLayer from './tile/imageTileLayer';
|
||||
import VectorTileLayer from './tile/VectorTileLayer';
|
||||
import PolygonLayer from './polygon_layer';
|
||||
import PointLayer from './point_layer';
|
||||
import LineLayer from './line_layer';
|
||||
import ImageLayer from './image_layer';
|
||||
import RasterLayer from './raster_layer';
|
||||
import HeatmapLayer from './heatmap_layer';
|
||||
import TileLayer from './tile/tile_layer';
|
||||
import ImageTileLayer from './tile/image_tile_layer';
|
||||
import VectorTileLayer from './tile/vector_tile_layer';
|
||||
|
||||
registerLayer('PolygonLayer', PolygonLayer);
|
||||
registerLayer('PointLayer', PointLayer);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Layer from '../core/layer';
|
||||
import { getRender } from './render/';
|
||||
import { getRender } from './render';
|
||||
export default class LineLayer extends Layer {
|
||||
shape(type) {
|
||||
this.shapeType = type;
|
||||
|
|
@ -18,6 +18,7 @@ export default class LineLayer extends Layer {
|
|||
}
|
||||
draw() {
|
||||
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';
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import Layer from '../core/layer';
|
||||
import Global from '../global';
|
||||
import { getRender } from './render/';
|
||||
import { getRender } from './render';
|
||||
const { pointShape } = Global;
|
||||
/**
|
||||
* point shape 2d circle, traingle text,image
|
||||
|
|
@ -10,10 +10,14 @@ const { pointShape } = Global;
|
|||
*/
|
||||
|
||||
export default class PointLayer extends Layer {
|
||||
constructor(scene, cfg) {
|
||||
super(scene, cfg);
|
||||
this.set('type', 'point');
|
||||
}
|
||||
draw() {
|
||||
this.type = 'point';
|
||||
this.shapeType = this._getShape();
|
||||
const mesh = getRender(this.type, this.shapeType)(this.layerData, this, this.layerSource);
|
||||
const mesh = getRender(this.type, this.shapeType)(this.layerData, this);
|
||||
this.add(mesh);
|
||||
}
|
||||
|
||||
|
|
@ -31,9 +35,9 @@ export default class PointLayer extends Layer {
|
|||
|
||||
// 2D circle 特殊处理
|
||||
if (pointShape['2d'].indexOf(shape) !== -1) {
|
||||
return 'circle';
|
||||
} else if (pointShape['3d'].indexOf(shape) !== -1) {
|
||||
return 'fill';
|
||||
} else if (pointShape['3d'].indexOf(shape) !== -1) {
|
||||
return 'extrude';
|
||||
} else if (this.scene.image.imagesIds.indexOf(shape) !== -1) {
|
||||
return 'image';
|
||||
}
|
||||
|
|
@ -73,3 +77,4 @@ export default class PointLayer extends Layer {
|
|||
}
|
||||
}
|
||||
}
|
||||
PointLayer.type = 'point';
|
||||
|
|
@ -1,12 +1,18 @@
|
|||
import Layer from '../core/layer';
|
||||
import { getRender } from './render/';
|
||||
import { getRender } from './render';
|
||||
export default class PolygonLayer extends Layer {
|
||||
constructor(scene, cfg) {
|
||||
super(scene, cfg);
|
||||
this.set('type', 'polygon');
|
||||
}
|
||||
shape(type) {
|
||||
this.shape = type;
|
||||
this.set('shape', type);
|
||||
this.set('shapeType', 'polygon');
|
||||
return this;
|
||||
}
|
||||
draw() {
|
||||
this.init();
|
||||
// this.init();
|
||||
this.type = 'polygon';
|
||||
const animateOptions = this.get('animateOptions');
|
||||
if (animateOptions.enable) {
|
||||
|
|
@ -18,3 +24,4 @@ export default class PolygonLayer extends Layer {
|
|||
this.updateFilter(this.layerMesh);
|
||||
}
|
||||
}
|
||||
PolygonLayer.type = 'polygon';
|
||||
|
|
@ -17,10 +17,10 @@ export default class RasterLayer extends Layer {
|
|||
this.initGeometry(buffer.attributes);
|
||||
const rasterConfig = source.data.dataArray[0];
|
||||
const material = new RasterMaterial({
|
||||
u_texture: buffer.bufferStruct.u_raster,
|
||||
u_colorTexture: buffer.bufferStruct.u_colorTexture,
|
||||
u_texture: buffer.u_raster,
|
||||
u_colorTexture: buffer.u_colorTexture,
|
||||
u_opacity: 1.0,
|
||||
u_extent: buffer.bufferStruct.u_extent,
|
||||
u_extent: buffer.u_extent,
|
||||
u_min: rasterConfig.min,
|
||||
u_max: rasterConfig.max,
|
||||
u_dimension: buffer.attributes.dimension
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue