mirror of https://gitee.com/antv-l7/antv-l7
Merge pull request #15 from antvis/1.3beta
fix(point): 修复shape映射,图片加载的事件
This commit is contained in:
@thinkinggis
GitHub
commit
5887462a61
|
|
@ -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,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -46,10 +46,16 @@ 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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
||||
});
|
||||
} else {
|
||||
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.texture = new THREE.CanvasTexture(this.canvas);
|
||||
this.imagePos[id] = { x: x >> 9, y: y >> 9 };
|
||||
if (this.images.length === this.imagesCount) {
|
||||
this.texture.needsUpdate = true;
|
||||
this.emit('imageLoaded');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
removeImage() {
|
||||
|
|
|
|||
|
|
@ -591,15 +591,6 @@ export default class Layer extends Base {
|
|||
this.get('pickingController').removeAllMesh();
|
||||
this.draw();
|
||||
}
|
||||
// 更新mesh
|
||||
updateDraw() {
|
||||
|
||||
}
|
||||
|
||||
styleCfg() {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置高亮要素
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue