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

refactor(camera): update camera async

This commit is contained in:
thinkinggis 2019-08-13 17:26:27 +08:00
parent 16e1b26c36
commit 90124fdae4
8 changed files with 105 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/07_city.html
View File

@ -17,7 +17,7 @@
<div id="map">
<div id ="info" class ="tooltip" style="display:none">
</div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<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="../build/L7.js"></script>
<script>

63
demos/line_bug.html Normal file
View File

@ -0,0 +1,63 @@
<!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%; }
#timepannel {
background: white;
z-index: 10;
position: absolute;
right:50px;
padding: 10px;
}
</style>
</head>
<body>
<div id ='timepannel'>时间: 6时</div>
<div id="map">
</div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=f28fca5384129d180ad82915156a9baf&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/L7.js"></script>
<script>
var buildLayer =null;
const scene = new L7.Scene({
id: 'map',
mapStyle: 'amap://styles/c9f1d10cae34f8ab05e425462c5a58d7', // 样式URL
center: [120.102915,30.261396],
pitch: 0,
zoom: 3,
minZoom: 5,
maxZoom: 18
});
scene.on('loaded', () => {
scene.image.addImage('arrow', '/demos/assets/arrow.png');
scene.image.addImage('right', '/demos/assets/right.png');
$.get('https://gw.alipayobjects.com/os/basement_prod/3ed18d7c-bce4-48ca-8716-5248b584481d.json',(data)=>{
const linelayer = scene.LineLayer({
zIndex: 2
})
.shape('line')
.size(10)
.source(data)
.color('#2b83ba')
.pattern('arrow')
.style({
patternSpacing: 20
})
.render();
});
})
</script>
</body>
</html>

3
src/core/layer.js
View File

@ -89,7 +89,6 @@ export default class Layer extends Base {
if (object.type === 'composer') {
this._object3D = object;
this.scene._engine.composerLayers.push(object);
setTimeout(() => this.scene._engine.update(), 500);
return;
}
type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object;
@ -110,8 +109,6 @@ export default class Layer extends Base {
if (type === 'fill') {
this.get('pickingController').addPickMesh(object);
}
this.scene._engine.update();
// setTimeout(() => this.scene._engine.update(), 200);
}
remove(object) {
if (object.type === 'composer') {

9
src/core/scene.js
View File

@ -29,7 +29,7 @@ export default class Scene extends Base {
_initEngine(mapContainer) {
this._engine = new Engine(mapContainer, this);
this.registerMapEvent();
// this._engine.run();
this._engine.run();
compileBuiltinModules();
}
_initContoller() {
@ -59,7 +59,7 @@ export default class Scene extends Base {
this._initEngine(Map.renderDom);
Map.asyncCamera(this._engine);
this.initLayer();
this._registEvents();
// this._registEvents();
const hash = this.get('hash');
if (hash) {
const Ctor = getInteraction('hash');
@ -69,7 +69,6 @@ export default class Scene extends Base {
this.style = new Style(this, {});
this._initContoller();
this.emit('loaded');
this._engine.update();
});
}
initLayer() {
@ -176,13 +175,13 @@ export default class Scene extends Base {
registerMapEvent() {
this._updateRender = () => this._engine.update();
this.map.on('mousemove', this._updateRender);
this.map.on('mapmove', this._updateRender);
// this.map.on('mapmove', this._updateRender);
this.map.on('camerachange', this._updateRender);
}
unRegsterMapEvent() {
this.map.off('mousemove', this._updateRender);
this.map.off('mapmove', this._updateRender);
// this.map.off('mapmove', this._updateRender);
this.map.off('camerachange', this._updateRender);
}
// control

3
src/geom/buffer/line/meshline.js
View File

@ -7,6 +7,9 @@ export default class MeshLineBuffer extends BufferBase {
this._calculateLine(feature);
delete feature.bufferInfo;
});
this.hasPattern = layerData.some(layer => {
return layer.pattern;
});
}
_initAttributes() {
super._initAttributes();

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

@ -6,8 +6,8 @@
if(v_color.a == 0.){
discard;
}
#pragma include "pick"
gl_FragColor = v_color;
gl_FragColor.a = v_color.a*u_opacity;
#pragma include "pick"
}

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

@ -17,10 +17,10 @@ export default function DrawArcLine(layerData, layer, buffer) {
const geometry = new THREE.BufferGeometry();
geometry.setIndex(new THREE.Uint32BufferAttribute(indexArray, 1));
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('a_instance', new THREE.Float32BufferAttribute(attributes.instanceArray, 4));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
const lineMaterial = new ArcLineMaterial({
u_opacity: style.opacity,
u_zoom: layer.scene.getZoom(),

58
src/map/AMap.js
View File

@ -30,10 +30,6 @@ export default class GaodeMap extends Base {
super(cfg);
this.container = document.getElementById(this.get('id'));
this.initMap();
this.addOverLayer();
setTimeout(() => {
this.emit('mapLoad');
}, 10);
}
initMap() {
@ -56,35 +52,42 @@ export default class GaodeMap extends Base {
this.map = map;
this.container = map.getContainer();
this.get('mapStyle') && this.map.setMapStyle(this.get('mapStyle'));
this.addOverLayer();
this.emit('mapLoad');
} else {
this.map = new AMap.Map(this.container, this._attrs);
this.map.on('complete', () => {
this.addOverLayer();
this.emit('mapLoad');
});
}
this.amapContainer = this.map.getContainer().getElementsByClassName('amap-maps')[0];
}
asyncCamera(engine) {
this._engine = engine;
const camera = engine._camera;
this.map.on('camerachange', e => {
const mapCamera = e.camera;
let { fov, near, far, height, pitch, rotation, aspect } = mapCamera;
pitch *= DEG2RAD;
rotation *= DEG2RAD;
camera.fov = (180 * fov) / Math.PI;
camera.aspect = aspect;
camera.near = near;
camera.far = far;
camera.updateProjectionMatrix();
camera.position.z = height * Math.cos(pitch);
camera.position.x = height * Math.sin(pitch) * Math.sin(rotation);
camera.position.y = -height * Math.sin(pitch) * Math.cos(rotation);
camera.up.x = -Math.cos(pitch) * Math.sin(rotation);
camera.up.y = Math.cos(pitch) * Math.cos(rotation);
camera.up.z = Math.sin(pitch);
camera.lookAt(0, 0, 0);
camera.position.x += e.camera.position.x;
camera.position.y += -e.camera.position.y;
this._engine.update();
});
this.updateCamera();
this.map.on('camerachange', this.updateCamera.bind(this));
}
updateCamera() {
const camera = this._engine._camera;
const mapCamera = this.map.getCameraState();
let { fov, near, far, height, pitch, rotation, aspect } = mapCamera;
pitch *= DEG2RAD;
rotation *= DEG2RAD;
camera.fov = (180 * fov) / Math.PI;
camera.aspect = aspect;
camera.near = near;
camera.far = far;
camera.updateProjectionMatrix();
camera.position.z = height * Math.cos(pitch);
camera.position.x = height * Math.sin(pitch) * Math.sin(rotation);
camera.position.y = -height * Math.sin(pitch) * Math.cos(rotation);
camera.up.x = -Math.cos(pitch) * Math.sin(rotation);
camera.up.y = Math.cos(pitch) * Math.cos(rotation);
camera.up.z = Math.sin(pitch);
camera.lookAt(0, 0, 0);
camera.position.x += mapCamera.position.x;
camera.position.y += -mapCamera.position.y;
}
projectFlat(lnglat) {
@ -99,6 +102,7 @@ export default class GaodeMap extends Base {
addOverLayer() {
// const canvasContainer = this.container instanceof HTMLElement ? this.container : document.getElementById(this.container);
// this.canvasContainer = canvasContainer;
this.amapContainer = this.map.getContainer().getElementsByClassName('amap-maps')[0];
this.renderDom = document.createElement('div');
this.renderDom.style.cssText +=
'position: absolute;top: 0; z-index:1;height: 100%;width: 100%;pointer-events: none;';