diff --git a/dev-demos/features/fix/demos/fix.tsx b/dev-demos/features/fix/demos/fix.tsx index 04362b432a..187def650b 100644 --- a/dev-demos/features/fix/demos/fix.tsx +++ b/dev-demos/features/fix/demos/fix.tsx @@ -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[] = [ + { + 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 }) }); - - const dataList = [ - { name: "杭州", data: '#f00' }, - { name: "北京", data: '#ff0' } - ]; - const dataList2 = [{ name: "杭州", data: '#0f0' }]; - - const geo = { - type: "FeatureCollection", - features: [ - { - type: "Feature", - properties: { - color: "#f00", - name: "杭州" - }, - geometry: { - type: "Polygon", - coordinates: [ - [ - [100, 30], - [120, 35], - [120, 30] - ] - ] + 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); + + let isDrag = false; + let dragFeature: Feature | null = null; + let prePosition = [0, 0]; + + 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 (
{ simpleMapCoord: ISimpleMapCoord; map: RawMap; bgColor: string; + setCoordCenter?(center: number[]): void; setBgColor(color: string): void; init(): void; initMiniMap?(): void; diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index d9b4ebcba0..169e51dfa0 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -66,6 +66,7 @@ export default class BaseLayer 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 } // 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 }) .catch((err) => reject(err)); } else { + // console.log(this.encodedData[1].originCoordinates[0]) + // console.log(this.encodedData[1].coordinates[0]) const { attributes, elements, diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index 008664a476..9f127fb63e 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 = 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( diff --git a/packages/layers/src/plugins/ShaderUniformPlugin.ts b/packages/layers/src/plugins/ShaderUniformPlugin.ts index f9d2249f03..9a3fb70c9b 100644 --- a/packages/layers/src/plugins/ShaderUniformPlugin.ts +++ b/packages/layers/src/plugins/ShaderUniformPlugin.ts @@ -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() diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index 85f6962dcd..c34806729e 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -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 */