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, logoVisible: true,
antialias: true, antialias: true,
preserveDrawingBuffer: false, preserveDrawingBuffer: false,
fitBoundsOptions: {},
}; };
/** /**

View File

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

View File

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

View File

@ -11,6 +11,7 @@ import {
IMapConfig, IMapConfig,
IMapService, IMapService,
IPoint, IPoint,
IStatusOptions,
IViewport, IViewport,
MapServiceEvent, MapServiceEvent,
MapStyle, MapStyle,
@ -168,6 +169,38 @@ export default class MapboxService
public setMinZoom(min: number): void { public setMinZoom(min: number): void {
this.map.setMinZoom(min); 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 { public setZoomAndCenter(zoom: number, center: [number, number]): void {
this.map.flyTo({ 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 { export default interface IMapController {
/** /**
@ -51,17 +51,28 @@ export default interface IMapController {
*/ */
fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void; 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; setRotation(rotation: number): void;
setZoomAndCenter(zoom: number, center: Point): 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; pixelToLngLat(pixel: Point): ILngLat;
lngLatToPixel(lnglat: Point): IPoint; lngLatToPixel(lnglat: Point): IPoint;
containerToLngLat(pixel: Point): ILngLat; containerToLngLat(pixel: Point): ILngLat;
lngLatToContainer(lnglat: Point): IPoint; lngLatToContainer(lnglat: Point): IPoint;
exportMap(type: 'jpg' | 'png'): string;
} }

View File

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

View File

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