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

Fix draw (#1452) 

* fix: 渲染流程

* fix: 修复 draw
This commit is contained in:
@thinkinggis 2022-11-02 10:11:42 +08:00 committed by GitHub
parent b0a88c40a9
commit 2f8749064b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 525 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
dev-demos/bugs/point/demos/pointstroke.tsx Normal file
View File

@ -0,0 +1,102 @@
// @ts-ignore
import { PointLayer, Scene } from '@antv/l7';
// @ts-ignore
import {GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect( () => {
const scene = new Scene({
id: 'map',
map: new GaodeMapV2({
center: [ 110, 36 ],
style: 'light',
zoom: 3
})
});
scene.on('loaded', () => {
const pointLayer = new PointLayer({})
.source({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "A"
},
"geometry": {
"type": "Point",
"coordinates": [
135.52734375,
46.31658418182218
]
}
},
{
"type": "Feature",
"properties": {
"name": "B"
},
"geometry": {
"type": "Point",
"coordinates": [
120.9375,
27.059125784374068
]
}
},
{
"type": "Feature",
"properties": {
"name": "C"
},
"geometry": {
"type": "Point",
"coordinates": [
107.22656249999999,
37.020098201368114
]
}
}
]
})
.shape('circle')
.size(12)
.color('red')
.style({
stroke: ['name', (name)=>{
switch (name) {
case 'A' :
return '#fc8d59';
case 'B' :
return '#91cf60';
default:
return '#ffffbf';
}
}
], // 描边颜色
strokeWidth: 5, // 描边宽度
});
scene.addLayer(pointLayer);
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

126
dev-demos/bugs/point/demos/pointupdate.tsx Normal file
View File

@ -0,0 +1,126 @@
// @ts-ignore
import { PointLayer,LineLayer, Scene } from '@antv/l7';
// @ts-ignore
import {GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect( () => {
let startPoint =[110.23,32];
const scene = new Scene({
id: 'map',
map: new GaodeMapV2({
center: [ 110, 36 ],
style: 'light',
zoom: 3
})
});
scene.on('loaded', () => {
const line = new LineLayer({})
.source({
"type": "FeatureCollection",
"features": []
})
.shape('line')
.size(1)
.color('red')
.style({ // 描边颜色
lineType: 'dash',
dashArray: [5, 5],
});
const pointLayer = new PointLayer({})
.source([])
.shape('name','text')
.size(12)
.color('red')
.style({
strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0,
textAllowOverlap: false,
});
const circleLayer = new PointLayer({})
.source({
"type": "FeatureCollection",
"features": []
})
.shape('circle')
.size(12)
.color('red')
.style({
stroke:'#fff',
strokeWidth: 2, // 描边宽度
strokeOpacity: 1.0,
});
scene.addLayer(pointLayer);
scene.addLayer(line);
scene.addLayer(circleLayer);
scene.on('mousemove',(e)=>{
const {lng,lat} = e.lnglat;
pointLayer.setData([])
circleLayer.setData({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
77.34374999999999,
34.88593094075317
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
lng,lat
]
}
}
]
})
line.setData({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
77.34374999999999,
34.88593094075317
],
[
lng,lat
]
]
}
}
]
})
})
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

67
dev-demos/bugs/point/demos/text.tsx Normal file
View File

@ -0,0 +1,67 @@
// @ts-ignore
import { PointLayer, Scene } from '@antv/l7';
// @ts-ignore
import {GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect( () => {
const scene = new Scene({
id: 'map',
map: new GaodeMapV2({
center: [ 110, 36 ],
style: 'light',
zoom: 3
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source([], {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('m', 'text')
.size(12)
.color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
.style({
// textAllowOverlap: true,
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0
});
pointLayer.style({
stroke: '#f00', // 描边颜色
strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0,
textAllowOverlap: false,
})
scene.addLayer(pointLayer);
setTimeout(()=>{
pointLayer.setData(data.list)
},2000)
});
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

3
dev-demos/bugs/point/stroke.md Normal file
View File

@ -0,0 +1,3 @@
### Point - stroke
#### style 映射
<code src="./demos/pointstroke.tsx"></code>

3
dev-demos/bugs/point/text.md Normal file
View File

@ -0,0 +1,3 @@
### Point - text
#### 文本更新
<code src="./demos/text.tsx"></code>

3
dev-demos/bugs/point/update.md Normal file
View File

@ -0,0 +1,3 @@
### Point - update
#### style 映射
<code src="./demos/pointupdate.tsx"></code>

84
dev-demos/bugs/polygon/demos/polygon.tsx Normal file
View File

@ -0,0 +1,84 @@
// @ts-ignore
import { PolygonLayer, Scene } from '@antv/l7';
// @ts-ignore
import {GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect( () => {
const scene = new Scene({
id: 'map',
map: new GaodeMapV2({
center: [ 110, 36 ],
style: 'light',
zoom: 3
})
});
scene.on('loaded', () => {
const fill = new PolygonLayer({})
.source({
type: 'FeatureCollection',
features:[]
})
.shape('line')
.color('red')
.style({
opacity:1,
});
scene.addLayer(fill);
setTimeout(()=>{
fill.setData({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
97.734375,
29.6880527498568
],
[
119.88281249999999,
29.6880527498568
],
[
119.88281249999999,
42.8115217450979
],
[
97.734375,
42.8115217450979
],
[
97.734375,
29.6880527498568
]
]
]
}
}
]
})
},2000)
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

2
dev-demos/bugs/polygon/polygon.md Normal file
View File

@ -0,0 +1,2 @@
### polygon
<code src="./demos/polygon.tsx"></code>

39
dev-demos/draw/demo/draw.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Scene } from '@antv/l7';
import { DrawPolygon } from '@antv/l7-draw';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect, useState } from 'react';
const id = String(Math.random());
const Demo: React.FC = () => {
const [, setPolygonDrawer] = useState<DrawPolygon | null>(null);
useEffect(() => {
const scene = new Scene({
id,
map: new GaodeMapV2({
center: [120.151634, 30.244831],
pitch: 0,
style: 'dark',
zoom: 10,
}),
});
scene.on('loaded', () => {
const drawer = new DrawPolygon(scene, {
areaOptions: {},
liveUpdate: true,
});
setPolygonDrawer(drawer);
console.log(drawer);
drawer.enable();
});
}, []);
return (
<div>
<div id={id} style={{ height: 400, position: 'relative' }} />
</div>
);
};
export default Demo;

10
dev-demos/draw/index.md Normal file
View File

@ -0,0 +1,10 @@
---
title: 展示距离和面积
order: 3
group:
path: /polygon
title: 绘制面
order: 3
---
<code src="./demo/draw.tsx" compact="true" defaultShowCode="true"></code>

9
dev-demos/features/line/demos/linedash.tsx
View File

@ -32,6 +32,15 @@ export default () => {
dashArray: [5, 5], dashArray: [5, 5],
}); });
scene.addLayer(layer); scene.addLayer(layer);
// setTimeout(()=>{
// console.log('setdata')
// layer.setData({
// type: 'featureCollection',
// features:[],
// })
// },3000)
}); });
}); });
}, []); }, []);

2
package.json
View File

@ -10,7 +10,7 @@
"@antv/g2plot": "^2.3.40", "@antv/g2plot": "^2.3.40",
"@antv/gatsby-theme-antv": "^1.1.15", "@antv/gatsby-theme-antv": "^1.1.15",
"@antv/l7-district": "^2.3.9", "@antv/l7-district": "^2.3.9",
"@antv/l7-draw": "2.4.18", "@antv/l7-draw": "^3.0.8",
"@antv/l7-react": "^2.3.3", "@antv/l7-react": "^2.3.3",
"@antv/l7plot": "^0.1.0", "@antv/l7plot": "^0.1.0",
"@babel/cli": "^7.6.4", "@babel/cli": "^7.6.4",

3
packages/core/src/services/layer/ILayerService.ts
View File

@ -687,9 +687,6 @@ export interface ILayerService {
renderLayers(): void; renderLayers(): void;
setEnableRender(flag: boolean): void; setEnableRender(flag: boolean): void;
getOESTextureFloat(): boolean; getOESTextureFloat(): boolean;
pickRender(layer: ILayer,target?: IInteractionTarget):void
selectFeature(layer: ILayer, pickedColors: Uint8Array | undefined):void;
highlightPickedFeature(layer: ILayer, pickedColors: Uint8Array | undefined):void;
destroy(): void; destroy(): void;
} }

51
packages/core/src/services/layer/LayerService.ts
View File

@ -7,9 +7,6 @@ import { TYPES } from '../../types';
import Clock from '../../utils/clock'; import Clock from '../../utils/clock';
import { IMapService } from '../map/IMapService'; import { IMapService } from '../map/IMapService';
import { IRendererService } from '../renderer/IRendererService'; import { IRendererService } from '../renderer/IRendererService';
import {
IInteractionTarget,
} from '../interaction/IInteractionService';
import { ILayer, ILayerService, LayerServiceEvent } from './ILayerService'; import { ILayer, ILayerService, LayerServiceEvent } from './ILayerService';
@injectable() @injectable()
@ -145,7 +142,6 @@ export default class LayerService extends EventEmitter<LayerServiceEvent>
} }
this.alreadyInRendering = true; this.alreadyInRendering = true;
this.clear(); this.clear();
for (const layer of this.layerList) { for (const layer of this.layerList) {
if (layer.masks.filter((m)=>m.inited).length > 0) { if (layer.masks.filter((m)=>m.inited).length > 0) {
// 清除上一次的模版缓存 // 清除上一次的模版缓存
@ -178,12 +174,15 @@ export default class LayerService extends EventEmitter<LayerServiceEvent>
} }
public async beforeRenderData(layer: ILayer) { public async beforeRenderData(layer: ILayer) {
const res = await layer.hooks.beforeRenderData.promise() const flag = await layer.hooks.beforeRenderData.promise();
res && this.renderLayers(); if(flag) {
this.renderLayers();
}
} }
async renderLayer(layer: ILayer){ async renderLayer(layer: ILayer){
if (layer.masks.filter((m)=>m.inited).length > 0) { if (layer.masks.filter((m)=>m.inited).length > 0) {
layer.masks.map(mask =>{ layer.masks.map(mask =>{
this.renderService.clear({ this.renderService.clear({
@ -261,44 +260,6 @@ export default class LayerService extends EventEmitter<LayerServiceEvent>
return this.shaderPicking; return this.shaderPicking;
} }
// For Pick
// 拾取绘制
public pickRender(layer: ILayer,target: IInteractionTarget) {
if(layer.tileLayer) {
// 瓦片图层（layerGroup）走独立的拾取渲染
return layer.tileLayer.pickRender(target)
}
// 普通瓦片（单个图层的拾取渲染）
layer.hooks.beforePickingEncode.call();
if (layer.masks.length > 0) {
// 若存在 mask，则在 pick 阶段的绘制也启用
layer.masks.map(async (m: ILayer) => {
m.render();
});
}
layer.renderModels(true);
layer.hooks.afterPickingEncode.call();
}
public selectFeature(layer: ILayer, pickedColors: Uint8Array | undefined) {
if(layer.tileLayer) {
return layer.tileLayer.selectFeature(pickedColors)
}
// @ts-ignore
const [r, g, b] = pickedColors;
layer.hooks.beforeSelect.call([r, g, b]);
}
public highlightPickedFeature(layer: ILayer,pickedColors: Uint8Array | undefined): void {
if(layer.tileLayer) {
return layer.tileLayer.highlightPickedFeature(pickedColors)
}
}
public clear() { public clear() {
const color = rgb2arr(this.mapService.bgColor) as [ const color = rgb2arr(this.mapService.bgColor) as [

3
packages/core/src/services/layer/StyleAttributeService.ts
View File

@ -75,6 +75,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
options: Partial<IStyleAttributeInitializationOptions>, options: Partial<IStyleAttributeInitializationOptions>,
updateOptions?: Partial<IStyleAttributeUpdateOptions>, updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) { ) {
let attributeToUpdate = this.getLayerStyleAttribute(attributeName); let attributeToUpdate = this.getLayerStyleAttribute(attributeName);
if (!attributeToUpdate) { if (!attributeToUpdate) {
attributeToUpdate = this.registerStyleAttribute({ attributeToUpdate = this.registerStyleAttribute({
@ -82,8 +83,6 @@ export default class StyleAttributeService implements IStyleAttributeService {
name: attributeName, name: attributeName,
}); });
} }
const { scale } = options; const { scale } = options;
if (scale && attributeToUpdate) { if (scale && attributeToUpdate) {
// TODO: 需要比较新旧值确定是否需要 rescale // TODO: 需要比较新旧值确定是否需要 rescale

35
packages/layers/src/core/BaseLayer.ts
View File

@ -369,7 +369,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
); );
this.multiPassRenderer.setLayer(this); this.multiPassRenderer.setLayer(this);
} }
// 完成样式服务注册完成前添加的属性 // 完成样式服务注册完成前添加的属性
this.pendingStyleAttributes.forEach( this.pendingStyleAttributes.forEach(
({ attributeName, attributeField, attributeValues, updateOptions }) => { ({ attributeName, attributeField, attributeValues, updateOptions }) => {
@ -673,7 +672,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
*/ */
public renderLayers(): void { public renderLayers(): void {
this.rendering = true; this.rendering = true;
this.layerService.renderLayers(); this.layerService.renderLayers();
this.rendering = false; this.rendering = false;
@ -685,7 +683,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.tileLayer.render(); this.tileLayer.render();
return this; return this;
} }
this.layerService.beforeRenderData(this);
if (this.encodeDataLength <= 0 && !this.forceRender) { if (this.encodeDataLength <= 0 && !this.forceRender) {
return this; return this;
} }
@ -698,9 +696,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
* renderMultiPass 专门用于渲染支持 multipass 的 layer * renderMultiPass 专门用于渲染支持 multipass 的 layer
*/ */
public async renderMultiPass() { public async renderMultiPass() {
if (this.encodeDataLength <= 0 && !this.forceRender) { // if (this.encodeDataLength <= 0 && !this.forceRender) {
return; // return;
} // }
if (this.multiPassRenderer && this.multiPassRenderer.getRenderFlag()) { if (this.multiPassRenderer && this.multiPassRenderer.getRenderFlag()) {
// multi render 开始执行 multiPassRender 的渲染流程 // multi render 开始执行 multiPassRender 的渲染流程
await this.multiPassRenderer.render(); await this.multiPassRenderer.render();
@ -1043,7 +1041,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
if (this.layerSource) { if (this.layerSource) {
this.layerSource.off('update', this.sourceEvent); this.layerSource.off('update', this.sourceEvent);
} }
this.layerSource = source; this.layerSource = source;
this.clusterZoom = 0; this.clusterZoom = 0;
@ -1056,7 +1053,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.sourceEvent(); this.sourceEvent();
} }
// this.layerSource.inited 为 true update 事件不会再触发 // this.layerSource.inited 为 true update 事件不会再触发
this.layerSource.on('update', () => { this.layerSource.on('update', ({ type }) => {
if (this.coordCenter === undefined) { if (this.coordCenter === undefined) {
const layerCenter = this.layerSource.center; const layerCenter = this.layerSource.center;
this.coordCenter = layerCenter; this.coordCenter = layerCenter;
@ -1064,7 +1061,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.mapService.setCoordCenter(layerCenter); this.mapService.setCoordCenter(layerCenter);
} }
} }
this.sourceEvent();
if (type === 'update') {
// source 初始化不需要处理
this.sourceEvent();
}
}); });
} }
// layer 初始化source // layer 初始化source
@ -1325,18 +1326,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
if (this.encodeDataLength <= 0 && !this.forceRender) { if (this.encodeDataLength <= 0 && !this.forceRender) {
return this; return this;
} }
// TODO 待评估
// if (this.layerModelNeedUpdate && this.layerModel) {
// this.layerModel.buildModels((models: IModel[]) => {
// this.models = models;
// this.hooks.beforeRender.call();
// this.layerModelNeedUpdate = false;
// });
// }
this.layerService.beforeRenderData(this);
this.hooks.beforeRender.call(); this.hooks.beforeRender.call();
this.models.forEach((model) => { this.models.forEach((model) => {
model.draw( model.draw(
{ {
@ -1345,7 +1335,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
isPicking, isPicking,
); );
}); });
this.hooks.afterRender.call(); this.hooks.afterRender.call();
return this; return this;
} }
@ -1375,8 +1364,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
}, },
}); });
} }
if (!this.startInit) {
if (!this.inited) { // 开始初始化执行
this.pendingStyleAttributes.push({ this.pendingStyleAttributes.push({
attributeName: type, attributeName: type,
attributeField: field, attributeField: field,

91
packages/layers/src/plugins/DataMappingPlugin.ts
View File

@ -51,10 +51,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
// remapping before render // remapping before render
layer.hooks.beforeRender.tap('DataMappingPlugin', () => { layer.hooks.beforeRender.tap('DataMappingPlugin', () => {
const { usage } = layer.getLayerConfig();
if (usage === 'basemap') {
return;
}
const source = layer.getSource(); const source = layer.getSource();
if (layer.layerModelNeedUpdate || !source || !source.inited) { if (layer.layerModelNeedUpdate || !source || !source.inited) {
return; return;
@ -62,12 +58,15 @@ export default class DataMappingPlugin implements ILayerPlugin {
const attributes = styleAttributeService.getLayerStyleAttributes() || []; const attributes = styleAttributeService.getLayerStyleAttributes() || [];
const filter = styleAttributeService.getLayerStyleAttribute('filter'); const filter = styleAttributeService.getLayerStyleAttribute('filter');
const { dataArray } = source.data; const { dataArray } = source.data;
// TODO 数据为空的情况
if (Array.isArray(dataArray) && dataArray.length === 0) {
return;
}
const attributesToRemapping = attributes.filter( const attributesToRemapping = attributes.filter(
(attribute) => attribute.needRemapping, // 如果filter变化 (attribute) => attribute.needRemapping, // 如果filter变化
); );
let filterData = dataArray; let filterData = dataArray;
// 数据过滤完 再执行数据映射 // 数据过滤完 再执行数据映射
if (filter?.needRemapping && filter?.scale) { if (filter?.needRemapping && filter?.scale) {
filterData = dataArray.filter((record: IParseDataItem) => { filterData = dataArray.filter((record: IParseDataItem) => {
@ -95,8 +94,8 @@ export default class DataMappingPlugin implements ILayerPlugin {
); );
layer.setEncodedData(encodeData); layer.setEncodedData(encodeData);
} }
// 处理文本更新 // 处理文本更新，更新文字形状
layer.emit('remapping', null); // layer.emit('remapping', null);
} }
}); });
} }
@ -198,61 +197,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
return mappedData; return mappedData;
} }
private mapLayerMapping(
layer: ILayer,
attributes: IStyleAttribute[],
data: IParseDataItem[],
predata?: IEncodeFeature[],
): IEncodeFeature[] {
const usedAttributes = attributes.filter(
(attribute) => attribute.scale !== undefined,
);
const mappedData = data.map((record: IParseDataItem, i) => {
const preRecord = predata ? predata[i] : {};
const encodeRecord: IEncodeFeature = {
id: record._id,
coordinates: record.coordinates,
...preRecord,
};
usedAttributes.forEach((attribute: IStyleAttribute) => {
if (
attribute.name === 'shape' &&
// @ts-ignore
layer.shapeOption?.field === 'simple'
) {
encodeRecord[attribute.name] = 'simple';
attribute.needRemapping = false;
} else {
const values = this.applyMapLayerAttributeMapping(attribute, record);
attribute.needRemapping = false;
// @ts-ignore
encodeRecord[attribute.name] =
Array.isArray(values) && values.length === 1 ? values[0] : values;
// 增加对 layer/text/iconfont unicode 映射的解析
if (attribute.name === 'shape') {
encodeRecord.shape = this.fontService.getIconFontKey(
encodeRecord[attribute.name] as string,
);
}
}
});
if (encodeRecord.size === undefined) {
// in case not set size
encodeRecord.size = 1;
}
return encodeRecord;
}) as IEncodeFeature[];
// 调整数据兼容 Amap2.0
this.adjustData2Amap2Coordinates(mappedData, layer);
return mappedData;
}
private adjustData2Amap2Coordinates( private adjustData2Amap2Coordinates(
mappedData: IEncodeFeature[], mappedData: IEncodeFeature[],
layer: ILayer, layer: ILayer,
@ -374,29 +318,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
// return attribute.mapping ? attribute.mapping(params) : []; // return attribute.mapping ? attribute.mapping(params) : [];
} }
private applyMapLayerAttributeMapping(
attribute: IStyleAttribute,
record: { [key: string]: unknown },
) {
if (!attribute.scale) {
return [];
}
const scalers = attribute?.scale?.scalers || [];
const params: unknown[] = [];
scalers.forEach(({ field }) => {
if (
record.hasOwnProperty(field) ||
attribute.scale?.type === 'variable'
) {
params.push(record[field]);
}
});
const mappingResult = attribute.mapping ? attribute.mapping(params) : [];
return mappingResult;
}
private getArrowPoints(p1: Position, p2: Position) { private getArrowPoints(p1: Position, p2: Position) {
const dir = [p2[0] - p1[0], p2[1] - p1[1]]; const dir = [p2[0] - p1[0], p2[1] - p1[1]];
const normalizeDir = normalize(dir); const normalizeDir = normalize(dir);

28
packages/layers/src/plugins/DataSourcePlugin.ts
View File

@ -10,25 +10,32 @@ export default class DataSourcePlugin implements ILayerPlugin {
this.mapService = layer.getContainer().get<IMapService>(TYPES.IMapService); this.mapService = layer.getContainer().get<IMapService>(TYPES.IMapService);
layer.hooks.init.tapPromise('DataSourcePlugin', async () => { layer.hooks.init.tapPromise('DataSourcePlugin', async () => {
let source = layer.getSource(); let source = layer.getSource();
if (!source) { if (!source) {
// Tip: 用户没有传入 source 的时候使用图层的默认数据 // Tip: 用户没有传入 source 的时候使用图层的默认数据
const { data, options } = const { data, options } =
layer.sourceOption || layer.defaultSourceConfig; layer.sourceOption || layer.defaultSourceConfig;
source = new Source(data, options); source = new Source(data, options);
await new Promise((resolve) => { layer.setSource(source);
source.on('update', (e) => { // await new Promise((resolve) => {
if (e.type === 'inited') { // source.on('update', (e) => {
layer.initSource(source); // if (e.type === 'inited') {
} // layer.initSource(source);
resolve(null); // }
}); // resolve(null);
}); // });
// });
} }
if (source.inited) { if (source.inited) {
this.updateClusterData(layer); this.updateClusterData(layer);
} else { } else {
source.once('update', () => { await new Promise((resolve) => {
this.updateClusterData(layer); source.on('update', (e) => {
if (e.type === 'inited') {
this.updateClusterData(layer);
}
resolve(null);
});
}); });
} }
}); });
@ -36,6 +43,7 @@ export default class DataSourcePlugin implements ILayerPlugin {
// 检测数据是否需要更新 // 检测数据是否需要更新
layer.hooks.beforeRenderData.tapPromise('DataSourcePlugin', async () => { layer.hooks.beforeRenderData.tapPromise('DataSourcePlugin', async () => {
const neeUpdateCluster = this.updateClusterData(layer); const neeUpdateCluster = this.updateClusterData(layer);
const dataSourceNeedUpdate = layer.dataState.dataSourceNeedUpdate; const dataSourceNeedUpdate = layer.dataState.dataSourceNeedUpdate;
layer.dataState.dataSourceNeedUpdate = false; layer.dataState.dataSourceNeedUpdate = false;
return neeUpdateCluster || dataSourceNeedUpdate; return neeUpdateCluster || dataSourceNeedUpdate;

18
packages/layers/src/plugins/FeatureScalePlugin.ts
View File

@ -1,7 +1,6 @@
import { import {
ILayer, ILayer,
ILayerPlugin, ILayerPlugin,
IParserData,
IScale, IScale,
IScaleOptions, IScaleOptions,
IStyleAttribute, IStyleAttribute,
@ -42,17 +41,6 @@ const scaleMap = {
export default class FeatureScalePlugin implements ILayerPlugin { export default class FeatureScalePlugin implements ILayerPlugin {
private scaleOptions: IScaleOptions = {}; private scaleOptions: IScaleOptions = {};
private getSourceData(layer: ILayer, callback: (data: IParserData) => void) {
const source = layer.getSource();
if (source.inited) {
callback(source.data);
} else {
source.once('update', () => {
callback(source.data);
});
}
}
public apply( public apply(
layer: ILayer, layer: ILayer,
{ {
@ -82,18 +70,16 @@ export default class FeatureScalePlugin implements ILayerPlugin {
const dataArray = layer.getSource().data.dataArray; const dataArray = layer.getSource().data.dataArray;
if (Array.isArray(dataArray) && dataArray.length === 0) { if (Array.isArray(dataArray) && dataArray.length === 0) {
return; return true;
} }
this.caculateScalesForAttributes(attributes || [], dataArray); this.caculateScalesForAttributes(attributes || [], dataArray);
layer.layerModelNeedUpdate = true; layer.layerModelNeedUpdate = true;
return true; return true;
}, },
); );
layer.hooks.beforeRender.tap('FeatureScalePlugin', () => { layer.hooks.beforeRender.tap('FeatureScalePlugin', () => {
const { usage } = layer.getLayerConfig(); if (layer.layerModelNeedUpdate) {
if (layer.layerModelNeedUpdate || usage === 'basemap') {
return; return;
} }
this.scaleOptions = layer.getScaleOptions(); this.scaleOptions = layer.getScaleOptions();

4
packages/layers/src/plugins/LayerModelPlugin.ts
View File

@ -21,7 +21,7 @@ export default class LayerModelPlugin implements ILayerPlugin {
// clear layerModel resource // clear layerModel resource
// 初始化 Model // 初始化 Model
await layer.buildModels(); await layer.buildModels();
layer.layerModelNeedUpdate = false; // layer.layerModelNeedUpdate = false;
} }
public apply(layer: ILayer) { public apply(layer: ILayer) {
@ -43,7 +43,7 @@ export default class LayerModelPlugin implements ILayerPlugin {
} }
if (layer.getSource().isTile) { if (layer.getSource().isTile) {
layer.tileLayer = new TileLayer(layer); layer.tileLayer = new TileLayer(layer);
return; return false;
} }
await this.prepareLayerModel(layer); await this.prepareLayerModel(layer);
return true; return true;

3
packages/layers/src/plugins/UpdateModelPlugin.ts
View File

@ -13,5 +13,8 @@ export default class UpdateModelPlugin implements ILayerPlugin {
layer.layerModel.needUpdate(); layer.layerModel.needUpdate();
} }
}); });
layer.hooks.afterRender.tap('UpdateModelPlugin', () => {
layer.layerModelNeedUpdate = false;
});
} }
} }

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

@ -41,7 +41,6 @@ export default class FillModel extends BaseModel {
unit = 'l7size', unit = 'l7size',
} = this.layer.getLayerConfig() as IPointLayerStyleOptions; } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
this.updateUnit(unit); this.updateUnit(unit);
if ( if (
this.dataTextureTest && this.dataTextureTest &&
this.dataTextureNeedUpdate({ this.dataTextureNeedUpdate({
@ -68,7 +67,6 @@ export default class FillModel extends BaseModel {
this.cellProperties, this.cellProperties,
); );
this.rowCount = height; // 当前数据纹理有多少行 this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture = this.dataTexture =
this.cellLength > 0 && data.length > 0 this.cellLength > 0 && data.length > 0
? this.createTexture2D({ ? this.createTexture2D({

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

@ -177,8 +177,12 @@ export default class TextModel extends BaseModel {
} }
public async initModels():Promise<IModel[]> { public async initModels():Promise<IModel[]> {
// 绑定事件 // 绑定事件
this.bindEvent(); if(!this.layer.inited) {
this.bindEvent();
}
this.extent = this.textExtent(); this.extent = this.textExtent();
const { const {
textAnchor = 'center', textAnchor = 'center',
@ -195,8 +199,15 @@ export default class TextModel extends BaseModel {
const { const {
mask = false, mask = false,
maskInside = true, maskInside = true,
textAllowOverlap = false
} = this.layer.getLayerConfig() as IPointLayerStyleOptions; } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
this.mapping();
// this.mapping(); 重复调用
this.initGlyph(); //
this.updateTexture();
if(!textAllowOverlap) {
this.filterGlyphs();
}
const model = await this.layer const model = await this.layer
.buildLayerModel({ .buildLayerModel({
moduleName: 'pointText', moduleName: 'pointText',
@ -215,16 +226,21 @@ export default class TextModel extends BaseModel {
const { const {
textAllowOverlap = false, textAllowOverlap = false,
} = this.layer.getLayerConfig() as IPointLayerStyleOptions; } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
const data = this.layer.getEncodedData();
if(data.length < 5 || textAllowOverlap) { // 小于不做避让
return false;
}
// textAllowOverlap 发生改变 // textAllowOverlap 发生改变
const zoom = this.mapService.getZoom(); const zoom = this.mapService.getZoom();
const extent = this.mapService.getBounds(); const extent = this.mapService.getBounds();
const flag = boundsContains(this.extent, extent); const flag = boundsContains(this.extent, extent);
// 文本不能压盖则进行过滤 // 文本不能压盖则进行过滤
if ( if (
(!textAllowOverlap && (Math.abs(this.currentZoom - zoom) > 1 || !flag)) || ((Math.abs(this.currentZoom - zoom) > 1 || !flag)) ||
textAllowOverlap !== this.preTextStyle.textAllowOverlap textAllowOverlap !== this.preTextStyle.textAllowOverlap
) { ) {
// TODO this.mapping // TODO this.mapping 数据未变化，避让
this.reBuildModel(); this.reBuildModel();
return true; return true;
} }
@ -327,15 +343,14 @@ export default class TextModel extends BaseModel {
private bindEvent() { private bindEvent() {
if(!this.layer.isTileLayer) { if(!this.layer.isTileLayer) {
// console.log('mapping') // 重新绑定
this.layer.on('remapping', this.mapping); this.layer.on('remapping', this.mapping);
} }
} }
private mapping = async(): Promise<void> =>{ private mapping = async(): Promise<void> =>{
this.initGlyph(); this.initGlyph(); //
this.updateTexture(); this.updateTexture();
this.filterGlyphs();
await this.reBuildModel(); await this.reBuildModel();
} }
@ -470,7 +485,7 @@ export default class TextModel extends BaseModel {
? feature.originCentroid ? feature.originCentroid
: feature.centroid) as [number, number]; : feature.centroid) as [number, number];
const size = feature.size as number; const size = feature.size as number;
const fontScale: number = size / 24; const fontScale: number = size / 16;
const pixels = this.mapService.lngLatToContainer(centroid); const pixels = this.mapService.lngLatToContainer(centroid);
const { box } = collisionIndex.placeCollisionBox({ const { box } = collisionIndex.placeCollisionBox({
x1: shaping.left * fontScale - padding[0], x1: shaping.left * fontScale - padding[0],
@ -515,7 +530,6 @@ export default class TextModel extends BaseModel {
if (this.texture) { if (this.texture) {
this.texture.destroy(); this.texture.destroy();
} }
this.texture = createTexture2D({ this.texture = createTexture2D({
data: canvas, data: canvas,
mag: gl.LINEAR, mag: gl.LINEAR,
@ -530,7 +544,7 @@ export default class TextModel extends BaseModel {
mask = false, mask = false,
maskInside = true, maskInside = true,
} = this.layer.getLayerConfig() as IPointLayerStyleOptions; } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
this.filterGlyphs(); this.filterGlyphs();
const model = await this.layer const model = await this.layer
.buildLayerModel({ .buildLayerModel({
moduleName: 'pointText', moduleName: 'pointText',
@ -543,6 +557,6 @@ export default class TextModel extends BaseModel {
}); });
// TODO 渲染流程待修改 // TODO 渲染流程待修改
this.layer.models = [model]; this.layer.models = [model];
this.layerService.throttleRenderLayers(); // this.layerService.throttleRenderLayers();
} }
} }

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

@ -34,7 +34,6 @@ export default class FillModel extends BaseModel {
this.cellProperties, this.cellProperties,
); );
this.rowCount = height; // 当前数据纹理有多少行 this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture = this.dataTexture =
this.cellLength > 0 && data.length > 0 this.cellLength > 0 && data.length > 0
? this.createTexture2D({ ? this.createTexture2D({

1
packages/source/src/source.ts
View File

@ -202,6 +202,7 @@ export default class Source extends EventEmitter implements ISource {
this.originData = data; this.originData = data;
this.dataArrayChanged = false; this.dataArrayChanged = false;
this.initCfg(options); this.initCfg(options);
this.init().then(()=>{ this.init().then(()=>{
this.emit('update',{ this.emit('update',{
type: 'update' type: 'update'

1
packages/source/src/utils/tile/getRasterTile.ts
View File

@ -76,7 +76,6 @@ export const getTileImage = async (
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
console.log(imageUrl);
const xhr = getImage({ url: imageUrl }, (err, img) => { const xhr = getImage({ url: imageUrl }, (err, img) => {
if (err) { if (err) {
reject(err); reject(err);