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

fix: 瓦片要素拾取 (#1580) 

* fix: 瓦片要素拾取

* fix: 图层移除异步方法

* fix: 优化图层移除方法
This commit is contained in:
@thinkinggis 2023-02-01 19:38:05 +08:00 committed by GitHub
parent 0537961c90
commit 046739acbb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 172 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
dev-demos/bugs/point/demos/imagesize.tsx Normal file
View File

@ -0,0 +1,72 @@
// @ts-ignore
import { PointLayer, Scene,Popup } from '@antv/l7';
// @ts-ignore
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
// @ts-ignore
useEffect( async () => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
center: [ 121.434765, 31.256735 ],
zoom: 14.83
})
});
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
);
scene.addImage(
'01',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
);
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('red')
.shape('square')
.size(25);
scene.addLayer(imageLayer);
});
});
}, []);
return (
<>
<div style={{
width:'50px',
height:'50px',
background: 'blue',
}}></div>
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
</>
);
};

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

@ -0,0 +1,2 @@
### Point - image-size
<code src="./demos/imagesize.tsx"></code>

65
dev-demos/bugs/scene/demos/removelayer.tsx Normal file
View File

@ -0,0 +1,65 @@
import { Scene, PointLayer } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
import React from "react";
export default function App() {
React.useEffect(() => {
const scene = new Scene({
id: "map",
map: new GaodeMap({
style: "light",
center: [140.067171, 36.26186],
zoom: 5.32,
maxZoom: 10
})
});
scene.on("loaded", () => {
fetch(
"https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json"
)
.then((res) => res.json())
.then((data) => {
const pointLayer = new PointLayer({})
.source(data)
.shape("circle")
.size("mag", [1, 25])
.color("mag", (mag) => {
return mag > 4 && "yellow";
})
.active(true)
.style({
opacity: 0.3,
strokeWidth: 1
});
const point2Layer = new PointLayer({})
.source(data)
.shape("circle")
.size("mag", [1, 25])
.color("mag", (mag) => {
return mag < 4 && "red";
})
.active(true)
.style({
opacity: 0.3,
strokeWidth: 1
});
scene.addLayer(pointLayer);
scene.addLayer(point2Layer);
setTimeout(async() => {
scene.removeLayer(pointLayer)
scene.removeLayer(point2Layer)
}, 1000);
// setTimeout(() => {
// scene.render();
// }, 2000);
});
});
}, []);
return <div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
}

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

@ -0,0 +1,2 @@
### 图层移除
<code src="./demos/removelayer.tsx"></code>

7
dev-demos/tile/Vector/demos/chinadistrictmap.tsx
View File

@ -41,6 +41,9 @@ export default () => {
})
.source(source)
.shape('fill')
.select({
color:'red'
})
.color('adcode', getColorByAdcode);
const line = new LineLayer({
@ -70,6 +73,10 @@ export default () => {
scene.addLayer(line);
scene.addLayer(line2);
scene.addLayer(line3);
fill.on('click',(e)=>{
console.log(e)
})
// scene.addLayer(line2);
// const debugerLayer = new TileDebugLayer({ usage: 'basemap' });
// scene.addLayer(debugerLayer);

11
dev-demos/tile/Vector/demos/geojson-vt.tsx
View File

@ -34,18 +34,19 @@ export default () => {
const polygon = new PolygonLayer({
featureId: 'COLOR',
// sourceLayer: 'testName', // woods hillshade contour ecoregions ecoregions2 city
})
.source(source)
.color('red')
.color('COLOR')
.shape('fill')
// .active(true)
// .select(true)
.select(true)
.style({
opacity: 0.6,
opacity: 1,
});
scene.addLayer(polygon);
console.log(polygon);
polygon.on('mousemove',(e)=>{
console.log(e)
})
});
}, []);
return (

1
packages/core/src/services/interaction/PickingService.ts
View File

@ -217,6 +217,7 @@ export default class PickingService implements IPickingService {
pickedColors[2] !== 0
) {
const pickedFeatureIdx = decodePickingColor(pickedColors);
// 瓦片数据获取性能问题需要优化
const rawFeature = layer.layerPickService.getFeatureById(pickedFeatureIdx);
if (

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

@ -677,8 +677,8 @@ export interface ILayerService {
getRenderList(): ILayer[];
getLayer(id: string): ILayer | undefined;
getLayerByName(name: string): ILayer | undefined;
remove(layer: ILayer, parentLayer?: ILayer): void;
removeAllLayers(): void;
remove(layer: ILayer, parentLayer?: ILayer):Promise<void>;
removeAllLayers():Promise<void>;
updateLayerRenderList(): void;
reRender(): void;
beforeRenderData(layer: ILayer): Promise<void>;

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

@ -102,7 +102,7 @@ export default class LayerService extends EventEmitter<LayerServiceEvent>
return this.layers.find((layer) => layer.name === name);
}
public remove(layer: ILayer, parentLayer?: ILayer): void {
public async remove(layer: ILayer, parentLayer?: ILayer):Promise<void> {
// Tip: layer.layerChildren 当 layer 存在子图层的情况
if (parentLayer) {
const layerIndex = parentLayer.layerChildren.indexOf(layer);
@ -117,13 +117,13 @@ export default class LayerService extends EventEmitter<LayerServiceEvent>
}
this.updateLayerRenderList();
layer.destroy();
this.renderLayers();
this.reRender()
this.emit('layerChange', this.layers);
}
public removeAllLayers() {
public async removeAllLayers():Promise<void> {
this.destroy();
this.renderLayers();
this.reRender()
}
public setEnableRender(flag: boolean) {

7
packages/layers/src/tile/service/TilePickService.ts
View File

@ -112,19 +112,16 @@ export class TilePickService implements ITilePickService{
const tiles = this.tileLayerService.getTiles().filter(tile => tile.visible);
// 提取当前可见瓦片中匹配 ID 的 feature 列表
const features: any[] = [];
tiles.map(tile => {
tiles.forEach(tile => {
features.push(...tile.getFeatureById(pickedFeatureIdx));
})
if (features.length <= 0) {
return null;
}
// 将 feature 列表合并后返回
// 统一返回成 polygon 的格式 点、线、面可以通用
// const data = this.tileSourceService.getCombineFeature(features);
return []
return features
}
// Tip: for interface define

6
packages/layers/src/tile/tileFactory/VectorTile.ts
View File

@ -85,6 +85,8 @@ export default class VectorTile extends Tile {
}
}
// 获取瓦片数据
public getFeatures(sourceLayer: string){
const source = this.sourceTile.data as VectorSource;
return source.getTileData(sourceLayer);
@ -96,11 +98,13 @@ export default class VectorTile extends Tile {
* @returns
*/
public getFeatureById(id: number) {
const layer = this.getMainLayer();
if (!layer) {
return [];
}
return layer.getSource().data.dataArray.filter(d => d._id === id);
const res = layer.getSource().data.dataArray.filter(d => d._id === id);
return res
}
}

8
packages/scene/src/index.ts
View File

@ -239,12 +239,12 @@ class Scene
return this.layerService.getLayerByName(name);
}
public removeLayer(layer: ILayer, parentLayer?: ILayer): void {
this.layerService.remove(layer, parentLayer);
public async removeLayer(layer: ILayer, parentLayer?: ILayer): Promise<void> {
await this.layerService.remove(layer, parentLayer);
}
public removeAllLayer(): void {
this.layerService.removeAllLayers();
public async removeAllLayer(): Promise<void> {
await this.layerService.removeAllLayers();
}
public render(): void {