diff --git a/types/amap-js-api/amap-js-api-tests.ts b/types/amap-js-api/amap-js-api-tests.ts index f1f699d32e..6a5a9db891 100644 --- a/types/amap-js-api/amap-js-api-tests.ts +++ b/types/amap-js-api/amap-js-api-tests.ts @@ -21,6 +21,7 @@ declare const marker: AMap.Marker; declare const layer: AMap.Layer; declare const tileLayer: AMap.TileLayer; declare const massMarksLayer: AMap.MassMarks; +declare const labelMarker: AMap.LabelMarker; // declare const videoLayer: AMap.VideoLayer; // declare const buildings: AMap.Buildings; @@ -1293,6 +1294,159 @@ testImageLayer.setImageUrl('url'); // $ExpectType string | undefined testImageLayer.getImageUrl(); +/** + * layer/labelsLayer.ts + */ + +// $ExpectType LabelsLayer +new AMap.LabelsLayer(); +// $ExpectType LabelsLayer +new AMap.LabelsLayer({}); +// $ExpectType LabelsLayer +const testLabelsLayer = new AMap.LabelsLayer({ + visible: true, + zIndex: 1, + zooms: [1, 1], + opacity: 1 +}); + +// $ExpectType void +testLabelsLayer.add(labelMarker); +// $ExpectType void +testLabelsLayer.add([labelMarker]); + +// $ExpectType void +testLabelsLayer.remove(labelMarker); + +// $ExpectType void +testLabelsLayer.clear(); + +// $ExpectType any +testLabelsLayer.on('click', () => { }); + +// $ExpectType any +testLabelsLayer.off('click', () => { }); + +// $ExpectType any +testLabelsLayer.on('click', (event: AMap.LabelsLayer.EventMap['click']) => { + { + const { data, opts } = event.data; + // $ExpectType number + data.id; + // $ExpectType string + data.name; + // $ExpectType [number, number] | [string, string] + data.position; + // $ExpectType number | undefined + data.rank; + // $ExpectType string | undefined + data.txt; + // $ExpectType [number, number] + data.zooms; + + // $ExpectType number + opts.opacity; + // $ExpectType number + opts.zIndex; + + { + // $ExpectType TextOptions + const textOptions = opts.text; + + // $ExpectType string | undefined + textOptions.content; + if (textOptions.direction !== undefined) { + // $ExpectType TextDirection + textOptions.direction; + } else { + // $ExpectType undefined + textOptions.direction; + } + + if (textOptions.offset !== undefined) { + // $ExpectType [number, number] | Pixel + textOptions.offset; + } else { + // $ExpectType undefined + textOptions.offset; + } + + // $ExpectType [number, number] | undefined + textOptions.zooms; + + { + const textStyle = textOptions.style; + if (textStyle) { + // $ExpectType string | undefined + textStyle.fillColor; + + // $ExpectType string | undefined + textStyle.fontFamily; + + if (textStyle.fontWeight !== undefined) { + // $ExpectType FontWeight + textStyle.fontWeight; + } else { + // $ExpectType undefined + textStyle.fontWeight; + } + + // $ExpectType string | undefined + textStyle.fillColor; + + // $ExpectType string | undefined + textStyle.strokeColor; + + // $ExpectType number | undefined + textStyle.strokeWidth; + } + } + } + + { + const iconOptions = opts.icon; + // $ExpectType string | undefined + iconOptions.image; + + if (iconOptions.size !== undefined) { + // $ExpectType number[] | Size + iconOptions.size; + } else { + // $ExpectType undefined + iconOptions.size; + } + + if (iconOptions.clipOrigin !== undefined) { + // $ExpectType number[] | Pixel + iconOptions.clipOrigin; + } else { + // $ExpectType undefined + iconOptions.clipOrigin; + } + + if (iconOptions.anchor !== undefined) { + // $ExpectType Anchor + iconOptions.anchor; + } else { + // $ExpectType undefined + iconOptions.anchor; + } + + // $ExpectType boolean | undefined + iconOptions.retina; + } + } + + // $ExpectType LngLat + event.lnglat; + + // $ExpectType Pixel + event.pixel; + + // $ExpectType LabelsLayer + event.target; +}); + /** * layer/layer.ts */ @@ -2498,6 +2652,70 @@ testInfoWindow.on('open', (event: AMap.InfoWindow.EventMap; +new AMap.LabelMarker(); +// $ExpectTYpe LabelMarker; +new AMap.LabelMarker({}); +// $ExpectTYpe LabelMarker; +const testLabelMarker = new AMap.LabelMarker({ + title: "全聚德烤鸭", + position: [116.467456, 39.994996], + zooms: [10, 20], + opacity: 1, + rank: 10, + zIndex: 10, + icon: { + type: 'image', + image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png', + clipOrigin: [14, 92], + clipSize: [50, 68], + size: [25, 34], + anchor: 'bottom-center', + angel: 0, + retina: true + }, + text: { + content: '全聚德烤鸭', + direction: 'left', + offset: [0, 0], + style: { + fontSize: 15, + fontWeight: 'normal', + fillColor: '#666', + strokeColor: '#fff', + strokeWidth: 1 + } + } +}); + +// $ExpectType void +testLabelMarker.setPosition(lnglatTuple); + +// $ExpectType [number, number] | [string, string] +testLabelMarker.getPosition(); + +// $ExpectType [number, number] +testLabelMarker.getZooms(); + +// $ExpectType void +testLabelMarker.setZooms([1, 1]); + +// $ExpectType number +testLabelMarker.getOpacity(); + +// $ExpectType void +testLabelMarker.setOpacity(1); + +// $ExpectType any +testLabelMarker.on('click', () => {}); + +// $ExpectType any +testLabelMarker.off('click', () => {}); + /** * overlay/marker.ts */ @@ -2532,6 +2750,11 @@ export const testMarker = new AMap.Marker({ title: '123', clickable: true, shape: markerShape, + label: { + content: 'label', + offset: pixel, + direction: 'left' + }, extData: { test: 123 } @@ -2600,11 +2823,29 @@ testMarker.setLabel({}); // $ExpectType void testMarker.setLabel({ content: 'label content', - offset: pixel + offset: pixel, + direction: 'top' }); -// $ExpectType Label | undefined -testMarker.getLabel(); +{ + const testMarkerLabel = testMarker.getLabel(); + if (testMarkerLabel !== undefined) { + // $ExpectType Label + testMarkerLabel; + + // $ExpectType string | undefined + testMarkerLabel.content; + + // $ExpectType Pixel | undefined + testMarkerLabel.offset; + + type TempLabelDirection = 'top' | 'right' | 'bottom' | 'left' | 'center' | undefined; + const tempLabelDirection: TempLabelDirection = testMarkerLabel.direction; + } else { + // $ExpectType undefined + testMarkerLabel; + } +} // $ExpectType number testMarker.getAngle(); diff --git a/types/amap-js-api/index.d.ts b/types/amap-js-api/index.d.ts index 5b8c1a5b94..d61a3e7a90 100644 --- a/types/amap-js-api/index.d.ts +++ b/types/amap-js-api/index.d.ts @@ -21,6 +21,7 @@ /// /// /// +/// /// /// /// @@ -36,6 +37,7 @@ /// /// /// +/// /// /// /// diff --git a/types/amap-js-api/layer/labelsLayer.d.ts b/types/amap-js-api/layer/labelsLayer.d.ts new file mode 100644 index 0000000000..de47778e6f --- /dev/null +++ b/types/amap-js-api/layer/labelsLayer.d.ts @@ -0,0 +1,99 @@ +declare namespace AMap { + namespace LabelsLayer { + interface EventMap { + click: Event<'click', LabelsLayerEvent>; + mouseover: Event<'mouseover', LabelsLayerEvent>; + mouseout: Event<'mouseout', LabelsLayerEvent>; + mousemove: Event<'mousemove', LabelsLayerEvent>; + mousedown: Event<'mousedown', LabelsLayerEvent>; + mouseup: Event<'mouseup', LabelsLayerEvent>; + touchstart: Event<'touchstart', LabelsLayerEvent>; + touchend: Event<'touchend', LabelsLayerEvent>; + } + interface EventData { + data: { + id: number; + name: string; + position: [number, number] | [string, string]; + zooms: [number, number]; + rank?: number; + txt?: string; + }; + opts: { + opacity: number; + zIndex: number; + icon: LabelMarker.IconOptions; + text: LabelMarker.TextOptions; + }; + } + interface LabelsLayerEvent { + data: EventData; + target: I; + pixel: Pixel; + lnglat: LngLat; + } + interface Options extends Layer.Options { + /** + * 图层是否可见 + */ + visible?: boolean; + /** + * 图层的层级 + */ + zIndex?: number; + /** + * 图层的透明度 + */ + opacity?: number; + zooms?: [number, number]; + } + } + + class LabelsLayer extends Layer { + /** + * 标注图层 + * @param options 选项 + */ + constructor(options?: LabelsLayer.Options); + /** + * 图层中添加LabelMarker + * @param labelMarker 标注对象 + */ + add(labelMarker: LabelMarker | LabelMarker[]): void; + /** + * 图层中移除LabelMarker + * @param labelMarker 标注对象 + */ + remove(labelMarker: LabelMarker): void; + /** + * 清空图层 + */ + clear(): void; + /** + * 注册事件 + * @param eventName 事件名称 + * @param handler 事件回调函数 + * @param context 事件回调中的上下文 + * @param once 触发一次 + * @param unshift 更改事件顺序 + */ + on( + eventName: string, + handler: (this: C, event: any) => void, + context?: C, + once?: boolean, + unshift?: boolean + ): any; // should be void + /** + * 移除事件绑定 + * @param eventName 事件名称 + * @param handler 事件功能函数 + * @param context 事件上下文 + */ + off( + eventName: string, + handler: ((this: C, event: any) => void) | 'mv', + context?: C + ): any; // should be void + } +} diff --git a/types/amap-js-api/overlay/labelMarker.d.ts b/types/amap-js-api/overlay/labelMarker.d.ts new file mode 100644 index 0000000000..a0a21d4df5 --- /dev/null +++ b/types/amap-js-api/overlay/labelMarker.d.ts @@ -0,0 +1,110 @@ +declare namespace AMap { + namespace LabelMarker { + interface EventMap extends LabelsLayer.EventMap { } + + type TextDirection = 'top' | 'right' | 'bottom' | 'left' | 'center'; + type FontWeight = 'normal' | 'thin' | 'bold'; + type Anchor = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; + interface TextStyle { + fontSize?: number; + fontFamily?: string; + fontWeight?: FontWeight; + fillColor?: string; + strokeColor?: string; + strokeWidth?: number; + } + interface TextOptions { + content?: string; + direction?: TextDirection; + offset?: Pixel | [number, number]; + zooms?: [number, number]; + style?: TextStyle; + } + interface IconOptions { + image?: string; + size?: number[] | Size; + // unsupport Pixel in v1.4.14 + clipOrigin?: number[] | Pixel; + anchor?: Anchor; + retina?: boolean; + + // internal + angel?: number; + type?: string; + clipSize?: [number, number]; + zooms?: [number, number]; + } + interface Options extends Overlay.Options { + position?: string | LocationValue; + zooms?: [number, number]; + opacity?: number; + icon?: IconOptions; + text?: TextOptions; + + // internal + zIndex?: number; + title?: string; + rank?: number; + } + } + + class LabelMarker extends Overlay { + constructor(options?: LabelMarker.Options); + /** + * 设置标注位置 + * @param position 标注位置 + */ + setPosition(position: [number, number]): void; + /** + * 获取标注位置 + */ + getPosition(): [number, number] | [string, string]; + /** + * 获取显示级别范围 + */ + getZooms(): [number, number]; + /** + * 设置显示级别范围 + * @param zooms 显示级别范围 + */ + setZooms(zooms: [number, number]): void; + /** + * 获取透明度 + */ + getOpacity(): number; + /** + * 设置透明度 + * @param opacity 透明度 + */ + setOpacity(opacity: number): void; + /** + * 注册事件 + * @param eventName 事件名称 + * @param handler 事件回调函数 + * @param context 事件回调中的上下文 + * @param once 触发一次 + * @param unshift 更改事件顺序 + */ + on( + eventName: string, + handler: (this: C, event: any) => void, + context?: C, + once?: boolean, + unshift?: boolean + ): any; // should be void + /** + * 移除事件绑定 + * @param eventName 事件名称 + * @param handler 事件功能函数 + * @param context 事件上下文 + */ + off( + eventName: string, + handler: ((this: C, event: any) => void) | 'mv', + context?: C + ): any; // should be void + + // internal + getBounds(): Bounds; + } +} diff --git a/types/amap-js-api/overlay/marker.d.ts b/types/amap-js-api/overlay/marker.d.ts index 6e8183911c..adf41d6f56 100644 --- a/types/amap-js-api/overlay/marker.d.ts +++ b/types/amap-js-api/overlay/marker.d.ts @@ -12,7 +12,7 @@ declare namespace AMap { dragstart: MapsEvent<'dragstart', I>; dragging: MapsEvent<'dragging', I>; dragend: MapsEvent<'dragend', I>; - moving: Event<'moving', { passwdPath: LngLat[]; }>; + moving: Event<'moving', { passedPath: LngLat[]; }>; moveend: Event<'moveend'>; movealong: Event<'movealong'>; touchstart: MapsEvent<'touchstart', I>; @@ -20,9 +20,11 @@ declare namespace AMap { touchend: MapsEvent<'touchend', I>; } + type LabelDirection = 'top' | 'right' | 'bottom' | 'left' | 'center'; interface Label { content?: string; offset?: Pixel; + direction?: LabelDirection; } type Anchor = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; diff --git a/types/amap-js-api/tsconfig.json b/types/amap-js-api/tsconfig.json index a26facba9e..918703171f 100644 --- a/types/amap-js-api/tsconfig.json +++ b/types/amap-js-api/tsconfig.json @@ -29,6 +29,7 @@ "index.d.ts", "layer/building.d.ts", "layer/flexible.d.ts", + "layer/labelsLayer.d.ts", "layer/layer.d.ts", "layer/layerGroup.d.ts", "layer/massMarks.d.ts", @@ -46,6 +47,7 @@ "overlay/geoJSON.d.ts", "overlay/icon.d.ts", "overlay/infoWindow.d.ts", + "overlay/labelMarker.d.ts", "overlay/marker.d.ts", "overlay/markerShape.d.ts", "overlay/overlay.d.ts",