| | |
| | | import AMapLoader from '@amap/amap-jsapi-loader'; |
| | | import _ from 'lodash'; |
| | | import { defaultsDeep } from 'lodash-es'; |
| | | export type AMapInstance = typeof AMap; |
| | | export type GaoDePosition = [number, number]; |
| | | export type GaoDeMapOption = { |
| | |
| | | version?: string; |
| | | plugins?: string[]; |
| | | container: string | HTMLDivElement; |
| | | aMapOption?: Partial<AMap.MapOptions>; |
| | | aMapOption?: Partial<AMap.MapOptions> & Record<string, any>; |
| | | }; |
| | | |
| | | export type GaoDeMarkerOption = { |
| | |
| | | url: string; |
| | | size: number; |
| | | }; |
| | | click?: (e: any, labelMarker: AMap.LabelMarker) => void; |
| | | }; |
| | | export type LabelMarkerData = { |
| | | position: GaoDePosition; |
| | |
| | | map: AMap.Map; |
| | | private viewBound: AMap.Bounds; |
| | | async init(option: GaoDeMapOption) { |
| | | const gaoDeOption = _.defaultsDeep(option, { |
| | | const gaoDeOption = defaultsDeep(option, { |
| | | key: '3627ed9deaac2622e26a7169f0c36b1b', // 申请好的Web端开发者Key,首次调用 load 时必填 |
| | | version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 |
| | | plugins: [ |
| | |
| | | plugins: gaoDeOption.plugins, |
| | | }); |
| | | this.map = new AMap.Map(gaoDeOption.container, gaoDeOption.aMapOption); |
| | | this.setStyle(); |
| | | } catch (error) { |
| | | // console.error(error); |
| | | } |
| | | } |
| | | constructor() {} |
| | | |
| | | private setStyle() { |
| | | const container = this.map.getContainer() as any; |
| | | /** |
| | | * 隐藏高德相关标志 |
| | | */ |
| | | container.querySelector('.amap-logo').style.opacity = 0; |
| | | container.querySelector('.amap-copyright').style.opacity = 0; |
| | | } |
| | | |
| | | zoomToRect(southWest: GaoDePosition, northEast: GaoDePosition) { |
| | | if (!this.viewBound) { |
| | |
| | | } |
| | | |
| | | addMarkerLayer(dataList: LabelMarkerData[], option: MarkerLayerOption) { |
| | | const markerLayerOption = _.defaultsDeep(option, { |
| | | const markerLayerOption = defaultsDeep(option, { |
| | | layerOpt: { |
| | | zooms: [3, 20], |
| | | zIndex: 1000, |
| | |
| | | } as MarkerLayerOption) as MarkerLayerOption; |
| | | |
| | | const layer = new AMap.LabelsLayer(markerLayerOption.layerOpt); |
| | | let convertData = (dataList ?? []).map<AMap.LabelMarkerOptions>((item) => { |
| | | const { |
| | | markerOpt: { icon }, |
| | | } = markerLayerOption; |
| | | const { markerOpt } = markerLayerOption; |
| | | const convertData = (dataList ?? []).map<AMap.LabelMarkerOptions>((item) => { |
| | | const { icon } = markerOpt; |
| | | return { |
| | | // name: '自提点9', |
| | | position: item.position, |
| | |
| | | extData: item.extData, |
| | | }; |
| | | }); |
| | | const markerList = convertData.map((item) => new AMap.LabelMarker(item)); |
| | | const markerList = convertData.map((item) => { |
| | | const label = new AMap.LabelMarker(item); |
| | | if (markerOpt.click) { |
| | | label.on('click', (e) => markerOpt.click(e, label)); |
| | | } |
| | | return label; |
| | | }); |
| | | |
| | | layer.add(markerList); |
| | | this.map.add(layer); |
| | | } |