gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【新增】高德地图组件 AMap

pull/147/MERGE
这么诚实 2023-07-28 14:23:56 +08:00 committed by 小诺
parent 154d2e1675
commit 7a3b988a44
4 changed files with 752 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
snowy-admin-web/package.json
View File

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

198
snowy-admin-web/src/components/Map/aMap/README.md Normal file
View File

@ -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"
}
```

410
snowy-admin-web/src/components/Map/aMap/index.vue Normal file
View File

@ -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>

143
snowy-admin-web/src/views/exm/map/aMap.vue Normal file
View File

@ -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>