fix: 修复 setData 引发的高德2 图层抖动问题 (#1376)

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
This commit is contained in:
YiQianYao 2022-10-10 16:18:22 +08:00 committed by GitHub
parent 61a56284c3
commit f6b9938bd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 134 additions and 62 deletions

View File

@ -1,64 +1,126 @@
// @ts-ignore
import { Scene, PolygonLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { Scene } from "@antv/l7";
// import { DrawEvent, DrawLine } from "@antv/l7-draw";
import { GaodeMapV2, GaodeMap, Map, Mapbox } from "@antv/l7-maps";
import { LineLayer } from "@antv/l7";
import { coordAll, Feature, featureCollection, LineString } from "@turf/turf";
import { debounce } from "lodash";
import React, { useEffect } from 'react';
export const lineList: Feature<LineString>[] = [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[120, 30.25],
[120, 30.2],
],
},
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[120.1, 30.25],
[120.1, 30.2],
],
},
},
];
export default () => {
useEffect(() => {
const scene = new Scene({
id: "map",
map: new GaodeMap({
center: [120, 30],
zoom: 4
id: 'map',
map: new GaodeMapV2({
center: [120.151634, 30.244831],
pitch: 0,
style: "dark",
zoom: 10
})
});
scene.on("loaded", () => {
const lineLayer = new LineLayer();
lineLayer
.source(
featureCollection(
lineList.map((item, index) => {
item.properties = {
index
};
return item;
})
)
)
.size(4)
.color("#f00");
scene.addLayer(lineLayer);
const dataList = [
{ name: "杭州", data: '#f00' },
{ name: "北京", data: '#ff0' }
];
const dataList2 = [{ name: "杭州", data: '#0f0' }];
let isDrag = false;
let dragFeature: Feature<LineString> | null = null;
let prePosition = [0, 0];
const geo = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
color: "#f00",
name: "杭州"
},
geometry: {
type: "Polygon",
coordinates: [
[
[100, 30],
[120, 35],
[120, 30]
]
]
lineLayer.on("mousedown", (e) => {
const { lng, lat } = e.lngLat;
prePosition = [lng, lat];
isDrag = true;
scene.setMapStatus({
dragEnable: false
});
dragFeature = e.feature;
});
scene.on(
"mousemove",
debounce(
(e) => {
if (isDrag) {
const { lng, lat } = e.lnglat;
const [lastLng, lastLat] = prePosition;
if (dragFeature) {
// lineList[0].geometry.coordinates[0][0] += 0.001
// lineList[0].geometry.coordinates[1][0] += 0.001
// lineList[1].geometry.coordinates[0][0] += 0.001
// lineList[1].geometry.coordinates[1][0] += 0.001
const positions = coordAll(dragFeature);
positions.forEach((position) => {
// console.log(
// position[0],
// lng - lastLng,
// position[0] + lng - lastLng
// );
position[0] += lng - lastLng;
position[1] += lat - lastLat;
});
dragFeature.geometry.coordinates = positions;
lineList[dragFeature.properties?.index] = dragFeature;
}
prePosition = [lng, lat];
// lineLayer.center = undefined
lineLayer.setData(featureCollection(lineList));
}
},
]
};
const layer = new PolygonLayer()
.source(geo)
.shape("fill")
.color("#f00")
// .active(true)
.select(true)
scene.on("loaded", () => {
scene.addLayer(layer);
layer.on('mousemove', () => {
})
0,
{
maxWait: 100
}
)
);
scene.on("mouseup", (e) => {
isDrag = false;
scene.setMapStatus({
dragEnable: true
});
});
});
}, []);
return (
<div

View File

@ -260,6 +260,7 @@ export type LayerEventType =
export interface ILayer {
id: string; // 一个场景中同一类型 Layer 可能存在多个
type: string; // 代表 Layer 的类型
coordCenter: number[];
name: string; //
inited: boolean; // 是否初始化完成
zIndex: number;

View File

@ -46,6 +46,7 @@ export interface IMapService<RawMap = {}> {
simpleMapCoord: ISimpleMapCoord;
map: RawMap;
bgColor: string;
setCoordCenter?(center: number[]): void;
setBgColor(color: string): void;
init(): void;
initMiniMap?(): void;

View File

@ -66,6 +66,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
implements ILayer {
public id: string = `${layerIdCounter++}`;
public name: string = `${layerIdCounter}`;
public coordCenter: number[];
public type: string;
public visible: boolean = true;
public zIndex: number = 0;
@ -1044,6 +1045,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
}
// this.layerSource.inited 为 true 后sourceUpdate 事件不会再触发
this.layerSource.on('sourceUpdate', () => {
if (this.coordCenter === undefined) {
const layerCenter = this.layerSource.center;
this.coordCenter = layerCenter;
this.mapService.setCoordCenter &&
this.mapService.setCoordCenter(layerCenter);
// // @ts-ignore
// this.mapService.map.customCoords.setCenter(layerCenter);
// // @ts-ignore
// this.mapService.setCustomCoordCenter(layerCenter);
}
this.sourceEvent();
});
}
@ -1176,6 +1187,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
})
.catch((err) => reject(err));
} else {
// console.log(this.encodedData[1].originCoordinates[0])
// console.log(this.encodedData[1].coordinates[0])
const {
attributes,
elements,

View File

@ -281,7 +281,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
mappedData.length > 0 &&
this.mapService.version === Version['GAODE2.x']
) {
const layerCenter = this.getLayerCenter(layer);
const layerCenter = layer.coordCenter;
if (typeof mappedData[0].coordinates[0] === 'number') {
// 单个的点数据
// @ts-ignore
@ -301,7 +301,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
});
} else {
// 连续的线、面数据
// @ts-ignore
mappedData
// TODO: 避免经纬度被重复计算导致坐标位置偏移
.filter((d) => !d.originCoordinates)
@ -331,11 +330,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
}
}
private getLayerCenter(layer: ILayer) {
const source = layer.getSource();
return source.center;
}
private unProjectCoordinates(coordinates: any) {
if (typeof coordinates[0] === 'number') {
return this.mapService.simpleMapCoord.unproject(

View File

@ -46,11 +46,6 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
this.coordinateSystemService.refresh(offset);
if (version === 'GAODE2.x') {
const layerCenter = this.getLayerCenter(layer);
// @ts-ignore
this.mapService.map.customCoords.setCenter(layerCenter);
// @ts-ignore
this.mapService.setCustomCoordCenter(layerCenter);
// @ts-ignore
mvp = this.mapService.map.customCoords.getMVPMatrix();
// mvp = amapCustomCoords.getMVPMatrix()

View File

@ -96,6 +96,12 @@ export default class AMapService extends AMapBaseService {
});
}
public setCoordCenter(center: [number, number]) {
// @ts-ignore
this.map.customCoords.setCenter(center);
this.setCustomCoordCenter(center);
}
/**
* 2.0
*/