diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index ad6f7e23c3..03f50479fa 100644 --- a/packages/layers/src/plugins/DataMappingPlugin.ts +++ b/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) { // 过滤数据 diff --git a/stories/Layers/components/RasterLayer.tsx b/stories/Layers/components/RasterLayer.tsx index 975d940776..872b4e8a4d 100644 --- a/stories/Layers/components/RasterLayer.tsx +++ b/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 { diff --git a/stories/Layers/components/light.tsx b/stories/Layers/components/light.tsx index 0a987f72d8..2c8449344c 100644 --- a/stories/Layers/components/light.tsx +++ b/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; }); }