diff --git a/beta.sh b/beta.sh new file mode 100644 index 0000000000..b81362416c --- /dev/null +++ b/beta.sh @@ -0,0 +1,11 @@ +npm dist-tag add @antv/l7-component@2.5.4 beta +npm dist-tag add @antv/l7-core@2.5.4 beta +npm dist-tag add @antv/l7@2.5.4 beta +npm dist-tag add @antv/l7-layers@2.5.4 beta +npm dist-tag add @antv/l7-map@2.5.4 beta +npm dist-tag add @antv/l7-maps@2.5.4 beta +npm dist-tag add @antv/l7-renderer@2.5.4 beta +npm dist-tag add @antv/l7-scene@2.5.4 beta +npm dist-tag add @antv/l7-source@2.5.4 beta +npm dist-tag add @antv/l7-three@2.5.4 beta +npm dist-tag add @antv/l7-utils@2.5.4 beta diff --git a/latest.sh b/latest.sh new file mode 100644 index 0000000000..0e1653e8dd --- /dev/null +++ b/latest.sh @@ -0,0 +1,11 @@ +npm dist-tag add @antv/l7-component@2.4.4 latest +npm dist-tag add @antv/l7-core@2.4.4 latest +npm dist-tag add @antv/l7@2.4.4 latest +npm dist-tag add @antv/l7-layers@2.4.4 latest +npm dist-tag add @antv/l7-map@2.4.4 latest +npm dist-tag add @antv/l7-maps@2.4.4 latest +npm dist-tag add @antv/l7-renderer@2.4.4 latest +npm dist-tag add @antv/l7-scene@2.4.4 latest +npm dist-tag add @antv/l7-source@2.4.4 latest +npm dist-tag add @antv/l7-three@2.4.4 latest +npm dist-tag add @antv/l7-utils@2.4.4 latest diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 97a2329a7b..463ff7f59d 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -526,7 +526,12 @@ export default class BaseLayer extends EventEmitter // } else { // this.renderModels(); // } - this.renderModels(); + // TODO: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题 + if (this.getEncodedData().length !== 0) { + this.renderModels(); + } + // this.renderModels(); + // this.multiPassRenderer.render(); // this.renderModels(); return this; @@ -938,16 +943,19 @@ export default class BaseLayer extends EventEmitter } public renderModels() { - if (this.layerModelNeedUpdate && this.layerModel) { - this.models = this.layerModel.buildModels(); - this.hooks.beforeRender.call(); - this.layerModelNeedUpdate = false; - } - this.models.forEach((model) => { - model.draw({ - uniforms: this.layerModel.getUninforms(), + // TODO: this.getEncodedData().length > 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题 + if (this.getEncodedData().length > 0) { + if (this.layerModelNeedUpdate && this.layerModel) { + this.models = this.layerModel.buildModels(); + this.hooks.beforeRender.call(); + this.layerModelNeedUpdate = false; + } + this.models.forEach((model) => { + model.draw({ + uniforms: this.layerModel.getUninforms(), + }); }); - }); + } return this; } diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index e0c804443f..59768a242a 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/packages/layers/src/core/BaseModel.ts @@ -159,13 +159,16 @@ export default class BaseModel hasOffsets: 0, }; this.dataTextureTest = this.layerService.getOESTextureFloat(); - this.dataTexture = this.createTexture2D({ - data: new ImageData(1, 1).data, - mag: gl.NEAREST, - min: gl.NEAREST, - width: 1, - height: 1, - }); + // 只有在不支持数据纹理的情况下进行赋值 + if (!this.dataTextureTest) { + this.dataTexture = this.createTexture2D({ + data: new ImageData(1, 1).data, + mag: gl.NEAREST, + min: gl.NEAREST, + width: 1, + height: 1, + }); + } } // style datatexture mapping diff --git a/packages/layers/src/line/models/arc.ts b/packages/layers/src/line/models/arc.ts index 2b15675c9b..58a06f1304 100644 --- a/packages/layers/src/line/models/arc.ts +++ b/packages/layers/src/line/models/arc.ts @@ -46,7 +46,7 @@ export default class ArcModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, diff --git a/packages/layers/src/line/models/arc_3d.ts b/packages/layers/src/line/models/arc_3d.ts index 93392d4255..f0d8f4e823 100644 --- a/packages/layers/src/line/models/arc_3d.ts +++ b/packages/layers/src/line/models/arc_3d.ts @@ -62,7 +62,7 @@ export default class Arc3DModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, diff --git a/packages/layers/src/line/models/great_circle.ts b/packages/layers/src/line/models/great_circle.ts index 9e1f588382..aeb6c06ac7 100644 --- a/packages/layers/src/line/models/great_circle.ts +++ b/packages/layers/src/line/models/great_circle.ts @@ -65,7 +65,7 @@ export default class GreatCircleModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts index c4ad4c86e4..076176168d 100644 --- a/packages/layers/src/line/models/line.ts +++ b/packages/layers/src/line/models/line.ts @@ -63,7 +63,7 @@ export default class LineModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, diff --git a/packages/layers/src/point/models/extrude.ts b/packages/layers/src/point/models/extrude.ts index 33f3176ac7..50c22ae227 100644 --- a/packages/layers/src/point/models/extrude.ts +++ b/packages/layers/src/point/models/extrude.ts @@ -32,7 +32,7 @@ export default class ExtrudeModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index e1b8e895ea..eac7f3c838 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -66,7 +66,7 @@ export default class FillModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, diff --git a/packages/layers/src/point/models/image.ts b/packages/layers/src/point/models/image.ts index 3ed4d99646..90fee2f0b1 100644 --- a/packages/layers/src/point/models/image.ts +++ b/packages/layers/src/point/models/image.ts @@ -47,7 +47,7 @@ export default class ImageModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, diff --git a/packages/layers/src/point/models/normal.ts b/packages/layers/src/point/models/normal.ts index ec1a916802..d547c4ca24 100644 --- a/packages/layers/src/point/models/normal.ts +++ b/packages/layers/src/point/models/normal.ts @@ -60,7 +60,7 @@ export default class NormalModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, @@ -140,6 +140,7 @@ export default class NormalModel extends BaseModel { }, }); } + private defaultStyleOptions(): Partial< IPointLayerStyleOptions & ILayerConfig > { diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts index 9f4ab6d37d..da5dc40b34 100644 --- a/packages/layers/src/point/models/text.ts +++ b/packages/layers/src/point/models/text.ts @@ -157,7 +157,7 @@ export default class TextModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, diff --git a/packages/layers/src/polygon/models/extrude.ts b/packages/layers/src/polygon/models/extrude.ts index 1c115cd904..c4e422c8ca 100644 --- a/packages/layers/src/polygon/models/extrude.ts +++ b/packages/layers/src/polygon/models/extrude.ts @@ -24,7 +24,7 @@ export default class ExtrudeModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, diff --git a/packages/layers/src/polygon/models/fill.ts b/packages/layers/src/polygon/models/fill.ts index 6ed12fdf50..05140127e8 100644 --- a/packages/layers/src/polygon/models/fill.ts +++ b/packages/layers/src/polygon/models/fill.ts @@ -36,7 +36,7 @@ export default class FillModel extends BaseModel { this.rowCount = height; // 当前数据纹理有多少行 this.dataTexture = - this.cellLength > 0 + this.cellLength > 0 && data.length > 0 ? this.createTexture2D({ flipY: true, data, diff --git a/stories/Map/components/amap2demo_image.tsx b/stories/Map/components/amap2demo_image.tsx index 7f9e9e15ed..82d76f182b 100644 --- a/stories/Map/components/amap2demo_image.tsx +++ b/stories/Map/components/amap2demo_image.tsx @@ -1,10 +1,56 @@ -import { PointLayer, Scene } from '@antv/l7'; +import { PointLayer, Scene, LineLayer, PolygonLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; - +const data = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: { + testOpacity: 0.4, + }, + geometry: { + type: 'MultiPolygon', + coordinates: [ + [ + [ + [110.5224609375, 32.731840896865684], + [113.0712890625, 32.731840896865684], + [113.0712890625, 34.56085936708384], + [110.5224609375, 34.56085936708384], + [110.5224609375, 32.731840896865684], + ], + [ + [111.26953125, 33.52307880890422], + [111.26953125, 34.03445260967645], + [112.03857421875, 34.03445260967645], + [112.03857421875, 33.52307880890422], + [111.26953125, 33.52307880890422], + ], + ], + [ + [ + [115.04882812499999, 34.379712580462204], + [114.9609375, 33.46810795527896], + [115.8837890625, 33.50475906922609], + [115.86181640625001, 34.379712580462204], + [115.04882812499999, 34.379712580462204], + ], + ], + ], + }, + }, + ], +}; export default class Amap2demo_image extends React.Component { // @ts-ignore private scene: Scene; + private imageLayer: any; + private imageLayer2: any; + private imageLayer3: any; + private lineLayer: any; + private polygonLayer: any; + private polygonLine: any; public componentWillUnmount() { this.scene.destroy(); @@ -86,39 +132,132 @@ export default class Amap2demo_image extends React.Component { ); scene.on('loaded', () => { - // fetch( - // 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', - // ) - // .then((res) => res.json()) - // .then((data) => { - // const imageLayer = new PointLayer() - // .source(data, { - // parser: { - // type: 'json', - // x: 'longitude', - // y: 'latitude', - // }, - // }) - // .shape('name', ['00', '01', '02']) - // // .color("rgba(255, 0, 0, 0.1)") - // .size(20); - // scene.addLayer(imageLayer); + // this.polygonLayer = new PolygonLayer({ + // }) + // this.polygonLayer.source({ + // type: 'FeatureCollection', + // features: [], + // }) + // .shape('fill') + // .color('red') + // .style({ + // opacity: 0.5 // }); - const imageLayer = new PointLayer() - .source(originData, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('name', ['00', '01', '02']) - .size(20) - .style({ - opacity: 'opacity', - offsets: 'offsets', + // scene.addLayer(this.polygonLayer); + + // this.polygonLine = new PolygonLayer({ + // }) + + // this.polygonLine.source({ + // type: 'FeatureCollection', + // features: [], + // }) + // .shape('line') + // .color('#00f') + // .style({ + // opacity: 0.8 + // }); + // scene.addLayer(this.polygonLine); + + // this.lineLayer = new LineLayer({ + // zIndex: 7, + // pickingBuffer: 4, + // }); + // this.lineLayer + // .source({ + // type: 'FeatureCollection', + // features: [], + // }) + // .shape('line') + // .size(10) + // .color('#f00') + // scene.addLayer(this.lineLayer) + // this.imageLayer = new PointLayer({ + // blend: "normal" + // }) + // this.imageLayer.source([], { + // parser: { + // type: 'json', + // x: 'longitude', + // y: 'latitude', + // }, + // }) + // .shape('name', ['00']) + // .size(20) + // .style({ + // opacity: 0.5 + // }); + // scene.addLayer(this.imageLayer); + // this.imageLayer2 = new PointLayer({ + // blend: "normal" + // }) + // this.imageLayer2.source([], { + // parser: { + // type: 'json', + // x: 'longitude', + // y: 'latitude', + // }, + // }) + // .shape('name', ['02']) + // .size(20) + // .style({ + // opacity: 0.5 + // }); + // scene.addLayer(this.imageLayer2); + // this.imageLayer3 = new PointLayer({ + // blend: "normal" + // }) + // this.imageLayer3.source([], { + // parser: { + // type: 'json', + // x: 'longitude', + // y: 'latitude', + // }, + // }) + // .shape('name', ['00']) + // .size(20) + // .style({ + // opacity: 0.5 + // }); + // scene.addLayer(this.imageLayer3); + + for (let i = 0; i < 17; i++) { + // > 16 * 2 + // var testdata = [{ + // longitude: 121.43 + Math.random() * -0.2 + 0.1, + // latitude: 31.26 + Math.random() + -0.2 + 0.1, + // }] + var testdata: any[] = []; + let layer = new PointLayer({ + blend: 'normal', }); - scene.addLayer(imageLayer); + layer + .source(testdata, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + }, + }) + .color('#ff0') + // .shape('name', ['00']) + .size(20); + scene.addLayer(layer); + + // let layer = new PolygonLayer({ + // }) + // layer.source({ + // type: 'FeatureCollection', + // features: [], + // }) + // .shape('fill') + // .color('red') + // .style({ + // opacity: 0.5 + // }); + // scene.addLayer(layer); + } + console.log(scene.getLayers()); }); } diff --git a/stories/Map/components/amap2demo_lineLinear.tsx b/stories/Map/components/amap2demo_lineLinear.tsx index 8d348a2c16..428cd243a0 100644 --- a/stories/Map/components/amap2demo_lineLinear.tsx +++ b/stories/Map/components/amap2demo_lineLinear.tsx @@ -16,11 +16,41 @@ export default class Amap2demo_lineLinear extends React.Component { map: new GaodeMap({ center: [120.19382669582967, 30.258134], pitch: 0, - zoom: 16, + zoom: 6, viewMode: '3D', }), }); this.scene = scene; + const geoData = { + type: 'FeatureCollection', + features: [ + // { + // type: 'Feature', + // properties: { + // testOpacity: 0.8, + // }, + // geometry: { + // type: 'Polygon', + // coordinates: [ + // [ + // [113.8623046875, 30.031055426540206], + // [116.3232421875, 30.031055426540206], + // [116.3232421875, 31.090574094954192], + // [113.8623046875, 31.090574094954192], + // [113.8623046875, 30.031055426540206], + // ], + // [ + // [117.26806640625, 32.13840869677249], + // [118.36669921875, 32.13840869677249], + // [118.36669921875, 32.47269502206151], + // [117.26806640625, 32.47269502206151], + // [117.26806640625, 32.13840869677249], + // ], + // ], + // }, + // }, + ], + }; scene.on('loaded', () => { fetch( @@ -31,7 +61,8 @@ export default class Amap2demo_lineLinear extends React.Component { .then((data) => { // @ts-ignore const layer = new LineLayer({}) - .source(data) + // .source(data) + .source(geoData) .size(5) .shape('line') .color('#25d8b7')