From 55ae0001c92b2400b193ca05da127bb989a20565 Mon Sep 17 00:00:00 2001 From: "@thinkinggis" Date: Fri, 16 Dec 2022 10:33:56 +0800 Subject: [PATCH] fix: identity scale && text padding (#1541) * fix: identity scale && text padding * fix: lint error * fix: format lint --- dev-demos/bugs/point/demos/pointstroke.tsx | 77 +++++++++++++++---- dev-demos/bugs/polygon/demos/polygon.tsx | 5 +- .../layers/src/plugins/FeatureScalePlugin.ts | 18 ++--- packages/layers/src/point/models/text.ts | 2 +- packages/layers/src/utils/identityScale.ts | 34 ++++++++ 5 files changed, 106 insertions(+), 30 deletions(-) create mode 100644 packages/layers/src/utils/identityScale.ts diff --git a/dev-demos/bugs/point/demos/pointstroke.tsx b/dev-demos/bugs/point/demos/pointstroke.tsx index 1891c336a7..d202f65aa0 100644 --- a/dev-demos/bugs/point/demos/pointstroke.tsx +++ b/dev-demos/bugs/point/demos/pointstroke.tsx @@ -23,7 +23,9 @@ export default () => { { "type": "Feature", "properties": { - "name": "A" + "name": "A", + "color":"red", + size:10, }, "geometry": { "type": "Point", @@ -36,7 +38,8 @@ export default () => { { "type": "Feature", "properties": { - "name": "B" + "name": "B", + "color":"yellow", }, "geometry": { "type": "Point", @@ -49,7 +52,39 @@ export default () => { { "type": "Feature", "properties": { - "name": "C" + "name": "E", + "color":"blue", + size:13, + }, + "geometry": { + "type": "Point", + "coordinates": [ + 121.9375, + 27.059125784374068 + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "C", + "color":"red", + size:10, + }, + "geometry": { + "type": "Point", + "coordinates": [ + 107.22656249999999, + 37.020098201368114 + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "F", + "color":"red", + size:15, }, "geometry": { "type": "Point", @@ -61,34 +96,44 @@ export default () => { } ] }) + // .scale('color',{ + // type:'identity' + // }) + .scale('size',{ + type:'identity' + }) .shape('circle') - .size(12) + .size('size') .active({ color:'red', }) .select(true) - .color('red') + .color('color') .style({ - stroke: ['name', (name)=>{ - switch (name) { - case 'A' : - return '#fc8d59'; + // stroke: ['name', (name)=>{ + // switch (name) { + // case 'A' : + // return '#fc8d59'; - case 'B' : - return '#91cf60'; - default: - return '#ffffbf'; + // case 'B' : + // return '#91cf60'; + // default: + // return '#ffffbf'; - } - } + // } + // } - ], // 描边颜色 + // ], // 描边颜色 strokeWidth: 5, // 描边宽度 }); + scene.addLayer(pointLayer); + pointLayer.on('inited',()=>{ + console.log(pointLayer.getLegend('size')) + }) }); diff --git a/dev-demos/bugs/polygon/demos/polygon.tsx b/dev-demos/bugs/polygon/demos/polygon.tsx index 2071a2c2fa..abe71ce99f 100644 --- a/dev-demos/bugs/polygon/demos/polygon.tsx +++ b/dev-demos/bugs/polygon/demos/polygon.tsx @@ -2582,14 +2582,13 @@ export default () => { coordinates: "center" } }) - .color("#fff") + .color("#f00") .shape("name", "text") .size(12) .style({ opacity: 1, stroke: "#fff", - strokeWidth: 0, - padding: [5, 5], + strokeWidth: 1, textAllowOverlap: false }); diff --git a/packages/layers/src/plugins/FeatureScalePlugin.ts b/packages/layers/src/plugins/FeatureScalePlugin.ts index 6b86fdc5ac..4bfa0c33a8 100644 --- a/packages/layers/src/plugins/FeatureScalePlugin.ts +++ b/packages/layers/src/plugins/FeatureScalePlugin.ts @@ -17,6 +17,7 @@ import * as d3 from 'd3-scale'; import { injectable } from 'inversify'; import { isNil, isString, uniq } from 'lodash'; import 'reflect-metadata'; +import identity from '../utils/identityScale'; const dateRegex = /^(?:(?!0000)[0-9]{4}([-/.]+)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-/.]?)0?2\2(?:29))(\s+([01]|([01][0-9]|2[0-3])):([0-9]|[0-5][0-9]):([0-9]|[0-5][0-9]))?$/; @@ -25,7 +26,7 @@ const scaleMap = { [ScaleTypes.LINEAR]: d3.scaleLinear, [ScaleTypes.POWER]: d3.scalePow, [ScaleTypes.LOG]: d3.scaleLog, - [ScaleTypes.IDENTITY]: d3.scaleIdentity, + [ScaleTypes.IDENTITY]: identity, [ScaleTypes.SEQUENTIAL]: d3.scaleSequential, [ScaleTypes.TIME]: d3.scaleTime, [ScaleTypes.QUANTILE]: d3.scaleQuantile, @@ -34,7 +35,6 @@ const scaleMap = { [ScaleTypes.CAT]: d3.scaleOrdinal, [ScaleTypes.DIVERGING]: d3.scaleDiverging, }; - /** * 根据 Source 原始数据为指定字段创建 Scale，保存在 StyleAttribute 上，供下游插件使用 */ @@ -155,6 +155,8 @@ export default class FeatureScalePlugin implements ILayerPlugin { case ScaleTypes.THRESHOLD: scale.scale.range(attributeScale.values); // break; + case ScaleTypes.IDENTITY: // 不做处理xe + break; case ScaleTypes.CAT: attributeScale.values ? scale.scale.range(attributeScale.values) @@ -279,14 +281,7 @@ export default class FeatureScalePlugin implements ILayerPlugin { const values = data?.map((item) => item[field]) || []; if (scaleOption?.domain) { cfg.domain = scaleOption?.domain; - } else if ( - type !== ScaleTypes.CAT && - type !== ScaleTypes.QUANTILE && - type !== ScaleTypes.DIVERGING - ) { - // linear/ - cfg.domain = extent(values); - } else if (type === ScaleTypes.CAT) { + } else if (type === ScaleTypes.CAT || type === ScaleTypes.IDENTITY) { cfg.domain = uniq(values); } else if (type === ScaleTypes.QUANTILE) { cfg.domain = values; @@ -297,6 +292,9 @@ export default class FeatureScalePlugin implements ILayerPlugin { ? scaleOption?.neutral : (minMax[0] + minMax[1]) / 2; cfg.domain = [minMax[0], neutral, minMax[1]]; + } else { + // linear/Power/log + cfg.domain = extent(values); } return { ...cfg, ...scaleOption }; } diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts index b12551c392..c06c1c10ab 100644 --- a/packages/layers/src/point/models/text.ts +++ b/packages/layers/src/point/models/text.ts @@ -474,7 +474,7 @@ export default class TextModel extends BaseModel { */ private filterGlyphs() { const { - padding = [4, 4], + padding = [0, 0], textAllowOverlap = false, } = this.layer.getLayerConfig() as IPointLayerStyleOptions; if (textAllowOverlap) { diff --git a/packages/layers/src/utils/identityScale.ts b/packages/layers/src/utils/identityScale.ts new file mode 100644 index 0000000000..d3d59cfcc4 --- /dev/null +++ b/packages/layers/src/utils/identityScale.ts @@ -0,0 +1,34 @@ +export default function identity(d: any) { + let unknown: any; + let domain: any = []; + + function scale(x: any) { + return x == null ? unknown : x; + } + + scale.invert = scale; + + scale.domain = scale.range = (v?: any) => { + if (v) { + domain = v; + return v; + } + + return domain; + }; + + scale.unknown = (v: any) => { + if (v) { + unknown = v; + return v; + } + + return unknown; + }; + + scale.copy = () => { + return identity(d).unknown(unknown); + }; + + return scale; +}