From 1df71bdd7fc5b35be1447c9cc574bf610666f436 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 14 四月 2025 19:13:11 +0800
Subject: [PATCH] SERVE_URL
---
src/model/map/GaoDeMap.ts | 127 ++++++++++++++++++++++++++++++++++++++----
1 files changed, 114 insertions(+), 13 deletions(-)
diff --git a/src/model/map/GaoDeMap.ts b/src/model/map/GaoDeMap.ts
index 5374dde..7901fa0 100644
--- a/src/model/map/GaoDeMap.ts
+++ b/src/model/map/GaoDeMap.ts
@@ -1,6 +1,5 @@
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 = {
@@ -8,14 +7,37 @@
version?: string;
plugins?: string[];
container: string | HTMLDivElement;
- aMapOption?: Partial<AMap.MapOptions>;
+ aMapOption?: Partial<AMap.MapOptions> & Record<string, any>;
+};
+
+export type GaoDeMarkerOption = {
+ icon: {
+ url: string;
+ /** @description 閫変腑鏃剁殑鍥剧墖 */
+ selectUrl?: string;
+ size: number;
+ };
+ click?: (e: any, labelMarker: AMap.LabelMarker) => void;
+};
+export type LabelMarkerData = {
+ position: GaoDePosition;
+
+ title?: string;
+ textColor?: string;
+ extData?: any;
+};
+export type MarkerLayerOption = {
+ // 璁剧疆 allowCollision锛歵rue锛屽彲浠ヨ鏍囨敞閬胯鐢ㄦ埛鐨勬爣娉�
+ layerOpt?: AMap.LabelsLayerOptions;
+ markerOpt: GaoDeMarkerOption;
};
export class GaoDeMap {
map: AMap.Map;
+ AMap: AMapInstance;
private viewBound: AMap.Bounds;
async init(option: GaoDeMapOption) {
- const gaoDeOption = _.defaultsDeep(option, {
+ const gaoDeOption = defaultsDeep(option, {
key: '3627ed9deaac2622e26a7169f0c36b1b', // 鐢宠濂界殑Web绔紑鍙戣�匥ey锛岄娆¤皟鐢� load 鏃跺繀濉�
version: '2.0', // 鎸囧畾瑕佸姞杞界殑 JSAPI 鐨勭増鏈紝缂虹渷鏃堕粯璁や负 1.4.15
plugins: [
@@ -27,7 +49,9 @@
// 'AMap.MarkerCluster',
// 'AMap.InfoWindow',
], // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
-
+ // AMapUI:{
+ // version: '1.1',
+ // },
aMapOption: {
viewMode: '2D', //榛樿浣跨敤 2D 妯″紡
zoom: 5, //鍦板浘绾у埆
@@ -35,17 +59,28 @@
} as Partial<AMap.MapOptions>,
} as Partial<GaoDeMapOption>) as GaoDeMapOption;
try {
- const AMap = await AMapLoader.load({
+ this.AMap = await AMapLoader.load({
key: gaoDeOption.key,
version: gaoDeOption.version,
plugins: gaoDeOption.plugins,
});
- this.map = new AMap.Map(gaoDeOption.container, gaoDeOption.aMapOption);
+
+ this.map = new this.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) {
@@ -57,11 +92,77 @@
this.map.setBounds(this.viewBound);
}
+ applyBasicPlugins() {
+ // const scale = new AMap.Scale();
+ // this.map.addControl(scale)
+ // const toolbar = new AMap.ToolBar();
+ // this.map.addControl(toolbar)
+ }
- applyBasicPlugins(){
- // const scale = new AMap.Scale();
- // this.map.addControl(scale)
- // const toolbar = new AMap.ToolBar();
- // this.map.addControl(toolbar)
- }
+ addMarkerLayer(dataList: LabelMarkerData[], option: MarkerLayerOption) {
+ const markerLayerOption = defaultsDeep(option, {
+ layerOpt: {
+ zooms: [3, 20],
+ zIndex: 1000,
+ allowCollision: false,
+ },
+ } as MarkerLayerOption) as MarkerLayerOption;
+
+ const layer = new AMap.LabelsLayer(markerLayerOption.layerOpt);
+ const { markerOpt } = markerLayerOption;
+ const { icon } = markerOpt;
+
+ const convertData = (dataList ?? []).map<AMap.LabelMarkerOptions>((item) => {
+ return {
+ // name: '鑷彁鐐�9',
+ position: item.position,
+ zIndex: 2,
+ opacity: 1,
+ icon: {
+ // 鍥炬爣绫诲瀷锛岀幇闃舵鍙敮鎸� image 绫诲瀷
+ type: 'image',
+ // 鍥剧墖 url
+ image: icon.url,
+ // 鍥剧墖灏哄
+ size: [icon.size, icon.size],
+ // 鍥剧墖鐩稿 position 鐨勯敋鐐癸紝榛樿涓� bottom-center
+ anchor: 'center',
+ },
+ text: {
+ content: item.title,
+ direction: 'right',
+ offset: [-5, -5],
+ style: {
+ fontSize: 10,
+ fontWeight: 'normal',
+ fillColor: item.textColor,
+ strokeColor: '#fff',
+ strokeWidth: 2,
+ fold: true,
+ padding: '2, 5',
+ },
+ },
+ extData: item.extData,
+ };
+ });
+
+ const markerList = convertData.map((item) => {
+ const label = new AMap.LabelMarker(item);
+
+ label.on('click', (e) => {
+ if (icon.selectUrl) {
+ setTimeout(() => {
+ label.setIcon({
+ image: icon.selectUrl,
+ });
+ }, 30);
+ }
+ markerOpt.click?.(e, label);
+ });
+ return label;
+ });
+
+ layer.add(markerList);
+ this.map.add(layer);
+ }
}
--
Gitblit v1.9.3