diff --git a/demos/07_city.html b/demos/07_city.html index 0b5acd860f..755c1573e8 100644 --- a/demos/07_city.html +++ b/demos/07_city.html @@ -17,7 +17,7 @@
- + + + + + + + diff --git a/src/core/layer.js b/src/core/layer.js index f6fcb6de4f..228057ba08 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -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') { diff --git a/src/core/scene.js b/src/core/scene.js index 7c102a61cf..a94034fd1a 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -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 diff --git a/src/geom/buffer/line/meshline.js b/src/geom/buffer/line/meshline.js index 196e381e2c..38e7cae96a 100644 --- a/src/geom/buffer/line/meshline.js +++ b/src/geom/buffer/line/meshline.js @@ -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(); diff --git a/src/geom/shader/arcline_frag.glsl b/src/geom/shader/arcline_frag.glsl index 8797501ca2..9b3ec4a32f 100644 --- a/src/geom/shader/arcline_frag.glsl +++ b/src/geom/shader/arcline_frag.glsl @@ -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" } \ No newline at end of file diff --git a/src/layer/render/line/drawArc.js b/src/layer/render/line/drawArc.js index 811c18023d..dd70ae5920 100644 --- a/src/layer/render/line/drawArc.js +++ b/src/layer/render/line/drawArc.js @@ -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(), diff --git a/src/map/AMap.js b/src/map/AMap.js index 2b203944c4..8e0fc255c9 100644 --- a/src/map/AMap.js +++ b/src/map/AMap.js @@ -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;';