mirror of https://gitee.com/antv-l7/antv-l7
feat: 新增地图状态控制方法
This commit is contained in:
parent
aad0b365e3
commit
3f32d039f0
|
@ -17,6 +17,7 @@ const defaultSceneConfig: Partial<ISceneConfig & IRenderConfig> = {
|
||||||
logoVisible: true,
|
logoVisible: true,
|
||||||
antialias: true,
|
antialias: true,
|
||||||
preserveDrawingBuffer: false,
|
preserveDrawingBuffer: false,
|
||||||
|
fitBoundsOptions: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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() };
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in New Issue