Merge pull request #282 from antvis/pointlayer

layer 过滤方法

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -51,7 +51,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
         filterData = dataArray.filter((record: IParseDataItem) => {
           return this.applyAttributeMapping(filter, record)[0];
         });
-        filter.needRemapping = false;
       }
       if (attributesToRemapping.length) {
         // 过滤数据

stories/Layers/components/RasterLayer.tsx

@@ -2,7 +2,7 @@ import { RasterLayer, Scene } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 // @ts-ignore
-import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
+import * as GeoTIFF from 'geotiff';
 import * as React from 'react';
 import { colorScales } from '../lib/colorscales';
 export default class ImageLayerDemo extends React.Component {

stories/Layers/components/light.tsx

@@ -1,18 +1,23 @@
 import { PointLayer, Scene } from '@antv/l7';
 import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import * as dat from 'dat.gui';
 import * as React from 'react';
 // @ts-ignore
 export default class Light extends React.Component {
   // @ts-ignore
   private scene: Scene;
+  private gui: dat.GUI;
 
   public componentWillUnmount() {
     this.scene.destroy();
+    if (this.gui) {
+      this.gui.destroy();
+    }
   }
 
   public async componentDidMount() {
     const response = await fetch(
-      'https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antvdemo/assets/city/bj.csv',
+      'https://gw-office.alipayobjects.com/bmw-prod/6698fc37-4fc1-488b-972c-e29c77617a26.csv',
     );
     const pointsData = await response.text();
 
@@ -21,29 +26,49 @@ export default class Light extends React.Component {
       map: new GaodeMap({
         pitch: 0,
         style: 'dark',
-        center: [116.405289, 39.904987],
-        zoom: 6,
+        center: [114.298569, 30.584354],
+        zoom: 11,
       }),
     });
     this.scene = scene;
+    const layerConfig = {
+      type: 'bus',
+    };
+    const gui = new dat.GUI();
+    this.gui = gui;
+    const typeControl = this.gui.add(layerConfig, 'type', [
+      'bus',
+      'elm',
+      'bikeriding',
+      'metro',
+      'parking',
+    ]);
+
     scene.on('loaded', async () => {
-      const pointLayer = new PointLayer({
-        blend: 'normal',
-      })
+      const pointLayer = new PointLayer()
         .source(pointsData, {
           parser: {
             type: 'csv',
-            x: 'lng',
-            y: 'lat',
+            y: 'latitude',
+            x: 'longitude',
           },
         })
-        .size(1)
-        .color('#ffa842')
+        .size(0.5)
+        .filter('type', (v: string) => {
+          return v === 'bus';
+        })
+        .color('#FF2B1F')
         .style({
           opacity: 1,
         });
 
       scene.addLayer(pointLayer);
+      typeControl.onChange((type) => {
+        pointLayer.filter('type', (v) => {
+          return v === type;
+        });
+        scene.render();
+      });
       this.scene = scene;
     });
   }