diff --git a/.travis.yml b/.travis.yml index fee155eca2..30ee13076f 100755 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,7 @@ language: node_js node_js: - - "8" + - "12" env: matrix: @@ -11,6 +11,7 @@ addons: apt: packages: - xvfb + - libgconf-2-4 install: - export DISPLAY=':99.0' 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 @@ - + + + +
时间: 6时
+
+ +
+ + + + + + + diff --git a/demos/marker.html b/demos/marker.html new file mode 100644 index 0000000000..0cd4187f5e --- /dev/null +++ b/demos/marker.html @@ -0,0 +1,111 @@ + + + + + + 气泡图 + + + +
+ + + + + + + + + diff --git a/demos/taxi.html b/demos/taxi.html index 359263b8bd..205eb1282b 100644 --- a/demos/taxi.html +++ b/demos/taxi.html @@ -31,16 +31,23 @@ const scene = new L7.Scene({ maxZoom: 18 }); scene.on('loaded', () => { - $.get('https://gw.alipayobjects.com/os/rmsportal/kNDVHmyUWAKhWmWXmjxM.json', data => { + $.get('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', data => { scene.LineLayer({ zIndex: 2 }) .source(data) - //.color('#F08D41') + .size([2, 0]) + .shape('line') .color('#ff893a') - .animate({enable:true}) - //.render(); + .animate({ + enable:true, + interval:0.2, + duration:5, + trailLength:0.1 + }) + .render(); }); + $.get('https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json', data => { buildLayer = scene.PolygonLayer({ zIndex: 2 diff --git a/demos/vector2.html b/demos/vector2.html index 30cf610b4d..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 @@ scene.on('loaded', () => { 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 @@ scene.on('loaded', () => { .source('test',{ parser:{ type: 'mvt', - sourceLayer:'boundaries_admin_3', - idField:'id' + sourceLayer:'CHN_Cities', + idField:'adcode' } }) .shape('fill') @@ -70,20 +70,21 @@ scene.on('loaded', () => { 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 @@ scene.on('loaded', () => { }) .render(); +/** const layer3 = scene.PointLayer({ zIndex:10, }) @@ -109,11 +111,18 @@ scene.on('loaded', () => { 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:'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/css/l7.css b/src/component/css/l7.css index f2de698cc0..93356e0a90 100644 --- a/src/component/css/l7.css +++ b/src/component/css/l7.css @@ -1,3 +1,32 @@ +.l7-marker { + position: absolute; + top: 0; + left: 0; + z-index: 5; +} +.l7-popup-anchor-top, +.l7-popup-anchor-top-left, +.l7-popup-anchor-top-right { + -webkit-flex-direction: column; + flex-direction: column; +} + +.l7-popup-anchor-bottom, +.l7-popup-anchor-bottom-left, +.l7-popup-anchor-bottom-right { + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; +} + +.l7-popup-anchor-left { + -webkit-flex-direction: row; + flex-direction: row; +} + +.l7-popup-anchor-right { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; +} .l7-popup { position: absolute; top: 0; @@ -14,6 +43,122 @@ border: 10px solid transparent; z-index: 1; } +.l7-popup-anchor-top .l7-popup-tip { + -webkit-align-self: center; + align-self: center; + border-top: none; + border-bottom-color: #fff; +} + +.l7-popup-anchor-top-left .l7-popup-tip { + -webkit-align-self: flex-start; + align-self: flex-start; + border-top: none; + border-left: none; + border-bottom-color: #fff; +} + +.l7-popup-anchor-top-right .l7-popup-tip { + -webkit-align-self: flex-end; + align-self: flex-end; + border-top: none; + border-right: none; + border-bottom-color: #fff; +} + +.l7-popup-anchor-bottom .l7-popup-tip { + -webkit-align-self: center; + align-self: center; + border-bottom: none; + border-top-color: #fff; +} + +.l7-popup-anchor-bottom-left .l7-popup-tip { + -webkit-align-self: flex-start; + align-self: flex-start; + border-bottom: none; + border-left: none; + border-top-color: #fff; +} + +.l7-popup-anchor-bottom-right .l7-popup-tip { + -webkit-align-self: flex-end; + align-self: flex-end; + border-bottom: none; + border-right: none; + border-top-color: #fff; +} + +.l7-popup-anchor-left .l7-popup-tip { + -webkit-align-self: center; + align-self: center; + border-left: none; + border-right-color: #fff; +} + +.l7-popup-anchor-right .l7-popup-tip { + -webkit-align-self: center; + align-self: center; + border-right: none; + border-left-color: #fff; +} + +.l7-popup-close-button { + position: absolute; + right: 0; + top: 0; + border: 0; + border-radius: 0 3px 0 0; + cursor: pointer; + background-color: transparent; +} + +.l7-popup-close-button:hover { + background-color: rgba(0, 0, 0, 0.05); +} + +.l7-popup-content { + position: relative; + background: #fff; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + padding: 10px 10px 15px; + pointer-events: auto; +} + +.l7-popup-anchor-top-left .l7-popup-content { + border-top-left-radius: 0; +} + +.l7-popup-anchor-top-right .l7-popup-content { + border-top-right-radius: 0; +} + +.l7-popup-anchor-bottom-left .l7-popup-content { + border-bottom-left-radius: 0; +} + +.l7-popup-anchor-bottom-right .l7-popup-content { + border-bottom-right-radius: 0; +} + +.l7-popup-track-pointer { + display: none; +} + +.l7-popup-track-pointer * { + pointer-events: none; + user-select: none; +} + +.l7-map:hover .l7-popup-track-pointer { + display: flex; +} + +.l7-map:active .l7-popup-track-pointer { + display: none; +} + .l7-popup-close-button { position: absolute; right: 0; diff --git a/src/component/marker.js b/src/component/marker.js new file mode 100644 index 0000000000..1e9385f5f1 --- /dev/null +++ b/src/component/marker.js @@ -0,0 +1,168 @@ +import Base from '../core/base'; +import { bindAll } from '../util/event'; +import { applyAnchorClass, anchorTranslate } from '../util/anchor'; +import * as DOM from '../util/dom'; +export default class Marker extends Base { + constructor(cfg) { + super({ + element: '', // DOM element + anchor: 'center', + offset: [ 0, 0 ], + color: '#2f54eb', + draggable: false, + ...cfg + + }); + bindAll([ + '_update', + '_onMove', + '_onUp', + '_addDragHandler', + '_onMapClick' + ], this); + this._init(); + } + _init() { + let element = this.get('element'); + if (!element) { + this._defaultMarker = true; + element = DOM.create('div'); + this.set('element', element); + const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.setAttributeNS(null, 'display', 'block'); + svg.setAttributeNS(null, 'height', '48px'); + svg.setAttributeNS(null, 'width', '48px'); + svg.setAttributeNS(null, 'viewBox', '0 0 1024 1024'); + + const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + path.setAttributeNS(null, 'd', 'M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z'); + path.setAttributeNS(null, 'fill', this.get('color')); + svg.appendChild(path); + element.appendChild(svg); + + } + DOM.addClass(element, 'l7-marker'); + element.addEventListener('click', e => { + this._onMapClick(e); + }); + applyAnchorClass(element, this.get('anchor'), 'marker'); + + this._popup = null; + + } + addTo(scene) { + this.remove(); + this._scene = scene; + this._scene.getMarkerContainer().appendChild(this.get('element')); + this._scene.on('camerachange', this._update); + this.setDraggable(this.get('draggable')); + this._update(); + return this; + } + + remove() { + if (this._scene) { + this._scene.off('click', this._onMapClick); + this._scene.off('move', this._update); + this._scene.off('moveend', this._update); + this._scene.off('mousedown', this._addDragHandler); + this._scene.off('touchstart', this._addDragHandler); + this._scene.off('mouseup', this._onUp); + this._scene.off('touchend', this._onUp); + delete this._scene; + } + DOM.remove(this.get('element')); + if (this._popup) this._popup.remove(); + return this; + } + setLnglat(lngLat) { + this._lngLat = lngLat; + if (this._popup) this._popup.setLnglat(this._lngLat); + return this; + } + getLngLat() { + return this._lngLat; + } + + getElement() { + return this.get('element'); + } + + setPopup(popup) { + this._popup = popup; + if (this._lngLat) this._popup.setLnglat(this._lngLat); + return this; + } + + togglePopup() { + const popup = this._popup; + if (!popup) return this; + else if (popup.isOpen()) popup.remove(); + else popup.addTo(this._scene); + return this; + } + + getPopup() { + return this._popup; + } + + getOffset() { + + } + + setDraggable() { + + } + + isDraggable() { + return this._draggable; + } + _update() { + if (!this._scene) return; + this._updatePosition(); + DOM.setTransform(this.get('element'), `${anchorTranslate[ this.get('anchor')]}`); + + } + _onMapClick() { + // this._scene.emit('click'); // 触发map点击事件，关闭其他popup + const element = this.get('element'); + + if (this._popup && element) { + this.togglePopup(); + } + } + _updatePosition() { + if (!this._scene) { return; } + const pos = this._pos = this._scene.lngLatToContainer(this._lngLat); + 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 22e99f69e1..d88c1457e4 100644 --- a/src/component/popup.js +++ b/src/component/popup.js @@ -1,6 +1,7 @@ import Base from '../core/base'; import { bindAll } from '../util/event'; import * as DOM from '../util/dom'; +import { applyAnchorClass, anchorTranslate } from '../util/anchor'; export default class Popup extends Base { constructor(cfg) { super({ @@ -17,41 +18,50 @@ 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; } + _update() { const hasPosition = this.lngLat; if (!this._scene || !hasPosition || !this._content) { return; } if (!this._container) { - this._container = this.creatDom('div', 'l7-popup', this._scene.getContainer()); - // this._tip = this.creatDom('div', 'l7-popup-tip', this._container); + this._container = this.creatDom('div', 'l7-popup', this._scene.getMarkerContainer().parentNode); + + this._tip = this.creatDom('div', 'l7-popup-tip', this._container); this._container.appendChild(this._content); if (this.get('className')) { this.get('className').split(' ').forEach(name => this._container.classList.add(name)); } + this._container.addEventListener('mousedown', e => { + e.stopPropagation(); + }); } if (this.get('maxWidth') && this._container.style.maxWidth !== this.get('maxWidth')) { this._container.style.maxWidth = this.get('maxWidth'); } this._updatePosition(); + DOM.setTransform(this._container, `${anchorTranslate[this.get('anchor')]}`); + applyAnchorClass(this._container, this.get('anchor'), 'popup'); } + _updatePosition() { if (!this._scene) { return; } const pos = this._scene.lngLatToContainer(this.lngLat); this._container.style.left = pos.x + 'px'; this._container.style.top = pos.y + 'px'; } + setHTML(html) { const frag = window.document.createDocumentFragment(); const temp = window.document.createElement('body'); @@ -117,11 +127,14 @@ 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; } this.emit('close'); return this; } + isOpen() { + return !!this._scene; + } } 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 14dec56845..a94034fd1a 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -20,8 +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(); this._layers = []; @@ -31,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() { @@ -55,12 +53,13 @@ export default class Scene extends Base { const Map = new MapProvider(this._attrs); Map.mixMap(this); this._container = Map.container; + this._markerContainier = Map.l7_marker_Container; Map.on('mapLoad', () => { this.map = Map.map; 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'); @@ -68,8 +67,8 @@ export default class Scene extends Base { interaction._onHashChange(); } this.style = new Style(this, {}); + this._initContoller(); this.emit('loaded'); - this._engine.update(); }); } initLayer() { @@ -122,6 +121,9 @@ export default class Scene extends Base { getContainer() { return this._container; } + getMarkerContainer() { + return this._markerContainier; + } _registEvents() { const events = [ 'mouseout', @@ -173,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/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/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/geom/shader/meshline_frag.glsl b/src/geom/shader/meshline_frag.glsl index debc84c992..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; @@ -20,6 +21,12 @@ varying float v_texture_y; varying float v_texture_percent; #endif +#ifdef ANIMATE +uniform float u_duration : 2.0; +uniform float u_interval : 1.0; +uniform float u_trailLength : 0.2; +#endif + void main() { #ifdef TEXTURE float texture_y_fract = fract(v_texture_y); @@ -35,12 +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 - gl_FragColor.a *= v_time; + 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 // 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 f8031ad4e3..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/index.js b/src/index.js index 4f8da9a530..7d52591507 100755 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,9 @@ import { registerParser, registerTransform } from './source'; import { registerInteraction, getInteraction } from './interaction'; import { registerLayer } from './layer'; import Popup from './component/popup'; +import Marker from './component/marker'; import * as Control from './component/control'; + const version = Global.version; const exported = { version, @@ -20,6 +22,7 @@ const exported = { registerInteraction, getInteraction, Popup, + Marker, Control }; export default exported; 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/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/layer/render/line/drawMeshLine.js b/src/layer/render/line/drawMeshLine.js index 6b81e0da3c..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,6 +70,7 @@ export default function DrawLine(layerData, layer, buffer) { u_trailLength: trailLength }); lineMaterial.setDefinesvalue('ANIMATE', true); + // lineMaterial.setDefinesvalue('DASHLINE', true); } return lineMesh; } diff --git a/src/map/AMap.js b/src/map/AMap.js index b30a0e0f30..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'); - }, 100); } initMap() { @@ -56,34 +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'); + }); } + } 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) { @@ -96,13 +100,18 @@ export default class GaodeMap extends Base { return this.projectFlat(this.getCenter()); } addOverLayer() { - const canvasContainer = this.container instanceof HTMLElement ? this.container : document.getElementById(this.container); - this.canvasContainer = canvasContainer; + // 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;'; this.renderDom.id = 'l7_canvaslayer'; - canvasContainer.appendChild(this.renderDom); + + this.amapContainer.appendChild(this.renderDom); + this.l7_marker_Container = document.createElement('div'); + this.l7_marker_Container.className = 'l7_marker'; + this.amapContainer.appendChild(this.l7_marker_Container); } mixMap(scene) { const map = this.map; 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/util/anchor.js b/src/util/anchor.js new file mode 100644 index 0000000000..98cc65be71 --- /dev/null +++ b/src/util/anchor.js @@ -0,0 +1,18 @@ +export const anchorTranslate = { + center: 'translate(-50%,-50%)', + top: 'translate(-50%,0)', + 'top-left': 'translate(0,0)', + 'top-right': 'translate(-100%,0)', + bottom: 'translate(-50%,-100%)', + 'bottom-left': 'translate(0,-100%)', + 'bottom-right': 'translate(-100%,-100%)', + left: 'translate(0,-50%)', + right: 'translate(-100%,-50%)' +}; +export function applyAnchorClass(element, anchor, prefix) { + const classList = element.classList; + for (const key in anchorTranslate) { + classList.remove(`l7-${prefix}-anchor-${key}`); + } + classList.add(`l7-${prefix}-anchor-${anchor}`); +} diff --git a/src/util/dom.js b/src/util/dom.js index 9c41f1f823..f71fa6c088 100644 --- a/src/util/dom.js +++ b/src/util/dom.js @@ -1,4 +1,14 @@ import * as Util from './util'; +const docStyle = window.document.documentElement.style; +function testProp(props) { + if (!docStyle) return props[0]; + for (let i = 0; i < props.length; i++) { + if (props[i] in docStyle) { + return props[i]; + } + } + return props[0]; +} export function create(tagName, className, container) { const el = document.createElement(tagName); el.className = className || ''; @@ -78,3 +88,9 @@ export function empty(el) { el.removeChild(el.firstChild); } } + +const transformProp = testProp([ 'transform', 'WebkitTransform' ]); + +export function setTransform(el, value) { + el.style[transformProp] = value; +} 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: {