From 047402a7affb298568e4dacb5796d5634b9f8782 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Tue, 23 Jun 2020 00:37:13 +0800 Subject: [PATCH] =?UTF-8?q?fix(layer):=20=E6=9B=B4=E6=96=B0=E7=A9=BA?= =?UTF-8?q?=E6=95=B0=E6=8D=AE&=20filter=20=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/react/layer/demo/world.jsx | 2 +- packages/boundry/package.json | 3 -- packages/boundry/src/config.ts | 6 +-- packages/boundry/src/layer/baseLayer.ts | 26 +++++++--- packages/boundry/src/layer/interface.ts | 4 +- packages/draw/src/draw_control.ts | 2 +- packages/draw/src/modes/draw_feature.ts | 1 + .../layers/src/plugins/FeatureScalePlugin.ts | 6 +-- .../layers/src/point/__tests__/layer.spec.ts | 49 +++++++++++++++++++ packages/source/src/transform/join.ts | 3 +- stories/District/Layer/world.tsx | 9 +++- stories/Layers/components/Point.tsx | 15 ++++++ tslint.test.json | 2 +- 13 files changed, 105 insertions(+), 23 deletions(-) create mode 100644 packages/layers/src/point/__tests__/layer.spec.ts diff --git a/examples/react/layer/demo/world.jsx b/examples/react/layer/demo/world.jsx index c0c4d4c72f..7523384758 100644 --- a/examples/react/layer/demo/world.jsx +++ b/examples/react/layer/demo/world.jsx @@ -7,7 +7,7 @@ const World = React.memo(function Map() { React.useEffect(() => { const fetchData = async () => { const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/68dc6756-627b-4e9e-a5ba-e834f6ba48f8.json' + 'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json' ); const data = await response.json(); setData(data); diff --git a/packages/boundry/package.json b/packages/boundry/package.json index 94c5c5ffc2..b19256bb73 100644 --- a/packages/boundry/package.json +++ b/packages/boundry/package.json @@ -46,9 +46,6 @@ "lodash": "^4.6.2", "pbf": "^3.2.1" }, - "peerDependencies": { - "@antv/l7": "^2.2.3" - }, "bugs": { "url": "https://github.com/antvis/L7/issues" }, diff --git a/packages/boundry/src/config.ts b/packages/boundry/src/config.ts index 4b458b415c..6883edef0e 100644 --- a/packages/boundry/src/config.ts +++ b/packages/boundry/src/config.ts @@ -1,18 +1,18 @@ // tslint:disable-next-line:no-submodule-imports import merge from 'lodash/merge'; -let DataLevel = 2; +let DataLevel = 2; // d const dataLevel2: { [key: string]: any } = { world: { fill: { type: 'pbf', url: - 'https://gw.alipayobjects.com/os/bmw-prod/e66cdd3f-cd41-4533-9746-d8fdbe0a0056.bin', + 'https://gw.alipayobjects.com/os/bmw-prod/c95e3e43-d68b-4144-b366-3977ca64a822.bin', }, line: { type: 'pbf', url: - 'https://gw.alipayobjects.com/os/bmw-prod/f1b0fd97-ac90-4adb-b99c-01709e0e52c8.bin', + 'https://gw.alipayobjects.com/os/bmw-prod/62f61f5f-cca7-4137-845d-13c8f9969664.bin', }, label: { type: 'pbf', diff --git a/packages/boundry/src/layer/baseLayer.ts b/packages/boundry/src/layer/baseLayer.ts index 932014655a..a6b0b01bb2 100644 --- a/packages/boundry/src/layer/baseLayer.ts +++ b/packages/boundry/src/layer/baseLayer.ts @@ -126,7 +126,7 @@ export default class BaseLayer extends EventEmitter { style: { opacity: 1.0, }, - activeColor: 'rgba(0,0,255,0.3)', + activeColor: false, }, autoFit: true, stroke: '#bdbdbd', @@ -176,18 +176,20 @@ export default class BaseLayer extends EventEmitter { ], }); this.setLayerAttribute(fillLayer, 'color', fill.color as AttributeType); + this.setLayerAttribute(fillLayer, 'filter', fill.filter as AttributeType); if (fill.scale && isObject(fill.color)) { fillLayer.scale('color', { type: fill.scale, field: fill.color.field as string, }); } - fillLayer - .shape('fill') - .active({ + fillLayer.shape('fill').style(fill.style); + + if (fill.activeColor) { + fillLayer.active({ color: fill.activeColor as string, - }) - .style(fill.style); + }); + } this.fillLayer = fillLayer; this.layers.push(fillLayer); this.scene.addLayer(fillLayer); @@ -256,6 +258,11 @@ export default class BaseLayer extends EventEmitter { this.setLayerAttribute(bubbleLayer, 'color', bubble.color as AttributeType); this.setLayerAttribute(bubbleLayer, 'size', bubble.size as AttributeType); this.setLayerAttribute(bubbleLayer, 'shape', bubble.shape as AttributeType); + this.setLayerAttribute( + bubbleLayer, + 'filter', + bubble.filter as AttributeType, + ); if (bubble.scale) { bubbleLayer.scale(bubble.scale.field, { type: bubble.scale.type, @@ -325,12 +332,17 @@ export default class BaseLayer extends EventEmitter { private setLayerAttribute( layer: ILayer, - type: 'color' | 'size' | 'shape', + type: 'color' | 'size' | 'shape' | 'filter', attr: AttributeType, ) { + if (!attr) { + return; + } if (isObject(attr)) { + // @ts-ignore layer[type](attr.field, attr.values); } else { + // @ts-ignore layer[type](attr); } } diff --git a/packages/boundry/src/layer/interface.ts b/packages/boundry/src/layer/interface.ts index a2adabd086..3c4cdd1350 100644 --- a/packages/boundry/src/layer/interface.ts +++ b/packages/boundry/src/layer/interface.ts @@ -36,7 +36,8 @@ export interface IFillOptions { color: AttributeType; values: StyleAttributeOption; style: any; - activeColor: string; + activeColor: string | boolean; + filter: AttributeType; } export type TriggeEventType = | 'mousemove' @@ -60,6 +61,7 @@ export interface IBubbleOption { shape: AttributeType; size: AttributeType; color: AttributeType; + filter: AttributeType; scale: { field: string; type: ScaleTypeName; diff --git a/packages/draw/src/draw_control.ts b/packages/draw/src/draw_control.ts index 1372ad1848..ba55e40adc 100644 --- a/packages/draw/src/draw_control.ts +++ b/packages/draw/src/draw_control.ts @@ -2,7 +2,7 @@ * @Author: lzxue * @Date: 2020-04-03 19:24:16 * @Last Modified by: lzxue - * @Last Modified time: 2020-05-13 11:58:01 + * @Last Modified time: 2020-06-22 17:33:14 */ import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7'; import './css/draw.less'; diff --git a/packages/draw/src/modes/draw_feature.ts b/packages/draw/src/modes/draw_feature.ts index 02eda582b4..3884b31bad 100644 --- a/packages/draw/src/modes/draw_feature.ts +++ b/packages/draw/src/modes/draw_feature.ts @@ -243,6 +243,7 @@ export default abstract class DrawFeature extends DrawMode { if (this.drawStatus === 'DrawSelected') { this.clear(); this.source.removeFeature(this.currentFeature as Feature); + this.normalLayer.update(this.source.data); this.drawLayer.disableSelect(); this.selectMode.disable(); diff --git a/packages/layers/src/plugins/FeatureScalePlugin.ts b/packages/layers/src/plugins/FeatureScalePlugin.ts index 2142c05d3d..13b78511b8 100644 --- a/packages/layers/src/plugins/FeatureScalePlugin.ts +++ b/packages/layers/src/plugins/FeatureScalePlugin.ts @@ -72,9 +72,9 @@ export default class FeatureScalePlugin implements ILayerPlugin { this.scaleOptions = layer.getScaleOptions(); const attributes = styleAttributeService.getLayerStyleAttributes(); const { dataArray } = layer.getSource().data; - if (dataArray.length === 0) { - return; - } + // if (dataArray.length === 0) { + // return; + // } this.caculateScalesForAttributes(attributes || [], dataArray); return true; }); diff --git a/packages/layers/src/point/__tests__/layer.spec.ts b/packages/layers/src/point/__tests__/layer.spec.ts new file mode 100644 index 0000000000..01d906de3f --- /dev/null +++ b/packages/layers/src/point/__tests__/layer.spec.ts @@ -0,0 +1,49 @@ +import { Scene } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; +import PointLayer from '../'; +describe('pointLayer', () => { + const el = document.createElement('div'); + el.id = 'test-div-id'; + el.style.width = '500px'; + el.style.height = '500px'; + document.querySelector('body')?.appendChild(el); + + const pointdata = { + type: 'FeatureCollection', + features: [], + }; + it('init', () => { + const scene = new Scene({ + id: 'test-div-id', + map: new Mapbox({ + style: 'dark', + center: [110.19382669582967, 30.258134], + pitch: 0, + zoom: 3, + }), + }); + scene.on('loaded', () => { + const layer = new PointLayer() + .source(pointdata) + .color('red') + .shape('circle') + .size(5); + scene.addLayer(layer); + scene.render(); + layer.setData({ + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'Point', + coordinates: [99.84374999999999, 32.54681317351514], + }, + }, + ], + }); + expect(layer.getEncodedData().length).toBe(1); + }); + }); +}); diff --git a/packages/source/src/transform/join.ts b/packages/source/src/transform/join.ts index 773b7e6815..8f026a83fc 100644 --- a/packages/source/src/transform/join.ts +++ b/packages/source/src/transform/join.ts @@ -15,13 +15,14 @@ export function join(geoData: IParserData, options: IJoinOption) { const { sourceField, targetField, data } = options; const dataObj: { [key: string]: any } = {}; data.forEach((element: { [key: string]: any }) => { + // 属性数据 dataObj[element[sourceField]] = element; }); geoData.dataArray = geoData.dataArray.map((item: IParseDataItem) => { const joinName = item[targetField]; return { - ...dataObj[joinName], ...item, + ...dataObj[joinName], }; }); return geoData; diff --git a/stories/District/Layer/world.tsx b/stories/District/Layer/world.tsx index 7f6c4be666..f6dca4dfef 100644 --- a/stories/District/Layer/world.tsx +++ b/stories/District/Layer/world.tsx @@ -39,12 +39,18 @@ export default class Country extends React.Component { '#a63603', ], }, + filter: { + field: 'NAME_CHN', + values: (v: any) => { + return v.length > 5; + }, + }, }, stroke: '#ccc', label: { enable: true, textAllowOverlap: false, - field: 'NAME_CHN', + field: 'NAME_ENG', }, popup: { enable: true, @@ -54,7 +60,6 @@ export default class Country extends React.Component { }, }); Layer.on('loaded', () => { - console.log('完成'); Layer.updateData( [ { diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index 6bde14b8fa..6c18b5dc42 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -61,6 +61,21 @@ export default class Point3D extends React.Component { scene.addLayer(pointLayer); this.scene = scene; + setTimeout(() => { + console.log('updatedata'); + pointLayer.setData( + { + type: 'FeatureCollection', + features: [], + }, + { + parser: { + type: 'geojson', + }, + }, + ); + console.log(pointLayer); + }, 3000); }); }); } diff --git a/tslint.test.json b/tslint.test.json index 71861880f0..803088eaf3 100644 --- a/tslint.test.json +++ b/tslint.test.json @@ -1,7 +1,7 @@ { "extends": ["./tslint.json"], "rules": { - "no-implicit-dependencies": [true, "dev"] + "no-implicit-dependencies": [false, "dev"] }, "linterOptions": { "exclude": ["**/*.d.ts", "**/data/*.ts"]