feat: 新增地图状态控制方法

This commit is contained in:
thinkinggis 2020-03-28 19:12:30 +08:00
parent aad0b365e3
commit 3f32d039f0
7 changed files with 94 additions and 20 deletions

View File

@ -17,6 +17,7 @@ const defaultSceneConfig: Partial<ISceneConfig & IRenderConfig> = {
logoVisible: true,
antialias: true,
preserveDrawingBuffer: false,
fitBoundsOptions: {},
};
/**

View File

@ -11,6 +11,15 @@ export interface IPoint {
y: number;
}
export interface IStatusOptions {
showIndoorMap: boolean;
resizeEnable: boolean;
dragEnable: boolean;
keyboardEnable: boolean;
doubleClickZoom: boolean;
zoomEnable: boolean;
rotateEnable: boolean;
}
export type MapStyle = string | { [key: string]: any };
export interface IMapWrapper {
setContainer(container: Container, id: string | HTMLDivElement): void;
@ -56,6 +65,7 @@ export interface IMapService<RawMap = {}> {
setPitch(pitch: number): void;
setZoom(zoom: number): void;
setMapStyle(style: any): void;
setStatus(option: Partial<IStatusOptions>): void;
// coordinates methods
pixelToLngLat(pixel: Point): ILngLat;

View File

@ -11,6 +11,7 @@ import {
IMapConfig,
IMapService,
IPoint,
IStatusOptions,
IViewport,
MapServiceEvent,
MapStyle,
@ -201,6 +202,10 @@ export default class AMapService
public setMapStyle(style: string): void {
this.map.setMapStyle(this.getMapStyle(style));
}
public setStatus(option: Partial<IStatusOptions>) {
this.map.setStatus(option);
}
public pixelToLngLat(pixel: [number, number]): ILngLat {
const lngLat = this.map.pixelToLngLat(new AMap.Pixel(pixel[0], pixel[1]));
return { lng: lngLat.getLng(), lat: lngLat.getLat() };

View File

@ -11,6 +11,7 @@ import {
IMapConfig,
IMapService,
IPoint,
IStatusOptions,
IViewport,
MapServiceEvent,
MapStyle,
@ -168,6 +169,38 @@ export default class MapboxService
public setMinZoom(min: number): void {
this.map.setMinZoom(min);
}
public setStatus(option: Partial<IStatusOptions>) {
if (option.doubleClickZoom === true) {
this.map.doubleClickZoom.enable();
}
if (option.doubleClickZoom === false) {
this.map.doubleClickZoom.disable();
}
if (option.dragEnable === false) {
this.map.dragPan.disable();
}
if (option.dragEnable === true) {
this.map.dragPan.enable();
}
if (option.rotateEnable === false) {
this.map.dragRotate.disable();
}
if (option.dragEnable === true) {
this.map.dragRotate.enable();
}
if (option.keyboardEnable === false) {
this.map.keyboard.disable();
}
if (option.keyboardEnable === true) {
this.map.keyboard.enable();
}
if (option.zoomEnable === false) {
this.map.scrollZoom.disable();
}
if (option.zoomEnable === true) {
this.map.scrollZoom.enable();
}
}
public setZoomAndCenter(zoom: number, center: [number, number]): void {
this.map.flyTo({

View File

@ -1,4 +1,4 @@
import { Bounds, ILngLat, IPoint, Point } from '@antv/l7-core';
import { Bounds, ILngLat, IPoint, IStatusOptions, Point } from '@antv/l7-core';
export default interface IMapController {
/**
@ -51,17 +51,28 @@ export default interface IMapController {
*/
fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void;
getContainer(): HTMLElement | null;
getSize(): [number, number];
// get map status method
getMinZoom(): number;
getMaxZoom(): number;
// get map params
getType(): string;
getMapContainer(): HTMLElement | null;
// control with raw map
setRotation(rotation: number): void;
setZoomAndCenter(zoom: number, center: Point): void;
setCenter(center: [number, number]): void;
setPitch(pitch: number): void;
setZoom(zoom: number): void;
setMapStyle(style: any): void;
setStatus(option: Partial<IStatusOptions>): void;
setMapStyle(style: string): void;
// coordinates methods
pixelToLngLat(pixel: Point): ILngLat;
lngLatToPixel(lnglat: Point): IPoint;
containerToLngLat(pixel: Point): ILngLat;
lngLatToContainer(lnglat: Point): IPoint;
exportMap(type: 'jpg' | 'png'): string;
}

View File

@ -24,6 +24,7 @@ import {
IRendererService,
ISceneConfig,
ISceneService,
IStatusOptions,
Point,
SceneEventList,
TYPES,
@ -63,14 +64,7 @@ class Scene
private container: Container;
public constructor(config: ISceneConfig) {
const {
id,
map,
logoPosition,
logoVisible = true,
animate = true,
fitBoundsOptions = {},
} = config;
const { id, map, fitBoundsOptions = {} } = config;
this.fitBoundsOptions = fitBoundsOptions;
// 创建场景容器
const sceneContainer = createSceneContainer();
@ -112,6 +106,21 @@ class Scene
this.initControl();
}
public getSize(): [number, number] {
return this.mapService.getSize();
}
public getMinZoom(): number {
return this.mapService.getMinZoom();
}
public getMaxZoom(): number {
return this.mapService.getMaxZoom();
}
public getType(): string {
return this.mapService.getType();
}
public getMapContainer(): HTMLElement | null {
return this.mapService.getMapContainer();
}
public getMapService(): IMapService<unknown> {
return this.mapService;
@ -279,13 +288,14 @@ class Scene
public setZoom(zoom: number): void {
this.mapService.setZoom(zoom);
}
public fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void {
public fitBounds(bound: Bounds, options?: unknown): void {
const { fitBoundsOptions, animate } = this.sceneService.getSceneConfig();
this.mapService.fitBounds(
bound,
// 选项优先级用户传入覆盖animate直接配置覆盖Scene配置项传入
fitBoundsOptions || {
...(this.fitBoundsOptions as object),
animate: this.animate,
options || {
...(fitBoundsOptions as object),
animate,
},
);
}
@ -298,6 +308,10 @@ class Scene
this.mapService.setMapStyle(style);
}
public setStatus(options: IStatusOptions) {
this.mapService.setStatus(options);
}
// conversion Method
public pixelToLngLat(pixel: Point): ILngLat {
return this.mapService.pixelToLngLat(pixel);

View File

@ -85,7 +85,7 @@ export default React.memo(function Map() {
center: [110.19382669582967, 50.258134],
pitch: 0,
style: 'blank',
zoom: 1,
zoom: 10,
}}
style={{
position: 'absolute',