Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* refactor: core layer * test: dot layer * feat: text core layer * test: layer group * refactor: update data * fix: layer id number * test: layer group * refactor: layer options * test: scatter layer * chore: default value * docs: composite layer * build: config rollup
- Loading branch information
Showing
68 changed files
with
3,105 additions
and
1,363 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
<h1 align="center">Composite Layers</h1> | ||
|
||
<div align="center"> | ||
Composite layers for @antv/l7、@antv/l7plot、@antv/dipper. | ||
Composite layers for @antv/l7、@antv/l7plot、@antv/larkmap、@antv/dipper. | ||
</div> |
139 changes: 139 additions & 0 deletions
139
packages/composite-layers/__tests__/unit/composite-layers/area-layer/index.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,139 @@ | ||
import { getLayerStyleAttribute } from '../../../helper/layer'; | ||
import { AreaLayer } from '../../../../src/composite-layers/area-layer'; | ||
|
||
describe('area layer', () => { | ||
const layer = new AreaLayer({ | ||
source: { data: [] }, | ||
fillColor: { | ||
field: 'adcode', | ||
value: ['rgb(239,243,255)', 'rgb(189,215,231)', 'rgb(8,81,156)'], | ||
}, | ||
opacity: 1, | ||
strokeColor: 'rgb(93,112,146)', | ||
lineWidth: 0.6, | ||
lineOpacity: 1, | ||
label: { | ||
field: 'label', | ||
style: { | ||
fill: '#fff', | ||
opacity: 0.6, | ||
fontSize: 12, | ||
textAnchor: 'top', | ||
textOffset: [0, 20], | ||
spacing: 1, | ||
padding: [5, 5], | ||
stroke: '#ffffff', | ||
strokeWidth: 0.3, | ||
strokeOpacity: 1.0, | ||
}, | ||
}, | ||
state: { | ||
active: { | ||
fillColor: 'red', | ||
strokeColor: 'green', | ||
lineWidth: 1.5, | ||
lineOpacity: 0.8, | ||
}, | ||
select: { | ||
fillColor: 'red', | ||
strokeColor: 'yellow', | ||
lineWidth: 1.5, | ||
lineOpacity: 0.8, | ||
}, | ||
}, | ||
}); | ||
|
||
it('type', () => { | ||
expect(layer.type).toBe('areaLayer'); | ||
expect(layer.fillLayer.type).toBe('polygonLayer'); | ||
expect(layer.strokeLayer.type).toBe('lineLayer'); | ||
expect(layer.highlightStrokeLayer.type).toBe('lineLayer'); | ||
expect(layer.selectFillLayer.type).toBe('polygonLayer'); | ||
expect(layer.selectStrokeLayer.type).toBe('lineLayer'); | ||
expect(layer.labelLayer.type).toBe('textLayer'); | ||
}); | ||
|
||
it('color', () => { | ||
expect(getLayerStyleAttribute(layer.fillLayer.layer['pendingStyleAttributes'], 'color')).toEqual({ | ||
attributeName: 'color', | ||
attributeField: 'adcode', | ||
attributeValues: ['rgb(239,243,255)', 'rgb(189,215,231)', 'rgb(8,81,156)'], | ||
}); | ||
}); | ||
|
||
it('shape', () => { | ||
expect(getLayerStyleAttribute(layer.fillLayer.layer['pendingStyleAttributes'], 'shape')).toEqual({ | ||
attributeName: 'shape', | ||
attributeField: 'fill', | ||
}); | ||
expect(getLayerStyleAttribute(layer.strokeLayer.layer['pendingStyleAttributes'], 'shape')).toEqual({ | ||
attributeName: 'shape', | ||
attributeField: 'line', | ||
}); | ||
}); | ||
|
||
it('label', () => { | ||
expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'size')).toEqual({ | ||
attributeName: 'size', | ||
attributeField: 12, | ||
}); | ||
expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'color')).toEqual({ | ||
attributeName: 'color', | ||
attributeField: '#fff', | ||
}); | ||
expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'shape')).toEqual({ | ||
attributeName: 'shape', | ||
attributeField: 'label', | ||
attributeValues: 'text', | ||
}); | ||
expect(layer.labelLayer.layer['rawConfig']).toMatchObject({ | ||
opacity: 0.6, | ||
textAnchor: 'top', | ||
textOffset: [0, 20], | ||
spacing: 1, | ||
padding: [5, 5], | ||
stroke: '#ffffff', | ||
strokeWidth: 0.3, | ||
strokeOpacity: 1.0, | ||
}); | ||
}); | ||
|
||
it('style', () => { | ||
expect(layer.fillLayer.layer['rawConfig']).toMatchObject({ opacity: 1 }); | ||
|
||
expect(layer.strokeLayer.layer['rawConfig']).toMatchObject({ opacity: 1 }); | ||
expect(getLayerStyleAttribute(layer.strokeLayer.layer['pendingStyleAttributes'], 'color')).toEqual({ | ||
attributeName: 'color', | ||
attributeField: 'rgb(93,112,146)', | ||
}); | ||
expect(getLayerStyleAttribute(layer.strokeLayer.layer['pendingStyleAttributes'], 'size')).toEqual({ | ||
attributeName: 'size', | ||
attributeField: 0.6, | ||
}); | ||
}); | ||
|
||
it('state', () => { | ||
expect(layer.fillLayer.layer['needUpdateConfig'].enableHighlight).toBeTruthy(); | ||
expect(layer.fillLayer.layer['needUpdateConfig'].enableSelect).toBeFalsy(); | ||
|
||
expect(getLayerStyleAttribute(layer.highlightStrokeLayer.layer['pendingStyleAttributes'], 'color')).toEqual({ | ||
attributeName: 'color', | ||
attributeField: 'green', | ||
}); | ||
expect(getLayerStyleAttribute(layer.highlightStrokeLayer.layer['pendingStyleAttributes'], 'size')).toEqual({ | ||
attributeName: 'size', | ||
attributeField: 1.5, | ||
}); | ||
expect(layer.highlightStrokeLayer.layer['rawConfig']).toMatchObject({ opacity: 0.8 }); | ||
|
||
expect(getLayerStyleAttribute(layer.selectStrokeLayer.layer['pendingStyleAttributes'], 'color')).toEqual({ | ||
attributeName: 'color', | ||
attributeField: 'yellow', | ||
}); | ||
expect(getLayerStyleAttribute(layer.selectStrokeLayer.layer['pendingStyleAttributes'], 'size')).toEqual({ | ||
attributeName: 'size', | ||
attributeField: 1.5, | ||
}); | ||
expect(layer.selectStrokeLayer.layer['rawConfig']).toMatchObject({ opacity: 0.8 }); | ||
}); | ||
}); |
136 changes: 136 additions & 0 deletions
136
packages/composite-layers/__tests__/unit/composite-layers/scatter-layer/index.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,136 @@ | ||
import { getLayerStyleAttribute } from '../../../helper/layer'; | ||
import { ScatterLayer } from '../../../../src/composite-layers/scatter-layer'; | ||
|
||
describe('scatter layer', () => { | ||
const layer = new ScatterLayer({ | ||
source: { data: [], parser: { type: 'json', x: 'x', y: 'y' } }, | ||
radius: 12, | ||
// dotType: 'circle', | ||
fillColor: '#fff', | ||
opacity: 1, | ||
strokeColor: 'red', | ||
lineOpacity: 0.8, | ||
lineWidth: 1, | ||
label: { | ||
field: 'label', | ||
style: { | ||
fill: '#fff', | ||
opacity: 0.6, | ||
fontSize: 12, | ||
textAnchor: 'top', | ||
textOffset: [0, 20], | ||
spacing: 1, | ||
padding: [5, 5], | ||
stroke: '#ffffff', | ||
strokeWidth: 0.3, | ||
strokeOpacity: 1.0, | ||
}, | ||
}, | ||
state: { | ||
active: { | ||
fillColor: 'red', | ||
strokeColor: 'green', | ||
lineWidth: 1.5, | ||
lineOpacity: 0.8, | ||
}, | ||
select: { | ||
fillColor: 'red', | ||
strokeColor: 'yellow', | ||
lineWidth: 1.5, | ||
lineOpacity: 0.8, | ||
}, | ||
}, | ||
}); | ||
|
||
it('type', () => { | ||
expect(layer.type).toBe('scatterLayer'); | ||
expect(layer.fillLayer.type).toBe('pointLayer'); | ||
expect(layer.highlightStrokeLayer.type).toBe('pointLayer'); | ||
expect(layer.selectFillLayer.type).toBe('pointLayer'); | ||
expect(layer.selectStrokeLayer.type).toBe('pointLayer'); | ||
expect(layer.labelLayer.type).toBe('textLayer'); | ||
}); | ||
|
||
it('size', () => { | ||
expect(getLayerStyleAttribute(layer.fillLayer.layer['pendingStyleAttributes'], 'size')).toEqual({ | ||
attributeName: 'size', | ||
attributeField: 12, | ||
}); | ||
}); | ||
|
||
it('color', () => { | ||
expect(getLayerStyleAttribute(layer.fillLayer.layer['pendingStyleAttributes'], 'color')).toEqual({ | ||
attributeName: 'color', | ||
attributeField: '#fff', | ||
}); | ||
}); | ||
|
||
it('shape', () => { | ||
expect(getLayerStyleAttribute(layer.fillLayer.layer['pendingStyleAttributes'], 'shape')).toEqual({ | ||
attributeName: 'shape', | ||
attributeField: 'circle', | ||
}); | ||
}); | ||
|
||
it('label', () => { | ||
expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'size')).toEqual({ | ||
attributeName: 'size', | ||
attributeField: 12, | ||
}); | ||
expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'color')).toEqual({ | ||
attributeName: 'color', | ||
attributeField: '#fff', | ||
}); | ||
expect(getLayerStyleAttribute(layer.labelLayer.layer['pendingStyleAttributes'], 'shape')).toEqual({ | ||
attributeName: 'shape', | ||
attributeField: 'label', | ||
attributeValues: 'text', | ||
}); | ||
expect(layer.labelLayer.layer['rawConfig']).toMatchObject({ | ||
opacity: 0.6, | ||
textAnchor: 'top', | ||
textOffset: [0, 20], | ||
spacing: 1, | ||
padding: [5, 5], | ||
stroke: '#ffffff', | ||
strokeWidth: 0.3, | ||
strokeOpacity: 1.0, | ||
}); | ||
}); | ||
|
||
it('style', () => { | ||
expect(layer.fillLayer.layer['rawConfig']).toMatchObject({ | ||
opacity: 1, | ||
strokeWidth: 1, | ||
stroke: 'red', | ||
strokeOpacity: 0.8, | ||
}); | ||
}); | ||
|
||
it('state', () => { | ||
expect(layer.fillLayer.layer['needUpdateConfig'].enableHighlight).toBeTruthy(); | ||
expect(layer.fillLayer.layer['needUpdateConfig'].enableSelect).toBeFalsy(); | ||
|
||
expect(getLayerStyleAttribute(layer.highlightStrokeLayer.layer['pendingStyleAttributes'], 'size')).toEqual({ | ||
attributeName: 'size', | ||
attributeField: 12, | ||
}); | ||
expect(layer.highlightStrokeLayer.layer['rawConfig']).toMatchObject({ | ||
opacity: 0, | ||
strokeWidth: 1.5, | ||
stroke: 'green', | ||
strokeOpacity: 0.8, | ||
}); | ||
|
||
expect(getLayerStyleAttribute(layer.selectStrokeLayer.layer['pendingStyleAttributes'], 'size')).toEqual({ | ||
attributeName: 'size', | ||
attributeField: 12, | ||
}); | ||
expect(layer.selectStrokeLayer.layer['rawConfig']).toMatchObject({ | ||
opacity: 0, | ||
strokeWidth: 1.5, | ||
stroke: 'yellow', | ||
strokeOpacity: 0.8, | ||
}); | ||
}); | ||
}); |
54 changes: 54 additions & 0 deletions
54
packages/composite-layers/__tests__/unit/core-layers/heatmap-layer/index.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import { getLayerStyleAttribute } from '../../../helper/layer'; | ||
import { HeatmapLayer } from '../../../../src/core-layers/heatmap-layer'; | ||
|
||
describe('heatmap layer', () => { | ||
const layer = new HeatmapLayer({ | ||
source: { data: [], parser: { type: 'json', x: 'x', y: 'y' } }, | ||
shape: 'heatmap', | ||
size: { | ||
field: 'mag', | ||
value: [0, 1], | ||
}, | ||
style: { | ||
intensity: 3, | ||
radius: 20, | ||
opacity: 1, | ||
rampColors: { | ||
colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'], | ||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], | ||
}, | ||
}, | ||
}); | ||
|
||
it('type', () => { | ||
expect(layer.type).toBe('heatmapLayer'); | ||
expect(layer.layer.type).toBe('HeatMapLayer'); | ||
}); | ||
|
||
it('size', () => { | ||
expect(getLayerStyleAttribute(layer.layer['pendingStyleAttributes'], 'size')).toEqual({ | ||
attributeName: 'size', | ||
attributeField: 'mag', | ||
attributeValues: [0, 1], | ||
}); | ||
}); | ||
|
||
it('shape', () => { | ||
expect(getLayerStyleAttribute(layer.layer['pendingStyleAttributes'], 'shape')).toEqual({ | ||
attributeName: 'shape', | ||
attributeField: 'heatmap', | ||
}); | ||
}); | ||
|
||
it('style', () => { | ||
expect(layer.layer['rawConfig']).toMatchObject({ | ||
intensity: 3, | ||
radius: 20, | ||
opacity: 1, | ||
rampColors: { | ||
colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'], | ||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], | ||
}, | ||
}); | ||
}); | ||
}); |
Oops, something went wrong.