update layer

修改dashline参数为像素单位
修复color更新的问题

demos/03_choropleths_polygon.html

@@ -64,7 +64,20 @@ scene.on('loaded', () => {
   $.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => {
     const citylayer = scene.PolygonLayer()
     .source(city)
-    .color('pm2_5_24h',(p)=>{
+    .color('pm2_5_24h',colorObj['green'])
+    .shape('fill')
+    .active(true)
+    .style({
+      opacity: 1
+    })
+    .render();
+
+/**
+  const colorsEnum = ['blue','red','orange','green','purple','purple']
+    setInterval(()=>{
+      const index = parseInt(Math.random() * 5)
+      const colors = colorObj[colorsEnum[index]]
+      citylayer.color('pm2_5_24h',(p)=>{
         if(p>120){
           return colors[5];
         } else if(p>65){
@@ -78,13 +91,12 @@ scene.on('loaded', () => {
         }else {
           return colors[0];
         }
-    })
+    }).render()
-    .shape('fill')
+       
-    .active(true)
+    },10000)
-    .style({
+    **/
-      opacity: 1
+
-    })
+
-    .render();
     
      const citylayer2 = scene.PolygonLayer()
       .source(city)
@@ -113,7 +125,6 @@ scene.on('loaded', () => {
       $('.info-panel select').change(function(){
         const color = $(this).val();
         citylayer.color('pm2_5_24h',colorObj[color]).render();
-         console.timeEnd('color')
       })
   });
 });

demos/dashline.html

@@ -41,7 +41,7 @@ scene.on('loaded', () => {
     .shape('line')
     .style({
       lineType: 'dash',
-      dashArray: 200,
+      dashArray: 20,
       dashOffset: 0.2,
       dashRatio: 0.5
     })

src/core/controller/mapping.js

@@ -169,7 +169,6 @@ export default class Mapping {
     for (let i = 0; i < fields.length; i++) {
       const field = fields[i];
       const scale = self._createScale(field);
-
       if (type === 'color' && Util.isNil(option.values)) { // 设置 color 的默认色值
         option.values = Global.colors;
       }

src/core/layer.js

@@ -416,25 +416,14 @@ export default class Layer extends Base {
       this.draw();
       return;
     }
-    // 更新数据过滤 filter
+
-    if (!Util.isEqual(preAttrs.filter, nextAttrs.filter)) {
+    if (!Util.isEqual(preAttrs.filter, nextAttrs.filter) ||
+      !Util.isEqual(preAttrs.color, nextAttrs.color) ||
+      !Util.isEqual(preAttrs.size, nextAttrs.size) ||
+      !Util.isEqual(preAttrs.shape, nextAttrs.shape)
+    ) {
       this.repaint();
       this._setPreOption();
-      return;
-    }
-
-    if (!Util.isEqual(preAttrs.color, nextAttrs.color)) {
-      this._updateAttributes(this.layerMesh);
-    }
-    // 更新Size
-    if (!Util.isEqual(preAttrs.size, nextAttrs.size)) {
-      // 更新color；
-      this.repaint();
-    }
-    // 更新形状
-    if (!Util.isEqual(preAttrs.shape, nextAttrs.shape)) {
-      // 更新color；
-      this.repaint();
     }
     if (!Util.isEqual(preStyle, nextStyle)) {
       // 判断新增，修改，删除
@@ -505,31 +494,20 @@ export default class Layer extends Base {
    */
   _updateAttributes(object) {
     this.get('mappingController').update();
-    const filterData = this.layerData;
     this._activeIds = null; // 清空选中元素
     const colorAttr = object.geometry.attributes.a_color;
     const pickAttr = object.geometry.attributes.pickingId;
     pickAttr.array.forEach((id, index) => {
       id = Math.abs(id);
-      const color = [ ...this.layerData[id - 1].color ];
+      const color = [ ...this.layerData[ id - 1 ].color ];
       id = Math.abs(id);
-      const item = filterData[id - 1];
+      colorAttr.array[index * 4 + 0] = color[0];
-      if (item.hasOwnProperty('filter') && item.filter === false) {
+      colorAttr.array[index * 4 + 1] = color[1];
-        colorAttr.array[index * 4 + 0] = 0;
+      colorAttr.array[index * 4 + 2] = color[2];
-        colorAttr.array[index * 4 + 1] = 0;
+      colorAttr.array[index * 4 + 3] = color[3];
-        colorAttr.array[index * 4 + 2] = 0;
+      // pickAttr.array[index] = id;
-        colorAttr.array[index * 4 + 3] = 0;
-        pickAttr.array[index] = -id; // 通过Id数据过滤 id<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] = id;
-      }
     });
     colorAttr.needsUpdate = true;
-    pickAttr.needsUpdate = true;
   }
   _visibleWithZoom() {
     if (this._object3D === null) return;

src/geom/shader/meshline_vert.glsl

@@ -35,7 +35,7 @@ void main() {
   // extrude along normal
   float extrude_scale = pow(2.0, 20.0 - u_zoom);
   v_color = a_color;
-  v_dash_array = a_dash_array;
+  v_dash_array = a_dash_array * pow(2.0, 20.0 - u_zoom);
   float distance_ratio = a_distance / a_total_distance;
 #if defined DASHLINE  || defined ANIMATE
     v_distance_ratio = distance_ratio;

src/layer/line_layer.js

@@ -5,9 +5,10 @@ export default class LineLayer extends Layer {
     super(scene, cfg);
     this.set('type', 'line');
   }
-  shape(type) {
+  shape(field, values) {
-    this.shapeType = type;
+    super.shape(field, values);
-    this.set('shape', type);
+    this.shapeType = field;
+    this.set('shape', field);
     return this;
   }
   preRender() {

src/map/AMap.js

@@ -64,7 +64,7 @@ export default class GaodeMap extends Base {
       this.map = new AMap.Map(this.container, this._attrs);
       this.map.on('complete', () => {
         if (this.get('mapStyle') === 'blank') {
-          map.setFeatures([]);
+          this.map.setFeatures([]);
         }
         this.addOverLayer();
         this.emit('mapLoad');