From 8bb210b7580917c5946c3da4029e937f57541d3d Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Fri, 8 Oct 2021 11:05:39 +0800 Subject: [PATCH] Shihui dev (#788) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add getModelMatrix into viewport * feat: 新增地球模式 （初步构建） * feat: 完善地球交互 * style: lint style * feat: 调整地球图层缩放的方向 * style: lint style * feat: 增加地球模式的 pointLayer/fill 图层 * style: lint style * feat: 增加地球、太阳的简单运动系统，优化部分代码结构 * fix: 修复时间点击出错 * style: lint style * fix: 修复地图 panBy 方法参数错误 * style: lint style --- packages/core/src/services/map/IMapService.ts | 2 +- packages/maps/src/amap/map.ts | 8 +- packages/maps/src/amap2/map.ts | 4 +- packages/maps/src/earth/map.ts | 4 +- packages/maps/src/map/map.ts | 4 +- packages/maps/src/mapbox/map.ts | 4 +- packages/scene/src/IMapController.ts | 2 +- packages/scene/src/index.ts | 4 +- stories/Map/components/mapCenter.tsx | 73 +------------------ 9 files changed, 22 insertions(+), 83 deletions(-) diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index d44b951785..cb1a0b7554 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -65,7 +65,7 @@ export interface IMapService { zoomIn(option?: any, eventData?: any): void; zoomOut(option?: any, eventData?: any): void; panTo(p: Point): void; - panBy(pixel: Point): void; + panBy(x: number, y: number): void; fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void; setZoomAndCenter(zoom: number, center: Point): void; setCenter(center: [number, number], option?: ICameraOptions): void; diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index c47ed7897b..b94dbdf7a2 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -229,17 +229,21 @@ export default class AMapService public panTo(p: [number, number]): void { this.map.panTo(p); } - public panBy(pixel: [number, number]): void { - this.map.panTo(pixel); + + public panBy(x: number = 0, y: number = 0): void { + this.map.panBy(x, y); } + public fitBounds(extent: Bounds): void { this.map.setBounds( new AMap.Bounds([extent[0][0], extent[0][1], extent[1][0], extent[1][1]]), ); } + public setZoomAndCenter(zoom: number, center: [number, number]): void { this.map.setZoomAndCenter(zoom, center); } + public setMapStyle(style: string): void { this.map.setMapStyle(this.getMapStyle(style)); } diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index 7224bef70d..4c350bd158 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -306,8 +306,8 @@ export default class AMapService public panTo(p: [number, number]): void { this.map.panTo(p); } - public panBy(pixel: [number, number]): void { - this.map.panTo(pixel); + public panBy(x: number = 0, y: number = 0): void { + this.map.panBy(x, y); } public fitBounds(extent: Bounds): void { this.map.setBounds( diff --git a/packages/maps/src/earth/map.ts b/packages/maps/src/earth/map.ts index cd9dc974ee..eb75f1827b 100644 --- a/packages/maps/src/earth/map.ts +++ b/packages/maps/src/earth/map.ts @@ -157,8 +157,8 @@ export default class L7MapService implements IMapService { this.map.panTo(p); } - public panBy(pixel: [number, number]): void { - this.panTo(pixel); + public panBy(x: number = 0, y: number = 0): void { + this.panTo([x, y]); } public fitBounds(bound: Bounds, fitBoundsOptions?: any): void { diff --git a/packages/maps/src/map/map.ts b/packages/maps/src/map/map.ts index f420c80376..3cbb5a2921 100644 --- a/packages/maps/src/map/map.ts +++ b/packages/maps/src/map/map.ts @@ -155,8 +155,8 @@ export default class L7MapService implements IMapService { this.map.panTo(p); } - public panBy(pixel: [number, number]): void { - this.panTo(pixel); + public panBy(x: number = 0, y: number = 0): void { + this.panTo([x, y]); } public fitBounds(bound: Bounds, fitBoundsOptions?: any): void { diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts index d70a4af4c8..7670c726ee 100644 --- a/packages/maps/src/mapbox/map.ts +++ b/packages/maps/src/mapbox/map.ts @@ -162,8 +162,8 @@ export default class MapboxService this.map.panTo(p); } - public panBy(pixel: [number, number]): void { - this.panTo(pixel); + public panBy(x: number, y: number): void { + this.panTo([x, y]); } public fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void { diff --git a/packages/scene/src/IMapController.ts b/packages/scene/src/IMapController.ts index 5d5f2dec4d..bf896bdde5 100644 --- a/packages/scene/src/IMapController.ts +++ b/packages/scene/src/IMapController.ts @@ -51,7 +51,7 @@ export default interface IMapController { /** * 地图平移到指定点 `[x, y]` */ - panBy(pixel: Point): void; + panBy(x: number, y: number): void; /** * 调整地图适合指定区域 diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index b08a955be2..b79cee8500 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -323,8 +323,8 @@ class Scene this.mapService.panTo(p); } - public panBy(pixel: Point): void { - this.mapService.panBy(pixel); + public panBy(x: number, y: number): void { + this.mapService.panBy(x, y); } public getContainer() { diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index f38c008698..939632d8b8 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -1,5 +1,5 @@ // @ts-ignore -import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7'; +import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; @@ -65,44 +65,9 @@ export default class GaodeMapComponent extends React.Component { scene.render(); this.scene = scene; - scene.on('loaded', () => { - // const padding = { - // top: 50, - // right: 0, - // bottom: 200, - // left: 800, - // }; - // const px = scene.lngLatToPixel([center.lng, center.lat]); - // const offsetPx = [ - // (padding.right - padding.left) / 2, - // (padding.bottom - padding.top) / 2, - // ]; - // scene.setCenter([121.107846, 30.267069], { padding }); - // const newCenter = scene.pixelToLngLat([ - // px.x + offsetPx[0], - // px.y + offsetPx[1], - // ]); - // @ts-ignore - // scene.setCenter(); - // get originCenter - // const originCenter = scene.getCenter(); - // const originPx = scene.lngLatToPixel([ - // originCenter.lng, - // originCenter.lat, - // ]); - // const offsetPx2 = [ - // (-padding.right + padding.left) / 2, - // (-padding.bottom + padding.top) / 2, - // ]; - // const newCenter2 = scene.pixelToLngLat([ - // originPx.x - offsetPx[0], - // originPx.y - offsetPx[1], - // ]); - // lngLatToContainer - // 获取当前地图像素坐标 - // console.log(originCenter, center, newCenter2); - // console.log(w,h); - }); + setTimeout(() => { + console.log(this.scene.panBy(10, 10)); + }, 1000); } public render() { @@ -118,36 +83,6 @@ export default class GaodeMapComponent extends React.Component { bottom: 0, }} /> - {/*
*/} - {/*
-
*/} ); }