fix(layer): 修复数据更新数据为空

antvis · Aug 20, 2019 · 96bc0fc · 96bc0fc
1 parent 116965f
commit 96bc0fc
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 27 deletions.
diff --git a/demos/datafilter.html b/demos/datafilter.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="geometry" content="diagram">
+  <link rel="stylesheet" href="./assets/common.css">
+  <link rel="stylesheet" href="./assets/info.css">
+
+  <title>hexagon demo</title>
+  <style>
+  body {margin: 0;}
+	#map { position:absolute; top:0; bottom:0; width:100%; }
+  </style>
+</head>
+
+<body>
+<div id="map"></div>
+
+ <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="../build/L7.js"></script>
+<script>
+
+const scene = new L7.Scene({
+  id: 'map',
+  mapStyle: 'dark', // 样式URL
+  center: [121.5558, 31.2481 ],
+  pitch: 0,
+  zoom: 11,
+  hash:true,
+
+});
+window.scene = scene;
+scene.on('loaded', () => {
+$.getJSON('https://gw.alipayobjects.com/os/basement_prod/7bb614db-bac0-48d7-93e7-9446392d3917.json', city => {
+  const layer = scene.PolygonLayer()
+    .source(city)
+    .color('unit_price',['#b2182b','#ef8a62','#fddbc7','#d1e5f0','#67a9cf','#2166ac'].reverse())
+    .shape('fill')
+    .active(false)
+    .style({
+      opacity: 1
+    })
+    .render()
+    const highlight = scene.LineLayer()
+    .source(city)
+    .color('#fff')
+    .filter(false)
+    .shape('line')
+    .size(4)
+    .render()
+
+    layer.on('click',(item)=>{
+      const { feature } = item;
+      highlight.filter('id',(id)=>{
+        return feature.properties.id === id;
+      }).render();
+    })
+  })
+});
+
+</script>
+</body>
+</html>
+
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0-beta.2",
   "description": "Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "build/L7.js",
   "browser": "build/L7-min.js",

diff --git a/src/core/controller/mapping.js b/src/core/controller/mapping.js
@@ -18,15 +18,20 @@ export default class Mapping {
 
   _init() {
     this._initControllers();
-    this._initTileAttrs();
+    this._initAttrs();
     this._mapping();
   }
 
   update() {
     this.mesh.set('scales', {});
-    this._initTileAttrs();
+    this._initAttrs();
     this._updateMaping();
   }
+  reMapping() {
+    this.mesh.set('scales', {});
+    this._initAttrs();
+    this._mapping();
+  }
 
   _initControllers() {
     const scalesOption = this.layer.get('scaleOptions');
@@ -144,7 +149,7 @@ export default class Mapping {
   }
 
 
-  _initTileAttrs() {
+  _initAttrs() {
     const attrOptions = this.layer.get('attrOptions');
     for (const type in attrOptions) {
       if (attrOptions.hasOwnProperty(type)) {

diff --git a/src/core/engine/picking/picking.js b/src/core/engine/picking/picking.js
@@ -20,7 +20,7 @@ class Picking {
       depthBuffer: true
     };
 
-    this._pickingTexture = new THREE.WebGLRenderTarget(this._width, this._height, parameters);
+    this._pickingTexture = new THREE.WebGLRenderTarget(this._width / 10, this._height / 10, parameters);
 
     this._nextId = 1;
 

diff --git a/src/core/layer.js b/src/core/layer.js
@@ -81,16 +81,15 @@ export default class Layer extends Base {
   /**
    * 将图层添加加到 Object
    * @param {*} object three 物体
-    * @param {*} type mesh类型是区别是填充还是边线
    */
-  add(object, type = 'fill') {
+  add(object) {
     // composer合图层绘制
     if (object.type === 'composer') {
       this._object3D = object;
       this.scene._engine.composerLayers.push(object);
       return;
     }
-    type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object;
+    this.layerMesh = object;
     this._visibleWithZoom();
     object.onBeforeRender = () => { // 每次渲染前改变状态
       const zoom = this.scene.getZoom();
@@ -105,9 +104,8 @@ export default class Layer extends Base {
       this.afterRender();
     };
     this._object3D.add(object);
-    if (type === 'fill') {
-      this.get('pickingController').addPickMesh(object);
-    }
+    this.get('pickingController').addPickMesh(object);
+
   }
   remove(object) {
     if (object.type === 'composer') {
@@ -279,6 +277,7 @@ export default class Layer extends Base {
   setData(data, cfg) {
     this.layerSource.setData(data, cfg);
     this.repaint();
+    this.scene._engine.update();
   }
   _createScale(field) {
     // TODO scale更新
@@ -331,7 +330,7 @@ export default class Layer extends Base {
       this.scene.style.update(this._attrs);
       return this;
     }
-    this.init();
+    this._updateDraw();
     this.scene._engine.update();
     return this;
   }
@@ -345,7 +344,6 @@ export default class Layer extends Base {
   init() {
     this._initControllers();
     this._mapping();
-    this._updateDraw();
   }
   _initInteraction() {
     if (this.get('allowActive')) {
@@ -379,6 +377,7 @@ export default class Layer extends Base {
 
   setActive(id, color) {
     this._activeIds = id;
+    if (!color) color = Global.activeColor;
     if (!Array.isArray(color)) {
       color = ColorUtil.color2RGBA(color);
     }
@@ -407,31 +406,35 @@ export default class Layer extends Base {
     const preStyle = this.get('preStyleOption');
     const nextStyle = this.get('styleOptions');
     if (preAttrs === undefined && preStyle === undefined) { // 首次渲染
-      // this._mapping();
-      // this._scaleByZoom();
       this._setPreOption();
+      this.init();
       this._initInteraction();
       this._initMapEvent();
+      if (this.layerData.length === 0) {
+        return;
+      }
       this.draw();
       return;
     }
-    if (!Util.isEqual(preAttrs.color, nextAttrs.color)) {
-      this._updateAttributes(this.layerMesh);
-    }
     // 更新数据过滤 filter
     if (!Util.isEqual(preAttrs.filter, nextAttrs.filter)) {
-      // 更新color；
+      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._updateSize();
+      this.repaint();
     }
     // 更新形状
     if (!Util.isEqual(preAttrs.shape, nextAttrs.shape)) {
       // 更新color；
-      this._updateShape();
+      this.repaint();
     }
     if (!Util.isEqual(preStyle, nextStyle)) {
       // 判断新增，修改，删除
@@ -442,7 +445,6 @@ export default class Layer extends Base {
       });
       this._updateStyle(newStyle);
     }
-    this._setPreOption();
   }
 
   _updateSize(zoom) {
@@ -525,6 +527,9 @@ export default class Layer extends Base {
       style
     };
   }
+  _updateFilter() {
+    this.get('mappingController').reMapping();
+  }
   /**
    *  用于过滤数据
    * @param {*} object  更新颜色和数据过滤

diff --git a/src/core/scene.js b/src/core/scene.js
@@ -3,7 +3,6 @@ import { LAYER_MAP } from '../layer';
 import Base from './base';
 import LoadImage from './image';
 import FontAtlasManager from './atlas/font-manager';
-// import { MapProvider } from '../map/AMap';
 import { getMap } from '../map/index';
 import Global from '../global';
 import { getInteraction } from '../interaction/index';
@@ -145,9 +144,7 @@ export default class Scene extends Base {
         // 要素拾取
         if (e.target.nodeName !== 'CANVAS') return;
         e.pixel || (e.pixel = e.point);
-        requestAnimationFrame(() => {
-          this._engine._picking.pickdata(e);
-        });
+        this._engine._picking.pickdata(e);
       }, true);
     });
   }

diff --git a/src/core/source.js b/src/core/source.js
@@ -40,6 +40,7 @@ export default class Source extends Base {
     this._transforms = transform || [];
     this.set('data', data);
     this._init();
+    this.emit('SourceUpdate');
   }
   // 数据更新
   updateTransfrom(cfg) {

diff --git a/src/geom/shader/arcline_vert.glsl b/src/geom/shader/arcline_vert.glsl
@@ -56,7 +56,6 @@ void main() {
     float segmentRatio = getSegmentRatio(segmentIndex);
     float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
     float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
-    v_distance_ratio = segmentIndex / segmentNumber;
     vec3 curr = getPos(source, target, segmentRatio);
     vec3 next = getPos(source, target, nextSegmentRatio);
     vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, position.y);