feat(filter): filter by pickids

demos/01_point_column.html

@@ -42,7 +42,7 @@ scene.on('loaded', () => {
     .size('t',(level)=> {
       return [4,4,(level+40)];
     }) 
-    .active(false)
+    .active(true)
     .color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
      .render();
   });

demos/01_point_distribute.html

@@ -37,7 +37,7 @@ scene.on('loaded', () => {
        y: 'lat',
        x: 'lng'
      })
-    .size(2.0)
+    .size(1.0)
    .color('#0D408C')
     .style({
       stroke: 'rgb(255,255,255)',

demos/01_point_image.html

@@ -47,7 +47,8 @@ scene.on('loaded', () => {
       "type": "FeatureCollection",
       "features":clusterData
       })
-     .color('#6492E9')
+    .color('#6492E9')
+    .active(true)
     .size('point_count',[1,30])
     .shape('2d:circle')
     .style({
@@ -60,7 +61,7 @@ scene.on('loaded', () => {
       zIndex: 5
     })
     .source(data)
-    .shape('meshLine')
+    .shape('line')
     .size([2,0])
     .color('#2F54EB')
      .style({

demos/02_contour.html

@@ -31,19 +31,17 @@ const scene = new L7.Scene({
 });
 scene.on('loaded', () => {
   $.get('./data/contour.geojson', data => {
+   // data.features = data.features.slice(0,1);
     scene.LineLayer({
       zIndex: 2
     })
     .source(data)
-    .shape('meshLine')
     .size('ELEV',(value)=>{
         return [1,(value-1000)*7];
     })
-    .shape('meshLine')      
+    .active(true)
+    .shape('line')      
     .color('ELEV',["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse())
-    .style({
-            'lineType':'solid'
-            })
     .render();
   });
 

demos/02_oneBletoneRoad.html

@@ -52,11 +52,11 @@ $.getJSON('./data/onebelt/seaway.geojson', contourData => {
  
         const layer = scene.LineLayer({
             zIndex:2}
-        )
+           )
             .source(contourData)
             .color('rgb(79,147,234)')
             .size([ 1.5, 0 ])
-            .shape('meshLine')
+            .shape('line')
             .style({
                 'lineType':'solid'
             })
@@ -69,7 +69,7 @@ $.getJSON('./data/onebelt/landway.json', contourData => {
             .source(contourData)
             .color('rgb(11,94,69)')
             .size([ 1.5, 0 ])
-            .shape('meshLine')
+            .shape('line')
             .style({
                // 'lineType':'solid'
             })

demos/03_1_extrude_polygon.html

@@ -44,7 +44,10 @@ scene.on('loaded', () => {
     .size('max',(value)=>{
        return value * 1000;
     })
-     .active(true)
+    .filter('max',(v)=>{
+      return v*1 > 6000 ? true : false;
+    })
+    .active(true)
     .style({
       opacity: 1.0
     })

demos/04_image.html

@@ -34,9 +34,8 @@ scene.on('loaded', () => {
 // https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png
 // 
   const imageLayer = scene.ImageLayer().
-      source({
-        url: './image/hangzhoubay.jpg',
-       // extent: [ 73, 18, 136, 54 ]
+      source('./image/hangzhoubay.jpg',{
+       
       extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
       })
       .style({

demos/08_arc_line.html

@@ -46,7 +46,7 @@ scene.on('loaded', () => {
     .style({
       opacity:0.6,
     })
-   // .animate({enable:true})
+   //.animate({enable:true})
     .render();
   });
 });

demos/08_point_shape.html

@@ -24,10 +24,16 @@ const scene = new L7.Scene({
   id: 'map',
   mapStyle: 'dark', // 样式URL
   center: [ 120.037828998113099, 30.086317611850635 ],
-  pitch: 36.002858,
+  pitch: 0,
   zoom: 5.44
 });
 window.scene = scene;
+var colorObj={
+    '黄色':'yellow',
+    '蓝色':'blue',
+    '橙色':'orange'
+
+}
 scene.on('loaded', () => {
   $.get('./data/waringData.json', data => {
     scene.PointLayer({
@@ -38,10 +44,15 @@ scene.on('loaded', () => {
       x: 'lon',
       y: 'lat',
     })
-    .shape('2d:square')
-    .size(20) 
+    .shape('2d:radar')
+    .size(80 ) 
     .active(false)
-    .color('blue')
+    .color('signallevel',(v)=>{
+       return colorObj[v];
+    })
+    .style({
+        shape:'radar'
+    })
     .render();
   });
 });

demos/taxi.html

@@ -6,7 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <meta name="geometry" content="diagram">
   <link rel="stylesheet" href="./assets/common.css">
-  <title>hexagon demo</title>
+  <title>city demo</title>
   <style>
 	#map { position:absolute; top:0; bottom:0; width:100%; }
   </style>
@@ -41,18 +41,31 @@ var buildLayer =null;
 const scene = new L7.Scene({
   id: 'map',
   mapStyle: 'dark', // 样式URL
-  center: [ 121.500361, 31.252063 ],
-  pitch: 64.75753604193972,
-  zoom: 14.83,
-  minZoom: 10,
-  maxZoom: 20
+  center: [ 121.507674, 31.223043 ],
+  pitch: 65.59312320916906,
+  zoom: 16.4,
+  minZoom: 15,
+  maxZoom: 18
 });
 scene.on('loaded', () => {
-  $.get('./data/taxiPolyline.json', data => {
+  $.get('./data/cityPoint.json', data => {
+    scene.PointLayer({
+      zIndex: 10
+    })
+    .source(data)
+    .shape('2d:warn')
+    .size(90)
+    .color('#F00')
+    .style({
+      shape:'warn'
+    })
+    .render();
+  });
+  $.get('./data/road.json', data => {
     scene.LineLayer({
       zIndex: 2
     })
-     .source(data)
+    .source(data)
     .color('#F08D41')
     .animate({enable:true})
     .render();
@@ -64,13 +77,13 @@ scene.on('loaded', () => {
     .source(data)
     .shape('extrude')
     .size('floor',[0,2000])
-    .color('rgb(240,240,240)')
+    .color('rgba(242,246,250,1.0)')
      .animate({enable:true})
      .style({
-       opacity:0.8,
-       baseColor:'#3CB4F0',
-       windowColor:'#65CEF7',
-       brightColor:'#98E3FA',
+       opacity:1.0,
+       baseColor:'rgb(25,25,165)',
+       windowColor:'rgb(30,60,89)',
+       brightColor:'rgb(155,217,255)',
 
      })
     .render();

src/core/engine/index.js

@@ -12,10 +12,6 @@ export default class Engine extends EventEmitter {
     this._renderer = new Renderer(container).renderer;
     this._world = world;
     this._picking = Picking(this._world, this._renderer, this._camera, this._scene);
-    // this._renderer.context.getExtension('OES_texture_float');
-    // this._renderer.context.getExtension('OES_texture_float_linear');
-    // this._renderer.context.getExtension('OES_texture_half_float');
-    // this._renderer.context.getExtension('OES_texture_half_float_linear');
     this.clock = new THREE.Clock();
   }
   _initPostProcessing() {

src/core/engine/picking/picking.js

@@ -77,7 +77,6 @@ class Picking {
 
     const texture = this._pickingTexture;
     if (this._needUpdate) {
-
       this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
       this._needUpdate = false;
     }

src/core/engine/picking/pickingMaterial.js

@@ -1,37 +1,15 @@
-import * as THREE from '../../three';
+import Material from '../../../geom/material/material'
 import picking_frag from './picking_frag.glsl';
 import picking_vert from './picking_vert.glsl';
 
-// FROM: https://github.com/brianxu/GPUPicker/blob/master/GPUPicker.js
-const PickingMaterial = function() {
-  THREE.ShaderMaterial.call(this, {
+export default  function PickingMaterial(options){
+  const material = new Material({
     uniforms: {
-      size: {
-        type: 'f',
-        value: 0.01
-      },
-      scale: {
-        type: 'f',
-        value: 400
-      }
+      u_zoom: { value: options.u_zoom || 1 }
     },
     vertexShader: picking_vert,
-    fragmentShader: picking_frag
+    fragmentShader: picking_frag,
+    transparent: true
   });
-
-  this.linePadding = 2;
-};
-
-PickingMaterial.prototype = Object.create(THREE.ShaderMaterial.prototype);
-
-PickingMaterial.prototype.constructor = PickingMaterial;
-
-PickingMaterial.prototype.setPointSize = function(size) {
-  this.uniforms.size.value = size;
-};
-
-PickingMaterial.prototype.setPointScale = function(scale) {
-  this.uniforms.scale.value = scale;
-};
-
-export default PickingMaterial;
+  return material;
+}

src/core/engine/picking/picking_vert.glsl

@@ -1,11 +1,28 @@
 attribute float pickingId;
-attribute float a_size;
+ #ifdef polyline
+ attribute float a_size;
+ attribute float a_miter;
+#endif 
+#ifdef point
+attribute vec3 a_size;
+attribute vec3 a_shape;
+#endif
+uniform float u_zoom;
 varying vec4 worldId;
 void main() {
     mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
-    vec3 a = fract(vec3(1.0/255.0, 1.0/(255.0*255.0), 1.0/(255.0*255.0*255.0)) * pickingId);
+    float scale = pow(2.0,(20.0 - u_zoom));
+    vec3 newposition =  position;
+    #ifdef point 
+        newposition =position + a_size * scale* a_shape;
+    #endif
+    #ifdef polyline
+      newposition = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
+     #endif 
+    float id = step(0.,pickingId) * pickingId;
+    vec3 a = fract(vec3(1.0/255.0, 1.0/(255.0*255.0), 1.0/(255.0*255.0*255.0)) * id);
     a -= a.xxy * vec3(0.0, 1.0/255.0, 1.0/255.0);
     worldId = vec4(a,1);
-    gl_PointSize = a_size;
-    gl_Position = matModelViewProjection * vec4( position, 1.0 );
+    //gl_PointSize = a_size;
+    gl_Position = matModelViewProjection * vec4( newposition, 1.0 );
 }

src/core/layer.js

@@ -76,6 +76,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());
@@ -262,26 +263,13 @@ export default class Layer extends Base {
 
   _addActiveFeature(e) {
     const { featureId } = e;
+
     const activeStyle = this.get('activedOptions');
-    const data = this.layerSource.get('data');
-    const selectFeatureIds = [];
-    let featureStyleId = 0;
-    /* eslint-disable */  // 如果是mutiPolygon 一个要素会对应多个geometry
-    turfMeta.flattenEach(data, (currentFeature, featureIndex, multiFeatureIndex) => {
-    /* eslint-disable */
-      if (featureIndex === (featureId)) {
-        selectFeatureIds.push(featureStyleId);
-      }
-      featureStyleId++;
-      if (featureIndex > featureId) {
-        return;
-      }
-    });
-  
+    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(selectFeatureIds, style);
+    this.updateStyle([featureId], style);
   }
 
 
@@ -451,8 +439,21 @@ export default class Layer extends Base {
   }
   _addPickMesh(mesh){
     this._pickingMesh = new THREE.Object3D();
+    this._visibleWithZoom();
+    this.scene.on('zoomchange', () => {
+      this._visibleWithZoom();
+    });
+   
     this.addToPicking(this._pickingMesh);
-    const pickmaterial = new PickingMaterial();
+    const pickmaterial = new PickingMaterial({
+      u_zoom:this.scene.getZoom()
+    });
+    pickmaterial.setDefinesvalue(this.type,true);
+    this._pickingMesh.onBeforeRender = () => {
+      const zoom = this.scene.getZoom();
+      this._pickingMesh.material.setUniformsValue('u_zoom', zoom);
+
+    };
     const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial);
     this._pickingMesh.add(pickingMesh);
   }
@@ -484,43 +485,28 @@ export default class Layer extends Base {
    * @param {*} style  更新的要素样式
    */
   updateStyle(featureStyleId, style) {
-    const {indices} = this._buffer.bufferStruct;
-   
-    if (this._activeIds) {
-      this.resetStyle();
-    }
-    this._activeIds = featureStyleId;
-    
-    const id = featureStyleId[0];
-    let dataIndex = 0;
-    // 计算第一个要素对应的颜色位置
-    if(indices){ 
-      // 面图层和
-        for (let i = 0; i < id; i++) {
-          dataIndex += indices[i].length;
-        }
-     } else {
-      dataIndex = id;
-     }
- 
-    featureStyleId.forEach((index,value) => {
-      let vertindex =[value]
-      if(indices)
-        vertindex = indices[index];
+      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;
-      // colorAttr.dynamic =true;
-      vertindex.forEach(() => {
-        colorAttr.array[dataIndex*4+0]=color[0];
-        colorAttr.array[dataIndex*4+1]=color[1];
-        colorAttr.array[dataIndex*4+2]=color[2];
-        colorAttr.array[dataIndex*4+3]=color[3];
-        dataIndex++;
-      });
+      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;
   }
+
   _updateColor(){
    
     this._updateMaping();
@@ -531,54 +517,32 @@ export default class Layer extends Base {
    * @param {*} filterData  数据过滤标识符
    */
   _updateFilter() {
-    console.log('updateFilter');
     this._updateMaping();
     const filterData = this.StyleData;
     this._activeIds = null; // 清空选中元素
-    let dataIndex = 0;
     const colorAttr =  this.layerMesh.geometry.attributes.a_color;
     const pickAttr = this.layerMesh.geometry.attributes.pickingId;
-    if(this.layerMesh.type =='Points'){ //点图层更新
-      filterData.forEach((item,index)=>{
-        const color = [ ...this.StyleData[index].color ];
-        if (item.hasOwnProperty('filter') && item.filter === false) {
-          color[0] = 0;
-          color[1] = 0;
-          color[2] = 0;
-          color[3] = 0;
-          pickAttr.array[index] = 0;
-         
-        } 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];
-          pickAttr.array[index] = index;
-        }
-      })
-      colorAttr.needsUpdate =true;
-      pickAttr.needsUpdate =true;
-      return;
-    }
-    const {indices} = this._buffer.bufferStruct;
-     indices.forEach((vertIndexs, i) => {
-      const color = [ ...this.StyleData[i].color ];
-      let pickid = this.StyleData[i].id;
-      if (filterData[i].hasOwnProperty('filter') && filterData[i].filter === false) {
-        color[3] = 0;
-        pickid =0;
+    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];
+      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;
+        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];
+        pickAttr.array[index] = id;
       }
-      vertIndexs.forEach(() => {
-        colorAttr.array[dataIndex*4+0]=color[0];
-        colorAttr.array[dataIndex*4+1]=color[1];
-        colorAttr.array[dataIndex*4+2]=color[2];
-        colorAttr.array[dataIndex*4+3]=color[3];
-         pickAttr.array[dataIndex] = pickid;
-         dataIndex++;
-      });
-      colorAttr.needsUpdate =true;
-      pickAttr.needsUpdate =true;
-    });
+    })
+    colorAttr.needsUpdate =true;
+    pickAttr.needsUpdate =true;
     this._needUpdateFilter = false;
     this._needUpdateColor = false;
   }
@@ -587,7 +551,13 @@ export default class Layer extends Base {
     const minZoom = this.get('minZoom');
     const maxZoom = this.get('maxZoom');
     // z-fighting
-    this._object3D.position.z = this._object3D.renderOrder * Math.pow(2,22-zoom);
+    let offset = 0;
+    if(this.type==='point'){
+      offset = 5;
+    } 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')){
@@ -598,35 +568,21 @@ export default class Layer extends Base {
    * 重置高亮要素
    */
   resetStyle() {
-    const {indices} = this._buffer.bufferStruct;
-    const colorAttr =  this.layerMesh.geometry.attributes.a_color;
-    let dataIndex = 0;
-    const id = this._activeIds[0];
-    if(indices){
-      for (let i = 0; i < id; i++) {
-        dataIndex += indices[i].length;
-      }
-    } else {
-      dataIndex = id;
-    }
-    this._activeIds.forEach((index,value) => {
-      const color = this.StyleData[index].color;
-      let vertindex = [value];
-      if(indices){
-       vertindex = indices[index];
-      }
-      const pickAttr = this.layerMesh.geometry.attributes.pickingId;
-      vertindex.forEach(() => {
-        colorAttr.array[dataIndex*4+0]=color[0];
-        colorAttr.array[dataIndex*4+1]=color[1];
-        colorAttr.array[dataIndex*4+2]=color[2];
-        colorAttr.array[dataIndex*4+3]=color[3];
-        // pickAttr.array[dataIndex]= index;
-        dataIndex++;
-      });
-      colorAttr.needsUpdate =true
-      // pickAttr.needsUpdate =true
-    });
+      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;
   }
   /**
    * 销毁Layer对象

src/geom/buffer/bufferBase.js

@@ -296,6 +296,7 @@ export default class BufferBase extends Base {
       pickingIds,
       shapePositions,
       a_size,
+      faceUv: new Float32Array(polygon.faceUv),
 
     };
 

src/geom/buffer/line.js

@@ -9,7 +9,7 @@ export default class LineBuffer extends BufferBase {
     const positions = [];
     const positionsIndex = [];
     const instances = [];
-    if (shapeType === 'meshLine') {
+    if (shapeType === 'line') {
       this.attributes = this._getMeshLineAttributes();
       return;
     } else if (shapeType === 'arc') {
@@ -80,6 +80,7 @@ export default class LineBuffer extends BufferBase {
     const properties = this.get('properties');
     const { lineType } = this.get('style');
     const positions = [];
+    const pickingIds =[];
     const normal = [];
     const miter = [];
     const colors = [];
@@ -97,6 +98,7 @@ export default class LineBuffer extends BufferBase {
       indexArray.push(...attr.indexArray);
       sizes.push(...attr.sizes);
       attrDistance.push(...attr.attrDistance);
+      pickingIds.push(...attr.pickingIds);
     });
     return {
       positions,
@@ -104,6 +106,7 @@ export default class LineBuffer extends BufferBase {
       miter,
       colors,
       indexArray,
+      pickingIds,
       sizes,
       attrDistance
     };

src/geom/buffer/point.js

@@ -50,6 +50,7 @@ export default class PointBuffer extends BufferBase {
     const positions = [];
     const shapes = [];
     const sizes =[];
+    const uvs=[];
     const positionsIndex = [];
     let indexCount = 0;
     this.bufferStruct.style = properties;
@@ -57,13 +58,15 @@ export default class PointBuffer extends BufferBase {
       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 ]);
       }
-      if(regularShape[shape]!==null) {
+      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);
@@ -78,6 +81,7 @@ export default class PointBuffer extends BufferBase {
     this.bufferStruct.indexCount = indexCount;
     this.bufferStruct.shapes = shapes;
     this.bufferStruct.sizes = sizes;
+    this.bufferStruct.faceUv = uvs;
     this.attributes = this._toPointShapeAttributes(this.bufferStruct);
   }
 

src/geom/buffer/polygon.js

@@ -35,7 +35,7 @@ export default class PolygonBuffer extends BufferBase {
           let y = extrudeData.faceUv[i * 2 + 1];
           if (x !== -1) {
             x = x * 0.1;
-            y = y * heightValue / 3000;
+            y = y * heightValue / 2000;
           }
           faceUv.push(x, y);
           sizes.push((1.0 - extrudeData.faceUv[i * 2 + 1]) * heightValue);

src/geom/extrude.js

@@ -22,10 +22,7 @@ export default function extrudePolygon(points, extrude) {
 
   const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions);
   cells = triangles;
-  // 顶部纹理
-  triangles.forEach(() => {
-    faceUv.push(-1, -1);
-  });
+
   const pointCount = flattengeo.vertices.length / 3;
   const { vertices } = flattengeo;
   extrude ? full() : flat();
@@ -33,12 +30,16 @@ export default function extrudePolygon(points, extrude) {
 
   function flat() {
     for (let i = 0; i < pointCount; i++) {
-
       positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 0 ]);
     }
   }
   function full() {
+      // 顶部纹理
+  triangles.forEach(() => {
+    faceUv.push(-1, -1);
+  });
     // 顶部坐标
+
     for (let i = 0; i < pointCount; i++) {
       positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 1 ]);
     }

src/geom/shader/point_vert.glsl

@@ -17,7 +17,7 @@ void main() {
    v_color = a_color;
 
    gl_Position =  matModelViewProjection  * vec4(position, 1.0);
-  gl_PointSize = a_size;
+   gl_PointSize = a_size;
    v_rs = vec2(a_size / 2.0, a_size / 2.0- u_strokeWidth);
     #ifdef TEXCOORD_0
       

src/geom/shader/polygon_frag.glsl

@@ -51,26 +51,26 @@ void main() {
         float sU = step(tStart, u) - step(tEnd, u);
         float sV = step(tStart, v) - step(tEnd, v);
         float s = sU * sV;
-      
+   
         float curColId = floor(UvScale.x / tStep);
-        float sCol = step(targetColId - 0.5, curColId) - step(targetColId + 0.5, curColId);
+        float sCol = step(targetColId - 0.2, curColId) - step(targetColId + 0.2, curColId);
         
         float mLightP = mod(lightP, 2.);
         float sRow = step(mLightP - 0.2, st.y) - step(mLightP, st.y);
         if(ux == targetColId){
             n =0.;
         }
-        vec3 color = mix(baseColor, getWindowColor(n,0.6,brightColor,windowColor), s);
+    
+        vec3 color = mix(baseColor, getWindowColor(n,0.8,brightColor,windowColor), s);
         float sFinal = s * sCol * sRow;
         color += mix(baseColor, brightColor, sFinal);
-        if (st.y<0.01){
-        color = baseColor;
-         }
-        if(head ==1.0) { // 顶部亮线
-            color = brightColor;
-        }
+        // if (st.y<0.01){
+        // color = baseColor;
+        //  }
+        // if(head ==1.0) { // 顶部亮线
+        //     color = brightColor;
+        // }
         gl_FragColor = vec4(color * v_lightWeight,1.0); 
-      //gl_FragColor = color;
      }
    #else
        gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);

src/geom/shader/radar_frag.glsl

@@ -14,6 +14,8 @@ precision highp float;
 
 #define MOV(a,b,c,d,t) (vec2(a*cos(t)+b*cos(0.1*(t)), c*sin(t)+d*cos(0.1*(t))))
 uniform float u_time;
+varying vec2 v_texCoord;
+varying  vec4 v_color;
 float movingLine(vec2 uv, vec2 center, float radius)
 {
     //angle of the line
@@ -61,14 +63,14 @@ float _cross(vec2 uv, vec2 center, float radius)
 void main()
 {
     vec3 finalColor;
-	vec2 uv = gl_PointCoord.xy * 2.0 - 1.0;
+	vec2 uv = v_texCoord * 2.0 - 1.0;
     vec2 c = vec2(0.,0.);
     finalColor = vec3( 0.3 * _cross(uv, c, 0.6) );
     finalColor += ( circle(uv, c, 0.2, 0.01)
                    + circle(uv, c, 0.4, 0.01) ) * blue1;
     finalColor += (circle(uv, c, 0.6, 0.02) );
-    finalColor += movingLine(uv, c, 0.6) * blue3;
-    finalColor += circle(uv, c, 0.1, 0.01) * blue3;
+    finalColor += movingLine(uv, c, 0.6) * v_color.xyz;
+    finalColor += circle(uv, c, 0.1, 0.01) * v_color.xyz;
 
     float alpha = 1.0;
     if(finalColor==vec3(0.)) alpha = 0.;

src/geom/shader/warn_frag.glsl

@@ -0,0 +1,39 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+#define SMOOTH(r,R) (1.0-smoothstep(R-0.01,R+0.01, r))
+#define RANGE(a,b,x) ( step(a,x)*(1.0-step(b,x)) )
+#define RS(a,b,x) ( smoothstep(a-0.01,a+0.01,x)*(1.0-smoothstep(b-0.01,b+0.01,x)) )
+#define M_PI 3.1415926535897932384626433832795
+
+#define blue1 vec3(0.74,0.95,1.00)
+#define blue2 vec3(0.87,0.98,1.00)
+#define blue3 vec3(0.35,0.76,0.83)
+#define blue4 vec3(0.953,0.969,0.89)
+#define red   vec3(1.00,0.38,0.227)
+
+#define MOV(a,b,c,d,t) (vec2(a*cos(t)+b*cos(0.1*(t)), c*sin(t)+d*cos(0.1*(t))))
+uniform float u_time;
+varying vec2 v_texCoord;
+varying  vec4 v_color;
+float bip2(vec2 uv, vec2 center)
+{
+    float r = length(uv - center);
+    float R = 0.2+mod(0.1*u_time, 0.30);
+    return (0.5-0.6*cos(30.0*u_time)) * SMOOTH(r,0.06)
+        + SMOOTH(0.1,r)-SMOOTH(0.12,r) 
+        + smoothstep(max(0.1,R-0.2),R,r)-SMOOTH(R,r);
+}
+void main() {
+    vec3 finalColor;
+    vec2 uv = v_texCoord * 2.0 - 1.0;
+    vec2 c = vec2(0.,0.);
+    if( length(uv-c) < 0.96 )
+    {
+        finalColor += bip2(uv,c) * v_color.xyz;
+    }
+    float alpha = 1.0;
+    if(finalColor==vec3(0.)) alpha = 0.;
+    gl_FragColor = vec4(finalColor, alpha);
+    
+}

src/geom/shape/line.js

@@ -119,9 +119,11 @@ export function defaultLine(geo, index) {
 
   return { positions, indexes: indexArray };
 }
+// mesh line
 export function Line(path, props, positionsIndex, dash = false) {
   if (path.length === 1) path = path[0];// 面坐标转线坐标
   const positions = [];
+  const pickingIds =[];
   const normal = [];
   const miter = [];
   const colors = [];
@@ -131,11 +133,13 @@ export function Line(path, props, positionsIndex, dash = false) {
   const sizes = [];
   let c = 0;
   let index = positionsIndex;
-  const { size, color } = props;
+  const { size, color,id } = props;
   path.forEach((point, pointIndex, list) => {
     const i = index;
     colors.push(...color);
     colors.push(...color);
+    pickingIds.push(id);
+    pickingIds.push(id);
     sizes.push(size[0]);
     sizes.push(size[0]);
     if (pointIndex !== list.length - 1) {
@@ -170,6 +174,7 @@ export function Line(path, props, positionsIndex, dash = false) {
     miter,
     colors,
     sizes,
+    pickingIds,
     attrDistance
   };
 

src/layer/imageLayer.js

@@ -5,13 +5,15 @@ 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(cfg = {}) {
+  source(data,cfg = {}) {
     cfg.mapType = this.get('mapType');
+    cfg.data =data;
     this.layerSource = new imageSource(cfg);
     return this;
   }
   render() {
     this.init();
+    this.type = 'image';
     const source = this.layerSource;
     const { opacity } = this.get('styleOptions');
     // 加载 完成事件

src/layer/lineLayer.js

@@ -3,7 +3,7 @@ import Layer from '../core/layer';
 import * as THREE from '../core/three';
 import { LineBuffer } from '../geom/buffer/index';
 import { LineMaterial, ArcLineMaterial, MeshLineMaterial, DashLineMaterial } from '../geom/material/lineMaterial';
-export default class MeshlineLayer extends Layer {
+export default class LineLayer extends Layer {
   shape(type) {
     this.shapeType = type;
     return this;
@@ -14,17 +14,17 @@ export default class MeshlineLayer extends Layer {
     const source = this.layerSource;
     const StyleData = this.StyleData;
     const style = this.get('styleOptions');
-    const buffer = new LineBuffer({
+    const buffer =this._buffer = new LineBuffer({
       coordinates: source.geoData,
       properties: StyleData,
       shapeType: this.shapeType,
       style
     });
     const { opacity } = this.get('styleOptions');
-
     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));
@@ -35,19 +35,17 @@ export default class MeshlineLayer extends Layer {
         u_opacity: opacity,
         u_zoom: this.scene.getZoom()
       });
-      // const mesh = new THREE.Line(geometry, material);
       const mesh = new THREE.Mesh(geometry, material);
       this.add(mesh);
-    } else if (this.shapeType === 'meshLine') {
+    } 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));
       geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
       geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
       geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normal, 3));
       geometry.addAttribute('a_miter', new THREE.Float32BufferAttribute(attributes.miter, 1));
-
-
-      // geometry.setIndex(new THREE.BufferAttribute(new THREE.Float32BufferAttribute(attributes.indexArray, 1)));
       const lineType = style.lineType;
       let material;
 
@@ -67,7 +65,6 @@ export default class MeshlineLayer extends Layer {
       const mesh = new THREE.Mesh(geometry, material);
       this.add(mesh);
     } else { // 直线
-
       geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
       geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
       const material = new LineMaterial({

src/layer/pointLayer.js

@@ -6,10 +6,11 @@ import PolygonMaterial from '../geom/material/polygonMaterial';
 import TextBuffer from '../geom/buffer/text';
 import TextMaterial from '../geom/material/textMaterial';
 import radar from '../geom/shader/radar_frag.glsl';
+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
  *
@@ -37,7 +38,7 @@ export default class PointLayer extends Layer {
       return;
     }
     const source = this.layerSource;
-    const { opacity, strokeWidth, stroke } = this.get('styleOptions');
+    const { opacity, strokeWidth, stroke ,shape} = this.get('styleOptions');
     this._buffer = new PointBuffer({
       type: this.shapeType,
       imagePos: this.scene.image.imagePos,
@@ -51,9 +52,16 @@ export default class PointLayer extends Layer {
         u_opacity: opacity,
         u_zoom: this.scene.getZoom()
       });
-      mtl.fragmentShader = radar;
       mtl.setDefinesvalue('SHAPE', true);
-
+      if(shape=='radar') {
+        mtl.fragmentShader = radar;
+       
+      }
+      if(shape=='warn') {
+        mtl.fragmentShader = warn;
+      }
+     
+    
       
     } else { // sdf 绘制点
       mtl = new PointMaterial({
@@ -69,30 +77,35 @@ export default class PointLayer extends Layer {
     }
 
     const { attributes } = this._buffer;
-    console.log(attributes);
     geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
     geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
     geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
     if (this.shapeType === 'image') {
       geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uvs, 2));
       geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
-    } else { // 多边形面
+    } else if(this.shapeType=== undefined)
+    {
+      geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
+    }
+     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) {
+        geometry.addAttribute('faceUv', new THREE.Float32BufferAttribute(attributes.faceUv, 2));
+      }
     }
     let mesh;
     if (this.shapeType === 'image') {
       mesh = new THREE.Points(geometry, mtl);
     } else if (this.shapeType === undefined) { // 散点图
+    
       mesh = new THREE.Points(geometry, mtl);
-      geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
-
 
     } else {
       mesh = new THREE.Mesh(geometry, mtl);
     }
-
+   
     this.add(mesh);
   }
   _textPoint() {

src/layer/rasterLayer.js

@@ -12,6 +12,7 @@ export default class RasterLayer extends Layer {
     return this;
   }
   render() {
+    this.type = 'raster';
     this.init();
     const source = this.layerSource;
     // 加载 完成事件

src/source/csvSource.js

@@ -4,11 +4,13 @@ import Util from '../util';
 import { csvParse } from 'd3-dsv';
 export default class CSVSource extends Source {
   prepareData() {
+    this.type = 'csv';
     const data = this.get('data');
     const x = this.get('x');
     const y = this.get('y');
     const x1 = this.get('x1');
     const y1 = this.get('y1');
+    const coords = this.get('coordinates')
     this.propertiesData = [];// 临时使用
     this.geoData = [];
     let csvdata = data;
@@ -16,10 +18,15 @@ export default class CSVSource extends Source {
     this.propertiesData = csvdata;
     csvdata.forEach((col, featureIndex) => {
 
+      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'];
       col._id = featureIndex + 1;
       this._coordProject(coordinates);
       this.geoData.push(this._coordProject(coordinates));
@@ -30,6 +37,9 @@ export default class CSVSource extends Source {
     const data = this.get('data');
     this.featureIndex = new FeatureIndex(data);
   }
+  getSelectFeatureId(featureId){
+    return [featureId];
+  }
   _getCoord(geo) {
     if (geo.geometry) {
       // GeoJSON feature

src/source/geojsonSource.js

@@ -6,6 +6,7 @@ import FeatureIndex from '../geo/featureIndex';
 
 export default class GeojsonSource extends Source {
   prepareData() {
+    this.type ='geojson';
     const data = this.get('data');
     this.propertiesData = [];
     this.geoData = [];
@@ -20,5 +21,22 @@ export default class GeojsonSource extends Source {
     const data = this.get('data');
     this.featureIndex = new FeatureIndex(data);
   }
+  getSelectFeatureId(featureId){
+    const data = this.get('data');
+    const selectFeatureIds =[];
+    let featureStyleId = 0;
+    turfMeta.flattenEach(data, (currentFeature, featureIndex, multiFeatureIndex) => {
+      /* eslint-disable */
+        if (featureIndex === (featureId)) {
+          selectFeatureIds.push(featureStyleId);
+        }
+        featureStyleId++;
+        if (featureIndex > featureId) {
+          return;
+        }
+      });
+    return selectFeatureIds;
+    
+  }
 
 }

src/source/imageSource.js

@@ -2,6 +2,7 @@ import Source from '../core/source';
 import { getImage } from '../util/ajax';
 export default class ImageSource extends Source {
   prepareData() {
+    this.type='image';
     const extent = this.get('extent');
     const lb = this._coorConvert(extent.slice(0, 2));
     const tr = this._coorConvert(extent.slice(2, 4));
@@ -10,7 +11,7 @@ export default class ImageSource extends Source {
     this._loadData();
   }
   _loadData() {
-    const url = this.get('url');
+    const url = this.get('data');
     this.image = [];
     if (typeof (url) === 'string') {
       getImage({ url }, (err, img) => {

src/source/rasterSource.js

@@ -1,6 +1,7 @@
 import Source from '../core/source';
 export default class RasterSource extends Source {
   prepareData() {
+    this.type='raster';
     const extent = this.get('extent');
     const lb = this._coorConvert(extent.slice(0, 2));
     const tr = this._coorConvert(extent.slice(2, 4));