408 lines
9.5 KiB
Vue
408 lines
9.5 KiB
Vue
<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> |