mirror of https://gitee.com/antv-l7/antv-l7
fix: 修复 setData 引发的高德2 图层抖动问题 (#1376)
Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
This commit is contained in:
YiQianYao
GitHub
parent
61a56284c3
commit
f6b9938bd5
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -260,6 +260,7 @@ export type LayerEventType =
|
|||
export interface ILayer {
|
||||
id: string; // 一个场景中同一类型 Layer 可能存在多个
|
||||
type: string; // 代表 Layer 的类型
|
||||
coordCenter: number[];
|
||||
name: string; //
|
||||
inited: boolean; // 是否初始化完成
|
||||
zIndex: number;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue