From a9f50ed255c2dfb359ca02e5ba47ee897650933f Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期二, 29 十月 2024 11:26:01 +0800
Subject: [PATCH] 修改高度不固定的内容
---
src/model/map/GaoDeMap.ts | 102 +++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 94 insertions(+), 8 deletions(-)
diff --git a/src/model/map/GaoDeMap.ts b/src/model/map/GaoDeMap.ts
index 5374dde..695b6c7 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';
-
export type AMapInstance = typeof AMap;
export type GaoDePosition = [number, number];
export type GaoDeMapOption = {
@@ -8,7 +7,27 @@
version?: string;
plugins?: string[];
container: string | HTMLDivElement;
- aMapOption?: Partial<AMap.MapOptions>;
+ aMapOption?: Partial<AMap.MapOptions> & Record<string, any>;
+};
+
+export type GaoDeMarkerOption = {
+ icon: {
+ url: 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 {
@@ -41,11 +60,22 @@
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) {
@@ -57,11 +87,67 @@
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 convertData = (dataList ?? []).map<AMap.LabelMarkerOptions>((item) => {
+ const { icon } = markerOpt;
+ 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);
+ if (markerOpt.click) {
+ label.on('click', (e) => markerOpt.click(e, label));
+ }
+ return label;
+ });
+
+ layer.add(markerList);
+ this.map.add(layer);
+ }
}
--
Gitblit v1.9.3