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

Merge pull request #15 from antvis/1.3beta 

fix(point): 修复shape映射,图片加载的事件
This commit is contained in:
@thinkinggis 2019-08-20 10:39:11 +08:00 committed by GitHub
parent bbaa4c5c5c 84a55dfdcd
commit 5887462a61
16 changed files with 145 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demos/08_arc_line.html
View File

@ -46,6 +46,12 @@ scene.on('loaded', () => {
.shape('arc') .shape('arc')
.size(0.8) .size(0.8)
.color('rgb(13,64,140)') .color('rgb(13,64,140)')
.animate({
enable: true,
interval: 0.1,
duration: 3,
trailLength: 0.1
})
.style({ .style({
opacity:0.6, opacity:0.6,
}) })

10
demos/great_circle.html
View File

@ -46,10 +46,16 @@ scene.on('loaded', () => {
}) })
.shape('greatCircle') .shape('greatCircle')
.size(0.8) .size(0.5)
.color('rgb(13,64,140)') .color('rgb(13,64,140)')
.style({ .style({
opacity:0.6, opacity:1.,
})
.animate({
enable: true,
interval: 0.05,
duration: 1,
trailLength: 0.01
}) })
.render(); .render();
}); });

4
demos/patternline.html
View File

@ -48,6 +48,7 @@
scene.on('loaded', () => { scene.on('loaded', () => {
scene.image.addImage('arrow', '/demos/assets/arrow.png'); scene.image.addImage('arrow', '/demos/assets/arrow.png');
scene.image.addImage('right', '/demos/assets/right.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 = { const mapData = {
"type": "FeatureCollection", "type": "FeatureCollection",
@ -67,7 +68,7 @@
} }
}, { }, {
"type": "Feature", "type": "Feature",
"properties": { "type": 'arrow' }, "properties": { "type": 'plane' },
"geometry": { "geometry": {
"type": "LineString", "type": "LineString",
"coordinates": [ "coordinates": [
@ -87,6 +88,7 @@
.size([10, 0]) .size([10, 0])
.source(mapData) .source(mapData)
.color('#fff') .color('#fff')
.active(true)
.pattern('type', function (type) { .pattern('type', function (type) {
return type; return type;
}) })

48
demos/pointshape.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" />
<title>气泡图</title>
<style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<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>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
minZoom:5,
maxZoom:15,
zoom: 12
});
window.scene = scene;
scene.on('loaded', function() {
$.get('https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json', data => {
scene.PointLayer({
zIndex: 2
})
.source(data)
.shape('w', [ 'triangle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica' ])
.size(20)
.active(true)
.color('w', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
.render();
});
});
</script>
</body>
</html>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@antv/l7", "name": "@antv/l7",
"version": "1.3.0", "version": "1.3.0-beta.1",
"description": "Large-scale WebGL-powered Geospatial Data Visualization", "description": "Large-scale WebGL-powered Geospatial Data Visualization",
"main": "build/L7.js", "main": "build/L7.js",
"browser": "build/L7-min.js", "browser": "build/L7-min.js",

6
src/core/image.js
View File

@ -33,9 +33,8 @@ export default class LoadImage extends EventEmitter {
this.texture.magFilter = THREE.LinearFilter; this.texture.magFilter = THREE.LinearFilter;
this.texture.minFilter = THREE.LinearFilter; this.texture.minFilter = THREE.LinearFilter;
this.texture.needsUpdate = true; this.texture.needsUpdate = true;
if (this.images.length === this.imagesCount) {
this.emit('imageLoaded'); this.emit('imageLoaded');
}
}); });
} else { } else {
const { width, height, channels } = opt; const { width, height, channels } = opt;
@ -49,10 +48,9 @@ export default class LoadImage extends EventEmitter {
this.ctx.drawImage(image, x, y, this.imageWidth, this.imageWidth); this.ctx.drawImage(image, x, y, this.imageWidth, this.imageWidth);
this.texture = new THREE.CanvasTexture(this.canvas); this.texture = new THREE.CanvasTexture(this.canvas);
this.imagePos[id] = { x: x >> 9, y: y >> 9 }; this.imagePos[id] = { x: x >> 9, y: y >> 9 };
if (this.images.length === this.imagesCount) { this.texture.needsUpdate = true;
this.emit('imageLoaded'); this.emit('imageLoaded');
} }
}
} }
removeImage() { removeImage() {

9
src/core/layer.js
View File

@ -591,15 +591,6 @@ export default class Layer extends Base {
this.get('pickingController').removeAllMesh(); this.get('pickingController').removeAllMesh();
this.draw(); this.draw();
} }
// 更新mesh
updateDraw() {
}
styleCfg() {
}
/** /**
* 重置高亮要素 * 重置高亮要素
*/ */

5
src/core/scene.js
View File

@ -20,7 +20,6 @@ export default class Scene extends Base {
super(cfg); super(cfg);
this._initMap(); this._initMap();
this.crs = epsg3857; this.crs = epsg3857;
this.addImage();
this.fontAtlasManager = new FontAtlasManager(); this.fontAtlasManager = new FontAtlasManager();
this._layers = []; this._layers = [];
this.animateCount = 0; this.animateCount = 0;
@ -29,6 +28,7 @@ export default class Scene extends Base {
_initEngine(mapContainer) { _initEngine(mapContainer) {
this._engine = new Engine(mapContainer, this); this._engine = new Engine(mapContainer, this);
this.addImage();// 初始化图标加载器
this.registerMapEvent(); // 和高德地图同步状态 this.registerMapEvent(); // 和高德地图同步状态
// this._engine.run(); // this._engine.run();
compileBuiltinModules(); compileBuiltinModules();
@ -99,6 +99,9 @@ export default class Scene extends Base {
} }
addImage() { addImage() {
this.image = new LoadImage(); this.image = new LoadImage();
this.image.on('imageLoaded', () => {
this._engine.update();
});
} }
_initEvent() { _initEvent() {

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

@ -25,16 +25,16 @@ export function ArcLineMaterial(options) {
if (options.shapeType === 'greatCircle') { if (options.shapeType === 'greatCircle') {
moduleName = 'greatcircle'; moduleName = 'greatcircle';
} }
const { vs, fs } = getModule(moduleName); const { vs, fs, uniforms } = getModule(moduleName);
const material = new Material({ const material = new Material({
uniforms: { uniforms: wrapUniforms(merge(uniforms, {
u_opacity: { value: options.u_opacity || 1.0 }, u_opacity: options.u_opacity,
segmentNumber: { value: 29 }, segmentNumber: 29,
u_time: { value: 0 }, u_time: 0,
u_zoom: { value: options.u_zoom || 10 }, u_zoom: options.u_zoom,
u_activeId: { value: options.activeId || 0 }, u_activeId: options.activeId,
u_activeColor: { value: options.activeColor || [ 1.0, 0, 0, 1.0 ] } u_activeColor: options.activeColor
}, })),
vertexShader: vs, vertexShader: vs,
fragmentShader: fs, fragmentShader: fs,
transparent: true, transparent: true,

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

@ -1,6 +1,18 @@
precision mediump float; precision mediump float;
uniform float u_opacity; uniform float u_opacity;
varying vec4 v_color; 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() { void main() {
if(v_color.a == 0.){ if(v_color.a == 0.){
@ -9,5 +21,13 @@
gl_FragColor = v_color; gl_FragColor = v_color;
gl_FragColor.a = v_color.a*u_opacity; 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" #pragma include "pick"
} }

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

@ -9,6 +9,11 @@ uniform vec4 u_activeColor : [ 1.0, 0, 0, 1.0 ];
uniform mat4 matModelViewProjection; uniform mat4 matModelViewProjection;
uniform float segmentNumber; uniform float segmentNumber;
varying vec4 v_color; varying vec4 v_color;
#ifdef ANIMATE
varying float v_distance_ratio;
#endif
float maps (float value, float start1, float stop1, float start2, float stop2) { float maps (float value, float start1, float stop1, float start2, float stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)); return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
} }
@ -51,10 +56,13 @@ void main() {
float segmentRatio = getSegmentRatio(segmentIndex); float segmentRatio = getSegmentRatio(segmentIndex);
float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
v_distance_ratio = segmentIndex / segmentNumber;
vec3 curr = getPos(source, target, segmentRatio); vec3 curr = getPos(source, target, segmentRatio);
vec3 next = getPos(source, target, nextSegmentRatio); vec3 next = getPos(source, target, nextSegmentRatio);
vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, position.y); 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); gl_Position =matModelViewProjection * vec4(vec3(curr + vec3(offset, 0.0)),1.0);
v_color = a_color; v_color = a_color;
// picking // picking

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

@ -12,7 +12,7 @@ varying float v_radius;
void main() { void main() {
// int shape = int(floor(v_data.w + 0.5)); // int shape = int(floor(v_data.w + 0.5));
int shape = 0; int shape = int(v_data.w);
lowp float antialiasblur = v_data.z; lowp float antialiasblur = v_data.z;
float antialiased_blur = -max(u_blur, antialiasblur); float antialiased_blur = -max(u_blur, antialiasblur);

9
src/geom/shader/great_circle_line_vert.glsl
View File

@ -10,6 +10,9 @@ uniform vec4 u_activeColor : [ 1.0, 0, 0, 1.0 ];
uniform mat4 matModelViewProjection; uniform mat4 matModelViewProjection;
uniform float segmentNumber; uniform float segmentNumber;
varying vec4 v_color; varying vec4 v_color;
#ifdef ANIMATE
varying float v_distance_ratio;
#endif
#pragma include "project" #pragma include "project"
float maps (float value, float start1, float stop1, float start2, float stop2) { float maps (float value, float start1, float stop1, float start2, float stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)); return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
@ -78,9 +81,9 @@ void main() {
float segmentRatio = getSegmentRatio(segmentIndex); float segmentRatio = getSegmentRatio(segmentIndex);
float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); 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 curr = vec3(degrees(interpolate(source, target, angularDist, segmentRatio)), 0.0);
vec3 next = vec3(degrees(interpolate(source, target, angularDist, nextSegmentRatio)), 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); vec2 offset = getExtrusionOffset((ProjectFlat(next.xy) - ProjectFlat(curr.xy)) * indexDir, position.y);

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

@ -42,7 +42,11 @@ void main() {
#endif #endif
#ifdef DASHLINE #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 #else
gl_FragColor.a *= u_opacity; gl_FragColor.a *= u_opacity;
#endif #endif

20
src/layer/render/line/drawArc.js
View File

@ -29,6 +29,26 @@ export default function DrawArcLine(layerData, layer, buffer) {
}, { }, {
SHAPE: false 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); const arcMesh = new THREE.Mesh(geometry, lineMaterial);
arcMesh.frustumCulled = false; arcMesh.frustumCulled = false;
return arcMesh; return arcMesh;

6
src/layer/render/line/drawMeshLine.js
View File

@ -7,11 +7,6 @@ export default function DrawLine(layerData, layer, buffer) {
const style = layer.get('styleOptions'); const style = layer.get('styleOptions');
const animateOptions = layer.get('animateOptions'); const animateOptions = layer.get('animateOptions');
const activeOption = layer.get('activedOptions'); 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) { if (!buffer) {
const geometryBuffer = getBuffer(layer.type, layer.shapeType); const geometryBuffer = getBuffer(layer.type, layer.shapeType);
buffer = new geometryBuffer({ buffer = new geometryBuffer({
@ -53,6 +48,7 @@ export default function DrawLine(layerData, layer, buffer) {
TEXTURE: hasPattern TEXTURE: hasPattern
}); });
lineMaterial.setBending(style.blending); lineMaterial.setBending(style.blending);
const lineMesh = new THREE.Mesh(geometry, lineMaterial); const lineMesh = new THREE.Mesh(geometry, lineMaterial);
if (animateOptions.enable) { if (animateOptions.enable) {
layer.scene.startAnimate(); layer.scene.startAnimate();