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="map">
<div id ="info" class ="tooltip" style="display:none"> <div id ="info" class ="tooltip" style="display:none">
</div> </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="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/L7.js"></script> <script src="../build/L7.js"></script>
<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') { if (object.type === 'composer') {
this._object3D = object; this._object3D = object;
this.scene._engine.composerLayers.push(object); this.scene._engine.composerLayers.push(object);
setTimeout(() => this.scene._engine.update(), 500);
return; return;
} }
type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object; type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object;
@ -110,8 +109,6 @@ export default class Layer extends Base {
if (type === 'fill') { if (type === 'fill') {
this.get('pickingController').addPickMesh(object); this.get('pickingController').addPickMesh(object);
} }
this.scene._engine.update();
// setTimeout(() => this.scene._engine.update(), 200);
} }
remove(object) { remove(object) {
if (object.type === 'composer') { if (object.type === 'composer') {

9
src/core/scene.js
View File

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

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

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

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

@ -6,8 +6,8 @@
if(v_color.a == 0.){ if(v_color.a == 0.){
discard; discard;
} }
#pragma include "pick"
gl_FragColor = v_color; gl_FragColor = v_color;
gl_FragColor.a = v_color.a*u_opacity; 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(); const geometry = new THREE.BufferGeometry();
geometry.setIndex(new THREE.Uint32BufferAttribute(indexArray, 1)); geometry.setIndex(new THREE.Uint32BufferAttribute(indexArray, 1));
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3)); 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_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('a_instance', new THREE.Float32BufferAttribute(attributes.instanceArray, 4)); geometry.addAttribute('a_instance', new THREE.Float32BufferAttribute(attributes.instanceArray, 4));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1)); geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
const lineMaterial = new ArcLineMaterial({ const lineMaterial = new ArcLineMaterial({
u_opacity: style.opacity, u_opacity: style.opacity,
u_zoom: layer.scene.getZoom(), u_zoom: layer.scene.getZoom(),

58
src/map/AMap.js
View File

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