367 lines
10 KiB
Vue
367 lines
10 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar is-back="false" :title="title" :border-bottom="false" :background="bgc" title-color='#000'
|
|
title-size='36' :title-bold='true' height='45' id="navbar">
|
|
</u-navbar>
|
|
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
|
:show-location='true' :markers="covers" @markertap="handleMarkerClick"></map>
|
|
|
|
<view class="fxtongji">
|
|
<view class="one">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uB2k1NNeN2QUuSZIAf5r" mode=""></image>
|
|
<text class="wz">蜂场</text>
|
|
<text class="shu">{{listmap.length}}</text>
|
|
</view>
|
|
<view class="two">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image>
|
|
<text class="wz">蜂箱</text>
|
|
<text class="shu">{{listmaps.length}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<tab-bar :indexs='3' style=""></tab-bar>
|
|
<!-- <span style="">福鼎蜂场</span> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: " #F4FAF8",
|
|
},
|
|
title: "地图",
|
|
latitude: '',
|
|
longitude: '',
|
|
isMap: false,
|
|
zoomSize: 15,
|
|
markers: [],
|
|
jinweidu:'',
|
|
covers: [],
|
|
mapContext: null,
|
|
mapScaleInterval: null,
|
|
listmap:[],
|
|
listmaps:[]
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.getMyLocation()
|
|
this.getMyLocations()
|
|
},
|
|
onReady() {
|
|
this.mapContext = uni.createMapContext('map', this)
|
|
this.mapScaleInterval = setInterval(this.updateMarkers, 1000)
|
|
},
|
|
beforeDestroy() {
|
|
if (this.mapScaleInterval) {
|
|
clearInterval(this.mapScaleInterval)
|
|
this.mapScaleInterval = null
|
|
}
|
|
},
|
|
methods: {
|
|
// 点击地图图标
|
|
handleMarkerClick(e) {
|
|
console.log(e.markerId);
|
|
},
|
|
|
|
getMyLocations() {
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: (res) => {
|
|
this.jinweidu = res.longitude + ',' + res.latitude
|
|
this.latitude = Number(res.latitude.toFixed(5)) - 0.004
|
|
this.longitude = Number(res.longitude.toFixed(5)) + 0.004
|
|
// this.setMapScale()
|
|
this.$u.get("/farm/beehive/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(
|
|
res => {
|
|
if (res.code == 200) {
|
|
this.listmaps = res.data
|
|
res.data.forEach(item => {
|
|
this.covers.push({
|
|
id: parseFloat(item.beehiveId),
|
|
latitude: item.lat,
|
|
longitude: item.lng,
|
|
width: 25,
|
|
height: 30,
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
|
|
label: {
|
|
content: item.name,
|
|
anchorX: (() => {
|
|
if (item.name.length <= 2) {
|
|
return -12
|
|
} else if (item.name.length <= 3) {
|
|
return -20
|
|
} else if (item.name.length <= 4) {
|
|
return -25
|
|
} else if (item.name.length <= 5) {
|
|
return -30
|
|
} else if (item.name.length <= 6) {
|
|
return -35
|
|
} else if (item.name.length <= 8) {
|
|
return -40
|
|
} else if (item.name.length <=
|
|
10) {
|
|
return -45
|
|
} else {
|
|
return -item.name.length * 5
|
|
}
|
|
})(),
|
|
fontWeight: 700,
|
|
color: '#FFCC25',
|
|
textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
|
|
borderColor:'#fff',
|
|
borderRadius:5,
|
|
}
|
|
})
|
|
// this.covers.push(shopCover)
|
|
});
|
|
}
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
console.error('获取位置失败：', err)
|
|
}
|
|
});
|
|
},
|
|
|
|
getMyLocation() {
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: (res) => {
|
|
this.jinweidu = res.longitude + ',' + res.latitude
|
|
this.latitude = Number(res.latitude.toFixed(5)) - 0.004
|
|
this.longitude = Number(res.longitude.toFixed(5)) + 0.004
|
|
this.$u.get("/farm/apiary/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(
|
|
res => {
|
|
if (res.code == 200) {
|
|
this.listmap = res.data
|
|
res.data.forEach(item => {
|
|
this.covers.push({
|
|
id: parseFloat(item.apiaryId),
|
|
latitude: item.lat,
|
|
longitude: item.lng,
|
|
width: 25,
|
|
height: 30,
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
|
label: {
|
|
content: item.name,
|
|
anchorX: (() => {
|
|
if (item.name.length <= 2) {
|
|
return -12
|
|
} else if (item.name.length <= 3) {
|
|
return -20
|
|
} else if (item.name.length <= 4) {
|
|
return -25
|
|
} else if (item.name.length <= 5) {
|
|
return -30
|
|
} else if (item.name.length <= 6) {
|
|
return -35
|
|
} else if (item.name.length <= 8) {
|
|
return -40
|
|
} else if (item.name.length <=
|
|
10) {
|
|
return -45
|
|
} else {
|
|
return -item.name.length * 5
|
|
}
|
|
})(),
|
|
fontWeight: 700,
|
|
color: '#FFCC25',
|
|
textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
|
|
borderColor:'#fff',
|
|
borderRadius:5,
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
console.error('获取位置失败：', err)
|
|
}
|
|
});
|
|
},
|
|
// 缩放显示隐藏
|
|
updateMarkers() {
|
|
this.mapContext.getScale({
|
|
success: (res) => {
|
|
this.covers = []
|
|
if (res.scale <= 14) {
|
|
this.addMarkersWithoutLabels()
|
|
} else {
|
|
this.addMarkersWithLabels()
|
|
}
|
|
},
|
|
fail: (error) => {
|
|
// console.error('获取地图缩放级别失败：', error);
|
|
},
|
|
});
|
|
},
|
|
addMarkersWithoutLabels() {
|
|
this.listmap.forEach((item) => {
|
|
this.covers.push({
|
|
id: parseFloat(item.storeId),
|
|
latitude: item.lat,
|
|
longitude: item.lng,
|
|
width: 25,
|
|
height: 30,
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
|
borderColor:'#fff',
|
|
borderRadius:5,
|
|
// bgColor: 'rgba(255, 255, 255, 0.7)'
|
|
})
|
|
// this.covers.push(shopCover)
|
|
});
|
|
this.listmaps.forEach((item) => {
|
|
this.covers.push({
|
|
id: parseFloat(item.storeId),
|
|
latitude: item.lat,
|
|
longitude: item.lng,
|
|
width: 25,
|
|
height: 30,
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
|
|
borderColor:'#fff',
|
|
borderRadius:5,
|
|
// bgColor: 'rgba(255, 255, 255, 0.7)'
|
|
})
|
|
// this.covers.push(shopCover)
|
|
});
|
|
},
|
|
addMarkersWithLabels() {
|
|
this.listmap.forEach((item) => {
|
|
this.covers.push({
|
|
id: parseFloat(item.storeId),
|
|
latitude: item.lat,
|
|
longitude: item.lng,
|
|
width: 25,
|
|
height: 30,
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
|
label: {
|
|
content: item.name,
|
|
anchorX: this.calculateAnchorX(item.name),
|
|
fontWeight: 700,
|
|
color: '#FFCC25',
|
|
textShadow: '2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000',
|
|
rotate: 20,
|
|
borderColor:'#fff',
|
|
borderRadius:5,
|
|
// bgColor: 'rgba(255, 255, 255, 0.7)'
|
|
}
|
|
})
|
|
// this.covers.push(shopCover)
|
|
});
|
|
this.listmaps.forEach((item) => {
|
|
this.covers.push({
|
|
id: parseFloat(item.storeId),
|
|
latitude: item.lat,
|
|
longitude: item.lng,
|
|
width: 25,
|
|
height: 30,
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
|
|
label: {
|
|
content: item.name,
|
|
anchorX: this.calculateAnchorX(item.name),
|
|
fontWeight: 700,
|
|
color: '#FFCC25',
|
|
textShadow: '2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000',
|
|
rotate: 20,
|
|
borderColor:'#fff',
|
|
borderRadius:5,
|
|
// bgColor: 'rgba(255, 255, 255, 0.7)'
|
|
}
|
|
})
|
|
// this.covers.push(shopCover)
|
|
});
|
|
},
|
|
calculateAnchorX(name) {
|
|
let chineseLength = 0;
|
|
let englishLength = 0;
|
|
for (let i = 0; i < name.length; i++) {
|
|
const charCode = name.charCodeAt(i);
|
|
if (charCode >= 0x4e00 && charCode <= 0x9fa5) {
|
|
chineseLength++;
|
|
} else if (/[a-zA-Z]/.test(name[i])) {
|
|
englishLength = englishLength + 0.3
|
|
}
|
|
}
|
|
const totalLength = chineseLength + englishLength * 2
|
|
return -totalLength * 7
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #FAFDFD;
|
|
}
|
|
|
|
.page {
|
|
// position: relative;
|
|
width: 750rpx;
|
|
.fxtongji{
|
|
position: fixed;
|
|
top: 15vh;
|
|
right: 50rpx;
|
|
z-index: 99;
|
|
.one{
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: rgba(191, 191, 191, 0.4);
|
|
padding: 4rpx 20rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 30rpx;
|
|
.wz{
|
|
color: #3D3D3D;
|
|
font-size: 32rpx;
|
|
margin: 0 15rpx;
|
|
font-weight: 600;
|
|
}
|
|
.shu{
|
|
color: #FFC107;
|
|
font-size: 32rpx;
|
|
}
|
|
image{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
.two{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
background-color: rgba(191, 191, 191, 0.4);
|
|
padding: 4rpx 20rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 30rpx;
|
|
.wz{
|
|
color: #3D3D3D;
|
|
font-size: 32rpx;
|
|
margin: 0 15rpx;
|
|
font-weight: 600;
|
|
}
|
|
.shu{
|
|
color: #FFC107;
|
|
font-size: 32rpx;
|
|
}
|
|
image{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
.map {
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
</style> |