From 549898c8d43e20e295e2b28a3e9de6e13468342d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=81=86=E4=B8=80?= Date: Mon, 9 Nov 2020 22:57:02 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=9E=84=E9=80=A0=E4=B8=89?= =?UTF-8?q?=E8=A7=92=E5=8C=96=E9=94=99=E8=AF=AF=E4=BE=8B=E5=AD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- stories/Layers/components/polygon.tsx | 41 ++++++++++++++++++++------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/stories/Layers/components/polygon.tsx b/stories/Layers/components/polygon.tsx index f0d6a84bcf..e12e4ccf25 100644 --- a/stories/Layers/components/polygon.tsx +++ b/stories/Layers/components/polygon.tsx @@ -95,6 +95,32 @@ const RMBColor: { [key: string]: string[] } = { '2角': ['#4D6256', '#5F6F63', '#648F96', '#A5AF9C', '#C4DAE2', '#8A9A8E'], '1角': ['#653E40', '#6C4547', '#AC8486', '#D1A6A1', '#CAB8B8', '#D5C1A4'], }; + +// earcut结果： [5, 0, 1, 1, 2, 3, 3, 4, 5, 5, 1, 3] 0 +const geoJSONhole = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [100.1953125, 42.5530802889558], + [111.533203125, 37.16031654673677], + [104.67773437499999, 34.88593094075317], //** + [108.4130859375, 28.14950321154457], /// + [127.529296875, 33.063924198120645], + [115.48828125000001, 47.45780853075031], + [100.1953125, 42.5530802889558], // + ], + ], + }, + }, + ], +}; + export default class TextLayerDemo extends React.Component { // @ts-ignore private scene: Scene; @@ -123,21 +149,14 @@ export default class TextLayerDemo extends React.Component { }); scene.on('loaded', () => { const layer = new PolygonLayer({}) - .source(data) + .source(geoJSONhole) .shape('fill') .scale('childrenNum', { type: 'quantile', }) - .color('childrenNum', [ - '#D92568', - '#E3507E', - '#FC7AAB', - '#F1D3E5', - '#A7B5E3', - '#F2EEFF', - ]) + .color('#D92568') .style({ - opacity: 1.0, + opacity: 0.3, }); scene.addLayer(layer); this.scene = scene; @@ -147,7 +166,7 @@ export default class TextLayerDemo extends React.Component { textAnchor: 'center', filter: 1, textAllowOverlap: 4, - opacity: 1, + opacity: 0.3, color: '100元', }; const rasterFolder = gui.addFolder('面图层可视化'); From ef11bbe4ad309a42efa4357039bcfc75fe4cc132 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Tue, 10 Nov 2020 15:14:16 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9Enone=20blend=20?= =?UTF-8?q?=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/src/services/layer/ILayerService.ts | 1 + packages/layers/src/polygon/models/fill.ts | 1 + packages/layers/src/utils/blend.ts | 3 + stories/Layers/components/polygon.tsx | 6 +- stories/Source/components/multiPolygon.tsx | 880 ------------------ 5 files changed, 9 insertions(+), 882 deletions(-) diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 9fb7e8f946..2509b9d102 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -34,6 +34,7 @@ export enum BlendType { subtractive = 'subtractive', min = 'min', max = 'max', + none = 'none', } export interface IBlendTypes { [key: string]: Partial; diff --git a/packages/layers/src/polygon/models/fill.ts b/packages/layers/src/polygon/models/fill.ts index e849dd3b22..72db3a21b1 100644 --- a/packages/layers/src/polygon/models/fill.ts +++ b/packages/layers/src/polygon/models/fill.ts @@ -40,6 +40,7 @@ export default class FillModel extends BaseModel { vertexShader: polygon_vert, fragmentShader: polygon_frag, triangulation: polygonTriangulation, + blend: this.getBlend(), depth: { enable: false }, }), ]; diff --git a/packages/layers/src/utils/blend.ts b/packages/layers/src/utils/blend.ts index e209a58b8d..1d10a8a171 100644 --- a/packages/layers/src/utils/blend.ts +++ b/packages/layers/src/utils/blend.ts @@ -9,6 +9,9 @@ export const BlendTypes: IBlendTypes = { dstAlpha: 1, }, }, + [BlendType.none]: { + enable: false, + }, [BlendType.normal]: { enable: true, func: { diff --git a/stories/Layers/components/polygon.tsx b/stories/Layers/components/polygon.tsx index e12e4ccf25..c564352923 100644 --- a/stories/Layers/components/polygon.tsx +++ b/stories/Layers/components/polygon.tsx @@ -140,7 +140,7 @@ export default class TextLayerDemo extends React.Component { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Mapbox({ center: [120.19382669582967, 30.258134], pitch: 0, style: 'blank', @@ -148,7 +148,9 @@ export default class TextLayerDemo extends React.Component { }), }); scene.on('loaded', () => { - const layer = new PolygonLayer({}) + const layer = new PolygonLayer({ + blend: 'none', + }) .source(geoJSONhole) .shape('fill') .scale('childrenNum', { diff --git a/stories/Source/components/multiPolygon.tsx b/stories/Source/components/multiPolygon.tsx index 5041e4f27e..1d2d695426 100644 --- a/stories/Source/components/multiPolygon.tsx +++ b/stories/Source/components/multiPolygon.tsx @@ -38,886 +38,6 @@ export default class MultiPolygon extends React.Component { autoFit: true, }) .source(data) - // .source({ - // "type": "FeatureCollection", - // "features": [ - // { - // "type": "Feature", - // "geometry": { - // "type": "Polygon", - // "coordinates": [ - // [ - // [ - // 120.77635306891, - // 30.724101690221, - // 0 - // ], - // [ - // 120.7762750691, - // 30.723561703888, - // 0 - // ], - // [ - // 120.77232406917, - // 30.723597702916, - // 0 - // ], - // [ - // 120.77109506876, - // 30.7235147052, - // 0 - // ], - // [ - // 120.77108606943, - // 30.723752699288, - // 0 - // ], - // [ - // 120.77053906909, - // 30.72372769994, - // 0 - // ], - // [ - // 120.76927406959, - // 30.723672701042, - // 0 - // ], - // [ - // 120.76934906903, - // 30.723773698488, - // 0 - // ], - // [ - // 120.76930006953, - // 30.723889695569, - // 0 - // ], - // [ - // 120.76871506955, - // 30.723738699561, - // 0 - // ], - // [ - // 120.76694306899, - // 30.723900695172, - // 0 - // ], - // [ - // 120.76675406884, - // 30.724130689598, - // 0 - // ], - // [ - // 120.76683306938, - // 30.731139519176, - // 0 - // ], - // [ - // 120.76731206906, - // 30.740623287754, - // 0 - // ], - // [ - // 120.77071906901, - // 30.740450291653, - // 0 - // ], - // [ - // 120.77472406937, - // 30.740246297132, - // 0 - // ], - // [ - // 120.77522406896, - // 30.73904932611, - // 0 - // ], - // [ - // 120.77553406948, - // 30.737387366644, - // 0 - // ], - // [ - // 120.775429069, - // 30.734489437681, - // 0 - // ], - // [ - // 120.77559706923, - // 30.732567483938, - // 0 - // ], - // [ - // 120.7756120693, - // 30.732077496173, - // 0 - // ], - // [ - // 120.77564206943, - // 30.731053521125, - // 0 - // ], - // [ - // 120.77558106933, - // 30.729099568997, - // 0 - // ], - // [ - // 120.77573906952, - // 30.728197590445, - // 0 - // ], - // [ - // 120.77594006936, - // 30.727771600943, - // 0 - // ], - // [ - // 120.77571006921, - // 30.727633604778, - // 0 - // ], - // [ - // 120.77633306882, - // 30.725467657006, - // 0 - // ], - // [ - // 120.77635706911, - // 30.724694676455, - // 0 - // ], - // [ - // 120.7762630694, - // 30.724677676787, - // 0 - // ], - // [ - // 120.77636606933, - // 30.724431682439, - // 0 - // ], - // [ - // 120.77635306891, - // 30.724101690221, - // 0 - // ] - // ], - // [ - // [ - // 120.78582906896, - // 30.73962431227, - // 0 - // ], - // [ - // 120.78075606875, - // 30.740043302046, - // 0 - // ], - // [ - // 120.77649206883, - // 30.740156299253, - // 0 - // ], - // [ - // 120.77655806895, - // 30.746082154606, - // 0 - // ], - // [ - // 120.77659106946, - // 30.749030082542, - // 0 - // ], - // [ - // 120.77668906937, - // 30.755218931839, - // 0 - // ], - // [ - // 120.7766900692, - // 30.755294929765, - // 0 - // ], - // [ - // 120.77677806906, - // 30.760002815113, - // 0 - // ], - // [ - // 120.77684706956, - // 30.763676725444, - // 0 - // ], - // [ - // 120.77693106922, - // 30.764071715491, - // 0 - // ], - // [ - // 120.77850006939, - // 30.763877720881, - // 0 - // ], - // [ - // 120.78000106889, - // 30.763923719559, - // 0 - // ], - // [ - // 120.78126706911, - // 30.767494632229, - // 0 - // ], - // [ - // 120.78106206907, - // 30.767561630413, - // 0 - // ], - // [ - // 120.7771500695, - // 30.76884759917, - // 0 - // ], - // [ - // 120.77726406931, - // 30.772810502392, - // 0 - // ], - // [ - // 120.77719506881, - // 30.774495461324, - // 0 - // ], - // [ - // 120.77506906915, - // 30.777083397968, - // 0 - // ], - // [ - // 120.77807606907, - // 30.778478364399, - // 0 - // ], - // [ - // 120.77837906902, - // 30.778518363155, - // 0 - // ], - // [ - // 120.78929006934, - // 30.783340245421, - // 0 - // ], - // [ - // 120.79258006912, - // 30.784790210168, - // 0 - // ], - // [ - // 120.80403806889, - // 30.789838086536, - // 0 - // ], - // [ - // 120.80657006933, - // 30.785639189419, - // 0 - // ], - // [ - // 120.80679106927, - // 30.784983205662, - // 0 - // ], - // [ - // 120.80726206944, - // 30.782574264547, - // 0 - // ], - // [ - // 120.80872606913, - // 30.779160347623, - // 0 - // ], - // [ - // 120.80891006926, - // 30.778613361097, - // 0 - // ], - // [ - // 120.80907106892, - // 30.778645360213, - // 0 - // ], - // [ - // 120.81142606891, - // 30.779116348975, - // 0 - // ], - // [ - // 120.81145306957, - // 30.778889354564, - // 0 - // ], - // [ - // 120.81242706881, - // 30.77915934739, - // 0 - // ], - // [ - // 120.81266706902, - // 30.778689359075, - // 0 - // ], - // [ - // 120.81422306877, - // 30.779359342674, - // 0 - // ], - // [ - // 120.81454406916, - // 30.778939353179, - // 0 - // ], - // [ - // 120.81465406876, - // 30.77889535443, - // 0 - // ], - // [ - // 120.81680006941, - // 30.780012327073, - // 0 - // ], - // [ - // 120.81631606882, - // 30.780578312863, - // 0 - // ], - // [ - // 120.81904406908, - // 30.782179274046, - // 0 - // ], - // [ - // 120.81921006876, - // 30.782099275703, - // 0 - // ], - // [ - // 120.82012306881, - // 30.780940304439, - // 0 - // ], - // [ - // 120.8222420688, - // 30.779044350724, - // 0 - // ], - // [ - // 120.82267706899, - // 30.778673359141, - // 0 - // ], - // [ - // 120.8250490696, - // 30.775960425999, - // 0 - // ], - // [ - // 120.82709006887, - // 30.773821478205, - // 0 - // ], - // [ - // 120.82853006917, - // 30.772139519191, - // 0 - // ], - // [ - // 120.82859706912, - // 30.77195152339, - // 0 - // ], - // [ - // 120.8260130688, - // 30.770295564052, - // 0 - // ], - // [ - // 120.82687006877, - // 30.769355587288, - // 0 - // ], - // [ - // 120.82775306957, - // 30.768551606328, - // 0 - // ], - // [ - // 120.82840006948, - // 30.767794625092, - // 0 - // ], - // [ - // 120.82924806922, - // 30.767183639911, - // 0 - // ], - // [ - // 120.82956306887, - // 30.767025643638, - // 0 - // ], - // [ - // 120.8300850691, - // 30.766907646828, - // 0 - // ], - // [ - // 120.83112206899, - // 30.767073642299, - // 0 - // ], - // [ - // 120.83186506916, - // 30.767103642221, - // 0 - // ], - // [ - // 120.83211206903, - // 30.766588654343, - // 0 - // ], - // [ - // 120.83212506945, - // 30.76642065885, - // 0 - // ], - // [ - // 120.83096706918, - // 30.766113666077, - // 0 - // ], - // [ - // 120.830691069, - // 30.765966669795, - // 0 - // ], - // [ - // 120.8318870689, - // 30.764626702071, - // 0 - // ], - // [ - // 120.83182506897, - // 30.764508705408, - // 0 - // ], - // [ - // 120.83101306921, - // 30.764081715521, - // 0 - // ], - // [ - // 120.83121306923, - // 30.76358172742, - // 0 - // ], - // [ - // 120.83109206885, - // 30.763485730451, - // 0 - // ], - // [ - // 120.83162406913, - // 30.76276574743, - // 0 - // ], - // [ - // 120.83128806957, - // 30.762583751955, - // 0 - // ], - // [ - // 120.83173806893, - // 30.761936768301, - // 0 - // ], - // [ - // 120.83159806919, - // 30.761865769958, - // 0 - // ], - // [ - // 120.83158806915, - // 30.76176977205, - // 0 - // ], - // [ - // 120.83195806904, - // 30.761185786185, - // 0 - // ], - // [ - // 120.83188806872, - // 30.760991791162, - // 0 - // ], - // [ - // 120.83238006882, - // 30.759888817599, - // 0 - // ], - // [ - // 120.83255406889, - // 30.759835819366, - // 0 - // ], - // [ - // 120.83485306881, - // 30.760244809563, - // 0 - // ], - // [ - // 120.83522506925, - // 30.760230809735, - // 0 - // ], - // [ - // 120.83541906942, - // 30.760145811837, - // 0 - // ], - // [ - // 120.83580606904, - // 30.759772820627, - // 0 - // ], - // [ - // 120.83672306928, - // 30.75859084962, - // 0 - // ], - // [ - // 120.8370330689, - // 30.75795286482, - // 0 - // ], - // [ - // 120.83712906916, - // 30.757575874094, - // 0 - // ], - // [ - // 120.83731706948, - // 30.757475877026, - // 0 - // ], - // [ - // 120.83784206919, - // 30.75752287536, - // 0 - // ], - // [ - // 120.83800606922, - // 30.757456877594, - // 0 - // ], - // [ - // 120.83843806904, - // 30.755851916172, - // 0 - // ], - // [ - // 120.83828506888, - // 30.755732919085, - // 0 - // ], - // [ - // 120.83816606905, - // 30.755780917973, - // 0 - // ], - // [ - // 120.83806606949, - // 30.755974913461, - // 0 - // ], - // [ - // 120.83687606944, - // 30.755997912761, - // 0 - // ], - // [ - // 120.83656306945, - // 30.754973937972, - // 0 - // ], - // [ - // 120.83672906913, - // 30.754009961081, - // 0 - // ], - // [ - // 120.83664706911, - // 30.753562972564, - // 0 - // ], - // [ - // 120.83587106933, - // 30.752338002178, - // 0 - // ], - // [ - // 120.83373706928, - // 30.74996805985, - // 0 - // ], - // [ - // 120.83359406916, - // 30.749953060308, - // 0 - // ], - // [ - // 120.83324306953, - // 30.750084057055, - // 0 - // ], - // [ - // 120.83158306912, - // 30.750821038877, - // 0 - // ], - // [ - // 120.83163306935, - // 30.751102032064, - // 0 - // ], - // [ - // 120.83138306911, - // 30.751146031168, - // 0 - // ], - // [ - // 120.83073506938, - // 30.749989059514, - // 0 - // ], - // [ - // 120.83072506933, - // 30.749820063853, - // 0 - // ], - // [ - // 120.83233206914, - // 30.74894908466, - // 0 - // ], - // [ - // 120.83250906959, - // 30.749030082542, - // 0 - // ], - // [ - // 120.83267106907, - // 30.748864086839, - // 0 - // ], - // [ - // 120.83239006886, - // 30.748490096151, - // 0 - // ], - // [ - // 120.83134006945, - // 30.74767411564, - // 0 - // ], - // [ - // 120.83089006919, - // 30.747915109638, - // 0 - // ], - // [ - // 120.82928206956, - // 30.748447097158, - // 0 - // ], - // [ - // 120.82681206904, - // 30.749072081502, - // 0 - // ], - // [ - // 120.82493606872, - // 30.749914061024, - // 0 - // ], - // [ - // 120.82305806876, - // 30.750518046341, - // 0 - // ], - // [ - // 120.82194506959, - // 30.750846038145, - // 0 - // ], - // [ - // 120.82183906929, - // 30.75081403905, - // 0 - // ], - // [ - // 120.81857006943, - // 30.751646019006, - // 0 - // ], - // [ - // 120.81729506898, - // 30.752173006514, - // 0 - // ], - // [ - // 120.81635906937, - // 30.752413000324, - // 0 - // ], - // [ - // 120.81493806934, - // 30.752386001215, - // 0 - // ], - // [ - // 120.8143710689, - // 30.750924036714, - // 0 - // ], - // [ - // 120.80927506913, - // 30.752456998829, - // 0 - // ], - // [ - // 120.80860206929, - // 30.752373001526, - // 0 - // ], - // [ - // 120.80814106915, - // 30.751777015766, - // 0 - // ], - // [ - // 120.8080980695, - // 30.742568240055, - // 0 - // ], - // [ - // 120.80808006905, - // 30.738753333537, - // 0 - // ], - // [ - // 120.80803706939, - // 30.734523436641, - // 0 - // ], - // [ - // 120.80777306891, - // 30.728363587009, - // 0 - // ], - // [ - // 120.80781406891, - // 30.727287612728, - // 0 - // ], - // [ - // 120.80764106956, - // 30.726292637257, - // 0 - // ], - // [ - // 120.80756106919, - // 30.724460681717, - // 0 - // ], - // [ - // 120.80576006922, - // 30.723453706722, - // 0 - // ], - // [ - // 120.805084069, - // 30.723696700368, - // 0 - // ], - // [ - // 120.80054706927, - // 30.723970693668, - // 0 - // ], - // [ - // 120.80055206929, - // 30.728390585902, - // 0 - // ], - // [ - // 120.80135606956, - // 30.734556435666, - // 0 - // ], - // [ - // 120.80156006887, - // 30.736018399964, - // 0 - // ], - // [ - // 120.80184706893, - // 30.738810332081, - // 0 - // ], - // [ - // 120.80186006935, - // 30.738939328783, - // 0 - // ], - // [ - // 120.79892806887, - // 30.738954328496, - // 0 - // ], - // [ - // 120.79595506929, - // 30.738970328085, - // 0 - // ], - // [ - // 120.79431506897, - // 30.738979327756, - // 0 - // ], - // [ - // 120.79089806897, - // 30.739133324223, - // 0 - // ], - // [ - // 120.78582906896, - // 30.73962431227, - // 0 - // ] - // ] - // ] - // }, - // "properties": { - // "name": "东栅街道" - // } - // } - // ] - // }) .shape('fill') .color('red') .style({