<template>
<view class="content">
<!-- <image src="../../static/a11.png" mode=""></image> -->
<!-- 地图 -->
<map class="map" id="map" ref="map" style="width: 100%; height: 100%;" :scale="zoomSize" :latitude="latitude"
:longitude="longitude" :markers="markers" :enable-satellite="isMap" show-location>
</map>
<view class="rightTool">
<view @click="fengchang" class="right_tool_item">蜂场：<text style="color: #23693F;">{{fengchangNumber}}</text>
</view>
<view @click="fengxiang" class="right_tool_item">蜂箱：<text style="color: #23693F;">{{fengxiangNumber}}</text>
</view>
</view>
</view>
</template>
<script>
import request from '../../utils/request'
export default {
name: "feature",
data() {
return {
fengchangNumber: 0,
fengxiangNumber: 0,
listData: [],
latitude: '',
longitude: '',
isMap: false,
zoomSize: 15,
fclist: [],
markers: [
{
// latitude:27.105794,
// longitude:120.256882,
// width: 20,
// height: 30,
// id: 0,
// iconPath: '../../static/aa1.png',
}
],
}
},
onShow() {
this.markers = []
this.getLocation()
this.listDataFn()
this.getfengchangList()
},
methods: {
getfengchangList() {
request.get('/api/beehive/index', {}).then(res => {
this.fengxiangNumber = res.data.data.length
})
request.get('/api/apiary/index', {}).then(res => {
this.fengchangNumber = res.data.data.length
this.fclist = res.data.data
this.fclist.forEach(item => {
this.markers.push({
latitude: item.lat,
longitude: item.lng,
width: 25,
height: 25,
id: item.id,
iconPath: '../../static/蜂场.png',
label: {
content: item.name,
fontSize:14,
anchorX: (() => {
if (item.name.length <= 2) {
return -13
} else if (item.name.length <= 3) {
return -20
} else if (item.name.length <= 4) {
return -30
} else if (item.name.length <= 5) {
return -35
} else if (item.name.length <= 6) {
return -40
} else if (item.name.length <= 8) {
return -50
} else if (item.name.length <=
10) {
return -60
} else {
return -item.name.length * 6.5
}
})(),
},
})
})
})
},
async listDataFn() {
await request.get('/api/beehive/index2map').then(res => {
// console.log(res.data.data)
this.listData = [...res.data.data]
this.mapdian()
})
},
mapdian() {
this.listData.forEach(item => {
if (item.status_text == '在线') {
this.markers.push({
latitude: item.lat,
longitude: item.lng,
width: 15,
height: 15,
id: item.id,
iconPath: '../../static/a11.png',
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
}
})(),
}
})
} else {
this.markers.push({
latitude: item.lat,
longitude: item.lng,
width: 15,
height: 15,
id: item.id,
iconPath: '../../static/a22.png',
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
}
})(),
}
})
}
})
},
async getLocation() {
// 获取用户当前的位置
// console.log('1111')
const {
latitude,
longitude
} = await uni.getLocation()
console.log(latitude, longitude)
this.latitude = latitude
this.longitude = longitude,
this.markers.push({
latitude,
longitude,
width: 1,
height: 1,
id: 0,
iconPath:'',
customCallout: {
// anchorY: -5,
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
}
})(),
display: 'BYCLICK'
}
})
},
fengchang() { // 跳转蜂场
wx.switchTab({
url: '/pages/fengchang/index'
})
},
fengxiang() { // 跳转蜂箱
wx.switchTab({
url: '/pages/fengxiang/index'
})
}
}
// methods: {
// toggle(){
// this.isMap=!this.isMap
// },
// blowup(){
// if(this.zoomSize >= 20) return
// this.zoomSize++
// },
// minification(){
// if(this.zoomSize <= 3) return
// this.zoomSize--
// },
// back(){
// this.map = uni.createMapContext("map", this);
// this.map.moveToLocation()
// },
// mapTap({detail: {latitude,longitude}}){
// if(this.flag){
// this.option = {
// id: ++this.id,
// latitude: latitude,
// longitude: longitude,
// width: 20,
// height: 30
// }
// let arr=[]
// this.markers.push(this.option)
// for (let index = 1; index < this.markers.length; index++) {
// arr.push({
// latitude:this.markers[index].latitude,
// longitude: this.markers[index].longitude
// })
// }
// this.option=arr;
// }
// },
// measuredArea(){
// this.flag=!this.flag
// },
// wayAll(){
// if (this.option.length > 2) {
// console.log(this.option);
// this.polygons[0].points=[];
// this.polygons[0].points.push(...this.option)
// this.markers[1]["callout"]={
// content: "4917.9平方公里",
// display: "ALWAYS",
// padding: 6,
// borderRadius: 5,
// borderWidth: 1,
// borderColor: "#3D8DFE",
// anchorX:30,
// anchorY:10
// }
// console.log(this.polygons,'得到的数值');
// }else{
// uni.showToast({
// title:"起码选择三个点",
// duration: 2000
// })
// }
// },
// closeWayall(){
// this.polygons[0].points=[{
// latitude: 28.68194 ,
// longitude:115.96191
// }, {
// latitude: 28.68195 ,
// longitude:115.96192
// }, {
// latitude: 28.68196 ,
// longitude:115.96193
// }]
// },
// deleteAnchor(){
// if(this.markers.length !== 1){
// this.markers.pop()
// let arr=[]
// for (let index = 1; index < this.markers.length; index++) {
// arr.push({
// latitude:this.markers[index].latitude,
// longitude: this.markers[index].longitude
// })
// }
// this.option=arr;
// this.closeWayall()
// if(this.option.length > 2){
// this.wayAll()
// }
// }
// }
// },
}
</script>
<style lang="scss" scoped>
.content {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
.rightTool {
position: absolute;
right: 30rpx;
top: 30rpx;
.right_tool_item {
background-color: rgba(214, 215, 219, 0.5);
padding: 10rpx 20rpx;
margin-top: 10rpx;
border-radius: 30rpx;
}
}
.sidebar {
position: absolute;
top: 15%;
right: 20rpx;
}
// .toggle,.measure,.zoom{}
.measure {
margin-top: 15rpx;
}
.stakeMark {
margin-top: 15rpx;
}
.stakeMark {
width: 80rpx;
height: 75rpx;
line-height: 75rpx;
font-size: 25rpx;
text-align: center;
background-color: white;
color: #146bee;
border-radius: 7rpx;
font-weight: 700;
}
.zoom {
margin-top: 50rpx;
border-radius: 7rpx;
}
.orientation {
width: 80rpx;
height: 75rpx;
line-height: 75rpx;
font-size: 25rpx;
background-color: white;
text-align: center;
border-radius: 7rpx;
margin-top: 20rpx;
}
.callout-content {
position: absolute;
background-color: #fff;
padding: 15rpx;
font-size: 16rpx;
border-radius: 7%;
cover-view {
margin: 15rpx;
}
}
.generationRegion {
width: 80%;
position: absolute;
bottom: 10%;
left: 10%;
}
}
</style>