From 6110be6306f2f004e44e0b48f679a80bed5a85f0 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 11 Sep 2019 20:59:25 +0800 Subject: [PATCH] =?UTF-8?q?fix=20removelayer=20=E4=B8=8D=E8=83=BD=E9=87=8D?= =?UTF-8?q?=E7=BB=98=E7=9A=84=E9=97=AE=E9=A2=98=20fix=20=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E6=B8=B2=E6=9F=93stroke=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demos/assets/bezier.js | 0 demos/line.html | 84 +++++----- demos/world.html | 162 ++++++++++++++++++++ src/component/marker.js | 2 +- src/core/scene.js | 4 + src/geom/material/lineMaterial.js | 13 +- src/geom/material/material.js | 14 +- src/geom/material/pointMaterial.js | 1 - src/geom/shader/great_circle_line_vert.glsl | 2 +- src/layer/render/line/drawArc.js | 2 +- src/layer/render/text/drawText.js | 5 +- 11 files changed, 220 insertions(+), 69 deletions(-) create mode 100644 demos/assets/bezier.js create mode 100644 demos/world.html diff --git a/demos/assets/bezier.js b/demos/assets/bezier.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/line.html b/demos/line.html index 8583dbfc0d..c851668170 100644 --- a/demos/line.html +++ b/demos/line.html @@ -31,59 +31,47 @@ var buildLayer =null; const scene = new L7.Scene({ id: 'map', - mapStyle: 'amap://styles/c9f1d10cae34f8ab05e425462c5a58d7', // 样式URL - center: [120.102915,30.261396], + mapStyle: 'normal', // 样式URL + center: [120.1998700000, 30.2638300000], pitch: 0, - zoom: 12, + zoom: 14, minZoom: 5, maxZoom: 18 }); scene.on('loaded', () => { - $.get('https://gw.alipayobjects.com/os/basement_prod/a0f3363f-4f95-4145-9161-cca6b9134277.json',(data)=>{ - let startTime = 3600 * 6; - const interval = 3600; - const mapData = { - "type": "FeatureCollection", - "features": [] - }; - mapData.features = data.features.filter((feature)=>{ - const time = feature.properties.time; - const type = feature.properties.type - return time >= startTime && time <= (startTime + interval) - - }) - const linelayer = scene.LineLayer({ - zIndex: 2 - }) - .shape('line') - .size([2,0]) - .source(mapData) - .color('type',function(type){ - return type ==='pjc_end' ? '#2b83ba' :'#d7191c' - }) - .animate({ - enable:true, - interval:0.8, - duration:2, - trailLength:0.2, - }) - .render(); - setInterval(()=>{ - startTime += interval - document.getElementById('timepannel').innerHTML=`时间:${startTime / 3600}时` - mapData.features = data.features.filter((feature)=>{ - const time = feature.properties.time; - const type = feature.properties.type - return time >= startTime && time <= (startTime + interval) - }) - if(startTime == interval * 24) { - startTime = 3600 * 6; - } - //if( mapData.features.length ==0) return; - linelayer.setData(mapData); - - },2000) - }); + const layer = scene.LineLayer({ + zIndex: 3 + }).source([{ + 'x': 120.1998700000, + 'y': 30.2638300000, + 'x1': 119.575328, + 'y1': 30.106775 + }],{ + parser: { + type: 'json', + x: 'x', + y: 'y', + x1: 'x1', + y1: 'y1' + } + }).shape('greatCircle').size(2).color('rgb(13,64,140)').animate({ + enable: false, + interval: 1, + duration: 2, + trailLength: 0.8 + }).style({ + opacity: 1 + }).render() + console.log(layer); + new L7.Marker({ + color: 'red' + }).setLnglat([120.1998700000, 30.2638300000]).addTo(scene); + scene.map.add(new AMap.Marker({ + position: new AMap.LngLat(120.1998700000, 30.2638300000), + // icon: icon, // 添加 Icon 实例 + zoom: 13, + //offset: new AMap.Pixel(-0.2 * this.rem, -0.4 * this.rem) + })) }) diff --git a/demos/world.html b/demos/world.html new file mode 100644 index 0000000000..4baccf9adb --- /dev/null +++ b/demos/world.html @@ -0,0 +1,162 @@ + + + + + + + + + + + hexagon demo + + + + +
+ + + + + + + + + diff --git a/src/component/marker.js b/src/component/marker.js index 753f09c702..4f8ad16001 100644 --- a/src/component/marker.js +++ b/src/component/marker.js @@ -6,7 +6,7 @@ export default class Marker extends Base { constructor(cfg) { super({ element: '', // DOM element - anchor: 'center', + anchor: 'bottom', offset: [ 0, 0 ], color: '#2f54eb', draggable: false, diff --git a/src/core/scene.js b/src/core/scene.js index f95e889896..f93186b937 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -163,6 +163,7 @@ export default class Scene extends Base { } layer.destroy(); layer = null; + this._engine.update(); } startAnimate() { if (this.animateCount === 0) { @@ -204,6 +205,9 @@ export default class Scene extends Base { removeControl(ctr) { this.get('controlController').removeControl(ctr); } + render() { + this._engine.update(); + } destroy() { super.destroy(); this._layers.forEach(layer => { diff --git a/src/geom/material/lineMaterial.js b/src/geom/material/lineMaterial.js index b4f891ecba..ccf5584764 100644 --- a/src/geom/material/lineMaterial.js +++ b/src/geom/material/lineMaterial.js @@ -2,7 +2,6 @@ import * as THREE from '../../core/three'; import Material from './material'; import { getModule, wrapUniforms } from '../../util/shaderModule'; import merge from '@antv/util/lib/deep-mix'; - export function LineMaterial(options) { const { vs, fs } = getModule('line'); const material = new Material({ @@ -15,11 +14,12 @@ export function LineMaterial(options) { }, vertexShader: vs, fragmentShader: fs, - transparent: true - // blending: THREE.AdditiveBlending + transparent: true, + blending: THREE[Material.blendingEnum[options.blending]] }); return material; } +// 弧线绘制 大圆航线 3D弧线 export function ArcLineMaterial(options) { let moduleName = 'arcline'; if (options.shapeType === 'greatCircle') { @@ -29,7 +29,7 @@ export function ArcLineMaterial(options) { const material = new Material({ uniforms: wrapUniforms(merge(uniforms, { u_opacity: options.u_opacity, - segmentNumber: 29, + segmentNumber: 30, u_time: 0, u_zoom: options.u_zoom, u_activeId: options.activeId, @@ -38,8 +38,8 @@ export function ArcLineMaterial(options) { vertexShader: vs, fragmentShader: fs, transparent: true, - blending: THREE.AdditiveBlending, - side: THREE.DoubleSide + side: THREE.DoubleSide, + blending: THREE[Material.blendingEnum[options.blending]] }); return material; } @@ -55,7 +55,6 @@ export function MeshLineMaterial(options, defines) { vertexShader: vs, fragmentShader: fs, transparent: true - // blending: THREE.AdditiveBlending }); return material; } diff --git a/src/geom/material/material.js b/src/geom/material/material.js index 11b1b0dccd..e82331cf88 100644 --- a/src/geom/material/material.js +++ b/src/geom/material/material.js @@ -1,11 +1,13 @@ import * as THREE from '../../core/three'; -const blendingEnum = { - normal: 'NormalBlending', - additive: 'AdditiveBlending', - subtractive: 'SubtractiveBlending' -}; + + export default class Material extends THREE.ShaderMaterial { + static blendingEnum = { + normal: 'NormalBlending', + additive: 'AdditiveBlending', + subtractive: 'SubtractiveBlending' + } setUniformsValue(name, value) { if (!this.uniforms[name]) { return; } this.uniforms[name].value = value; @@ -32,6 +34,6 @@ export default class Material extends THREE.ShaderMaterial { } } setBending(type) { - this.blending = THREE[blendingEnum[type]] || THREE.NormalBlending; + this.blending = THREE[this.blendingEnum[type]] || THREE.NormalBlending; } } diff --git a/src/geom/material/pointMaterial.js b/src/geom/material/pointMaterial.js index 8c12415268..7627a82c1a 100644 --- a/src/geom/material/pointMaterial.js +++ b/src/geom/material/pointMaterial.js @@ -27,7 +27,6 @@ export default class PointMaterial extends Material { this.vertexShader = vs; this.fragmentShader = fs; this.transparent = true; - if (!this.uniforms.shape) { this.blending = THREE.AdditiveBlending; } if (this.uniforms.u_texture) { this.defines.TEXCOORD_0 = true; diff --git a/src/geom/shader/great_circle_line_vert.glsl b/src/geom/shader/great_circle_line_vert.glsl index 4043db6263..97ee35a476 100644 --- a/src/geom/shader/great_circle_line_vert.glsl +++ b/src/geom/shader/great_circle_line_vert.glsl @@ -19,7 +19,7 @@ float maps (float value, float start1, float stop1, float start2, float stop2) { } float getSegmentRatio(float index) { - return smoothstep(0.0, 1.0, index / (segmentNumber - 1.0)); + return smoothstep(0.0, 1.0, index / (segmentNumber - 1.)); } float paraboloid(vec2 source, vec2 target, float ratio) { diff --git a/src/layer/render/line/drawArc.js b/src/layer/render/line/drawArc.js index 739882fe3a..8ab9ba2ae4 100644 --- a/src/layer/render/line/drawArc.js +++ b/src/layer/render/line/drawArc.js @@ -1,6 +1,7 @@ import * as THREE from '../../../core/three'; import { ArcLineMaterial } from '../../../geom/material/lineMaterial'; import { getBuffer } from '../../../geom/buffer/'; + export default function DrawArcLine(layerData, layer, buffer) { const style = layer.get('styleOptions'); const activeOption = layer.get('activedOptions'); @@ -47,7 +48,6 @@ export default function DrawArcLine(layerData, layer, buffer) { u_trailLength: trailLength }); lineMaterial.setDefinesvalue('ANIMATE', true); - // lineMaterial.setDefinesvalue('DASHLINE', true); } const arcMesh = new THREE.Mesh(geometry, lineMaterial); arcMesh.frustumCulled = false; diff --git a/src/layer/render/text/drawText.js b/src/layer/render/text/drawText.js index 05283d5e4d..ecd555602d 100644 --- a/src/layer/render/text/drawText.js +++ b/src/layer/render/text/drawText.js @@ -1,7 +1,6 @@ import * as THREE from '../../../core/three'; import TextMaterial from '../../../geom/material/textMaterial'; import TextBuffer from '../../../geom/buffer/point/text'; -import ColorUtil from '../../../attr/color-util'; import CollisionIndex from '../../../util/collision-index'; const defaultTextStyle = { fontWeight: 500, @@ -21,7 +20,6 @@ export default function DrawText(layerData, layer) { layer.set('styleOptions', style); const activeOption = layer.get('activedOptions'); const { strokeWidth, stroke, opacity } = style; - const { width, height } = layer.scene.getSize(); const { geometry, texture, fontAtlas } = _updateGeometry(layerData, layer); layer.scene.on('camerachange', () => { @@ -34,7 +32,7 @@ export default function DrawText(layerData, layer) { const material = new TextMaterial({ name: layer.layerId, u_sdf_map: texture, - u_stroke: ColorUtil.toRGB(stroke).map(e => e / 255), + u_stroke: stroke, u_strokeWidth: strokeWidth, u_halo_blur: 0.5, u_opacity: opacity, @@ -43,7 +41,6 @@ export default function DrawText(layerData, layer) { u_activeColor: activeOption.fill }); const mesh = new THREE.Mesh(geometry, material); - // 更新 viewport window.addEventListener('resize', () => { const { width, height } = layer.scene.getSize();