【新增】高德地图组件 AMap

snowy-admin-web/package.json

@@ -17,6 +17,7 @@
 		"prod": "vite  --mode production"
 	},
 	"dependencies": {
+		"@amap/amap-jsapi-loader": "1.0.1",
 		"@ant-design/colors": "7.0.0",
 		"@ant-design/icons-vue": "6.1.0",
 		"@antv/g2plot": "2.4.28",

snowy-admin-web/src/components/Map/aMap/README.md

@@ -0,0 +1,198 @@
+AMap
+====
+
+> 高德地图组件，常用于地图展示使用
+
+该组件由 [小诺开源技术](https://www.xiaonuo.vip) 封装
+
+
+### 使用方式
+
+```vue
+<template>
+	<a-map ref="map" api-key="******" @complete="handleComplete"
+		   @marker-click="handleMarkerClick"></a-map>
+</template>
+
+<script setup name="exmAMap">
+import AMap from '@/components/Map/aMap/index.vue'
+
+const map = ref(null)
+
+const handleComplete = () => {
+	// 渲染 点标记
+  	map.value.renderMarker(
+		[
+			{
+				position: [116.39, 39.9],
+				title: 'TA',
+				content: 'CA',
+				label: {
+					content: 'LCA'
+				}
+			},
+			{
+				position: [116.33, 39.5],
+				title: 'TB',
+				icon: '//vdata.amap.com/icons/b18/1/2.png'
+			}
+		]
+	)
+}
+
+const handleMarkerClick = (position) => {
+	map.value.openInfoWindow(position)
+}
+</script>
+```
+
+### Prop属性
+
+| 名称            | 说明                  | 类型      | 默认值    |
+|---------------|---------------------|---------|--------|
+| mid           | 容器ID                | String  | 时间戳    |
+| apiKey        | 地图Key               | String  |        |
+| center        | 地图中心点               | String  | 自动定位   |
+| plugins       | 地图控件                | Array   |        |
+| viewMode      | 效果：2D，3D            | String  | 3D     |
+| zoom          | 地图缩放比例              | Number  | 12     |
+| pitch         | 地图俯仰角度，有效范围 0-83    | String  | 50     |
+| mapStyle      | 地图样式                | String  | normal |
+| markerCluster | 点聚合                 | Boolean | true   |
+
+#### 地图控件
+
+- AMap.ToolBar：缩放工具条
+- AMap.Scale：比例尺
+- AMap.HawkEye：鹰眼
+- AMap.MapType：图层切换
+- AMap.Geolocation：定位
+- AMap.MarkerCluster：点聚合
+
+#### 地图样式
+
+- normal
+- macaron
+- dark
+- fresh
+- grey
+
+### 事件
+
+| 名称          | 说明            | 参数       | 参数类型  |
+|-------------|---------------|----------|-------|
+| complete    | 当地图初始化完成时触发   | -        | -     |
+| markerClick | 当点击了点覆盖物时触发   | position | Array |
+
+### 方法
+
+| 名称                  | 说明       | 参数                  | 参数类型              |
+|---------------------|----------|---------------------|-------------------|
+| renderMarker        | 渲染 点标记   | dataArr             | Array             |
+| renderCircleMarker  | 渲染 圆点标记  | dataArr             | Array             |
+| renderSimpleMarker  | 渲染 简单点标记 | dataArr, theme      | Array, String     |
+| renderAwesomeMarker | 渲染 字体点标记 | dataArr             | Array             |
+| renderPolyline      | 渲染 线     | dataArr,opt         | Array,JSON        |
+| renderCircle        | 渲染 圆     | position,radius,opt | Array,Number,JSON |
+| renderPolygon       | 渲染 面     | dataArr,opt         | Array,JSON        |
+| renderInfoWindow    | 渲染 信息窗体  | dataArr             | Array             |
+| openInfoWindow      | 打开 信息窗体  | position            | Array             |
+| clearOverlay        | 清理 覆盖物   |                     |                   |
+
+### 方法参数```dataArr```结构
+
+> 点标记
+
+```json
+[{
+	"position": "坐标数组",
+	"title": "鼠标滑过点标记时的文字提示",
+	"content": "显示内容，content有效时，icon属性将被覆盖",
+	"icon": "图标",
+	"label": {
+		"content": "文本标注"
+	}
+}]
+```
+
+> 圆点标记
+
+```json
+[{
+	"position": "坐标数组，圆心位置",
+	"radius": "圆点半径",
+	"strokeColor": "线条颜色，默认#006600",
+	"fillColor": "填充颜色，默认#006600"
+}]
+```
+
+> 简单点标记
+
+```json
+[{
+	"position": "坐标数组",
+	"label": "前景文字",
+	"labelStyle": {
+		"color": "颜色",
+		"fontSize": "字体大小"
+	},
+	"style": "背景图标样式"
+}]
+```
+
+> 字体点标记
+
+```json
+[{
+	"position": "坐标数组",
+	"awesomeIcon": "图标，参见：http://fontawesome.io/icons/",
+	"labelStyle": {
+		"color": "颜色",
+		"fontSize": "字体大小"
+	},
+	"style": "背景图标样式"
+}]
+```
+
+> 线、面
+
+```json
+[{
+	"position": "坐标数组"
+}]
+```
+
+> 信息窗体
+
+```json
+[{
+	"position": "坐标数组",
+	"content": "显示内容，文本数组，会以换行进行连接"
+}]
+```
+
+### 方法参数```opt```结构
+
+> 线
+
+```json
+{
+	"strokeColor": "边线颜色，默认blue",
+	"strokeWeight": "边线宽度，默认2",
+	"strokeOpacity": "边线透明度，默认0.5",
+	"isOutline": "是否显示描边，默认false",
+	"borderWeight": "描边宽度，默认1"
+}
+```
+
+> 圆、面
+
+```json
+{
+	"strokeColor": "边线颜色，默认blue",
+	"strokeWeight": "边线宽度，默认2",
+	"strokeOpacity": "边线透明度，默认0.5",
+	"fillColor": "填充颜色，默认blue",
+	"fllOpacity": "填充透明度，默认0.5"
+}
+```

snowy-admin-web/src/components/Map/aMap/index.vue

@@ -0,0 +1,410 @@
+<template>
+	<div class="aMap">
+		<div :id="`container-${mid}`" style="width: 100%;height: 100%;">
+			地图资源加载中...
+		</div>
+	</div>
+</template>
+<!--AMap官网：https://lbs.amap.com/api/javascript-api-v2/summary-->
+<script setup name="AMap">
+import {onMounted, onUnmounted, shallowRef} from 'vue'
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+const props = defineProps(
+	{
+		mid: {
+			type: Number,
+			default: new Date().getTime()
+		},
+		apiKey: {
+			type: String,
+			required: true
+		},
+		center: {
+			type: Array
+		},
+		plugins: {
+			type: Array,
+			default: [
+				'AMap.ToolBar',
+				'AMap.Scale',
+				'AMap.HawkEye',
+				'AMap.MapType',
+				'AMap.Geolocation',
+				'AMap.MarkerCluster'
+			]
+		},
+		viewMode: {
+			type: String,
+			default: '3D',
+			validator(value) {
+				return ['2D', '3D'].includes(value)
+			}
+		},
+		zoom: {
+			type: Number,
+			default: 12
+		},
+		pitch: {
+			type: Number,
+			default: 50
+		},
+		mapStyle: {
+			type: String,
+			default: 'normal',
+			validator(value) {
+				return ['normal', 'macaron', 'dark', 'fresh', 'grey'].includes(value)
+			}
+		},
+		markerCluster: {
+			type: Boolean,
+			default: true
+		}
+	}
+)
+
+const emits = defineEmits(['complete', 'markerClick'])
+
+const aMap = shallowRef(null)
+const aMapMarkerArr = ref([])
+const aMapInfoWindowObj = ref({})
+
+const init = () => {
+	AMapLoader.load({
+		key: props.apiKey,
+		version: '2.0',
+		plugins: props.plugins,
+		AMapUI: {
+			version: '1.1',
+			plugins: ['overlay/SimpleMarker', 'overlay/AwesomeMarker']
+		}
+	}).then(() => {
+		initMap()
+	}).catch(e => {
+		console.error(e);
+	})
+}
+
+/**
+ * 初始化 地图
+ */
+const initMap = () => {
+	aMap.value = new AMap.Map(`container-${props.mid}`, {
+		viewMode: props.viewMode,
+		zoom: props.zoom,
+		// 地图俯仰角度
+		pitch: props.pitch,
+		mapStyle: `amap://styles/${props.mapStyle}`
+	})
+
+	// 中心点
+	if (props.center) {
+		aMap.value.setCenter(props.center)
+	}
+
+	// 控件
+	props.plugins.length > 0 && initControlPlugin()
+
+	// 地图初始化完成
+	aMap.value.on('complete', () => {
+		emits('complete')
+	})
+}
+
+/**
+ * 初始化 控制控件
+ */
+const initControlPlugin = () => {
+	// 工具条，控制地图的缩放、平移等
+	props.plugins.includes('AMap.ToolBar') && aMap.value.addControl(new AMap.ToolBar({}))
+	// 比例尺
+	props.plugins.includes('AMap.Scale') && aMap.value.addControl(new AMap.Scale())
+	// 鹰眼，显示缩略图
+	props.plugins.includes('AMap.HawkEye') && aMap.value.addControl(new AMap.HawkEye({isOpen: true}))
+	// 图层切换
+	props.plugins.includes('AMap.MapType') && aMap.value.addControl(new AMap.MapType({}))
+	// 定位
+	props.plugins.includes('AMap.Geolocation') && aMap.value.addControl(new AMap.Geolocation({}))
+}
+
+/**
+ * 渲染 点标记
+ * @param dataArr
+ */
+const renderMarker = (dataArr) => {
+	dataArr.forEach(d => {
+		const marker = new AMap.Marker({
+			map: aMap.value,
+			position: d.position,
+			// 鼠标滑过点标记时的文字提示
+			title: d.title,
+			// 显示内容：content有效时，icon属性将被覆盖
+			content: d.content,
+			// 图标
+			icon: d.icon ? d.icon : null,
+			// 文本标注
+			label: d.label
+		})
+		marker.on('click', () => {
+			emits('markerClick', d.position)
+		})
+		aMapMarkerArr.value.push(marker)
+	})
+
+	setFitView()
+}
+
+/**
+ * 渲染 圆点标记
+ * @param dataArr
+ */
+const renderCircleMarker = (dataArr) => {
+	dataArr.forEach(d => {
+		const marker = new AMap.CircleMarker({
+			map: aMap.value,
+			// 圆心位置
+			center: d.position,
+			// 圆点半径
+			radius: d.radius ? d.radius : 20,
+			// 线条颜色
+			strokeColor: d.strokeColor ? d.strokeColor : '#006600',
+			// 轮廓线透明度
+			strokeOpacity: 0.5,
+			// 轮廓线宽度
+			strokeWeight: 2,
+			// 填充颜色
+			fillColor: d.fillColor ? d.fillColor : '#006600',
+			// 填充透明度
+			fillOpacity: 0.5,
+			cursor: 'pointer'
+		})
+		marker.on('click', () => {
+			emits('markerClick', d.position)
+		})
+		aMapMarkerArr.value.push(marker)
+	})
+
+	setFitView()
+}
+
+/**
+ * 渲染 简单点标记
+ * @param dataArr
+ * @param theme
+ */
+const renderSimpleMarker = (dataArr, theme = 'default') => {
+	dataArr.forEach(d => {
+		const marker = new AMapUI.SimpleMarker({
+			map: aMap.value,
+			position: d.position,
+			// 前景文字
+			iconLabel: {
+				// 文本
+				innerHTML: d.label,
+				// 字体的样式，比如颜色，大小等
+				style: d.labelStyle ? d.labelStyle : {
+					color: '#333',
+					fontSize: '12px'
+				}
+			},
+			// 图标主题：default，fresh，numv1，numv2
+			iconTheme: theme,
+			// 背景图标样式
+			iconStyle: d.style
+		})
+		marker.on('click', () => {
+			emits('markerClick', d.position)
+		})
+		aMapMarkerArr.value.push(marker)
+	})
+
+	setFitView()
+}
+
+/**
+ * 渲染 字体点标记
+ * @param dataArr
+ */
+const renderAwesomeMarker = (dataArr) => {
+	dataArr.forEach(d => {
+		const marker = new AMapUI.AwesomeMarker({
+			map: aMap.value,
+			position: d.position,
+			// 图标，参见：http://fontawesome.io/icons/
+			awesomeIcon: d.awesomeIcon,
+			// 字体的样式，比如颜色，大小等
+			iconLabel: {
+				style: d.labelStyle ? d.labelStyle : {
+					color: '#333',
+					fontSize: '12px'
+				}
+			},
+			// 背景图标的样式
+			iconStyle: d.style
+		})
+		marker.on('click', () => {
+			emits('markerClick', d.position)
+		})
+		aMapMarkerArr.value.push(marker)
+	})
+
+	setFitView()
+}
+
+/**
+ * 设置 视图级别
+ */
+const setFitView = () => {
+	// 点聚合
+	props.markerCluster && new AMap.MarkerCluster(aMap.value, aMapMarkerArr.value)
+
+	// 根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别
+	aMap.value.setFitView(aMapMarkerArr.value)
+}
+
+/**
+ * 渲染 线
+ * @param dataArr
+ * @param option
+ */
+const renderPolyline = (dataArr, option = {}) => {
+	const path = [];
+	dataArr.forEach(d => {
+		path.push(new AMap.LngLat(d.position[0], d.position[1]))
+	})
+
+	const polyline = new AMap.Polyline({
+		path: path,
+		strokeColor: option.strokeColor || 'blue',
+		strokeWeight: option.strokeWeight || 2,
+		strokeOpacity: option.strokeOpacity || 0.5,
+		isOutline: option.isOutline || false,
+		borderWeight: option.borderWeight || 1,
+		// 折线拐点连接处样式
+		lineJoin: 'round'
+	})
+	aMap.value.add(polyline)
+
+	aMap.value.setFitView([polyline])
+}
+
+/**
+ * 渲染 圆
+ * @param position
+ * @param radius
+ * @param option
+ */
+const renderCircle = (position, radius, option) => {
+	const circle = new AMap.Circle({
+		center: new AMap.LngLat(position[0], position[1]),
+		radius: radius,
+		strokeColor: option.strokeColor || 'blue',
+		strokeWeight: option.strokeWeight || 2,
+		strokeOpacity: option.strokeOpacity || 0.5,
+		fillColor: option.fillColor || 'blue',
+		fillOpacity: option.fillOpacity || 0.5,
+		strokeStyle: 'solid'
+	})
+	aMap.value.add(circle)
+
+	aMap.value.setFitView([circle])
+}
+
+/**
+ * 渲染 面
+ * @param dataArr
+ * @param option
+ */
+const renderPolygon = (dataArr, option = {}) => {
+	const path = [];
+	dataArr.forEach(d => {
+		path.push(new AMap.LngLat(d.position[0], d.position[1]))
+	})
+
+	const polygon = new AMap.Polygon({
+		path: path,
+		strokeColor: option.strokeColor || 'blue',
+		strokeWeight: option.strokeWeight || 2,
+		strokeOpacity: option.strokeOpacity || 0.5,
+		fillColor: option.fillColor || 'blue',
+		fillOpacity: option.fillOpacity || 0.5,
+		strokeStyle: 'solid'
+	})
+	aMap.value.add(polygon)
+
+	aMap.value.setFitView([polygon])
+}
+
+/**
+ * 渲染 信息窗体
+ * @param dataArr
+ */
+const renderInfoWindow = (dataArr) => {
+	dataArr.forEach(d => {
+		aMapInfoWindowObj.value[d.position] = new AMap.InfoWindow({
+			// 显示内容
+			content: d.content.join('<br>'),
+			// 位置偏移量
+			offset: new AMap.Pixel(0, -20),
+			// 点击地图后关闭信息窗体
+			closeWhenClickMap: true
+		})
+	})
+}
+
+/**
+ * 打开 信息窗体
+ * @param position
+ */
+const openInfoWindow = (position) => {
+	const infoWindow = aMapInfoWindowObj.value[position]
+	if (infoWindow) {
+		infoWindow.open(aMap.value, position)
+	}
+}
+
+/**
+ * 清理 覆盖物
+ */
+const clearOverlay = () => {
+	aMap.value.clearMap()
+}
+
+onMounted(() => {
+	init()
+})
+
+onUnmounted(() => {
+	aMap.value && aMap.value.destroy()
+})
+
+defineExpose({
+	renderMarker,
+	renderCircleMarker,
+	renderSimpleMarker,
+	renderAwesomeMarker,
+	renderPolyline,
+	renderCircle,
+	renderPolygon,
+	renderInfoWindow,
+	openInfoWindow,
+	clearOverlay
+})
+</script>
+
+<style lang="less">
+.aMap {
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	height: 800px;
+
+	input[type=radio] {
+		-webkit-appearance: radio;
+	}
+
+	input[type=checkbox] {
+		-webkit-appearance: checkbox;
+	}
+}
+</style>

snowy-admin-web/src/views/exm/map/aMap.vue

@@ -0,0 +1,143 @@
+<template>
+	<a-map ref="map" api-key="87528cfa68513cbc7574ff94704664fc" @complete="handleComplete"
+		   @marker-click="handleMarkerClick"></a-map>
+</template>
+
+<script setup name="exmAMap">
+import AMap from '@/components/Map/aMap/index.vue'
+
+const map = ref(null)
+
+const handleComplete = () => {
+	console.log('complete')
+
+	// 点标记
+	map.value.renderMarker(
+		[
+			{
+				position: [116.39, 39.9],
+				title: 'TA',
+				content: 'CA',
+				label: {
+					content: 'LCA'
+				}
+			},
+			{
+				position: [116.33, 39.5],
+				title: 'TB',
+				icon: '//vdata.amap.com/icons/b18/1/2.png'
+			}
+		]
+	)
+	// 圆点标记
+	// map.value.renderCircleMarker(
+	// 	[
+	// 		{
+	// 			position: [116.39, 39.9],
+	// 			radius: 30,
+	// 			strokeColor: 'green',
+	// 			fillColor: 'green'
+	// 		},
+	// 		{
+	// 			position: [116.33, 39.5],
+	// 			radius: 10,
+	// 			strokeColor: 'orange',
+	// 			fillColor: 'orange'
+	// 		}
+	// 	]
+	// )
+	// 简单点标记
+	// map.value.renderSimpleMarker(
+	// 	[
+	// 		{
+	// 			position: [116.39, 39.9],
+	// 			label: 'A',
+	// 			labelStyle: {
+	// 				color: '#333',
+	// 				fontSize: '15px'
+	// 			},
+	// 			style: 'green'
+	// 		},
+	// 		{
+	// 			position: [116.33, 39.5],
+	// 			label: 'B',
+	// 			labelStyle: {
+	// 				color: '#555',
+	// 				fontSize: '15px'
+	// 			},
+	// 			style: 'orange'
+	// 		}
+	// 	]
+	// )
+	// 字体点标记
+	// map.value.renderAwesomeMarker(
+	// 	[
+	// 		{
+	// 			position: [116.39, 39.9],
+	// 			awesomeIcon: 'address-book-o',
+	// 			labelStyle: {
+	// 				color: '#333',
+	// 				fontSize: '15px'
+	// 			},
+	// 			style: 'green'
+	// 		},
+	// 		{
+	// 			position: [116.33, 39.5],
+	// 			awesomeIcon: 'anchor',
+	// 			labelStyle: {
+	// 				color: '#333',
+	// 				fontSize: '15px'
+	// 			},
+	// 			style: 'orange'
+	// 		}
+	// 	]
+	// )
+	// 面
+	// map.value.renderPolygon(
+	// 	[
+	// 		{
+	// 			position: [116.39, 39.9]
+	// 		},
+	// 		{
+	// 			position: [116.47, 39.8]
+	// 		},
+	// 		{
+	// 			position: [116.46, 39.7]
+	// 		},
+	// 		{
+	// 			position: [116.35, 39.6]
+	// 		}
+	// 	]
+	// )
+	// 信息窗体
+	map.value.renderInfoWindow(
+		[
+			{
+				position: [116.39, 39.9],
+				content: [
+					"<div style='padding:0'><b>Snowy-小诺开源技术</b>",
+					"网站 : https://www.xiaonuo.vip",
+					"Snowy是一款国内首例国产密码算法加密框架，采用Vue3.0+AntDesignVue3.0+SpringBoot2.8前后分离技术打造，技术框架与密码的结合，让前后分离‘密’不可分！</div>"
+				]
+			},
+			{
+				position: [116.33, 39.5],
+				content: [
+					"<div style='padding:0'><b>Snowy-小诺开源技术</b>",
+					"网站 : https://www.xiaonuo.vip",
+					"Snowy是一款国内首例国产密码算法加密框架，采用Vue3.0+AntDesignVue3.0+SpringBoot2.8前后分离技术打造，技术框架与密码的结合，让前后分离‘密’不可分！</div>"
+				]
+			}
+		]
+	)
+}
+
+const handleMarkerClick = (position) => {
+	map.value.openInfoWindow(position)
+
+	console.log('marker click', position)
+}
+</script>
+
+<style lang="less">
+</style>