mirror of https://gitee.com/antv-l7/antv-l7
fix: 优化多图层 setData 效果不同步的现象 (#1384)
* fix: 优化多图层 setData 效果不同步的现象 * style: lint style Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
This commit is contained in:
YiQianYao
GitHub
parent
e224472d4e
commit
406eef7361
|
|
@ -1,20 +1,28 @@
|
|||
import { Scene } from "@antv/l7";
|
||||
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 { LineLayer } from "@antv/l7";
|
||||
import { coordAll, Feature, featureCollection, LineString } from "@turf/turf";
|
||||
import { debounce } from "lodash";
|
||||
import { coordAll, Feature, featureCollection, LineString, point } from "@turf/turf";
|
||||
import { debounce, throttle } from "lodash";
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export const lineList: Feature<LineString>[] = [
|
||||
const lineList: Feature<LineString>[] = [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[120, 30.25],
|
||||
[120, 30.2],
|
||||
[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],
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
@ -24,20 +32,88 @@ export const lineList: Feature<LineString>[] = [
|
|||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[120.1, 30.25],
|
||||
[120.1, 30.2],
|
||||
[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],
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const getPointFeatureCollection = (lineList: Feature<LineString>[]) => {
|
||||
const data = featureCollection(
|
||||
coordAll(featureCollection([...lineList])).map((item) => point(item))
|
||||
);
|
||||
// console.log(data)
|
||||
return data
|
||||
// return {type: 'FeatureCollection', features: [
|
||||
// {
|
||||
// type: "Feature",
|
||||
// properties: {},
|
||||
// geometry: {type: 'Point', coordinates: lineList[0].geometry.coordinates[0]}
|
||||
// }
|
||||
// ]}
|
||||
};
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
map: new GaodeMap({
|
||||
center: [120.151634, 30.244831],
|
||||
pitch: 0,
|
||||
style: "dark",
|
||||
zoom: 10
|
||||
})
|
||||
|
|
@ -57,7 +133,18 @@ export default () => {
|
|||
)
|
||||
.size(4)
|
||||
.color("#f00");
|
||||
const pointLayer = new PointLayer({});
|
||||
pointLayer
|
||||
.source(getPointFeatureCollection(lineList))
|
||||
.size(6)
|
||||
.shape("circle")
|
||||
.style({
|
||||
stroke: "#00f",
|
||||
strokeWidth: 3
|
||||
});
|
||||
|
||||
scene.addLayer(lineLayer);
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
let isDrag = false;
|
||||
let dragFeature: Feature<LineString> | null = null;
|
||||
|
|
@ -68,57 +155,50 @@ export default () => {
|
|||
prePosition = [lng, lat];
|
||||
|
||||
isDrag = true;
|
||||
scene.setMapStatus({
|
||||
dragEnable: false
|
||||
});
|
||||
// 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
|
||||
scene.setMapStatus({
|
||||
dragEnable: false
|
||||
});
|
||||
|
||||
// lineList[1].geometry.coordinates[0][0] += 0.001
|
||||
// lineList[1].geometry.coordinates[1][0] += 0.001
|
||||
scene.on("mousemove", (e) => {
|
||||
|
||||
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];
|
||||
if (isDrag && lineLayer.modelLoaded && pointLayer.modelLoaded) {
|
||||
// if (isDrag ) {
|
||||
// requestAnimationFrame(() => {
|
||||
|
||||
// lineLayer.center = undefined
|
||||
lineLayer.setData(featureCollection(lineList));
|
||||
}
|
||||
},
|
||||
0,
|
||||
{
|
||||
maxWait: 100
|
||||
}
|
||||
)
|
||||
);
|
||||
const { lng, lat } = e.lnglat;
|
||||
const [lastLng, lastLat] = prePosition;
|
||||
if (dragFeature) {
|
||||
const positions = coordAll(dragFeature);
|
||||
positions.forEach((position) => {
|
||||
position[0] += lng - lastLng;
|
||||
position[1] += lat - lastLat;
|
||||
});
|
||||
dragFeature.geometry.coordinates = positions;
|
||||
lineList[dragFeature.properties?.index] = dragFeature;
|
||||
}
|
||||
prePosition = [lng, lat];
|
||||
const lineData = featureCollection([...lineList]);
|
||||
const pointData = getPointFeatureCollection([...lineList]);
|
||||
|
||||
|
||||
lineLayer.setData(lineData);
|
||||
pointLayer.setData(pointData);
|
||||
|
||||
// })
|
||||
}
|
||||
} );
|
||||
|
||||
scene.on("mouseup", (e) => {
|
||||
isDrag = false;
|
||||
scene.setMapStatus({
|
||||
dragEnable: true
|
||||
});
|
||||
// scene.setMapStatus({
|
||||
// dragEnable: true
|
||||
// });
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
|
|
|||
|
|
@ -1385,7 +1385,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
|||
this.models = models;
|
||||
this.emit('modelLoaded', null);
|
||||
this.modelLoaded = true;
|
||||
this.layerService.throttleRenderLayers();
|
||||
|
||||
// Tip: setTimeout 用于延迟绘制，可以让拖动图层时连续的 setData 更加平滑 - L7Draw
|
||||
setTimeout(() => {
|
||||
// Tip: 使用 renderLayers 而不是 throttleRenderLayers，让图层之间的 setData 更新绘制不存在延迟
|
||||
this.layerService.renderLayers();
|
||||
}, 32);
|
||||
}
|
||||
|
||||
protected reRender() {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { Version } from '@antv/l7-maps';
|
|||
import Source from '@antv/l7-source';
|
||||
import { isColor, normalize, rgb2arr } from '@antv/l7-utils';
|
||||
import { ILineLayerStyleOptions } from '../core/interface';
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
||||
function getArrowPoints(p1: Position, p2: Position) {
|
||||
const dir = [p2[0] - p1[0], p2[1] - p1[1]];
|
||||
|
|
@ -27,9 +28,11 @@ function getArrowPoints(p1: Position, p2: Position) {
|
|||
function adjustData2Amap2Coordinates(
|
||||
mappedData: IEncodeFeature[],
|
||||
mapService: IMapService,
|
||||
layer: ILayer,
|
||||
) {
|
||||
// 根据地图的类型判断是否需要对点位数据进行处理, 若是高德2.0则需要对坐标进行相对偏移
|
||||
if (mappedData.length > 0 && mapService.version === Version['GAODE2.x']) {
|
||||
const layerCenter = layer.coordCenter;
|
||||
if (typeof mappedData[0].coordinates[0] === 'number') {
|
||||
// 单个的点数据
|
||||
// @ts-ignore
|
||||
|
|
@ -41,7 +44,11 @@ function adjustData2Amap2Coordinates(
|
|||
// @ts-ignore
|
||||
d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据）
|
||||
// @ts-ignore
|
||||
d.coordinates = this.mapService.lngLatToCoord(d.coordinates);
|
||||
// d.coordinates = mapService.lngLatToCoord(d.coordinates);
|
||||
d.coordinates = mapService.lngLatToCoordByLayer(
|
||||
d.coordinates,
|
||||
layerCenter,
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// 连续的线、面数据
|
||||
|
|
@ -54,7 +61,11 @@ function adjustData2Amap2Coordinates(
|
|||
// @ts-ignore
|
||||
d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据）
|
||||
// @ts-ignore
|
||||
d.coordinates = this.mapService.lngLatToCoords(d.coordinates);
|
||||
// d.coordinates = mapService.lngLatToCoords(d.coordinates);
|
||||
d.coordinates = mapService.lngLatToCoordsByLayer(
|
||||
d.coordinates,
|
||||
layerCenter,
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -185,7 +196,7 @@ function mapping(
|
|||
return encodeRecord;
|
||||
}) as IEncodeFeature[];
|
||||
// 调整数据兼容 Amap2.0
|
||||
adjustData2Amap2Coordinates(mappedData, mapService);
|
||||
adjustData2Amap2Coordinates(mappedData, mapService, layer as ILayer);
|
||||
|
||||
// 调整数据兼容 SimpleCoordinates
|
||||
adjustData2SimpleCoordinates(mappedData, mapService);
|
||||
|
|
|
|||
Loading…
Reference in New Issue