diff --git a/demos/08_arc_line.html b/demos/08_arc_line.html index ff6eb262c0..2b3a8389d4 100644 --- a/demos/08_arc_line.html +++ b/demos/08_arc_line.html @@ -46,6 +46,12 @@ scene.on('loaded', () => { .shape('arc') .size(0.8) .color('rgb(13,64,140)') + .animate({ + enable: true, + interval: 0.1, + duration: 3, + trailLength: 0.1 + }) .style({ opacity:0.6, }) diff --git a/demos/great_circle.html b/demos/great_circle.html index ba61152db6..41c8cb4646 100644 --- a/demos/great_circle.html +++ b/demos/great_circle.html @@ -46,11 +46,17 @@ scene.on('loaded', () => { }) .shape('greatCircle') - .size(0.8) + .size(0.5) .color('rgb(13,64,140)') .style({ - opacity:0.6, + opacity:1., }) + .animate({ + enable: true, + interval: 0.05, + duration: 1, + trailLength: 0.01 + }) .render(); }); }); diff --git a/demos/patternline.html b/demos/patternline.html index 823a47b3b7..77de6dd805 100644 --- a/demos/patternline.html +++ b/demos/patternline.html @@ -48,6 +48,7 @@ scene.on('loaded', () => { scene.image.addImage('arrow', '/demos/assets/arrow.png'); scene.image.addImage('right', '/demos/assets/right.png'); + scene.image.addImage('plane','https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LzsbQZeK_2kAAAAAAAAAAABkARQnAQ') const mapData = { "type": "FeatureCollection", @@ -67,7 +68,7 @@ } }, { "type": "Feature", - "properties": { "type": 'arrow' }, + "properties": { "type": 'plane' }, "geometry": { "type": "LineString", "coordinates": [ @@ -87,6 +88,7 @@ .size([10, 0]) .source(mapData) .color('#fff') + .active(true) .pattern('type', function (type) { return type; }) diff --git a/demos/pointshape.html b/demos/pointshape.html new file mode 100644 index 0000000000..b1b3fae144 --- /dev/null +++ b/demos/pointshape.html @@ -0,0 +1,48 @@ + + + + + + 气泡图 + + + +
+ + + + + + + + diff --git a/package.json b/package.json index 4bfd95b7ed..e73c1b723b 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "1.3.0", + "version": "1.3.0-beta.1", "description": "Large-scale WebGL-powered Geospatial Data Visualization", "main": "build/L7.js", "browser": "build/L7-min.js", diff --git a/src/core/image.js b/src/core/image.js index e127909242..c698a13fb6 100644 --- a/src/core/image.js +++ b/src/core/image.js @@ -33,9 +33,8 @@ export default class LoadImage extends EventEmitter { this.texture.magFilter = THREE.LinearFilter; this.texture.minFilter = THREE.LinearFilter; this.texture.needsUpdate = true; - if (this.images.length === this.imagesCount) { - this.emit('imageLoaded'); - } + this.emit('imageLoaded'); + }); } else { const { width, height, channels } = opt; @@ -49,9 +48,8 @@ export default class LoadImage extends EventEmitter { this.ctx.drawImage(image, x, y, this.imageWidth, this.imageWidth); this.texture = new THREE.CanvasTexture(this.canvas); this.imagePos[id] = { x: x >> 9, y: y >> 9 }; - if (this.images.length === this.imagesCount) { - this.emit('imageLoaded'); - } + this.texture.needsUpdate = true; + this.emit('imageLoaded'); } } diff --git a/src/core/layer.js b/src/core/layer.js index e76c2434a9..676c70288c 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -591,15 +591,6 @@ export default class Layer extends Base { this.get('pickingController').removeAllMesh(); this.draw(); } - // 更新mesh - updateDraw() { - - } - - styleCfg() { - - } - /** * 重置高亮要素 */ diff --git a/src/core/scene.js b/src/core/scene.js index ca6d0f7a73..4cec1837db 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -20,7 +20,6 @@ export default class Scene extends Base { super(cfg); this._initMap(); this.crs = epsg3857; - this.addImage(); this.fontAtlasManager = new FontAtlasManager(); this._layers = []; this.animateCount = 0; @@ -29,6 +28,7 @@ export default class Scene extends Base { _initEngine(mapContainer) { this._engine = new Engine(mapContainer, this); + this.addImage();// 初始化图标加载器 this.registerMapEvent(); // 和高德地图同步状态 // this._engine.run(); compileBuiltinModules(); @@ -99,6 +99,9 @@ export default class Scene extends Base { } addImage() { this.image = new LoadImage(); + this.image.on('imageLoaded', () => { + this._engine.update(); + }); } _initEvent() { diff --git a/src/geom/material/lineMaterial.js b/src/geom/material/lineMaterial.js index e0334a1845..b4f891ecba 100644 --- a/src/geom/material/lineMaterial.js +++ b/src/geom/material/lineMaterial.js @@ -25,16 +25,16 @@ export function ArcLineMaterial(options) { if (options.shapeType === 'greatCircle') { moduleName = 'greatcircle'; } - const { vs, fs } = getModule(moduleName); + const { vs, fs, uniforms } = getModule(moduleName); const material = new Material({ - uniforms: { - u_opacity: { value: options.u_opacity || 1.0 }, - segmentNumber: { value: 29 }, - u_time: { value: 0 }, - u_zoom: { value: options.u_zoom || 10 }, - u_activeId: { value: options.activeId || 0 }, - u_activeColor: { value: options.activeColor || [ 1.0, 0, 0, 1.0 ] } - }, + uniforms: wrapUniforms(merge(uniforms, { + u_opacity: options.u_opacity, + segmentNumber: 29, + u_time: 0, + u_zoom: options.u_zoom, + u_activeId: options.activeId, + u_activeColor: options.activeColor + })), vertexShader: vs, fragmentShader: fs, transparent: true, diff --git a/src/geom/shader/arcline_frag.glsl b/src/geom/shader/arcline_frag.glsl index 9b3ec4a32f..70f25b99f7 100644 --- a/src/geom/shader/arcline_frag.glsl +++ b/src/geom/shader/arcline_frag.glsl @@ -1,6 +1,18 @@ precision mediump float; uniform float u_opacity; varying vec4 v_color; + uniform float u_time : 0; + + #if defined DASHLINE || defined ANIMATE + varying float v_distance_ratio; + #endif + + #ifdef ANIMATE + uniform float u_duration : 2.0; + uniform float u_interval : 1.0; + uniform float u_trailLength : 0.2; + #endif + void main() { if(v_color.a == 0.){ @@ -9,5 +21,13 @@ gl_FragColor = v_color; gl_FragColor.a = v_color.a*u_opacity; + #ifdef ANIMATE + float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_interval)* (1.0/u_interval) + u_time / u_duration); + // alpha = (alpha + u_trailLength -1.0) / u_trailLength; + // alpha = smoothstep(0., 1., alpha); + gl_FragColor.a *= alpha; + + #endif + #pragma include "pick" } \ No newline at end of file diff --git a/src/geom/shader/arcline_vert.glsl b/src/geom/shader/arcline_vert.glsl index fadecc72bc..953519383f 100644 --- a/src/geom/shader/arcline_vert.glsl +++ b/src/geom/shader/arcline_vert.glsl @@ -9,6 +9,11 @@ uniform vec4 u_activeColor : [ 1.0, 0, 0, 1.0 ]; uniform mat4 matModelViewProjection; uniform float segmentNumber; varying vec4 v_color; +#ifdef ANIMATE +varying float v_distance_ratio; +#endif + + float maps (float value, float start1, float stop1, float start2, float stop2) { return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)); } @@ -51,10 +56,13 @@ void main() { float segmentRatio = getSegmentRatio(segmentIndex); float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); - + v_distance_ratio = segmentIndex / segmentNumber; vec3 curr = getPos(source, target, segmentRatio); vec3 next = getPos(source, target, nextSegmentRatio); vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, position.y); + #ifdef ANIMATE + v_distance_ratio = segmentIndex / segmentNumber; + #endif gl_Position =matModelViewProjection * vec4(vec3(curr + vec3(offset, 0.0)),1.0); v_color = a_color; // picking diff --git a/src/geom/shader/circle_frag.glsl b/src/geom/shader/circle_frag.glsl index 0e96cc50e0..f2ff28b35e 100644 --- a/src/geom/shader/circle_frag.glsl +++ b/src/geom/shader/circle_frag.glsl @@ -12,7 +12,7 @@ varying float v_radius; void main() { // int shape = int(floor(v_data.w + 0.5)); - int shape = 0; + int shape = int(v_data.w); lowp float antialiasblur = v_data.z; float antialiased_blur = -max(u_blur, antialiasblur); diff --git a/src/geom/shader/great_circle_line_vert.glsl b/src/geom/shader/great_circle_line_vert.glsl index 1fe36c7f2b..4043db6263 100644 --- a/src/geom/shader/great_circle_line_vert.glsl +++ b/src/geom/shader/great_circle_line_vert.glsl @@ -10,6 +10,9 @@ uniform vec4 u_activeColor : [ 1.0, 0, 0, 1.0 ]; uniform mat4 matModelViewProjection; uniform float segmentNumber; varying vec4 v_color; +#ifdef ANIMATE +varying float v_distance_ratio; +#endif #pragma include "project" float maps (float value, float start1, float stop1, float start2, float stop2) { return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)); @@ -78,9 +81,9 @@ void main() { float segmentRatio = getSegmentRatio(segmentIndex); float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); - - - + #ifdef ANIMATE + v_distance_ratio = segmentIndex / segmentNumber; + #endif vec3 curr = vec3(degrees(interpolate(source, target, angularDist, segmentRatio)), 0.0); vec3 next = vec3(degrees(interpolate(source, target, angularDist, nextSegmentRatio)), 0.0); vec2 offset = getExtrusionOffset((ProjectFlat(next.xy) - ProjectFlat(curr.xy)) * indexDir, position.y); diff --git a/src/geom/shader/meshline_frag.glsl b/src/geom/shader/meshline_frag.glsl index 1162b985f2..e83e1e7594 100644 --- a/src/geom/shader/meshline_frag.glsl +++ b/src/geom/shader/meshline_frag.glsl @@ -42,7 +42,11 @@ void main() { #endif #ifdef DASHLINE - gl_FragColor.a *= u_opacity * ceil(mod(v_distance_ratio + u_dash_offset + u_time / 10., v_dash_array) - (v_dash_array * u_dash_ratio)); + float time = u_time; + #ifdef ANIMATE + time =0; + #endif + gl_FragColor.a *= u_opacity * ceil(mod(v_distance_ratio + u_dash_offset + time / 10., v_dash_array) - (v_dash_array * u_dash_ratio)); #else gl_FragColor.a *= u_opacity; #endif diff --git a/src/layer/render/line/drawArc.js b/src/layer/render/line/drawArc.js index 2ffb89d290..739882fe3a 100644 --- a/src/layer/render/line/drawArc.js +++ b/src/layer/render/line/drawArc.js @@ -29,6 +29,26 @@ export default function DrawArcLine(layerData, layer, buffer) { }, { SHAPE: false }); + + const animateOptions = layer.get('animateOptions'); + if (animateOptions.enable) { + layer.scene.startAnimate(); + const { + duration = 2, + interval = 0.5, + trailLength = 0.5, + repeat = Infinity + } = animateOptions; + layer.animateDuration = + layer.scene._engine.clock.getElapsedTime() + duration * repeat; + lineMaterial.updateUninform({ + u_duration: duration, + u_interval: interval, + u_trailLength: trailLength + }); + lineMaterial.setDefinesvalue('ANIMATE', true); + // lineMaterial.setDefinesvalue('DASHLINE', true); + } const arcMesh = new THREE.Mesh(geometry, lineMaterial); arcMesh.frustumCulled = false; return arcMesh; diff --git a/src/layer/render/line/drawMeshLine.js b/src/layer/render/line/drawMeshLine.js index a2d29d7160..ffa8dc42de 100644 --- a/src/layer/render/line/drawMeshLine.js +++ b/src/layer/render/line/drawMeshLine.js @@ -7,11 +7,6 @@ export default function DrawLine(layerData, layer, buffer) { const style = layer.get('styleOptions'); const animateOptions = layer.get('animateOptions'); const activeOption = layer.get('activedOptions'); - // const pattern = style.pattern; - // const texture = layer.scene.image.singleImages[pattern]; - // const hasPattern = layerData.some(layer => { - // return layer.pattern; - // }); if (!buffer) { const geometryBuffer = getBuffer(layer.type, layer.shapeType); buffer = new geometryBuffer({ @@ -53,6 +48,7 @@ export default function DrawLine(layerData, layer, buffer) { TEXTURE: hasPattern }); lineMaterial.setBending(style.blending); + const lineMesh = new THREE.Mesh(geometry, lineMaterial); if (animateOptions.enable) { layer.scene.startAnimate();