p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(line):line

This commit is contained in:
李正学 2018-11-19 12:06:42 +08:00
parent a0499b78d1
commit 5dc568fb19
14 changed files with 143 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/engine/picking/pickingMaterial.js
View File

@ -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;
}
}

188
src/core/layer.js
View File

@ -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<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;
}
}
colorAttr.needsUpdate =true
return;
}
colorAttr.needsUpdate = true;
return;
}
_updateColor(){
_updateColor() {
this._updateMaping();
}
/**
* 用于过滤数据
@ -520,88 +518,88 @@ export default class Layer extends Base {
this._updateMaping();
const filterData = this.StyleData;
this._activeIds = null; // 清空选中元素
const colorAttr = this.layerMesh.geometry.attributes.a_color;
const colorAttr = this.layerMesh.geometry.attributes.a_color;
const pickAttr = this.layerMesh.geometry.attributes.pickingId;
pickAttr.array.forEach((id,index)=>{
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<minZoom || 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<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];
}
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 < 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<this._object3D.children.length;i++){
child = this._object3D.children[i];
if(!child){
continue;
}
this.remove(child);
if(child.geometry){
child.geometry.dispose();
child.geometry = null;
}
if (child.material) {
for (let i = 0; i < this._object3D.children.length; i++) {
child = this._object3D.children[i];
if (!child) {
continue;
}
this.remove(child);
if (child.geometry) {
child.geometry.dispose();
child.geometry = null;
}
if (child.material) {
if (child.material.map) {
child.material.map.dispose();
child.material.map = null;
@ -612,7 +610,7 @@ export default class Layer extends Base {
}
}
}
this._object3D =null;
this._object3D = null;
this.scene = null;
}
}

6
src/geom/buffer/bufferBase.js
View File

@ -169,7 +169,7 @@ export default class BufferBase extends Base {
}
_toPointShapeAttributes(polygon) {
// Three components per vertex per face (3 x 3 = 9)
const { style, indices, position, indexCount, shapes,sizes } = polygon;
const { style, indices, position, indexCount, shapes, sizes } = polygon;
const vertices = new Float32Array(indexCount * 3);
const shapePositions = new Float32Array(indexCount * 3);
const a_size = new Float32Array(indexCount * 3);
@ -245,7 +245,7 @@ export default class BufferBase extends Base {
shapePositions[lastIndex * 9 + 3] = bx;
shapePositions[lastIndex * 9 + 4] = by;
shapePositions[lastIndex * 9 + 5] = bz;
a_size[lastIndex * 9 + 3] = size[0];
a_size[lastIndex * 9 + 4] = size[1];
a_size[lastIndex * 9 + 5] = size[2];
@ -296,7 +296,7 @@ export default class BufferBase extends Base {
pickingIds,
shapePositions,
a_size,
faceUv: new Float32Array(polygon.faceUv),
faceUv: new Float32Array(polygon.faceUv)
};

2
src/geom/buffer/line.js
View File

@ -80,7 +80,7 @@ export default class LineBuffer extends BufferBase {
const properties = this.get('properties');
const { lineType } = this.get('style');
const positions = [];
const pickingIds =[];
const pickingIds = [];
const normal = [];
const miter = [];
const colors = [];

17
src/geom/buffer/point.js
View File

@ -49,25 +49,24 @@ export default class PointBuffer extends BufferBase {
const type = this.get('type');
const positions = [];
const shapes = [];
const sizes =[];
const uvs=[];
const sizes = [];
const uvs = [];
const positionsIndex = [];
let indexCount = 0;
this.bufferStruct.style = properties;
coordinates.forEach((geo, index) => {
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);

6
src/geom/extrude.js
View File

@ -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++) {

4
src/geom/shape/line.js
View File

@ -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);

4
src/layer/imageLayer.js
View File

@ -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;
}

6
src/layer/lineLayer.js
View File

@ -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));

27
src/layer/pointLayer.js
View File

@ -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() {

15
src/source/csvSource.js
View File

@ -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) {

7
src/source/geojsonSource.js
View File

@ -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)) {

2
src/source/imageSource.js
View File

@ -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));

2
src/source/rasterSource.js
View File

@ -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));