Vue中使用Vuebaidumap多点覆盖(自定义图标)
vue中使用vue-baidu-map
·
引包不用我多说了把
官方文档
Vue Baidu Map (dafrok.github.io)
https://dafrok.github.io/vue-baidu-map/#/zh/index
npm
$ npm install vue-baidu-map --save引入
<script src="https://unpkg.com/vue-baidu-map"></script>上代码
以下代码仅供参考，如有不足可以指出，谢谢
<baidu-map ak="你的ak码"
:zoom="zoom"
:center="center"
style="height: 100vh;width: 100%;touch-action: pan-y"
:scroll-wheel-zoom="true"
:pinch-to-zoom="true"
:auto-resize="true"
:keyboard="true"
:min-zoom="9"
@zoomend="zoomEnd"
@ready="setDistanceToolInstance">
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
<bm-boundary :name="STNM"
:stroke-weight="2"
:stroke-opacity="1"
:fill-opacity="0.000000000000000000000000001"
stroke-color="blue" />
<template v-for="item,key in points">
<bm-marker v-if="STNM ==='邢台市'?true:item.ADDVCDNAME === STNM?true:false"
:key="key"
:position="{ lng: item.LGTD, lat: item.LTTD }"
:icon="{
url: item.url,
size: { width: 12, height: 10 },
}"
:dragging="true"
:raise-on-drag="true"
:top="true"
:title="item.STNM"
@click="lookDetail(item)"
@dragstart="dragstart(item.STCD,item.STNM,item.LGTD,item.LTTD)"
@dragend="dragend">
<bm-label :content="item.content"
:label-style="labelStyle"
:offset="{width: 12, height: -5}"
@click="lookDetail(item)" />
<bm-label v-if="item.DRP>180"
:label-style="{ border: '0', background: 'transparent'}"
:content="animationcontent"
:title="item.STNM"
:offset="{width: -15, height: -62}" />
</bm-marker>
</template>
<!-- 信息窗口 -->
<bm-info-window :position="infoWindow.info"
:show="infoWindow.show"
@close="infoWindow.show = false"
@open="infoWindow.show = true">
<div class="info-window">
<table class="tb">
<tr>
<td colspan="2"><span>
{{ infoWindow.row.STNM }}
{{ infoWindow.row.STCD }}
</span></td>
</tr>
<tr>
<td colspan="2"><span>基本信息</span></td>
</tr>
<tr>
<td><span>累计雨量:</span></td>
<td>
{{ infoWindow.row.DRP }}
</td>
</tr>
<tr>
<td><span>数据时间:</span></td>
<td>
{{ infoWindow.row.TIME }}
</td>
</tr>
<tr>
<td><span>最近小时量:</span></td>
<td>
{{ infoWindow.row.DRP1H }}
</td>
</tr>
</table>
<div class="detail">
<!-- 雨量站 -->
<a v-if="infoWindow.row.TYPE==='1'"
href="#"
@click="handClickwindow('rain',infoWindow.row.STNM)">雨量详情</a>
<!-- 水位站 -->
<div v-if="infoWindow.row.TYPE==='2'">
<a v-if="infoWindow.row.STTP.indexOf('Z') !== -1"
href="#"
@click="handClickwindow('watercourse',infoWindow.row.STNM)">河道详情</a>
<a v-else-if="infoWindow.row.STTP.indexOf('R') !== -1"
href="#"
@click="handClickwindow('reservoir',infoWindow.row.STNM)">水库详情</a>
<a v-else
href="#"
@click="handClickwindow('watercourse',infoWindow.row.STNM)">河道详情</a>
</div>
<!-- 水文站 -->
<div v-if="infoWindow.row.TYPE==='3'">
<div v-if="infoWindow.row.STTP.indexOf('P') !== -1 && infoWindow.row.STTP.indexOf('Z') !== -1">
<a href="#"
@click="handClickwindow('rain',infoWindow.row.STNM)">雨量详情</a>
<a href="#"
@click="handClickwindow('watercourse',infoWindow.row.STNM)">河道详情</a>
</div>
<div v-else-if="infoWindow.row.STTP.indexOf('P') !== -1 && infoWindow.row.STTP.indexOf('R') !== -1">
<a href="#"
@click="handClickwindow('rain',infoWindow.row.STNM)">雨量详情</a>
<a href="#"
@click="handClickwindow('reservoir',infoWindow.row.STNM)">水库详情</a>
</div>
<div v-else>
<a href="#"
@click="handClickwindow('rain',infoWindow.row.STNM)">雨量详情</a>
<a href="#"
@click="handClickwindow('watercourse',infoWindow.row.STNM)">河道详情</a>
</div>
</div>
</div>
</div>
</bm-info-window>
</baidu-map>import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmMarker, BmInfoWindow, BmLabel, BmBoundary, BmScale } from 'vue-baidu-map'
import DistanceTool from 'bmaplib.distancetool'
unmount () {
DistanceTool && DistanceTool.close()
},
components: {
BaiduMap,
BmMarker,
BmInfoWindow,
BmLabel,
BmBoundary,
BmScale
}
data(){
return
{
// 地图
map: null,
zoom: 10, // 缩放
center: { lng: 115, lat: 37.0505311969 }, // 选中焦点
infoWindow: {
info: {
lng: '',
lat: ''
},
show: false,
row: {
TYPE: '',
STTP: '',
STNM: '',
STCD: '',
DRP: '',
TIME: '',
DRP1H: '',
LGTD: '',
LTTD: '',
url: null
}
}, // 窗体参数
labelStyle: {
display: 'none',
color: 'black',
border: '0',
height: '20px',
lineHeight: '20px',
fontSize: '12px',
background: 'transparent'
}, // label样式
lableContent: '', // 标签模板
animationcontent: "<div class='circleBox'><div class='circle'></div><div class='circle1'></div><div class='circle2'></div><div class='circle3'></div></div >",
points: [], // 点数据
dialogTitle: '', // 标题
rainDialogVisible: false,
reservoirDialogVisible: false,
watercourseDialogVisible: false,
dragThePoint: null// 拖拽点
}
}这里的data可以自己定义
methods:{
// 地图
async GetAllMapData () {
this.loading = true
const data = {
begtime: '2021-04-01',
endtime: '2021-07-15'
}
try {
this.points = []
this.options = [] // 政区
const { data: res } = await GetAllMapData(data)
console.log(res.data)
await res.MapDatas.forEach(item => {
// 将null的数据替换为'--'
item.W = item.W === null ? '--' : item.W
item.Z = item.Z === null ? '--' : item.Z
item.DRP = item.DRP === null ? '--' : item.DRP
// 图标判断
if (item.TYPE === '1') { // 雨量站
// 图标
if (item.DRP === 0 || item.DRP === '--') {
item.url = require('@/assets/img/icon-y-0.png')
} else if (item.DRP > 0 && item.DRP <= 10) {
item.url = require('@/assets/img/icon-y-10.png')
} else if (item.DRP > 10 && item.DRP <= 25) {
item.url = require('@/assets/img/icon-y-25.png')
} else if (item.DRP > 25 && item.DRP <= 50) {
item.url = require('@/assets/img/icon-y-50.png')
} else if (item.DRP > 50 && item.DRP <= 100) {
item.url = require('@/assets/img/icon-y-100.png')
} else if (item.DRP > 100) {
item.url = require('@/assets/img/icon-y-max.png')
} else {
// 默认黄色
item.con = require('@/assets/img/icon-y-0.png')
}
// 文本标注
item.content = item.STNM + '<table class="label"><tr style="background-color:#FFD700"><td>P:' + item.DRP + '</td></tr></table>'
} else if (item.TYPE === '2') { // 水位站
// 图标
item.url = require('@/assets/img/icon-s-10.png')
// 文本标注
if (item.STTP.indexOf('Z') !== -1) {
item.content = item.STNM + '<table class="label"><tr style="background-color:#FFD700"><td>Z:' + item.Z + '</td></tr></table>'
} else if (item.STTP.indexOf('R') !== -1) {
// 水库水位
item.content = item.STNM + '<table class="label"><tr style="background-color:#008000"><td>R:' + item.W + '</td></tr></table>'
} else {
// 默认河道水位Z
item.content = item.STNM + '<table class="label"><tr style="background-color:#FFD700"><td>Z:' + item.Z + '</td></tr></table>'
}
} else if (item.TYPE === '3') { // 水文站
// 图标
if (item.DRP === 0 || item.DRP === '--') {
item.url = require('@/assets/img/icon-z-0.png')
} else if (item.DRP > 0 && item.DRP <= 10) {
item.url = require('@/assets/img/icon-z-10.png')
} else if (item.DRP > 10 && item.DRP <= 25) {
item.url = require('@/assets/img/icon-z-25.png')
} else if (item.DRP > 25 && item.DRP <= 50) {
item.url = require('@/assets/img/icon-z-50.png')
} else if (item.DRP > 50 && item.DRP <= 100) {
item.url = require('@/assets/img/icon-z-100.png')
} else if (item.DRP > 100) {
item.url = require('@/assets/img/icon-z-max.png')
}
// 文本标注
if (item.STTP === 'PZ') {
// 河道雨量
item.content =
item.STNM +
'<table class="label"><tr style="background-color:#FFD700"><td>P:' +
item.DRP +
'</td></tr><tr style="background-color:#00FFFF"><td>Z:' +
item.Z +
'</td></tr></table>'
} else if (item.STTP === 'PR') {
// 水库雨量
item.content =
item.STNM +
'<table class="label"><tr style="background-color:#FFD700"><td>P:' +
item.DRP +
'</td></tr><tr style="background-color:#00FFFF"><td>R:' +
item.W +
'</td></tr></table>'
} else {
// 河道雨量
item.content =
item.STNM +
'<table class="label"><tr style="background-color:#FFD700"><td>P:' +
item.DRP +
'</td></tr><tr style="background-color:#00FFFF"><td>Z:' +
item.Z +
'</td></tr></table>'
}
}
if (item.url) {
this.points.push(item)
}
// 筛选下拉数据
if (!this.options.find(i => i.label === item.ADDVCDNAME)) {
this.options.push({ label: item.ADDVCDNAME, value: item.ADDVCDNAME })
}
})
// this.options=res.
} catch (error) {
this.$message.error(error)
} finally {
this.loading = false
}
},
zoomEnd (e) {
this.zoom = e.target.getZoom()
if (this.zoom >= 13) {
this.labelStyle.display = 'block'
console.log(this.labelStyle)
} else {
this.labelStyle.display = 'none'
}
},
// 打开信息窗口
async lookDetail (item) {
console.log(item)
if (item.type) {
const obj = await this.points.find(i => i.STCD === item.STCD && i.STNM === item.STNM && i.ADDVCDNAME === item.ADNM)
if (obj) {
this.infoWindow.row = obj
this.infoWindow.info.lng = obj.LGTD
this.infoWindow.info.lat = obj.LTTD
} else {
this.$message.warning('没有此站!')
}
} else {
this.infoWindow.row = item
this.infoWindow.info.lng = item.LGTD
this.infoWindow.info.lat = item.LTTD
}
this.infoWindow.show = true
},
// 点击出现弹窗
handClickwindow (type, STNM) {
// 赋值
this.dialogTitle = STNM
if (type === 'rain') { // 雨量
this.rainDialogVisible = true
} else if (type === 'reservoir') { // 水库
this.reservoirDialogVisible = true
} else { // 河道
this.watercourseDialogVisible = true
}
},
async dragstart (STCD, STNM, LGTD, LTTD) {
this.dragThePoint = await this.points.findIndex(i => i.STCD === STCD && i.STNM === STNM && i.LGTD === LGTD && i.LTTD === LTTD)
},
dragend (event) {
if (this.dragThePoint) {
this.points[this.dragThePoint]
this.points[this.dragThePoint].LGTD = event.point.lng
this.points[this.dragThePoint].LTTD = event.point.lat
} else {
this.$message.error('查找测站错误！')
}
},
setDistanceToolInstance ({ map }) {
this.distanceTool = new DistanceTool(map, { lineStroke: 2 })
},
openDistanceTool () {
const { distanceTool } = this
distanceTool && distanceTool.open()
}
}css
.bg {
display: initial;
}
.bg span {
padding: 0 25px;
margin: 0 3px;
}
.zhi {
position: relative;
bottom: 50px;
left: 85px;
height: 10px;
}
.zhi span {
padding: 0 20px;
font-size: 15px;
}
/* 表格 */
.tb {
border-collapse: collapse;
}
.tb tr td span {
font-weight: bold;
text-align: left;
}
.tb tr td {
width: 98px;
text-align: center;
}
.tb {
border-collapse: collapse;
}
.tb tr td span {
font-weight: bold;
text-align: left;
}
.tb tr td {
width: 98px;
text-align: center;
border: 1px solid black;
}
.detail {
margin: 3px 0;
}
.detail a {
padding: 0 5px;
color: #66b1ff;
}
.detail a:hover {
color: red;
}
.label {
border-collapse: collapse;
}
.label tr td {
text-align: center;
border: 1px solid black;
}
/* 动画 */
.circleBox {
position: relative;
width: 10;
height: 10;
margin: 10px auto;
}
/* 扩散动画 */
.circle,
.circle1,
.circle2,
.circle3 {
width: 10px;
height: 10px;
background: rgba(255, 001, 002, 0.75);
border: 1px solid rgba(255, 001, 002, 0.85);
border-radius: 100%;
position: absolute;
top: 50px;
left: 15px;
}
.circle1,
.circle2,
.circle3 {
/* animation: circleChange 2s 1s ease-out infinite; */
animation-name: circleChange;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.circle1 {
animation-delay: 1s;
}
.circle2 {
animation-delay: 2s;
}
.circle3 {
animation-delay: 3s;
}
@keyframes circleChange {
0% {
transform: scale(1);
opacity: 0.95;
}
25% {
transform: scale(2);
opacity: 0.75;
}
50% {
transform: scale(3);
opacity: 0.5;
}
75% {
transform: scale(4);
opacity: 0.25;
}
100% {
transform: scale(5);
opacity: 0.05;
}
}
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献6条内容
所有评论(0)