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

feat(build):windows

This commit is contained in:
李正学 2018-11-08 20:56:17 +08:00
parent c603e30e23
commit f8131c657e
33 changed files with 359 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
demos/02_arc_line.html
View File

@ -42,11 +42,14 @@ scene.on('loaded', () => {
})
.shape('arc')
.size(2.0)
.color('value', [ '#002466', '#0D408C', '#105CB3', '#1A76C7', '#2894E0', '#3CB4F0', '#65CEF7', '#98E3FA', '#CFF6FF', '#E8FCFF' ])
.color('rgba(41,66,166,255)')
.style({
opacity:0.5,
})
.animate({enable:true})
.render();
});
});
</script>
</body>
</html>

1
demos/02_normal_line.html
View File

@ -31,6 +31,7 @@ const scene = new L7.Scene({
maxZoom: 10
});
scene.on('loaded', () => {
// $.get('https://gw.alipayobjects.com/os/rmsportal/lZGtNaYGNHtAIkcjVvfp.json', data => {
$.get('https://gw.alipayobjects.com/os/rmsportal/lZGtNaYGNHtAIkcjVvfp.json', data => {
scene.LineLayer({
zIndex: 2

17
demos/03_choropleths_polygon.html
View File

@ -65,7 +65,7 @@ scene.on('loaded', () => {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => {
const citylayer = scene.PolygonLayer()
.source(city)
.color('pm2_5_24h',colorObj.blue)
.color('pm2_5_24h',["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"],)
.shape('fill')
.active({ fill: "#5B2899" })
.style({
@ -76,21 +76,6 @@ scene.on('loaded', () => {
$("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'});
$("#info").html(`<p>${e.feature.properties.area || e.feature.properties.name }<span">${e.feature.properties.aqi || 0}</span></p>`);
})
$('.info-panel input').change(function(){
$(this).next().text($(this).val());
const min = $('.info-panel input').val();
const max = $($('.info-panel input')[1]).val();
citylayer.filter('pm2_5_24h',(value)=>{
return (value>=min && value<=max)
}).render();
})
$('.info-panel select').change(function(){
const color = $(this).val();
citylayer.color('pm2_5_24h',colorObj[color]).render();
citylayer.active({ fill: "red" }).render();
})
});
});

9
demos/07_city.html
View File

@ -22,10 +22,11 @@
const scene = new L7.Scene({
id: 'map',
mapStyle: 'light', // 样式URL
mapStyle: 'dark', // 样式URL
center: [120.174865, 30.245345],
pitch: 45,
zoom: 12.63
zoom: 14.63,
minZoom:10
});
window.scene = scene;
scene.on('loaded', () => {
@ -71,8 +72,8 @@ scene.on('loaded', () => {
})
.source(data)
.shape('extrude')
.size('floor',[10,3000])
.color('rgb(250,250,250)')
.size('floor',[10,1000])
.color('rgba(250,250,250,0.9)')
.render();
});
});

57
demos/taxi.html Normal file
View File

@ -0,0 +1,57 @@
<!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>hexagon 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: [ 121.500361, 31.252063 ],
pitch: 64.75753604193972,
zoom: 14.83,
minZoom: 10,
maxZoom: 20
});
scene.on('loaded', () => {
$.get('./data/taxiPolyline.json', data => {
scene.LineLayer({
zIndex: 2
})
.source(data)
.color('#F08D41')
.animate({enable:true})
.render();
});
$.get('./data/2.geojson', data => {
scene.PolygonLayer({
zIndex: 2
})
.source(data)
.shape('extrude')
.size('floor',[0,3000])
.color('rgba(240,240,240,1.0)')
.animate({enable:true})
.render();
});
});
</script>
</body>
</html>

34
src/core/engine/picking/picking.js
View File

@ -9,7 +9,7 @@ class Picking {
this._camera = camera;
this._raycaster = new THREE.Raycaster();
this.scene = scene;
this._envents=[];
this._envents = [];
// TODO: Match this with the line width used in the picking layers
this._raycaster.linePrecision = 3;
@ -78,27 +78,27 @@ class Picking {
const texture = this._pickingTexture;
if (this._needUpdate) {
this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
this._needUpdate = false;
this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
this._needUpdate = false;
}
this.pixelBuffer = new Uint8Array(4);
this._renderer.readRenderTargetPixels(texture, point.x, this._height - point.y, 1, 1, this.pixelBuffer);
}
// 添加dom事件 支持 mousedown ,mouseenter mouseleave mousemove mouseover mouseout mouse up
on(type){
on(type) {
this._mouseUpHandler = this._onMouseUp.bind(this);
this._world._container.addEventListener(type, this._mouseUpHandler, false);
this._envents.push([type,this._mouseUpHandler])
this._envents.push([ type, this._mouseUpHandler ]);
}
off(type,hander){
off(type, hander) {
this._world._container.removeEventListener(type, this._mouseUpHandler, false);
this._envents = this._envents.filter((item)=>{
return item[0]==='type' && hander ===item[1];
})
this._envents = this._envents.filter(item => {
return item[0] === 'type' && hander === item[1];
});
}
_updateRender() {
this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
@ -109,7 +109,7 @@ class Picking {
// Interpret the pixel as an ID
const id = (this.pixelBuffer[2] * 255 * 255) + (this.pixelBuffer[1] * 255) + (this.pixelBuffer[0]);
// Skip if ID is 16646655 (white) as the background returns this
if (id === 16646655 || this.pixelBuffer[3]===0 ) {
if (id === 16646655 || this.pixelBuffer[3] === 0) {
return;
}
@ -132,7 +132,7 @@ class Picking {
//
// TODO: Look into the leak potential for passing so much by reference here
const item = {
featureId: id-1,
featureId: id - 1,
point2d: _point2d,
point3d: _point3d,
intersects
@ -164,10 +164,10 @@ class Picking {
// TODO: Find a way to properly remove these listeners as they stay
// active at the moment
window.removeEventListener('resize', this._resizeHandler, false);
this._envents.forEach((event)=>{
this._envents.forEach(event => {
this._world._container.removeEventListener(event[0], event[1], false);
})
});
this._world.off('move', this._onWorldMove);
if (this._pickingScene.children) {

4
src/core/image.js
View File

@ -7,8 +7,8 @@ export default class LoadImage extends EventEmitter {
super();
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.ctx.fillStyle="#FF0000";
this.ctx.fillRect(0,0,512,512);
this.ctx.fillStyle = '#FF0000';
this.ctx.fillRect(0, 0, 512, 512);
this.imageWidth = 64;
this.canvas.width = this.imageWidth * 8;
this.canvas.height = this.imageWidth * 8;

42
src/core/layer.js
View File

@ -37,15 +37,18 @@ export default class Layer extends Base {
attrs: {},
// 样式配置项
styleOptions: {
stroke: [1.0,1.0,1.0,1.0],
stroke: [ 1.0, 1.0, 1.0, 1.0 ],
strokeWidth: 1.0,
opacity: 1.0
opacity: 1.0,
texture:false
},
// 选中时的配置项
selectedOptions: null,
// active 时的配置项
activedOptions: null,
animateOptions: null
animateOptions: {
enable:false,
}
};
}
constructor(scene, cfg) {
@ -60,7 +63,7 @@ export default class Layer extends Base {
this.layerId = layerId;
this._activeIds = null;
// todo 用户参数
this._object3D.position.z = this.get('zIndex')*100;
this._object3D.position.z = this.get('zIndex') * 100;
scene._engine._scene.add(this._object3D);
this.layerMesh = null;
@ -71,8 +74,11 @@ export default class Layer extends Base {
*/
add(object) {
this.layerMesh = object;
this.layerMesh.onBeforeRender=()=>{
this.layerMesh.material.setUniformsValue('u_time',this.scene._engine.clock.getElapsedTime())
}
// 更新
if(this._needUpdateFilter) {
if (this._needUpdateFilter) {
this._updateFilter();
}
this._object3D.add(object);
@ -80,7 +86,7 @@ export default class Layer extends Base {
}
remove(object) {
this._object3D.remove(object);
}
_getUniqueId() {
return id++;
@ -99,7 +105,7 @@ export default class Layer extends Base {
return this;
}
color(field, values) {
this._needUpdateColor = true;//标识颜色是否需要更新
this._needUpdateColor = true;// 标识颜色是否需要更新
this._createAttrOption('color', field, values, Global.colors);
return this;
}
@ -172,8 +178,24 @@ export default class Layer extends Base {
this._createAttrOption('filter', field, values, true);
return this;
}
animate(callback) {
this.set('animateOptions', callback);
animate(field,cfg) {
let styleOptions = this.get('animateOptions');
if (!styleOptions) {
styleOptions = {};
this.set('animateOptions', animateOptions);
}
if (Util.isObject(field)) {
cfg = field;
field = null;
}
let fields;
if (field) {
fields = parseFields(field);
}
styleOptions.fields = fields;
Util.assign(styleOptions, cfg);
this.set('styleOptions', styleOptions);
return this;
return this;
}
texture() {
@ -223,7 +245,7 @@ export default class Layer extends Base {
this._initAttrs();
this._scaleByZoom();
this._mapping();
const activeHander = this._addActiveFeature.bind(this);
if (this.get('allowActive')) {

15
src/core/scene.js
View File

@ -5,7 +5,7 @@ import Base from './base';
import LoadImage from './image';
import Utils from '../util';
import { MapProvider } from '../map/provider';
import GaodeMap from '../map/gaodeMap';
import GaodeMap from '../map/gaodeMap';
import Global from '../global';
export default class Scene extends Base {
getDefaultCfg() {
@ -36,9 +36,8 @@ export default class Scene extends Base {
const sceneMap = new GaodeMap(Map.map);
// eslint-disable-next-line
Object.getOwnPropertyNames(sceneMap.__proto__).forEach((key)=>{
if('key' !== 'constructor')
this.__proto__[key]=sceneMap.__proto__[key];
})
if ('key' !== 'constructor') { this.__proto__[key] = sceneMap.__proto__[key]; }
});
this.map = Map.map;
Map.asyncCamera(this._engine);
this.initLayer();
@ -57,9 +56,9 @@ export default class Scene extends Base {
}
}
_initAttribution() {
var message ='<a href="http://antv.alipay.com/zh-cn/index.html title="Large-scale WebGL-powered Geospatial Data Visualization">AntV | L7 </a>'
var element = document.createElement('div');
const message = '<a href="http://antv.alipay.com/zh-cn/index.html title="Large-scale WebGL-powered Geospatial Data Visualization">AntV | L7 </a>';
const element = document.createElement('div');
element.innerHTML = message;
element.style.cssText += 'position: absolute; pointer-events:none;background: rgba(255, 255, 255, 0.7);font-size: 11px;z-index:100; padding:4px;bottom: 0;right:0;';
this._container.appendChild(element);
@ -70,7 +69,7 @@ export default class Scene extends Base {
_initEvent() {
}
getLayers(){
getLayers() {
return this._layers;
}
_addLight() {

2
src/core/three.js
View File

@ -4,7 +4,7 @@ export { Scene } from 'three/src/scenes/Scene.js';
export { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js';
export { CanvasTexture } from 'three/src/textures/CanvasTexture.js';
export { Object3D } from 'three/src/core/Object3D.js';
export {Clock } from 'three/src/core/Clock';
export { Clock } from 'three/src/core/Clock';
export { Points } from 'three/src/objects/Points.js';
export { LineSegments } from 'three/src/objects/LineSegments.js';
export { Mesh } from 'three/src/objects/Mesh.js';

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

@ -169,7 +169,8 @@ export default class BufferBase extends Base {
normals,
colors,
pickingIds,
faceUv: new Float32Array(polygon.faceUv)
faceUv: new Float32Array(polygon.faceUv),
sizes:new Float32Array(polygon.sizes)
};
@ -253,7 +254,8 @@ export default class BufferBase extends Base {
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');

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

@ -64,16 +64,12 @@ export default class LineBuffer extends BufferBase {
inposs[i * 4 + 2] = bufferStruct.instances[i][2];
inposs[i * 4 + 3] = bufferStruct.instances[i][3];
}
if (propertiesData) {
const time = propertiesData[index].time;
times[i] = time;
}
}
return {
vertices,
colors,
inposs,
times
};
}
}

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

@ -1,6 +1,6 @@
import BufferBase from './bufferBase';
import { regularShape } from '../shape/index';
import Util from '../../util'
import Util from '../../util';
import * as THREE from '../../core/three';
const shapeObj = {
circle: 30,
@ -70,11 +70,11 @@ export default class PointBuffer extends BufferBase {
coordinates.forEach((geo, index) => {
const m1 = new THREE.Matrix4();
let { size, shape } = properties[index];
let shapeType ='extrude'
if( type==='2d' ||(type==='3d'&& size[2]===0) ){
shapeType ='fill';
Util.isArray (size) || (size=[size,size,0]);
geo[2] +=Math.random()*100;
let shapeType = 'extrude';
if (type === '2d' || (type === '3d' && size[2] === 0)) {
shapeType = 'fill';
Util.isArray(size) || (size = [ size, size, 0 ]);
geo[2] += Math.random() * 100;
}
const vert = regularShape[shape](shapeType);
m1.setPosition(new THREE.Vector3(...geo));

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

@ -8,6 +8,7 @@ export default class PolygonBuffer extends BufferBase {
const shape = this.get('shape');
const positions = [];
const faceUv = [];
const sizes = [];
const positionsIndex = [];
let indexCount = 0;
this.bufferStruct.style = properties;
@ -24,8 +25,16 @@ export default class PolygonBuffer extends BufferBase {
});
}
positions.push(extrudeData.positions);
if (shape !== 'line')
faceUv.push(...extrudeData.faceUv);
if (shape !== 'line') {
// faceUv.push(...extrudeData.faceUv);
const count = extrudeData.faceUv.length /2;
for(let i=0;i<count;i++){
faceUv.push(extrudeData.faceUv[i*2]*0.1,extrudeData.faceUv[i*2+1] * heightValue/3000);
sizes.push((1.0 - extrudeData.faceUv[i*2+1]) * heightValue)
}
}
indexCount += extrudeData.positionsIndex.length;
positionsIndex.push(extrudeData.positionsIndex);
});
@ -34,6 +43,7 @@ export default class PolygonBuffer extends BufferBase {
this.bufferStruct.indexCount = indexCount;
this.bufferStruct.style = properties;
this.bufferStruct.faceUv = faceUv;
this.bufferStruct.sizes = sizes;
if (shape !== 'line') {
this.attributes = this._toPolygonAttributes(this.bufferStruct);
this.faceTexture = this._generateTexture();

4
src/geom/extrude.js
View File

@ -11,6 +11,7 @@ export default function extrudePolygon(points, extrude) {
const p1 = points[0][0];
const p2 = points[0][points[0].length - 1];
const faceUv = [];
const sizes =[];
if (p1[0] === p2[0] && p1[1] === p2[1]) {
points[0] = points[0].slice(0, points[0].length - 1);
}
@ -37,8 +38,9 @@ export default function extrudePolygon(points, extrude) {
}
}
function full() {
// 顶部坐标
for (let i = 0; i < pointCount; i++) {
positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 1 ]);
positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 1 ]);
}
for (let i = 0; i < pointCount; i++) {
positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 0 ]);

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

@ -1,8 +1,9 @@
import * as THREE from '../../core/three';
import image_frag from '../shader/image_frag.glsl';
import image_vert from '../shader/image_vert.glsl';
import Material from './material';
export default function ImageMaterial(options) {
const material = new THREE.ShaderMaterial({
const material = new Material ({
uniforms: {
u_opacity: { value: options.u_opacity },
u_texture: { value: options.u_texture }
@ -11,8 +12,5 @@ export default function ImageMaterial(options) {
fragmentShader: image_frag,
transparent: true
});
// material.roughness = 1;
// material.metalness = 0.1;
// material.envMapIntensity = 3;
return material;
}

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

@ -1,13 +1,14 @@
import * as THREE from '../../core/three';
import line_frag from '../shader/line_frag.glsl';
import line_vert from '../shader/line_vert.glsl';
import Material from './material';
import arcline_frag from '../shader/arcline_frag.glsl';
import arcline_vert from '../shader/arcline_vert.glsl';
export function LineMaterial(options) {
const material = new THREE.ShaderMaterial({
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
currentTime: { value: options.u_time || 2500 }
u_time: { value: options.u_time || 0 }
},
vertexShader: line_vert,
fragmentShader: line_frag,
@ -17,14 +18,15 @@ export function LineMaterial(options) {
return material;
}
export function ArcLineMaterial(options) {
const material = new THREE.ShaderMaterial({
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
segmentNumber: { value: 50 }
},
vertexShader: arcline_vert,
fragmentShader: arcline_frag,
transparent: true
transparent: true,
blending: THREE.AdditiveBlending
});
return material;
}

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

@ -5,15 +5,15 @@ export default class Material extends THREE.ShaderMaterial {
this.uniforms[name].value = value;
this.uniforms.needsUpdate = true;
}
setDefinesvalue(name, value){
this.defines.name = value;
this.needsUpdate =true;
setDefinesvalue(name, value) {
this.defines[name] = value;
this.needsUpdate = true;
}
setUniform(option){
const uniforms ={};
for(let key in option){
if(key.substr(0,2)==='u_'){
uniforms[key]= {value:option[key]};
setUniform(option) {
const uniforms = {};
for (const key in option) {
if (key.substr(0, 2) === 'u_') {
uniforms[key] = { value: option[key] };
}
}
return uniforms;

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

@ -3,13 +3,13 @@ import Material from './material';
import point_frag from '../shader/point_frag.glsl';
import point_vert from '../shader/point_vert.glsl';
export default class PointMaterial extends Material {
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}
uniforms: {
u_opacity: { value: 1 },
u_stroke: { value: [ 1.0, 1.0, 1.0, 1.0 ] },
u_strokeWidth: { value: 1 }
},
defines: {
SHAPE: true,
@ -17,22 +17,21 @@ export default class PointMaterial extends Material {
}
};
}
constructor(_uniforms,_defines,parameters){
constructor(_uniforms, _defines, parameters) {
super(parameters);
const {uniforms,defines} = this.getDefaultParameters();
this.uniforms = Object.assign(uniforms,this.setUniform(_uniforms));
this.defines = Object.assign(defines,_defines)
this.type = 'PointMaterial'
const { uniforms, defines } = this.getDefaultParameters();
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
this.defines = Object.assign(defines, _defines);
this.type = 'PointMaterial';
this.vertexShader = point_vert;
this.fragmentShader =point_frag;
this.fragmentShader = point_frag;
this.transparent = true;
if(!_uniforms.shape)
this.blending= THREE.AdditiveBlending
if(_uniforms.u_texture){
if (!_uniforms.shape) { this.blending = THREE.AdditiveBlending; }
if (_uniforms.u_texture) {
this.defines.TEXCOORD_0 = true;
}
}
}
}

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

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

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

@ -1,6 +1,10 @@
precision mediump float;
varying vec3 v_color;
precision mediump float;
uniform float u_opacity;
varying vec4 v_color;
void main() {
gl_FragColor = vec4(v_color,1.);
gl_FragColor = v_color;
gl_FragColor.a = v_color.a*u_opacity;
}

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

@ -3,7 +3,7 @@ attribute vec4 a_color;
attribute vec4 a_instance;
uniform mat4 matModelViewProjection;
uniform float segmentNumber;
varying vec3 v_color;
varying vec4 v_color;
float getSegmentRatio(float index) {
return smoothstep(0.0, 1.0, index / (segmentNumber - 1.0));
@ -11,7 +11,7 @@ float getSegmentRatio(float index) {
float paraboloid(vec2 source, vec2 target, float ratio) {
vec2 x = mix(source, target, ratio);
vec2 center = mix(source, target, 0.5);
vec2 center = mix(source, target, 0.3);
float dSourceCenter = distance(source, center);
float dXCenter = distance(x, center);
return (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter)*0.6;
@ -32,7 +32,8 @@ void main() {
float segmentRatio = getSegmentRatio(segmentIndex);
vec3 c1 = vec3(0.929,0.972,0.917);
vec3 c2 = vec3(0.062,0.325,0.603);
v_color = mix(c1, c2, segmentRatio);
// v_color = mix(c1, c2, segmentRatio);
v_color = a_color;
float height = paraboloid(source, target, segmentRatio);
vec3 position = getPos(source,target,height,segmentRatio);
gl_Position = matModelViewProjection * vec4(position, 1.0);

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

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

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

@ -1,13 +1,14 @@
precision highp float;
attribute vec4 a_color;
attribute float a_time;
uniform float currentTime;
uniform float u_time;
varying float vTime;
varying vec4 v_color;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color;
// vTime = 1.0 - (mod(currentTime,a_time)+ 1000.0 - position.z) / 100.0;
#ifdef ANIMATE
vTime = 1.0- (mod(u_time*100.,3600.)- position.z) / 100.;
#endif
gl_Position = matModelViewProjection * vec4(position.xy,0., 1.0);
}

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

@ -1,20 +1,73 @@
precision highp float;
uniform float u_opacity;
uniform sampler2D u_texture;
uniform float u_time;
varying vec2 v_texCoord;
varying vec4 v_color;
varying float vlightWeight;
varying float v_lightWeight;
varying float v_size;
vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {
float s = step(hot, n);
return mix(darkColor, brightColor, s);
}
float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
}
void main() {
if(v_color.w == 0.0) {
discard;
return;
}
#ifdef TEXCOORD_0
if(v_texCoord.x == -1.0) {
vec3 baseColor = vec3(0.0078,0.054,0.06);
vec3 brightColor = vec3(0.312,0.283,0.935);
vec3 windowColor = vec3(0.038,0.078,0.115);
float targetColId = 5.;
#ifdef ANIMATE
if(v_texCoord.x < 0.0) { //顶部颜色
gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);
}else {
vec4 color = texture2D(u_texture,v_texCoord) * v_color;
gl_FragColor = color;
}else { // 侧面颜色
//vec4 color = texture2D(u_texture,v_texCoord) * v_color;
vec2 st = v_texCoord;
// st.y = st.y / (3000.0 - v_size) *3000.;
vec2 UvScale = v_texCoord;
float tStep = 0.01;
float tStart = 0.1 * tStep;
float tEnd = 0.75 * tStep;
float u = mod(UvScale.x, tStep);
float v = mod(UvScale.y, tStep);
float ux = floor(UvScale.x/tStep);
float uy = floor(UvScale.y/tStep);
float n = random(vec2(ux,uy));
float lightP = u_time /2.0;
float head = 1.0- step(0.005,st.y);
/*step3*/
// 将窗户颜色和墙面颜色区别开来
float sU = step(tStart, u) - step(tEnd, u);
float sV = step(tStart, v) - step(tEnd, v);
float s = sU * sV;
float curColId = floor(UvScale.x / tStep);
float sCol = step(targetColId - 0.5, curColId) - step(targetColId + 0.5, curColId);
float mLightP = mod(lightP, 2.);
float sRow = step(mLightP - 0.1, st.y) - step(mLightP, st.y);
//vec3 color = mix(baseColor, windowColor, s);
if(ux == targetColId){
n =0.;
}
vec3 color = mix(baseColor, getWindowColor(n,0.6,brightColor,windowColor), s);
float sFinal = s * sCol * sRow;
color += mix(baseColor, brightColor, sFinal);
if (st.y<0.01){
color = baseColor;
}
if(head ==1.0) {
color = brightColor;
}
gl_FragColor = vec4(color * v_lightWeight,1.0);
//gl_FragColor = color;
}
#else
gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);

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

@ -1,20 +1,29 @@
precision highp float;
#define ambientRatio 0.5
#define diffuseRatio 0.3
#define specularRatio 0.2
#define diffuseRatio 0.4
#define specularRatio 0.1
attribute vec4 a_color;
attribute vec4 a_idColor;
attribute vec2 faceUv;
attribute float a_size;
varying vec2 v_texCoord;
varying vec4 v_color;
varying float v_lightWeight;
varying float v_size;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
if(normal == vec3(0.,0.,1.)){
v_color = a_color;
gl_Position = matModelViewProjection * vec4(position, 1.0);
return;
}
vec3 worldPos = vec3(vec4(position,1.0) * modelMatrix);
vec3 worldNormal = vec3(vec4(normal,1.0) * modelMatrix);
// //cal light weight
vec3 viewDir = normalize(cameraPosition - worldPos);
vec3 lightDir = normalize(vec3(1, -10.5, 12));
//vec3 lightDir = normalize(vec3(0.05,-0.001,-1));
//vec3 lightDir = normalize(vec3(1, -10.5, 12));
vec3 lightDir = normalize(vec3(0.,-10.,1.));
vec3 halfDir = normalize(viewDir+lightDir);
// //lambert
float lambert = dot(worldNormal, lightDir);
@ -23,6 +32,8 @@ void main() {
//sum to light weight
float lightWeight = ambientRatio + diffuseRatio * lambert + specularRatio * specular;
v_texCoord = faceUv;
v_lightWeight = lightWeight;
// v_size = a_size;
v_color =vec4(a_color.rgb * lightWeight, a_color.w);
gl_Position = matModelViewProjection * vec4(position, 1.0);
}

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

@ -29,7 +29,7 @@ export function diamond(type) {
return polygonShape[type]([ points ]);
}
export function square (type){
export function square(type) {
return diamond(type);
}

21
src/layer/lineLayer.js
View File

@ -14,15 +14,18 @@ export default class MeshlineLayer extends Layer {
properties: StyleData,
propertiesData: source.propertiesData
});
const { opacity} = this.get('styleOptions');
const animateOptions= this.get('animateOptions');
const geometry = new THREE.BufferGeometry();
const { attributes } = buffer;
const shape = buffer.shape;
if (shape === 'arc') {
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('a_instance', new THREE.Float32BufferAttribute(attributes.inposs, 4));
geometry.addAttribute('a_instance', new THREE.Float32BufferAttribute(attributes.inposs, 4))
console.log(opacity)
const material = new ArcLineMaterial({
u_opacity: 1.0
u_opacity: opacity
});
const mesh = new THREE.Line(geometry, material);
this.add(mesh);
@ -30,18 +33,22 @@ export default class MeshlineLayer extends Layer {
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
const material = new LineMaterial({
u_opacity: 1.0
u_opacity: opacity
});
const mesh = new THREE.Mesh(geometry, material);
this.add(mesh);
} else {
} else { // 直线
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('a_time', new THREE.Float32BufferAttribute(attributes.times, 1));
const material = new LineMaterial({
u_opacity: 1.0,
u_time: 1000
u_opacity: opacity,
u_time: 0
});
if(animateOptions.enable){
material.setDefinesvalue('ANIMATE',true)
}
const mesh = new THREE.LineSegments(geometry, material);
this.add(mesh);
}

54
src/layer/pointLayer.js
View File

@ -20,17 +20,17 @@ export default class PointLayer extends Layer {
render() {
this.type = 'point';
this.init();
if(!this._hasRender){
this._prepareRender(this.shapeType);
if (!this._hasRender) {
this._prepareRender(this.shapeType);
this._hasRender = true;
} else{
} else {
this._initAttrs();
(this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter():null;
(this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter() : null;
}
return this;
}
_prepareRender(){
if(this.shapeType === 'text'){ // 绘制文本图层
_prepareRender() {
if (this.shapeType === 'text') { // 绘制文本图层
this._textPoint();
return;
}
@ -44,42 +44,42 @@ export default class PointLayer extends Layer {
});
const geometry = this.geometry = new THREE.BufferGeometry();
let mtl;
if(this.shapeType!=='image'){
if (this.shapeType !== 'image') {
mtl = new PolygonMaterial({
u_opacity: opacity
});
} else{
mtl = new PointMaterial({
u_opacity: opacity,
u_strokeWidth: strokeWidth,
u_stroke: stroke,
shape: this.shapeType || false,
u_texture: this.scene.image.texture
},{
SHAPE:(this.shapeType !=='image'),
TEXCOORD_0: (this.shapeType ==='image')
});
}
} else {
mtl = new PointMaterial({
u_opacity: opacity,
u_strokeWidth: strokeWidth,
u_stroke: stroke,
shape: this.shapeType || false,
u_texture: this.scene.image.texture
}, {
SHAPE: (this.shapeType !== 'image'),
TEXCOORD_0: (this.shapeType === 'image')
});
}
const { attributes } = this._buffer;
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
if(this.shapeType ==='image'){
if (this.shapeType === 'image') {
geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uvs, 2));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
}else{
} else {
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
}
let mesh;
if(this.shapeType=='image'){
if (this.shapeType == 'image') {
mesh = new THREE.Points(geometry, mtl);
}else{
} else {
const pickmaterial = new PickingMaterial();
mesh = new THREE.Mesh(geometry, mtl);
mesh = new THREE.Mesh(geometry, mtl);
}
}
this.add(mesh);
}

40
src/layer/polygonLayer.js
View File

@ -10,22 +10,22 @@ export default class PolygonLayer extends Layer {
return this;
}
render() {
if(!this._hasRender) { // 首次渲染
if (!this._hasRender) { // 首次渲染
this._hasRender = true;
this._prepareRender();
} else{
} else {
this._initAttrs();
(this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter():null;
(this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter() : null;
}
return this;
}
_prepareRender(){
_prepareRender() {
this.init();
this.type = 'polygon';
const source = this.layerSource;
this._buffer = new PolygonBuffer({
shape: this.shape,
@ -37,34 +37,42 @@ export default class PolygonLayer extends Layer {
this.geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
this.geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
this.geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
if(this.shape =='line') {
this._renderLine()
}else{
if (this.shape === 'line') {
this._renderLine();
} else {
this._renderPolygon();
}
}
_renderLine(){
_renderLine() {
const { opacity } = this.get('styleOptions');
const lineMaterial = new LineMaterial({
u_opacity: opacity
});
const polygonLine = new THREE.LineSegments(this.geometry, lineMaterial);
this.add(polygonLine);
}
_renderPolygon(){
_renderPolygon() {
const animateOptions= this.get('animateOptions');
const { opacity } = this.get('styleOptions');
const material = new PolygonMaterial({
u_opacity: opacity
u_opacity: opacity,
});
const { attributes } = this._buffer;
console.log(attributes);
this.geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
if(animateOptions.enable){
material.setDefinesvalue('ANIMATE',true)
this.geometry.addAttribute('faceUv', new THREE.Float32BufferAttribute(attributes.faceUv, 2));
this.geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
}
const pickmaterial = new PickingMaterial();
const polygonMesh = new THREE.Mesh(this.geometry, material);
this.add(polygonMesh);
}
update() {
this.updateFilter(this.StyleData);
// 动态更新相关属性

2
src/map/gaodeMap.js
View File

@ -1,5 +1,5 @@
export default class GaodeMap {
constructor(map) {
constructor(map) {
this.map = map;
}
getZoom() {

2
src/source/csvSource.js
View File

@ -20,7 +20,7 @@ export default class CSVSource extends Source {
if (x1 && y1) {
coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]];
}
col._id = featureIndex+1;
col._id = featureIndex + 1;
this._coordProject(coordinates);
this.geoData.push(this._coordProject(coordinates));
});

2
src/source/geojsonSource.js
View File

@ -12,7 +12,7 @@ export default class GeojsonSource extends Source {
turfMeta.flattenEach(data, (currentFeature, featureIndex) => {
const coord = getCoords(cleanCoords(currentFeature));
this.geoData.push(this._coordProject(coord));
currentFeature.properties._id = featureIndex+1;
currentFeature.properties._id = featureIndex + 1;
this.propertiesData.push(currentFeature.properties);
});
}