From 9b2a4ca26cd58791a667e373a2bd04d63dc1570c Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 12 Aug 2019 10:35:50 +0800 Subject: [PATCH] =?UTF-8?q?perf(shader):=20=E4=BC=98=E5=8C=96=E7=BA=BF?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demos/01_circle.html | 11 ++- demos/hz.html | 97 ++++++++++++++++++++++++--- demos/marker.html | 96 ++++++++++++++++++++++++++ demos/vector2.html | 26 ++++--- src/component/control/zoom.js | 18 ++--- src/component/marker.js | 34 ++++++++-- src/component/popup.js | 6 +- src/core/scene.js | 2 +- src/geom/buffer/line/arcline.js | 3 + src/geom/shader/meshline_frag.glsl | 9 +-- src/geom/shader/meshline_vert.glsl | 10 +-- src/layer/line_layer.js | 5 ++ src/layer/render/line/drawMeshLine.js | 10 +-- src/map/AMap.js | 2 +- src/map/mapbox.js | 2 +- src/worker/workerTile.js | 3 +- 16 files changed, 275 insertions(+), 59 deletions(-) create mode 100644 demos/marker.html diff --git a/demos/01_circle.html b/demos/01_circle.html index a8fa80d791..45526361b8 100644 --- a/demos/01_circle.html +++ b/demos/01_circle.html @@ -13,7 +13,6 @@ - + + +
+ + + + + + + + + diff --git a/demos/vector2.html b/demos/vector2.html index 4c416d6127..45db086525 100644 --- a/demos/vector2.html +++ b/demos/vector2.html @@ -25,7 +25,7 @@ const scene = new L7.Scene({ id: 'map', - mapStyle: 'light', // 样式URL + mapStyle: 'dark', // 样式URL center: [104.838088,34.075889 ], pitch: 0, hash:false, @@ -42,7 +42,7 @@ attributeCtr.addTo(scene); scene.addTileSource('test',{ - url:'http://127.0.0.1:8080/{z}/{x}/{y}.pbf', + url:' https://mvt.amap.com/district/CHN2/{z}/{x}/{y}/4096?key=608d75903d29ad471362f8c58c550daf', type:'vector', minZoom: 0, maxZoom:9 @@ -54,8 +54,8 @@ .source('test',{ parser:{ type: 'mvt', - sourceLayer:'boundaries_admin_3', - idField:'id' + sourceLayer:'CHN_Cities', + idField:'adcode' } }) .shape('fill') @@ -70,20 +70,21 @@ const { lnglat, feature } = e; const popup = new L7.Popup() .setLnglat([lnglat.lng, lnglat.lat]) - .setHTML(feature.properties.id).addTo(scene); + .setHTML(feature.properties.NAME_CHN.toString()).addTo(scene); }) - const layer2 = scene.PolygonLayer({ + + const layer2 = scene.LineLayer({ zIndex:10, }) .source('test',{ parser:{ type: 'mvt', - sourceLayer:'boundaries_admin_3', - idField:'id' + sourceLayer:'CHN_L', + idField:'adcode' } }) .shape('line') - .size(1) + .size(2) .active(false) .color('#fff') .style({ @@ -91,6 +92,7 @@ }) .render(); +/** const layer3 = scene.PointLayer({ zIndex:10, }) @@ -109,13 +111,15 @@ opacity:1.0 }) .render(); + **/ const overlayers = { "行政区划": layer, - "标注": layer3, + "行政区边界": layer2, }; + const layerContr = new L7.Control.Layers({overlayers}).addTo(scene); const popup = new L7.Popup({anchor:'left'}).setText('hello world') - const marker = new L7.Marker({color:'red'}) + const marker = new L7.Marker({color:'blue'}) .setLnglat([104.838088,34.075889 ]) .setPopup(popup) .addTo(scene); diff --git a/src/component/control/zoom.js b/src/component/control/zoom.js index 52aa33dfac..a8ccdd7c60 100644 --- a/src/component/control/zoom.js +++ b/src/component/control/zoom.js @@ -12,8 +12,9 @@ export default class Zoom extends Control { ...cfg }); bindAll([ '_updateDisabled', '_zoomIn', '_zoomOut' ], this); + this._disabled = false; } - onAdd() { + onAdd(scene) { const zoomName = 'l7-control-zoom'; const container = DOM.create('div', zoomName + ' l7-bar'); @@ -21,14 +22,14 @@ export default class Zoom extends Control { zoomName + '-in', container, this._zoomIn); this._zoomOutButton = this._createButton(this.get('zoomOutText'), this.get('zoomOutTitle'), zoomName + '-out', container, this._zoomOut); + scene.on('zoomend', this._updateDisabled); + scene.on('zoomchange', this._updateDisabled); this._updateDisabled(); - this._scene.on('zoomend', this._updateDisabled); - this._scene.on('zoomchange', this._updateDisabled); return container; } - onRemove() { - this._scene.off('zoomend', this._updateDisabled); - this._scene.off('zoomchange', this._updateDisabled); + onRemove(scene) { + scene.off('zoomend', this._updateDisabled); + scene.off('zoomchange', this._updateDisabled); } disable() { this._disabled = true; @@ -63,11 +64,10 @@ export default class Zoom extends Control { const className = 'l7-disabled'; DOM.removeClass(this._zoomInButton, className); DOM.removeClass(this._zoomOutButton, className); - - if (this._disabled || scene.getZoom() === scene.get('minZoom')) { + if (this._disabled || scene.getZoom() <= scene.get('minZoom')) { DOM.addClass(this._zoomOutButton, className); } - if (this._disabled || scene._zoom === scene.get('maxZoom')) { + if (this._disabled || scene.getZoom() >= scene.get('maxZoom')) { DOM.addClass(this._zoomInButton, className); } } diff --git a/src/component/marker.js b/src/component/marker.js index 22f9b353ad..75e17c7a8b 100644 --- a/src/component/marker.js +++ b/src/component/marker.js @@ -42,12 +42,8 @@ export default class Marker extends Base { } DOM.addClass(element, 'l7-marker'); - element.addEventListener('dragstart', e => { - e.preventDefault(); - }); element.addEventListener('click', e => { - e.preventDefault(); - this._onMapClick(); + this._onMapClick(e); }); applyAnchorClass(element, this.get('anchor'), 'marker'); @@ -61,7 +57,6 @@ export default class Marker extends Base { this._scene.on('camerachange', this._update); this.setDraggable(this.get('draggable')); this._update(); - // this._scene.on('click', this._onMapClick); return this; } @@ -142,5 +137,32 @@ export default class Marker extends Base { this.get('element').style.left = pos.x + 'px'; this.get('element').style.top = pos.y + 'px'; + } + _bubbleUp() { + const eventsName = [ + 'mouseout', + 'mouseover', + 'mousemove', + 'mousedown', + 'mouseleave', + 'mouseup', + 'rightclick', + 'click', + 'dblclick', + 'wheel' + ]; + const element = this.get('element'); + eventsName.forEach(event => { + element.addEventListener(event, e => { + this._scene.emit(event, e); + }); + }); + } + + _addDragHandler() { + + } + _onUp() { + } } diff --git a/src/component/popup.js b/src/component/popup.js index 9c27d12099..31f8d02759 100644 --- a/src/component/popup.js +++ b/src/component/popup.js @@ -18,13 +18,13 @@ export default class Popup extends Base { if (this.get('closeOnClick')) { this._scene.on('click', this._onClickClose); } - this._scene.on('mapmove', this._update); + this._scene.on('camerachange', this._update); this._update(); } setLnglat(lngLat) { this.lngLat = lngLat; if (this._scene) { - this._scene.on('mapmove', this._update); + this._scene.on('camerachange', this._update); } this._update(lngLat); return this; @@ -123,7 +123,7 @@ export default class Popup extends Base { delete this._container; } if (this._scene) { - this._scene.off('mapmove', this._update); + this._scene.off('camerachange', this._update); this._scene.off('click', this._onClickClose); delete this._scene; } diff --git a/src/core/scene.js b/src/core/scene.js index 14dec56845..16e5b7e781 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -20,7 +20,6 @@ export default class Scene extends Base { super(cfg); this._initMap(); this.crs = epsg3857; - this._initContoller(); // this._initAttribution(); // 暂时取消，后面作为组件去加载 this.addImage(); this.fontAtlasManager = new FontAtlasManager(); @@ -68,6 +67,7 @@ export default class Scene extends Base { interaction._onHashChange(); } this.style = new Style(this, {}); + this._initContoller(); this.emit('loaded'); this._engine.update(); }); diff --git a/src/geom/buffer/line/arcline.js b/src/geom/buffer/line/arcline.js index cdd5bcdd2b..e5cd7a2266 100644 --- a/src/geom/buffer/line/arcline.js +++ b/src/geom/buffer/line/arcline.js @@ -5,6 +5,9 @@ export default class ArcLineBuffer extends BufferBase { layerData.forEach((feature, index) => { this._calculateArc(feature, index); }); + this.hasPattern = layerData.some(layer => { + return layer.pattern; + }); } _initAttributes() { super._initAttributes(); diff --git a/src/geom/shader/meshline_frag.glsl b/src/geom/shader/meshline_frag.glsl index e786fd293b..1162b985f2 100644 --- a/src/geom/shader/meshline_frag.glsl +++ b/src/geom/shader/meshline_frag.glsl @@ -6,7 +6,8 @@ uniform float u_dash_ratio : 0.0; uniform float u_blur : 0.9; varying vec4 v_color; -#ifdef DASHLINE +uniform float u_time : 0; +#if defined DASHLINE || defined ANIMATE varying float v_distance_ratio; #endif varying float v_dash_array; @@ -41,15 +42,15 @@ void main() { #endif #ifdef DASHLINE - gl_FragColor.a *= u_opacity * ceil(mod(v_distance_ratio + u_dash_offset, v_dash_array) - (v_dash_array * u_dash_ratio)); + 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)); #else gl_FragColor.a *= u_opacity; #endif #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; - v_time = clamp(alpha,0.,1.); - gl_FragColor.a *= v_time; + alpha = smoothstep(0., 1., alpha); + gl_FragColor.a *= alpha; #endif // anti-alias float blur = 1. - smoothstep(u_blur, 1., length(v_normal)); diff --git a/src/geom/shader/meshline_vert.glsl b/src/geom/shader/meshline_vert.glsl index 0d742e04c6..1a5c3c9e6f 100644 --- a/src/geom/shader/meshline_vert.glsl +++ b/src/geom/shader/meshline_vert.glsl @@ -14,7 +14,7 @@ varying float v_time; varying vec4 v_color; varying float v_dash_array; varying vec2 v_normal; -#ifdef DASHLINE +#if defined DASHLINE || defined ANIMATE varying float v_distance_ratio; #endif @@ -37,7 +37,7 @@ void main() { v_color = a_color; v_dash_array = a_dash_array; float distance_ratio = a_distance / a_total_distance; - #ifdef DASHLINE +#if defined DASHLINE || defined ANIMATE v_distance_ratio = distance_ratio; #endif #ifdef TEXTURE @@ -57,12 +57,6 @@ void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy + offset.xy, 0., 1.0); // gl_Position.z -=0.8 * gl_Position.w; - // #ifdef ANIMATE - // float alpha =1.0 - fract( mod(1.0- distance_ratio,u_interval)* (1.0/u_interval) + u_time / u_duration); - // alpha = (alpha + u_trailLength -1.0) / u_trailLength; - // v_time = clamp(alpha,0.,1.); - // #endif - // picking if(pickingId == u_activeId) { v_color = u_activeColor; diff --git a/src/layer/line_layer.js b/src/layer/line_layer.js index 7e70f0daa9..0b96e55129 100644 --- a/src/layer/line_layer.js +++ b/src/layer/line_layer.js @@ -1,8 +1,13 @@ import Layer from '../core/layer'; import { getRender } from './render'; export default class LineLayer extends Layer { + constructor(scene, cfg) { + super(scene, cfg); + this.set('type', 'line'); + } shape(type) { this.shapeType = type; + this.set('shape', type); return this; } preRender() { diff --git a/src/layer/render/line/drawMeshLine.js b/src/layer/render/line/drawMeshLine.js index 953085b537..a2d29d7160 100644 --- a/src/layer/render/line/drawMeshLine.js +++ b/src/layer/render/line/drawMeshLine.js @@ -9,9 +9,9 @@ export default function DrawLine(layerData, layer, buffer) { const activeOption = layer.get('activedOptions'); // const pattern = style.pattern; // const texture = layer.scene.image.singleImages[pattern]; - const hasPattern = layerData.some(layer => { - return layer.pattern; - }); + // const hasPattern = layerData.some(layer => { + // return layer.pattern; + // }); if (!buffer) { const geometryBuffer = getBuffer(layer.type, layer.shapeType); buffer = new geometryBuffer({ @@ -22,7 +22,7 @@ export default function DrawLine(layerData, layer, buffer) { }); } - const { attributes, indexArray } = buffer; + const { attributes, indexArray, hasPattern } = buffer; const geometry = new THREE.BufferGeometry(); @@ -70,7 +70,7 @@ export default function DrawLine(layerData, layer, buffer) { u_trailLength: trailLength }); lineMaterial.setDefinesvalue('ANIMATE', true); - lineMaterial.setDefinesvalue('DASHLINE', true); + // lineMaterial.setDefinesvalue('DASHLINE', true); } return lineMesh; } diff --git a/src/map/AMap.js b/src/map/AMap.js index b30a0e0f30..da40418842 100644 --- a/src/map/AMap.js +++ b/src/map/AMap.js @@ -33,7 +33,7 @@ export default class GaodeMap extends Base { this.addOverLayer(); setTimeout(() => { this.emit('mapLoad'); - }, 100); + }, 10); } initMap() { diff --git a/src/map/mapbox.js b/src/map/mapbox.js index b3e7ddf875..cba77624b0 100644 --- a/src/map/mapbox.js +++ b/src/map/mapbox.js @@ -26,7 +26,7 @@ export default class MapBox extends Base { this.addOverLayer(); setTimeout(() => { this.emit('mapLoad'); - }, 100); + }, 10); } diff --git a/src/worker/workerTile.js b/src/worker/workerTile.js index 46e4e97373..a3bfa3220d 100644 --- a/src/worker/workerTile.js +++ b/src/worker/workerTile.js @@ -40,7 +40,8 @@ export default class WorkerTile { const geometryBuffer = getBuffer(style.type, style.shape); const buffer = new geometryBuffer({ layerData: tileMapping.layerData, - shape: style.shape + shape: style.shape, + style }); sourceLayerData[style.layerId] = { buffer: {