diff --git a/dev-demos/bugs/point/demos/imagesize.tsx b/dev-demos/bugs/point/demos/imagesize.tsx new file mode 100644 index 0000000000..77d2607568 --- /dev/null +++ b/dev-demos/bugs/point/demos/imagesize.tsx @@ -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 ( + <> +
+
+ + ); + }; + \ No newline at end of file diff --git a/dev-demos/bugs/point/imagesize.md b/dev-demos/bugs/point/imagesize.md new file mode 100644 index 0000000000..6ebc67c439 --- /dev/null +++ b/dev-demos/bugs/point/imagesize.md @@ -0,0 +1,2 @@ +### Point - image-size + \ No newline at end of file diff --git a/dev-demos/bugs/scene/demos/removelayer.tsx b/dev-demos/bugs/scene/demos/removelayer.tsx new file mode 100644 index 0000000000..36c04be61b --- /dev/null +++ b/dev-demos/bugs/scene/demos/removelayer.tsx @@ -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
+} diff --git a/dev-demos/bugs/scene/removelayer.md b/dev-demos/bugs/scene/removelayer.md new file mode 100644 index 0000000000..a0f5faf0f8 --- /dev/null +++ b/dev-demos/bugs/scene/removelayer.md @@ -0,0 +1,2 @@ +### 图层移除 + diff --git a/dev-demos/tile/Vector/demos/chinadistrictmap.tsx b/dev-demos/tile/Vector/demos/chinadistrictmap.tsx index 3aac86c320..f82d60fc79 100644 --- a/dev-demos/tile/Vector/demos/chinadistrictmap.tsx +++ b/dev-demos/tile/Vector/demos/chinadistrictmap.tsx @@ -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); diff --git a/dev-demos/tile/Vector/demos/geojson-vt.tsx b/dev-demos/tile/Vector/demos/geojson-vt.tsx index 6960fbd99c..4a497c468a 100644 --- a/dev-demos/tile/Vector/demos/geojson-vt.tsx +++ b/dev-demos/tile/Vector/demos/geojson-vt.tsx @@ -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 ( diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 6751d6492e..b7b805a3a8 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -217,6 +217,7 @@ export default class PickingService implements IPickingService { pickedColors[2] !== 0 ) { const pickedFeatureIdx = decodePickingColor(pickedColors); + // 瓦片数据获取性能问题需要优化 const rawFeature = layer.layerPickService.getFeatureById(pickedFeatureIdx); if ( diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index ef0d476e97..8e97e71299 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -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; + removeAllLayers():Promise; updateLayerRenderList(): void; reRender(): void; beforeRenderData(layer: ILayer): Promise; diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 063041be81..ed8933e51f 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -102,7 +102,7 @@ export default class LayerService extends EventEmitter return this.layers.find((layer) => layer.name === name); } - public remove(layer: ILayer, parentLayer?: ILayer): void { + public async remove(layer: ILayer, parentLayer?: ILayer):Promise { // Tip: layer.layerChildren 当 layer 存在子图层的情况 if (parentLayer) { const layerIndex = parentLayer.layerChildren.indexOf(layer); @@ -117,13 +117,13 @@ export default class LayerService extends EventEmitter } this.updateLayerRenderList(); layer.destroy(); - this.renderLayers(); + this.reRender() this.emit('layerChange', this.layers); } - public removeAllLayers() { + public async removeAllLayers():Promise { this.destroy(); - this.renderLayers(); + this.reRender() } public setEnableRender(flag: boolean) { diff --git a/packages/layers/src/tile/service/TilePickService.ts b/packages/layers/src/tile/service/TilePickService.ts index c7b2d1b149..e71ff0a73a 100644 --- a/packages/layers/src/tile/service/TilePickService.ts +++ b/packages/layers/src/tile/service/TilePickService.ts @@ -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 diff --git a/packages/layers/src/tile/tileFactory/VectorTile.ts b/packages/layers/src/tile/tileFactory/VectorTile.ts index a0201208f1..46cf1626b2 100644 --- a/packages/layers/src/tile/tileFactory/VectorTile.ts +++ b/packages/layers/src/tile/tileFactory/VectorTile.ts @@ -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 } } diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 15c500ae6e..ede0a94a74 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -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 { + await this.layerService.remove(layer, parentLayer); } - public removeAllLayer(): void { - this.layerService.removeAllLayers(); + public async removeAllLayer(): Promise { + await this.layerService.removeAllLayers(); } public render(): void {