p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 处理 dataTesture 未回收导致的bug

This commit is contained in:
2912401452 2021-07-28 16:12:24 +08:00
parent 3feab59638
commit 8bb9719836
14 changed files with 302 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/layers/src/line/models/arc.ts
View File

@ -125,9 +125,8 @@ export default class ArcModel extends BaseModel {
}
public clearModels() {
if (this.texture) {
this.texture.destroy();
}
this.texture?.destroy();
this.dataTexture?.destroy();
this.iconService.off('imageUpdate', this.updateTexture);
}

5
packages/layers/src/line/models/arc_3d.ts
View File

@ -120,9 +120,8 @@ export default class Arc3DModel extends BaseModel {
}
public clearModels() {
if (this.texture) {
this.texture.destroy();
}
this.texture?.destroy();
this.dataTexture?.destroy();
this.iconService.off('imageUpdate', this.updateTexture);
}

5
packages/layers/src/line/models/great_circle.ts
View File

@ -122,9 +122,8 @@ export default class GreatCircleModel extends BaseModel {
}
public clearModels() {
if (this.texture) {
this.texture.destroy();
}
this.texture?.destroy();
this.dataTexture?.destroy();
this.iconService.off('imageUpdate', this.updateTexture);
}

5
packages/layers/src/line/models/line.ts
View File

@ -133,9 +133,8 @@ export default class LineModel extends BaseModel {
}
public clearModels() {
if (this.texture) {
this.texture.destroy();
}
this.texture?.destroy();
this.dataTexture?.destroy();
this.iconService.off('imageUpdate', this.updateTexture);
}

3
packages/layers/src/point/models/extrude.ts
View File

@ -73,6 +73,9 @@ export default class ExtrudeModel extends BaseModel {
}),
];
}
public clearModels() {
this.dataTexture?.destroy();
}
protected registerBuiltinAttributes() {
// point layer size;
this.styleAttributeService.registerStyleAttribute({

5
packages/layers/src/point/models/fill.ts
View File

@ -133,6 +133,11 @@ export default class FillModel extends BaseModel {
}),
];
}
public clearModels() {
this.dataTexture?.destroy();
}
protected animateOption2Array(option: IAnimateOption): number[] {
return [option.enable ? 0 : 1.0, option.speed || 1, option.rings || 3, 0];
}

4
packages/layers/src/point/models/icon-font.ts
View File

@ -50,6 +50,10 @@ export default class IconeModel extends BaseModel {
];
}
public clearModels() {
this.dataTexture?.destroy();
}
protected registerBuiltinAttributes() {
// point layer size;
this.styleAttributeService.registerStyleAttribute({

5
packages/layers/src/point/models/image.ts
View File

@ -88,9 +88,8 @@ export default class ImageModel extends BaseModel {
}
public clearModels() {
if (this.texture) {
this.texture.destroy();
}
this.texture?.destroy();
this.dataTexture?.destroy();
this.iconService.off('imageUpdate', this.updateTexture);
}

4
packages/layers/src/point/models/normal.ts
View File

@ -110,6 +110,10 @@ export default class NormalModel extends BaseModel {
];
}
public clearModels() {
this.dataTexture?.destroy();
}
protected registerBuiltinAttributes() {
// point layer size;
this.styleAttributeService.registerStyleAttribute({

2
packages/layers/src/point/models/text.ts
View File

@ -241,6 +241,7 @@ export default class TextModel extends BaseModel {
}
public clearModels() {
this.dataTexture?.destroy();
this.layer.off('remapping', this.buildModels);
}
protected registerBuiltinAttributes() {
@ -516,6 +517,7 @@ export default class TextModel extends BaseModel {
if (this.texture) {
this.texture.destroy();
}
this.texture = createTexture2D({
data: canvas,
mag: gl.LINEAR,

4
packages/layers/src/polygon/models/extrude.ts
View File

@ -66,6 +66,10 @@ export default class ExtrudeModel extends BaseModel {
];
}
public clearModels() {
this.dataTexture?.destroy();
}
protected registerBuiltinAttributes() {
// point layer size;
this.styleAttributeService.registerStyleAttribute({

4
packages/layers/src/polygon/models/fill.ts
View File

@ -79,6 +79,10 @@ export default class FillModel extends BaseModel {
];
}
public clearModels() {
this.dataTexture?.destroy();
}
protected registerBuiltinAttributes() {
// point layer size;
}

351
stories/Map/components/amap2demo_textOffset.tsx
View File

@ -1,7 +1,27 @@
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, Map as customMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_textOffset extends React.Component {
export default class Amap2demo_textOffset extends React.Component<
{ navList?: any },
{ originData?: any }
> {
public pointIconFontLayer: any;
public textLayer: any;
constructor(props: any) {
super(props);
this.state = {
originData: [
{
lng: 120.5,
lat: 31.3,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 今日适宜出门',
textOffset: [-40, 0],
},
],
};
}
// @ts-ignore
private scene: Scene;
@ -9,10 +29,11 @@ export default class Amap2demo_textOffset extends React.Component {
this.scene.destroy();
}
public async componentDidMount() {
public componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
// hash: true,
center: [121, 30.5],
pitch: 0,
style: 'dark',
@ -20,104 +41,105 @@ export default class Amap2demo_textOffset extends React.Component {
zooms: [8, 10],
}),
});
let originData = [
{
lng: 120,
lat: 30,
iconType: 'sun',
iconColor: '#FFA500',
weather: '晴朗',
textOffset: [10, 0],
},
{
lng: 120.2,
lat: 30.5,
iconType: 'sun',
iconColor: '#FFA500',
weather: '晴朗 - 高温预警',
textOffset: [-25, 0],
},
{
lng: 121.5,
lat: 31.4,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云',
textOffset: [10, 0],
},
{
lng: 120,
lat: 31,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 温度适宜',
textOffset: [-25, 0],
},
{
lng: 120.6,
lat: 30.8,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云',
textOffset: [10, 0],
},
{
lng: 120.5,
lat: 31.3,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 今日适宜出门',
textOffset: [-40, 0],
},
{
lng: 121.3,
lat: 30.2,
iconType: 'smallRain',
iconColor: '#6EA0FF',
weather: '中雨转小雨',
textOffset: [-10, 0],
},
{
lng: 121,
lat: 30.5,
iconType: 'smallRain',
iconColor: '#6EA0FF',
weather: '小雨',
textOffset: [10, 0],
},
{
lng: 120.6,
lat: 30,
iconType: 'middleRain',
iconColor: '#6495ED',
weather: '中雨',
textOffset: [10, 0],
},
{
lng: 120.2,
lat: 29.7,
iconType: 'smallRain',
iconColor: '#6EA0FF',
weather: '小雨',
textOffset: [10, 0],
},
{
lng: 121.7,
lat: 29.8,
iconType: 'middleRain',
iconColor: '#6495ED',
weather: '大雨转中雨',
textOffset: [-15, 0],
},
{
lng: 121.5,
lat: 30,
iconType: 'hugeRain',
iconColor: '#4678D2',
weather: '大雨',
textOffset: [10, 0],
},
];
// let originData = [
// {
// lng: 120,
// lat: 30,
// iconType: 'sun',
// iconColor: '#FFA500',
// weather: '晴朗',
// textOffset: [10, 0],
// },
// {
// lng: 120.2,
// lat: 30.5,
// iconType: 'sun',
// iconColor: '#FFA500',
// weather: '晴朗 - 高温预警',
// textOffset: [-25, 0],
// },
// {
// lng: 121.5,
// lat: 31.4,
// iconType: 'cloud',
// iconColor: '#F0F8FF',
// weather: '多云',
// textOffset: [10, 0],
// },
// {
// lng: 120,
// lat: 31,
// iconType: 'cloud',
// iconColor: '#F0F8FF',
// weather: '多云 - 温度适宜',
// textOffset: [-25, 0],
// },
// {
// lng: 120.6,
// lat: 30.8,
// iconType: 'cloud',
// iconColor: '#F0F8FF',
// weather: '多云',
// textOffset: [10, 0],
// },
// {
// lng: 120.5,
// lat: 31.3,
// iconType: 'cloud',
// iconColor: '#F0F8FF',
// weather: '多云 - 今日适宜出门',
// textOffset: [-40, 0],
// },
// {
// lng: 121.3,
// lat: 30.2,
// iconType: 'smallRain',
// iconColor: '#6EA0FF',
// weather: '中雨转小雨',
// textOffset: [-10, 0],
// },
// {
// lng: 121,
// lat: 30.5,
// iconType: 'smallRain',
// iconColor: '#6EA0FF',
// weather: '小雨',
// textOffset: [10, 0],
// },
// {
// lng: 120.6,
// lat: 30,
// iconType: 'middleRain',
// iconColor: '#6495ED',
// weather: '中雨',
// textOffset: [10, 0],
// },
// {
// lng: 120.2,
// lat: 29.7,
// iconType: 'smallRain',
// iconColor: '#6EA0FF',
// weather: '小雨',
// textOffset: [10, 0],
// },
// {
// lng: 121.7,
// lat: 29.8,
// iconType: 'middleRain',
// iconColor: '#6495ED',
// weather: '大雨转中雨',
// textOffset: [-15, 0],
// },
// {
// lng: 121.5,
// lat: 30,
// iconType: 'hugeRain',
// iconColor: '#4678D2',
// weather: '大雨',
// textOffset: [10, 0],
// },
// ];
let fontFamily = 'iconfont';
let fontPath =
'//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
@ -129,17 +151,38 @@ export default class Amap2demo_textOffset extends React.Component {
['cloud', '&#xe8da;'],
]);
scene.addFontFace(fontFamily, fontPath);
// console.log(this.state.originData)
this.scene = scene;
scene.on('loaded', () => {
const pointIconFontLayer = new PointLayer({})
.source(originData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
this.pointIconFontLayer = new PointLayer({})
// @ts-ignore
.source(
[
{
lng: 120.5,
lat: 31.3,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 今日适宜出门',
textOffset: [-40, 0],
},
{
lng: 120.5,
lat: 31.1,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 今日适宜出门',
textOffset: [-40, 0],
},
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
})
)
.shape('iconType', 'text')
.size(30)
.color('iconColor')
@ -150,19 +193,39 @@ export default class Amap2demo_textOffset extends React.Component {
iconfont: true,
textAllowOverlap: true,
});
scene.addLayer(pointIconFontLayer);
scene.addLayer(this.pointIconFontLayer);
const textLayer = new PointLayer({})
.source(originData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
this.textLayer = new PointLayer({})
.source(
[
{
lng: 120.5,
lat: 31.3,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 今日适宜出门',
textOffset: [-40, 0],
},
{
lng: 120.5,
lat: 31.1,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 今日适宜出门',
textOffset: [-40, 0],
},
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
})
)
.shape('weather', 'text')
.size(16)
.color('#fff')
.color('#f00')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
@ -171,13 +234,63 @@ export default class Amap2demo_textOffset extends React.Component {
fontFamily: 'Times New Roman',
textAllowOverlap: true,
});
scene.addLayer(textLayer);
scene.addLayer(this.textLayer);
});
}
changeData = () => {
console.log('changeData');
// this.textLayer.source([ {
// lng: 120.5,
// lat: 31.3,
// iconType: 'cloud',
// iconColor: '#F0F8FF',
// weather: '多云 - 今日适宜出',
// textOffset: [-40, 0],
// }], {
// parser: {
// type: 'json',
// x: 'lng',
// y: 'lat',
// },
// })
this.textLayer.setData([
{
lng: 120.5,
lat: 31.3,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - ' + Math.random(),
textOffset: [-40, 0],
},
{
lng: 120.5,
lat: 31.1,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云2 - ' + Math.random(),
textOffset: [-40, 0],
},
]);
// this.textLayer.render()
// this.scene.render()
};
public render() {
return (
<>
<button
style={{
position: 'absolute',
right: '100px',
top: '100px',
zIndex: 10,
}}
onClick={this.changeData}
>
123
</button>
<div
id="map"
style={{

35
stories/customMap/components/Map.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { Scene } from '@antv/l7';
import { PolygonLayer } from '@antv/l7-layers';
import { PolygonLayer, PointLayer } from '@antv/l7-layers';
import { Map } from '@antv/l7-maps';
import * as React from 'react';
@ -26,6 +26,39 @@ export default class ScaleComponent extends React.Component {
)
.then((res) => res.json())
.then((data) => {
const textLayer = new PointLayer({})
.source(
[
{
lng: 120.5,
lat: 31.3,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 今日适宜出门',
textOffset: [-40, 0],
},
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
)
.shape('weather', 'text')
.size(16)
.color('#f00')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
fontFamily: 'Times New Roman',
textAllowOverlap: true,
});
scene.addLayer(textLayer);
const layer = new PolygonLayer({
name: '01',
});