From 6fb4a2e973a609c21ea454dfc20885b104703b31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=AD=A3=E5=AD=A6?= Date: Mon, 19 Nov 2018 12:06:42 +0800 Subject: [PATCH] fix(line):line --- src/core/engine/picking/pickingMaterial.js | 6 +- src/core/layer.js | 188 ++++++++++----------- src/geom/buffer/bufferBase.js | 6 +- src/geom/buffer/line.js | 2 +- src/geom/buffer/point.js | 17 +- src/geom/extrude.js | 6 +- src/geom/shape/line.js | 4 +- src/layer/imageLayer.js | 4 +- src/layer/lineLayer.js | 6 +- src/layer/pointLayer.js | 27 ++- src/source/csvSource.js | 15 +- src/source/geojsonSource.js | 7 +- src/source/imageSource.js | 2 +- src/source/rasterSource.js | 2 +- 14 files changed, 143 insertions(+), 149 deletions(-) diff --git a/src/core/engine/picking/pickingMaterial.js b/src/core/engine/picking/pickingMaterial.js index 1ef71cee8d..ebf4bd8349 100755 --- a/src/core/engine/picking/pickingMaterial.js +++ b/src/core/engine/picking/pickingMaterial.js @@ -1,8 +1,8 @@ -import Material from '../../../geom/material/material' +import Material from '../../../geom/material/material'; import picking_frag from './picking_frag.glsl'; import picking_vert from './picking_vert.glsl'; -export default function PickingMaterial(options){ +export default function PickingMaterial(options) { const material = new Material({ uniforms: { u_zoom: { value: options.u_zoom || 1 } @@ -12,4 +12,4 @@ export default function PickingMaterial(options){ transparent: true }); return material; -} \ No newline at end of file +} diff --git a/src/core/layer.js b/src/core/layer.js index 785860fa14..8ba5bc3efa 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -6,7 +6,6 @@ import Base from './base'; import * as THREE from './three'; import ColorUtil from '../attr/color-util'; import * as source from '../source/index'; -import * as turfMeta from '@turf/meta'; import PickingMaterial from '../core/engine/picking/pickingMaterial'; import Attr from '../attr/index'; import Util from '../util'; @@ -76,7 +75,7 @@ export default class Layer extends Base { this.scene.on('zoomchange', () => { this._visibleWithZoom(); }); - + this.layerMesh.onBeforeRender = () => { const zoom = this.scene.getZoom(); this.layerMesh.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime()); @@ -265,11 +264,11 @@ export default class Layer extends Base { const { featureId } = e; const activeStyle = this.get('activedOptions'); - const selectFeatureIds =this.layerSource.getSelectFeatureId(featureId); + const selectFeatureIds = this.layerSource.getSelectFeatureId(featureId); if (this.StyleData[selectFeatureIds[0]].hasOwnProperty('filter') && this.StyleData[selectFeatureIds[0]].filter === false) { return; } const style = Util.assign({}, this.StyleData[featureId]); style.color = ColorUtil.toRGB(activeStyle.fill).map(e => e / 255); - this.updateStyle([featureId], style); + this.updateStyle([ featureId ], style); } @@ -277,11 +276,11 @@ export default class Layer extends Base { const attrOptions = this.get('attrOptions'); for (const type in attrOptions) { if (attrOptions.hasOwnProperty(type)) { - this._updateAttr(type) + this._updateAttr(type); } } } - _updateAttr(type){ + _updateAttr(type) { const self = this; const attrs = this.get('attrs'); const attrOptions = this.get('attrOptions'); @@ -419,17 +418,17 @@ export default class Layer extends Base { } } /** - * - * @param {*} overwrite - * @param {*} callback + * + * @param {*} overwrite + * @param {*} callback */ - on(type,callback) { + on(type, callback) { this._addPickingEvents(); super.on(type, callback); } getPickingId() { - return this.scene._engine._picking.getNextId(); + return this.scene._engine._picking.getNextId(); } addToPicking(object) { this.scene._engine._picking.add(object); @@ -437,18 +436,18 @@ export default class Layer extends Base { removeFromPicking(object) { this.scene._engine._picking.remove(object); } - _addPickMesh(mesh){ + _addPickMesh(mesh) { this._pickingMesh = new THREE.Object3D(); this._visibleWithZoom(); this.scene.on('zoomchange', () => { this._visibleWithZoom(); }); - + this.addToPicking(this._pickingMesh); const pickmaterial = new PickingMaterial({ - u_zoom:this.scene.getZoom() + u_zoom: this.scene.getZoom() }); - pickmaterial.setDefinesvalue(this.type,true); + pickmaterial.setDefinesvalue(this.type, true); this._pickingMesh.onBeforeRender = () => { const zoom = this.scene.getZoom(); this._pickingMesh.material.setUniformsValue('u_zoom', zoom); @@ -462,19 +461,18 @@ export default class Layer extends Base { } _addPickingEvents() { // TODO: Find a way to properly remove this listener on destroy - this.scene.on('pick', (e) => { + this.scene.on('pick', e => { // Re-emit click event from the layer const { featureId, point2d, point3d, intersects } = e; - if(intersects.length === 0) - return; + if (intersects.length === 0) { return; } const source = this.layerSource.get('data'); const feature = source.features[featureId]; const lnglat = this.scene.containerToLngLat(point2d); const target = { feature, - pixel:point2d, - lnglat:{lng:lnglat.lng,lat:lnglat.lat} - } + pixel: point2d, + lnglat: { lng: lnglat.lng, lat: lnglat.lat } + }; this.emit('click', target); // this.emit('move', target); }); @@ -485,32 +483,32 @@ export default class Layer extends Base { * @param {*} style 更新的要素样式 */ updateStyle(featureStyleId, style) { - if (this._activeIds) { - this.resetStyle(); + if (this._activeIds) { + this.resetStyle(); + } + this._activeIds = featureStyleId; + const pickingId = this.layerMesh.geometry.attributes.pickingId.array; + const color = style.color; + const colorAttr = this.layerMesh.geometry.attributes.a_color; + const firstId = pickingId.indexOf(featureStyleId[0] + 1); + for (let i = firstId; i < pickingId.length; i++) { + if (pickingId[i] == featureStyleId[0] + 1) { + colorAttr.array[i * 4 + 0] = color[0]; + colorAttr.array[i * 4 + 1] = color[1]; + colorAttr.array[i * 4 + 2] = color[2]; + colorAttr.array[i * 4 + 3] = color[3]; + } else { + break; } - this._activeIds = featureStyleId; - const pickingId =this.layerMesh.geometry.attributes.pickingId.array; - const color = style.color; - const colorAttr =this.layerMesh.geometry.attributes.a_color; - const firstId = pickingId.indexOf(featureStyleId[0]+1); - for(let i = firstId;i{ + pickAttr.array.forEach((id, index) => { id = Math.abs(id); - const color = [ ...this.StyleData[id-1].color ]; - id =Math.abs(id); - const item = filterData[id-1]; + const color = [ ...this.StyleData[id - 1].color ]; + id = Math.abs(id); + const item = filterData[id - 1]; if (item.hasOwnProperty('filter') && item.filter === false) { - colorAttr.array[index*4+0]=0; - colorAttr.array[index*4+1]=0; - colorAttr.array[index*4+2]=0; - colorAttr.array[index*4+3]=0; + colorAttr.array[index * 4 + 0] = 0; + colorAttr.array[index * 4 + 1] = 0; + colorAttr.array[index * 4 + 2] = 0; + colorAttr.array[index * 4 + 3] = 0; pickAttr.array[index] = -id; } else { - colorAttr.array[index*4+0]=color[0]; - colorAttr.array[index*4+1]=color[1]; - colorAttr.array[index*4+2]=color[2]; - colorAttr.array[index*4+3]=color[3]; + colorAttr.array[index * 4 + 0] = color[0]; + colorAttr.array[index * 4 + 1] = color[1]; + colorAttr.array[index * 4 + 2] = color[2]; + colorAttr.array[index * 4 + 3] = color[3]; pickAttr.array[index] = id; } - }) - colorAttr.needsUpdate =true; - pickAttr.needsUpdate =true; + }); + colorAttr.needsUpdate = true; + pickAttr.needsUpdate = true; this._needUpdateFilter = false; this._needUpdateColor = false; } - _visibleWithZoom(){ - const zoom =this.scene.getZoom(); + _visibleWithZoom() { + const zoom = this.scene.getZoom(); const minZoom = this.get('minZoom'); const maxZoom = this.get('maxZoom'); // z-fighting let offset = 0; - if(this.type==='point'){ + if (this.type === 'point') { offset = 5; - } else if(this.type === 'polyline'){ + } else if (this.type === 'polyline') { offset = 2; } - this._object3D.position.z = offset * Math.pow(2,20-zoom); - if(zoom maxZoom){ - this._object3D.visible =false; - }else if(this.get('visible')){ - this._object3D.visible =true; + this._object3D.position.z = offset * Math.pow(2, 20 - zoom); + if (zoom < minZoom || zoom > maxZoom) { + this._object3D.visible = false; + } else if (this.get('visible')) { + this._object3D.visible = true; } } /** * 重置高亮要素 */ resetStyle() { - const pickingId =this.layerMesh.geometry.attributes.pickingId.array; - const colorAttr =this.layerMesh.geometry.attributes.a_color; - this._activeIds.forEach((index,value) => { - const color = this.StyleData[index].color; - const firstId = pickingId.indexOf(index+1); - for(let i = firstId;i { + const color = this.StyleData[index].color; + const firstId = pickingId.indexOf(index + 1); + for (let i = firstId; i < pickingId.length; i++) { + if (pickingId[i] == index + 1) { + colorAttr.array[i * 4 + 0] = color[0]; + colorAttr.array[i * 4 + 1] = color[1]; + colorAttr.array[i * 4 + 2] = color[2]; + colorAttr.array[i * 4 + 3] = color[3]; } - }) - colorAttr.needsUpdate =true; + } + }); + colorAttr.needsUpdate = true; } /** * 销毁Layer对象 */ despose() { this.destroy(); - if(this._object3D && this._object3D.children){ + if (this._object3D && this._object3D.children) { let child; - for(let i =0;i { - const m1 = new THREE.Matrix4(); let { size, shape } = properties[index]; let shapeType = 'extrude'; - + if (type === '2d' || (type === '3d' && size[2] === 0)) { shapeType = 'fill'; Util.isArray(size) || (size = [ size, size, 0 ]); - } else{ - Util.isArray(size) || (size = [ size, size, size ]); + } else { + Util.isArray(size) || (size = [ size, size, size ]); } - if(regularShape[shape]==null) { - uvs.push(0,0,1,0,1,1,1,1,0,1,0,0) - shape='square'; + if (regularShape[shape] == null) { + uvs.push(0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0); + shape = 'square'; } const vert = regularShape[shape](shapeType); shapes.push(vert.positions); diff --git a/src/geom/extrude.js b/src/geom/extrude.js index c01c426bfc..543ccddbc6 100644 --- a/src/geom/extrude.js +++ b/src/geom/extrude.js @@ -35,9 +35,9 @@ export default function extrudePolygon(points, extrude) { } function full() { // 顶部纹理 - triangles.forEach(() => { - faceUv.push(-1, -1); - }); + triangles.forEach(() => { + faceUv.push(-1, -1); + }); // 顶部坐标 for (let i = 0; i < pointCount; i++) { diff --git a/src/geom/shape/line.js b/src/geom/shape/line.js index dc1b645575..f9b7569b70 100644 --- a/src/geom/shape/line.js +++ b/src/geom/shape/line.js @@ -123,7 +123,7 @@ export function defaultLine(geo, index) { export function Line(path, props, positionsIndex, dash = false) { if (path.length === 1) path = path[0];// 面坐标转线坐标 const positions = []; - const pickingIds =[]; + const pickingIds = []; const normal = []; const miter = []; const colors = []; @@ -133,7 +133,7 @@ export function Line(path, props, positionsIndex, dash = false) { const sizes = []; let c = 0; let index = positionsIndex; - const { size, color,id } = props; + const { size, color, id } = props; path.forEach((point, pointIndex, list) => { const i = index; colors.push(...color); diff --git a/src/layer/imageLayer.js b/src/layer/imageLayer.js index 8faf3d968c..f3092da117 100644 --- a/src/layer/imageLayer.js +++ b/src/layer/imageLayer.js @@ -5,9 +5,9 @@ import ImageBuffer from '../geom/buffer/image'; // import ImageGeometry from '../geom/bufferGeometry/image'; import ImageMaterial from '../geom/material/imageMaterial'; export default class imageLayer extends Layer { - source(data,cfg = {}) { + source(data, cfg = {}) { cfg.mapType = this.get('mapType'); - cfg.data =data; + cfg.data = data; this.layerSource = new imageSource(cfg); return this; } diff --git a/src/layer/lineLayer.js b/src/layer/lineLayer.js index c9b37e00d0..49d2542cde 100644 --- a/src/layer/lineLayer.js +++ b/src/layer/lineLayer.js @@ -14,7 +14,7 @@ export default class LineLayer extends Layer { const source = this.layerSource; const StyleData = this.StyleData; const style = this.get('styleOptions'); - const buffer =this._buffer = new LineBuffer({ + const buffer = this._buffer = new LineBuffer({ coordinates: source.geoData, properties: StyleData, shapeType: this.shapeType, @@ -24,7 +24,7 @@ export default class LineLayer extends Layer { const animateOptions = this.get('animateOptions'); const geometry = new THREE.BufferGeometry(); const { attributes } = buffer; - + if (this.shapeType === 'arc') { geometry.setIndex(attributes.indexArray); geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3)); @@ -38,7 +38,7 @@ export default class LineLayer extends Layer { const mesh = new THREE.Mesh(geometry, material); this.add(mesh); } else if (this.shapeType === 'line') { - + geometry.setIndex(attributes.indexArray); geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1)); geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3)); diff --git a/src/layer/pointLayer.js b/src/layer/pointLayer.js index 43e578cb4e..83c4341429 100644 --- a/src/layer/pointLayer.js +++ b/src/layer/pointLayer.js @@ -10,7 +10,7 @@ import warn from '../geom/shader/warn_frag.glsl'; /** * point shape 2d circle, traingle text,image - * shape 3d cube，column, sphere + * shape 3d cube，column, sphere * shape Model ,自定义 * image * @@ -38,7 +38,7 @@ export default class PointLayer extends Layer { return; } const source = this.layerSource; - const { opacity, strokeWidth, stroke ,shape} = this.get('styleOptions'); + const { opacity, strokeWidth, stroke, shape } = this.get('styleOptions'); this._buffer = new PointBuffer({ type: this.shapeType, imagePos: this.scene.image.imagePos, @@ -53,16 +53,15 @@ export default class PointLayer extends Layer { u_zoom: this.scene.getZoom() }); mtl.setDefinesvalue('SHAPE', true); - if(shape=='radar') { + if (shape === 'radar') { mtl.fragmentShader = radar; - + } - if(shape=='warn') { + if (shape === 'warn') { mtl.fragmentShader = warn; } - - - + + } else { // sdf 绘制点 mtl = new PointMaterial({ u_opacity: opacity, @@ -83,15 +82,13 @@ export default class PointLayer extends Layer { if (this.shapeType === 'image') { geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uvs, 2)); geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1)); - } else if(this.shapeType=== undefined) - { + } else if (this.shapeType === undefined) { geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1)); - } - else { // 多边形面 + } else { // 多边形面 geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3)); geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapePositions, 3)); geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.a_size, 3)); - if(shape) { + if (shape) { geometry.addAttribute('faceUv', new THREE.Float32BufferAttribute(attributes.faceUv, 2)); } } @@ -99,13 +96,13 @@ export default class PointLayer extends Layer { if (this.shapeType === 'image') { mesh = new THREE.Points(geometry, mtl); } else if (this.shapeType === undefined) { // 散点图 - + mesh = new THREE.Points(geometry, mtl); } else { mesh = new THREE.Mesh(geometry, mtl); } - + this.add(mesh); } _textPoint() { diff --git a/src/source/csvSource.js b/src/source/csvSource.js index 511e1ca8ee..b6bc8422b1 100644 --- a/src/source/csvSource.js +++ b/src/source/csvSource.js @@ -10,23 +10,22 @@ export default class CSVSource extends Source { const y = this.get('y'); const x1 = this.get('x1'); const y1 = this.get('y1'); - const coords = this.get('coordinates') + const coords = this.get('coordinates'); this.propertiesData = [];// 临时使用 this.geoData = []; let csvdata = data; Util.isArray(csvdata) || (csvdata = csvParse(data)); this.propertiesData = csvdata; csvdata.forEach((col, featureIndex) => { - - if(col['coordinates']){ - coordinates = col['coordinates']; + let coordinates = []; + if (col.coordinates) { + coordinates = col.coordinates; } let coordinates = [ col[x], col[y] ]; if (x1 && y1) { coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]]; } - if(coords&& col['coords']) - coordinates =col['coords']; + if (coords && col.coords) { coordinates = col.coords; } col._id = featureIndex + 1; this._coordProject(coordinates); this.geoData.push(this._coordProject(coordinates)); @@ -37,8 +36,8 @@ export default class CSVSource extends Source { const data = this.get('data'); this.featureIndex = new FeatureIndex(data); } - getSelectFeatureId(featureId){ - return [featureId]; + getSelectFeatureId(featureId) { + return [ featureId ]; } _getCoord(geo) { if (geo.geometry) { diff --git a/src/source/geojsonSource.js b/src/source/geojsonSource.js index fbe8b36e9c..0a611e8da9 100644 --- a/src/source/geojsonSource.js +++ b/src/source/geojsonSource.js @@ -6,7 +6,7 @@ import FeatureIndex from '../geo/featureIndex'; export default class GeojsonSource extends Source { prepareData() { - this.type ='geojson'; + this.type = 'geojson'; const data = this.get('data'); this.propertiesData = []; this.geoData = []; @@ -21,10 +21,11 @@ export default class GeojsonSource extends Source { const data = this.get('data'); this.featureIndex = new FeatureIndex(data); } - getSelectFeatureId(featureId){ + getSelectFeatureId(featureId) { const data = this.get('data'); - const selectFeatureIds =[]; + const selectFeatureIds = []; let featureStyleId = 0; + /* eslint-disable */ turfMeta.flattenEach(data, (currentFeature, featureIndex, multiFeatureIndex) => { /* eslint-disable */ if (featureIndex === (featureId)) { diff --git a/src/source/imageSource.js b/src/source/imageSource.js index 75454a6145..137f5a0772 100644 --- a/src/source/imageSource.js +++ b/src/source/imageSource.js @@ -2,7 +2,7 @@ import Source from '../core/source'; import { getImage } from '../util/ajax'; export default class ImageSource extends Source { prepareData() { - this.type='image'; + this.type = 'image'; const extent = this.get('extent'); const lb = this._coorConvert(extent.slice(0, 2)); const tr = this._coorConvert(extent.slice(2, 4)); diff --git a/src/source/rasterSource.js b/src/source/rasterSource.js index 975c575f9a..2439422dce 100644 --- a/src/source/rasterSource.js +++ b/src/source/rasterSource.js @@ -1,7 +1,7 @@ import Source from '../core/source'; export default class RasterSource extends Source { prepareData() { - this.type='raster'; + this.type = 'raster'; const extent = this.get('extent'); const lb = this._coorConvert(extent.slice(0, 2)); const tr = this._coorConvert(extent.slice(2, 4));