From cab8e698042baecf9e8daaf81b525ca537866c58 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+yiiiiiiqianyao@users.noreply.github.com> Date: Wed, 12 Oct 2022 10:40:37 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E4=B8=AD=E5=BF=83=E7=82=B9=E5=BC=95=E5=8F=91?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=20(#1386)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复设置地图中心点引发的问题 * style: lint style * feat: 补充空值时图层绘制采用默认地图中心点 Co-authored-by: shihui --- dev-demos/features/fix/demos/fix.tsx | 2 +- dev-demos/features/fix/demos/fix2.tsx | 135 ++++++++++++++++++ dev-demos/features/fix/fix2.md | 2 + .../layers/src/plugins/DataMappingPlugin.ts | 2 +- .../layers/src/plugins/ShaderUniformPlugin.ts | 13 +- packages/maps/src/amap2/map.ts | 3 +- 6 files changed, 151 insertions(+), 6 deletions(-) create mode 100644 dev-demos/features/fix/demos/fix2.tsx create mode 100644 dev-demos/features/fix/fix2.md diff --git a/dev-demos/features/fix/demos/fix.tsx b/dev-demos/features/fix/demos/fix.tsx index 73501cff3c..158b310ecd 100644 --- a/dev-demos/features/fix/demos/fix.tsx +++ b/dev-demos/features/fix/demos/fix.tsx @@ -112,7 +112,7 @@ export default () => { useEffect(() => { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new GaodeMapV2({ center: [120.151634, 30.244831], style: "dark", zoom: 10 diff --git a/dev-demos/features/fix/demos/fix2.tsx b/dev-demos/features/fix/demos/fix2.tsx new file mode 100644 index 0000000000..7f3600bf2a --- /dev/null +++ b/dev-demos/features/fix/demos/fix2.tsx @@ -0,0 +1,135 @@ +import { Scene, PointLayer, LineLayer, Source } from "@antv/l7"; +// import { DrawEvent, DrawLine } from "@antv/l7-draw"; +import { GaodeMapV2, GaodeMap, Map, Mapbox } from "@antv/l7-maps"; +import { coordAll, Feature, featureCollection, LineString, point } from "@turf/turf"; +import React, { useEffect } from 'react'; + +const lineList: Feature[] = [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: [ + [119.988511, 30.269614], + [119.9851, 30.269323], + [119.985438, 30.267852], + [119.990291, 30.267257], + [119.991454, 30.261762], + [119.994974, 30.256115], + [119.983641, 30.246146], + [119.985286, 30.241228], + [119.983351, 30.224089], + [119.985473, 30.221814], + [119.99271, 30.22088], + ], + }, + }, + { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: [ + [120.075427, 30.147148], + [120.073659, 30.147609], + [120.074996, 30.154115], + [120.070946, 30.160916], + [120.074171, 30.161745], + [120.075425, 30.158086], + [120.081662, 30.159401], + [120.084335, 30.163868], + [120.112648, 30.17977], + [120.119262, 30.186753], + [120.137108, 30.198481], + [120.137962, 30.202496], + [120.135039, 30.208876], + [120.135625, 30.216541], + [120.138548, 30.225005], + [120.145412, 30.229088], + [120.155609, 30.230104], + [120.158572, 30.241788], + [120.160816, 30.245725], + [120.16441, 30.245929], + [120.164401, 30.247589], + [120.165608, 30.247515], + [120.166546, 30.254134], + ], + }, + }, + { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: [ + [120.216401, 30.291456], + [120.217689, 30.289456], + [120.218912, 30.28995], + [120.216862, 30.292565], + [120.221055, 30.293611], + [120.221909, 30.291061], + [120.211464, 30.28603], + [120.207209, 30.278355], + [120.207448, 30.270482], + [120.199987, 30.270352], + [120.200252, 30.247617], + [120.210037, 30.243515], + [120.204483, 30.237082], + [120.224585, 30.222153], + [120.213219, 30.213984], + [120.216402, 30.20977], + [120.194058, 30.196853], + [120.17329, 30.188212], + [120.174223, 30.181411], + [120.16777, 30.181168], + [120.167244, 30.173706], + [120.147426, 30.172062], + [120.146042, 30.176801], + [120.135382, 30.17619], + ], + }, + }, +]; + + +export default () => { + useEffect(() => { + const scene = new Scene({ + id: 'map', + map: new GaodeMapV2({ + center: [120.151634, 30.244831], + style: "dark", + zoom: 10 + }) + }); + + const source = new Source(featureCollection( + lineList.map((item, index) => { + item.properties = { + index + }; + return item; + }) + )) + scene.on("loaded", () => { + const lineLayer = new LineLayer(); + lineLayer + .source(source) + .size(4) + .color("#f00"); + + + scene.addLayer(lineLayer); + }); + }, []); + return ( +
+ ); +}; diff --git a/dev-demos/features/fix/fix2.md b/dev-demos/features/fix/fix2.md new file mode 100644 index 0000000000..804a084ae0 --- /dev/null +++ b/dev-demos/features/fix/fix2.md @@ -0,0 +1,2 @@ +### fix2 feature + \ No newline at end of file diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index 9f127fb63e..615cbfdda3 100644 --- a/packages/layers/src/plugins/DataMappingPlugin.ts +++ b/packages/layers/src/plugins/DataMappingPlugin.ts @@ -281,7 +281,7 @@ export default class DataMappingPlugin implements ILayerPlugin { mappedData.length > 0 && this.mapService.version === Version['GAODE2.x'] ) { - const layerCenter = layer.coordCenter; + const layerCenter = layer.coordCenter || layer.getSource().center; if (typeof mappedData[0].coordinates[0] === 'number') { // 单个的点数据 // @ts-ignore diff --git a/packages/layers/src/plugins/ShaderUniformPlugin.ts b/packages/layers/src/plugins/ShaderUniformPlugin.ts index 9a3fb70c9b..86cbc3aed7 100644 --- a/packages/layers/src/plugins/ShaderUniformPlugin.ts +++ b/packages/layers/src/plugins/ShaderUniformPlugin.ts @@ -46,6 +46,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin { this.coordinateSystemService.refresh(offset); if (version === 'GAODE2.x') { + this.setLayerCenter(layer); // @ts-ignore mvp = this.mapService.map.customCoords.getMVPMatrix(); // mvp = amapCustomCoords.getMVPMatrix() @@ -89,8 +90,14 @@ export default class ShaderUniformPlugin implements ILayerPlugin { }); } - private getLayerCenter(layer: ILayer) { - const source = layer.getSource(); - return source.center; + /** + * 对于每个 layer 都有不同的几何中心点，因此在绘制每个 layer 的时候都需要重新设置 + * @param layer + */ + private setLayerCenter(layer: ILayer) { + if (layer.coordCenter === undefined) + layer.coordCenter = layer.getSource().center; + this.mapService.setCoordCenter && + this.mapService.setCoordCenter(layer.coordCenter); } } diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index c34806729e..854a18edab 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -69,7 +69,8 @@ export default class AMapService extends AMapBaseService { lnglat: [number, number], layerCenter: [number, number], ) { - const layerCenterFlat = amap2Project(...layerCenter); + const center = layerCenter || this.sceneCenter; + const layerCenterFlat = amap2Project(...center); return this._sub(amap2Project(lnglat[0], lnglat[1]), layerCenterFlat); }