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

【新增】百度地图组件 BMap

pull/147/MERGE
这么诚实 2023-07-28 14:24:53 +08:00 committed by 小诺
parent 7a3b988a44
commit f237abd040
3 changed files with 713 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
snowy-admin-web/src/components/Map/bMap/README.md Normal file
View File

@ -0,0 +1,181 @@
BMap
====
> 百度地图组件，常用于地图展示使用
该组件由 [小诺开源技术](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/bMap/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 |
| rotationAngle | 旋转角度 | Number | 60 |
| tiltAngle | 倾斜角度 | Number | 70 |
| zoom | 地图缩放比例 | Number | 12 |
| mapStyle | 地图样式：个性化地图 | String | |
#### 地图控件
- BMap.ScaleControl：比例尺
- BMap.ZoomControl：缩放
- BMap.LocationControl：定位
- BMap.NavigationControl3D：3D控件
### 事件
| 名称 | 说明 | 参数 | 参数类型 |
|-------------|---------------|----------|-------|
| complete | 当地图初始化完成时触发 | - | - |
| markerClick | 当点击了点覆盖物时触发 | position | Array |
### 方法
| 名称 | 说明 | 参数 | 参数类型 |
|----------------------|-----------|------------------------|-------------------|
| renderMarker | 渲染 点标记 | dataArr | Array |
| renderIconMarker | 渲染 图标标记 | dataArr | Array |
| render3DCircleMarker | 渲染 3D圆点标记 | dataArr | Array |
| render3DIconMarker | 渲染 3D图标标记 | dataArr | Array |
| renderPolyline | 渲染 线 | dataArr,option | Array,JSON |
| renderCircle | 渲染 圆 | position,radius,option | Array,Number,JSON |
| renderPolygon | 渲染 面 | dataArr,option | Array,JSON |
| renderInfoWindow | 渲染 信息窗体 | dataArr | Array |
| openInfoWindow | 打开 信息窗体 | position | Array |
| clearOverlay | 清理 覆盖物 | | |
### 方法参数```dataArr```结构
> 点标记
```json
[{
"position": "坐标数组",
"title": "鼠标滑过点标记时的文字提示"
}]
```
> 图标标记
```json
[{
"position": "坐标数组",
"title": "鼠标滑过点标记时的文字提示",
"img": "图片地址",
"imgWidth": "图片宽度，默认40",
"imgHeight": "图片高度，默认40"
}]
```
> 3D圆点标记
```json
[{
"position": "坐标数组",
"height": "高度，默认8000",
"size": "大小，默认50",
"fillColor": "填充颜色，默认#006600"
}]
```
> 3D图标标记
```json
[{
"position": "坐标数组",
"height": "高度，默认8000",
"size": "大小，默认50",
"img": "图片地址",
"imgWidth": "图片宽度，默认40",
"imgHeight": "图片高度，默认40"
}]
```
> 线、面
```json
[{
"position": "坐标数组"
}]
```
> 信息窗体
```json
[{
"position": "坐标数组",
"title": "标题",
"content": "内容，文本数组，会以换行进行连接",
"width": "窗体宽度",
"height": "窗体高度"
}]
```
### 方法参数```option```结构
> 线、圆
```json
{
"strokeColor": "边线颜色，默认blue",
"strokeWeight": "边线宽度，默认2",
"strokeOpacity": "边线透明度，默认0.5"
}
```
> 面
```json
{
"strokeColor": "边线颜色，默认blue",
"strokeWeight": "边线宽度，默认2",
"strokeOpacity": "边线透明度，默认0.5",
"fillColor": "填充颜色，默认blue",
"fllOpacity": "填充透明度，默认0.5"
}
```
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

402
snowy-admin-web/src/components/Map/bMap/index.vue Normal file
View File

@ -0,0 +1,402 @@
<template>
<div class="bMap">
<div :id="`container-${mid}`" style="width: 100%;height: 100%;">
地图资源加载中...
</div>
</div>
</template>
<!--BMapGL官网：https://lbsyun.baidu.com/index.php?title=jspopularGL-->
<script setup name="BMap">
import {onMounted, onUnmounted, shallowRef} from "vue"
const props = defineProps(
{
mid: {
type: Number,
default: new Date().getTime()
},
apiKey: {
type: String,
required: true
},
center: {
type: Array
},
plugins: {
type: Array,
default: [
'BMap.ScaleControl',
'BMap.ZoomControl',
'BMap.LocationControl',
'BMap.NavigationControl3D'
]
},
viewMode: {
type: String,
default: '3D',
validator(value) {
return ['2D', '3D'].includes(value)
}
},
rotationAngle: {
type: Number,
default: 60
},
tiltAngle: {
type: Number,
default: 70
},
zoom: {
type: Number,
default: 12
},
mapStyle: {
type: String
}
}
)
const emits = defineEmits(['complete', 'markerClick'])
const bMap = shallowRef(null)
const bMapPointArr = ref([])
const bMapInfoWindowObj = ref({})
const init = () => {
// 创建script脚本 引入api
const script = document.createElement('script')
script.src = `https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=${props.apiKey}&callback=initMap`
// 加入head 加载api
const head = document.getElementsByTagName('head')[0]
head.appendChild(script)
}
/**
* 初始化 地图
*/
window.initMap = () => {
bMap.value = new BMapGL.Map(`container-${props.mid}`)
// 滚轮放大缩小
bMap.value.enableScrollWheelZoom(true)
// 地图样式：个性化地图
if (props.mapStyle) {
bMap.setMapStyleV2(props.mapStyle)
}
// 控件
props.plugins.length > 0 && initControlPlugin()
// 中心点
if (props.center) {
setFitView(new BMapGL.Point(props.center[0], props.center[1]))
// 地图初始化完成
emits('complete')
} else {
// 浏览器定位
new BMapGL.Geolocation().getCurrentPosition((r) => {
if (r) {
setFitView(new BMapGL.Point(r.longitude, r.latitude))
} else {
console.error('getCurrentPosition fail', r)
setFitView()
}
// 地图初始化完成
emits('complete')
})
}
}
/**
* 初始化 控制控件
*/
const initControlPlugin = () => {
// 比例尺
props.plugins.includes('BMap.ScaleControl') && bMap.value.addControl(new BMapGL.ScaleControl())
// 缩放
props.plugins.includes('BMap.ZoomControl') && bMap.value.addControl(new BMapGL.ZoomControl())
// 定位
props.plugins.includes('BMap.LocationControl') && bMap.value.addControl(new BMapGL.LocationControl())
// 3D控件
props.plugins.includes('BMap.NavigationControl3D') && bMap.value.addControl(new BMapGL.NavigationControl3D())
}
/**
* 渲染 点标记
* @param dataArr
*/
const renderMarker = (dataArr) => {
dataArr.forEach(d => {
const point = new BMapGL.Point(d.position[0], d.position[1])
const marker = new BMapGL.Marker(
// 坐标
point,
{
// 鼠标滑过点标记时的文字提示
title: d.title
}
)
marker.addEventListener('click', () => {
emits('markerClick', d.position)
})
bMap.value.addOverlay(marker)
bMapPointArr.value.push(point)
})
setFitView()
}
/**
* 渲染 图标标记
* @param dataArr
*/
const renderIconMarker = (dataArr) => {
dataArr.forEach(d => {
const point = new BMapGL.Point(d.position[0], d.position[1])
const marker = new BMapGL.Marker(
// 坐标
point,
{
// 鼠标滑过点标记时的文字提示
title: d.title,
// 图标对象
icon: new BMapGL.Icon(d.img,
new BMapGL.Size(d.imgWidth ? d.imgWidth : 40, d.imgHeight ? d.imgHeight : 40)
)
}
)
marker.addEventListener('click', () => {
emits('markerClick', d.position)
})
bMap.value.addOverlay(marker)
bMapPointArr.value.push(point)
})
setFitView()
}
/**
* 渲染 3D圆点标记
* @param dataArr
*/
const render3DCircleMarker = (dataArr) => {
dataArr.forEach(d => {
const point = new BMapGL.Point(d.position[0], d.position[1])
const marker = new BMapGL.Marker3D(
// 坐标
point,
// 高度，默认8000
d.height ? d.height : 8000,
// 自定义样式
{
// 大小，默认50
size: d.size ? d.size : 50,
// 形状，默认圆形
shape: 'BMAP_SHAPE_CIRCLE',
// 填充颜色
fillColor: d.fillColor ? d.fillColor : '#006600',
// 填充透明度
fillOpacity: 0.5
}
)
marker.addEventListener('click', () => {
emits('markerClick', d.position)
})
bMap.value.addOverlay(marker)
bMapPointArr.value.push(point)
})
setFitView()
}
/**
* 渲染 3D图标标记
* @param dataArr
*/
const render3DIconMarker = (dataArr) => {
dataArr.forEach(d => {
const point = new BMapGL.Point(d.position[0], d.position[1])
const marker = new BMapGL.Marker3D(
// 坐标
point,
// 高度，默认8000
d.height ? d.height : 8000,
// 自定义样式
{
// 大小，默认50
size: d.size ? d.size : 50,
// 图标对象
icon: new BMapGL.Icon(d.img,
new BMapGL.Size(d.imgWidth ? d.imgWidth : 40, d.imgHeight ? d.imgHeight : 40)
)
}
)
marker.addEventListener('click', () => {
emits('markerClick', d.position)
})
bMap.value.addOverlay(marker)
bMapPointArr.value.push(point)
})
setFitView()
}
/**
* 渲染 线
* @param dataArr
* @param option
*/
const renderPolyline = (dataArr, option = {}) => {
dataArr.forEach(d => {
bMapPointArr.value.push(new BMapGL.Point(d.position[0], d.position[1]))
})
const polyline = new BMapGL.Polyline(bMapPointArr.value, {
stokeStyle: 'solid',
strokeColor: option.strokeColor || 'blue',
strokeWeight: option.strokeWeight || 2,
strokeOpacity: option.strokeOpacity || 0.5
})
bMap.value.addOverlay(polyline)
setFitView()
}
/**
* 渲染 圆
* @param position
* @param radius
* @param option
*/
const renderCircle = (position, radius, option = {}) => {
const point = new BMapGL.Point(position[0], position[1])
bMapPointArr.value.push(point)
const circle = new BMapGL.Circle(
point,
radius ? radius : 500,
{
strokeColor: option.strokeColor || 'blue',
strokeWeight: option.strokeWeight || 2,
strokeOpacity: option.strokeOpacity || 0.5
})
bMap.value.addOverlay(circle)
setFitView()
}
/**
* 渲染 面
* @param dataArr
* @param option
*/
const renderPolygon = (dataArr, option = {}) => {
dataArr.forEach(d => {
bMapPointArr.value.push(new BMapGL.Point(d.position[0], d.position[1]))
})
const polygon = new BMapGL.Polygon(bMapPointArr.value, {
stokeStyle: 'solid',
strokeColor: option.strokeColor || 'blue',
strokeWeight: option.strokeWeight || 2,
strokeOpacity: option.strokeOpacity || 0.5,
fillColor: option.fillColor || 'blue',
fllOpacity: option.fllOpacity || 0.5
})
bMap.value.addOverlay(polygon)
setFitView()
}
/**
* 设置 视图级别
* @param point
*/
const setFitView = (point) => {
if (!point) {
const viewPort = bMap.value.getViewport(bMapPointArr.value)
point = new BMapGL.Point(viewPort.center.lng, viewPort.center.lat)
}
bMap.value.centerAndZoom(point, props.zoom)
// 3D视图
if (props.viewMode === '3D') {
// 地图旋转角度
bMap.value.setHeading(props.rotationAngle)
// 地图倾斜角度
bMap.value.setTilt(props.tiltAngle)
}
}
/**
* 渲染 信息窗体
* @param dataArr
*/
const renderInfoWindow = (dataArr) => {
dataArr.forEach(d => {
bMapInfoWindowObj.value[d.position] = new BMapGL.InfoWindow(
d.content.join('<br>'),
{
title: d.title,
width: d.width ? d.width : 250,
height: d.height ? d.height : 100
}
)
})
}
/**
* 打开 信息窗体
* @param position
*/
const openInfoWindow = (position) => {
const infoWindow = bMapInfoWindowObj.value[position]
if (infoWindow) {
bMap.value.openInfoWindow(infoWindow, new BMapGL.Point(position[0], position[1]))
}
}
/**
* 清理 覆盖物
*/
const clearOverlay = () => {
bMap.value.clearOverlays()
}
onMounted(() => {
init()
})
onUnmounted(() => {
bMap.value && bMap.value.destroy()
})
defineExpose({
renderMarker,
renderIconMarker,
render3DCircleMarker,
render3DIconMarker,
renderPolyline,
renderCircle,
renderPolygon,
renderInfoWindow,
openInfoWindow,
clearOverlay
})
</script>
<style lang="less">
.bMap {
padding: 0;
margin: 0;
width: 100%;
height: 800px;
}
</style>

130
snowy-admin-web/src/views/exm/map/bMap.vue Normal file
View File

@ -0,0 +1,130 @@
<template>
<b-map ref="map" api-key="NtTydKuftIVXAy526uWXZoHS86lg0KeW" @complete="handleComplete"
@marker-click="handleMarkerClick"></b-map>
</template>
<script setup name="exmBMap">
import BMap from '@/components/Map/bMap/index.vue'
const map = ref(null)
const handleComplete = () => {
console.log('complete')
// 点标记
map.value.renderMarker(
[
{
position: [116.39, 39.9],
title: 'BI'
},
{
position: [116.33, 39.5],
title: 'BI-2'
}
]
)
// 图标点标记
// map.value.renderIconMarker(
// [
// {
// position: [116.39, 39.9],
// title: 'BI',
// img: 'https://webmap0.bdimg.com/image/api/bg.png',
// imgWidth: 40,
// imgHeight: 40
// },
// {
// position: [116.33, 39.5],
// title: 'BI-2',
// img: 'https://webmap0.bdimg.com/image/api/bg.png'
// }
// ]
// )
// 3D圆点标记
// map.value.render3DCircleMarker(
// [
// {
// position: [116.39, 39.9],
// height: 7000,
// size: 40
// },
// {
// position: [116.33, 39.5],
// height: 7000,
// size: 40
// }
// ]
// )
// 3D图标标记
// map.value.render3DIconMarker(
// [
// {
// position: [116.39, 39.9],
// height: 7000,
// size: 40,
// img: 'https://webmap0.bdimg.com/image/api/bg.png',
// imgWidth: 40,
// imgHeight: 40
// },
// {
// position: [116.33, 39.5],
// height: 7000,
// img: 'https://webmap0.bdimg.com/image/api/bg.png'
// }
// ]
// )
// 面
// 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],
title: 'Snowy-小诺开源技术',
content: [
"<div style='padding:0'>",
"网站 : https://www.xiaonuo.vip",
"Snowy是一款国内首例国产密码算法加密框架，采用Vue3.0+AntDesignVue3.0+SpringBoot2.8前后分离技术打造，技术框架与密码的结合，让前后分离‘密’不可分！</div>"
]
},
{
position: [116.33, 39.5],
title: 'Snowy-小诺开源技术',
content: [
"<div style='padding:0'>",
"网站 : https://www.xiaonuo.vip",
"Snowy是一款国内首例国产密码算法加密框架，采用Vue3.0+AntDesignVue3.0+SpringBoot2.8前后分离技术打造，技术框架与密码的结合，让前后分离‘密’不可分！</div>"
],
width: 300,
height: 200
}
]
)
}
const handleMarkerClick = (position) => {
map.value.openInfoWindow(position)
console.log('marker click', position)
}
</script>
<style lang="less">
</style>