feat(layer): style 增加blending 配置项

demos/01_animatePoint.html

@@ -43,7 +43,6 @@ return {
   ]
  }
 }
-console.log(pointOnCircle(10))
 const scene = new L7.Scene({
   id: 'map',
   mapStyle: 'light', // 样式URL
@@ -76,7 +75,7 @@ scene.on('loaded', () => {
       circleLayer.setData(pointOnCircle(timestamp / 1000));
       requestAnimationFrame(animateMarker);
   }
-   //animateMarker(0);
+   animateMarker(0);
    
    /**
    const layerText =  scene.PointLayer({

demos/01_point_distribute.html

@@ -45,7 +45,8 @@ scene.on('loaded', () => {
     .style({
       stroke: 'rgb(255,255,255)',
       strokeWidth: 0,
-      opacity: 1.0
+      opacity: 1.0,
+      bending:'additive'
     })
      .render();
   });

demos/hz.html

@@ -18,7 +18,7 @@
 <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
 <script src="./assets/jquery-3.2.1.min.js"></script>
 <script src="./assets/dat.gui.min.js"></script>
-<script src=" https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.1.10/dist/l7.min.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.2.0-beta.1/build/l7.js"></script>
 <script>
 var buildLayer =null;
 const scene = new L7.Scene({

src/core/layer.js

@@ -43,7 +43,8 @@ export default class Layer extends Base {
         strokeWidth: 1.0,
         opacity: 1.0,
         strokeOpacity: 1.0,
-        texture: false
+        texture: false,
+        blending: 'normal'
       },
       destroyed: false,
       // 选中时的配置项

src/geom/material/material.js

@@ -1,5 +1,10 @@
 
 import * as THREE from '../../core/three';
+const blendingEnum = {
+  normal: 'NormalBlending',
+  additive: 'AdditiveBlending',
+  subtractive: 'SubtractiveBlending'
+};
 export default class Material extends THREE.ShaderMaterial {
   setUniformsValue(name, value) {
     if (!this.uniforms[name]) { return; }
@@ -26,4 +31,7 @@ export default class Material extends THREE.ShaderMaterial {
       }
     }
   }
+  setBending(type) {
+    this.blending = THREE[blendingEnum[type]] || THREE.NormalBlending;
+  }
 }

src/layer/render/line/drawMeshLine.js

@@ -34,7 +34,7 @@ export default function DrawLine(layerData, layer) {
     ANIMATE: false,
     DASHLINE: style.lineType === 'dash'
   });
-
+  lineMaterial.setBending(style.blending);
   const lineMesh = new THREE.Mesh(geometry, lineMaterial);
   if (animateOptions.enable) {
     layer.scene.startAnimate();

src/layer/render/point/drawCircle.js

@@ -24,6 +24,7 @@ export default function drawCircle(layerData, layer) {
     u_stroke_opacity: style.strokeOpacity
   });
   material.depthTest = false;
+  material.setBending(style.blending);
   const fillMesh = new THREE.Mesh(geometry, material);
   aPosition.length = 0;
   aPackedData.length = 0;

src/layer/render/point/drawFill.js

@@ -43,6 +43,7 @@ export default function DrawFill(layerData, layer) {
   });
   material.setDefinesvalue('SHAPE', true);
   material.depthTest = false;
+  material.setBending(style.blending);
   const fillMesh = new THREE.Mesh(geometry, material);
   if (style.stroke !== 'none') {
     // 是否绘制边界

src/layer/render/point/drawNormal.js

@@ -4,6 +4,7 @@
 import * as THREE from '../../../core/three';
 import * as PointBuffer from '../../../geom/buffer/point/index';
 import PointMaterial from '../../../geom/material/pointMaterial';
+
 export default function DrawNormal(layerData, layer) {
   const geometry = new THREE.BufferGeometry();
   const style = layer.get('styleOptions');
@@ -20,7 +21,8 @@ export default function DrawNormal(layerData, layer) {
   }, {
     SHAPE: false,
     TEXCOORD_0: false
-  });
+  }, style);
+  material.setBending(style.blending);
   const strokeMesh = new THREE.Points(geometry, material);
   return strokeMesh;
 }