Compare commits
No commits in common. "c9ef1d6a5e3000f26e946b06d71053dd0684bf3f" and "d7fdbc9eae84c78218e3bd4a5ff40f5760d22041" have entirely different histories.
c9ef1d6a5e
...
d7fdbc9eae
@ -7,7 +7,7 @@
|
||||
element-loading-background="#263840"
|
||||
element-loading-text="地图加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
:style="{ height: 'calc(100vh - 310px)', width: '67%', 'margin-top': '65px', transform: `${scale}` }"
|
||||
:style="{ height: '100vh', width: '100vw', transform: `${scale}` }"
|
||||
/>
|
||||
<div class="boxTop" />
|
||||
<div v-if="type != 'pageThree' && type != 'pageFive'" class="boxCentLeft">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { listDevice } from '@/api/iot/device';
|
||||
import { listLand } from '@/api/agriculture/land';
|
||||
import { getDicts } from '@/api/system/dict/data';
|
||||
import { listDevice } from '@/api/iot/device'
|
||||
import { listLand } from '@/api/agriculture/land'
|
||||
import { getDicts } from '@/api/system/dict/data'
|
||||
const mapMixin = {
|
||||
data() {
|
||||
return {
|
||||
@ -9,38 +9,37 @@ const mapMixin = {
|
||||
baseUrl: process.env.VUE_APP_BASE_API,
|
||||
loading: false,
|
||||
landType: [],
|
||||
deviceType: [],
|
||||
};
|
||||
deviceType: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
baseId: {
|
||||
handler: async function (n) {
|
||||
handler: async function(n) {
|
||||
if (n) {
|
||||
await this.$nextTick();
|
||||
await this.$nextTick()
|
||||
if (this.type == 'pageThree') {
|
||||
this.loading = true;
|
||||
this.loading = true
|
||||
// 获去地块数据
|
||||
const res = await listLand({ baseId: this.baseId });
|
||||
this.area = res.rows;
|
||||
|
||||
const res = await listLand({ baseId: this.baseId })
|
||||
this.area = res.rows
|
||||
// 获取设备数据
|
||||
const res1 = await listDevice({ baseId: this.baseId });
|
||||
const res1 = await listDevice({ baseId: this.baseId })
|
||||
this.device = res1.rows.map((item) => ({
|
||||
...item,
|
||||
imgUrl: item.imgUrl.split(',').length > 1 ? item.imgUrl.split(',')[1] : item.imgUrl,
|
||||
}));
|
||||
this.initMap();
|
||||
imgUrl: item.imgUrl.split(',').length > 1 ? item.imgUrl.split(',')[1] : item.imgUrl
|
||||
}))
|
||||
this.initMap()
|
||||
getDicts('agriculture_land_type').then((response) => {
|
||||
this.landType = response.data;
|
||||
});
|
||||
this.landType = response.data
|
||||
})
|
||||
getDicts('iot_device_status').then((response) => {
|
||||
this.deviceType = response.data;
|
||||
});
|
||||
this.deviceType = response.data
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
@ -49,24 +48,26 @@ const mapMixin = {
|
||||
this.map = new this.AMap.Map('indexMap', {
|
||||
// 设置地图容器id
|
||||
mapStyle: 'amap://styles/grey',
|
||||
zoom: 12, // 初始化地图级别
|
||||
doubleClickZoom: false,
|
||||
});
|
||||
await this.createAreaPolygon();
|
||||
await this.createDevicePoint();
|
||||
zoom: 16, // 初始化地图级别
|
||||
// center: baseCoordinate, //初始化地图中心点位置
|
||||
doubleClickZoom: false
|
||||
})
|
||||
await this.createAreaPolygon()
|
||||
await this.createDevicePoint()
|
||||
this.map.setFitView()
|
||||
},
|
||||
/** 绘制地块 */
|
||||
createAreaPolygon() {
|
||||
const label = [];
|
||||
const overlayGroup = [];
|
||||
const label = []
|
||||
const overlayGroup = []
|
||||
this.area.forEach((item) => {
|
||||
if (item.landPath) {
|
||||
const path = [];
|
||||
const pointList = [];
|
||||
const path = []
|
||||
const pointList = []
|
||||
item.landPath.split('|').forEach((point) => {
|
||||
path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
|
||||
pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
|
||||
});
|
||||
path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]))
|
||||
pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])])
|
||||
})
|
||||
const polygon = new this.AMap.Polygon({
|
||||
path: path,
|
||||
fillColor: item.fillColor,
|
||||
@ -75,14 +76,13 @@ const mapMixin = {
|
||||
strokeWeight: item.strokeWeight,
|
||||
strokeOpacity: item.strokeOpacity,
|
||||
extData: {
|
||||
...item,
|
||||
},
|
||||
});
|
||||
...item
|
||||
}
|
||||
})
|
||||
polygon.on('click', (e) => {
|
||||
this.createInfoWindow(e);
|
||||
});
|
||||
|
||||
overlayGroup.push(polygon);
|
||||
this.createInfoWindow(e)
|
||||
})
|
||||
overlayGroup.push(polygon)
|
||||
// 添加地块名称
|
||||
label.push(
|
||||
new this.AMap.Text({
|
||||
@ -93,120 +93,119 @@ const mapMixin = {
|
||||
background: 'transparent',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
fontSize: '16px',
|
||||
},
|
||||
fontSize: '16px'
|
||||
}
|
||||
})
|
||||
);
|
||||
)
|
||||
}
|
||||
});
|
||||
this.map.add(new this.AMap.OverlayGroup(label));
|
||||
this.map.add(new this.AMap.OverlayGroup(overlayGroup));
|
||||
this.map.setFitView(overlayGroup);
|
||||
})
|
||||
this.map.add(new this.AMap.OverlayGroup(label))
|
||||
this.map.add(new this.AMap.OverlayGroup(overlayGroup))
|
||||
},
|
||||
/** 创建设备marker点 */
|
||||
createDevicePoint() {
|
||||
const devicePointList = [];
|
||||
const devicePointList = []
|
||||
this.device.forEach((device) => {
|
||||
if ((device.longitude, device.latitude)) {
|
||||
const marker = new this.AMap.Marker({
|
||||
icon: new this.AMap.Icon({
|
||||
image: this.baseUrl + device.imgUrl,
|
||||
imageSize: new this.AMap.Size(32, 32),
|
||||
imageSize: new this.AMap.Size(32, 32)
|
||||
}),
|
||||
position: [device.longitude, device.latitude],
|
||||
title: device.deviceName,
|
||||
anchor: 'bottom-center',
|
||||
extData: {
|
||||
...device,
|
||||
},
|
||||
});
|
||||
...device
|
||||
}
|
||||
})
|
||||
marker.on('click', (e) => {
|
||||
this.createInfoWindow2(e);
|
||||
});
|
||||
devicePointList.push(marker);
|
||||
this.createInfoWindow2(e)
|
||||
})
|
||||
devicePointList.push(marker)
|
||||
}
|
||||
});
|
||||
this.map.add(new this.AMap.OverlayGroup(devicePointList));
|
||||
this.loading = false;
|
||||
})
|
||||
this.map.add(new this.AMap.OverlayGroup(devicePointList))
|
||||
this.loading = false
|
||||
},
|
||||
/** 获取地块中心点 */
|
||||
getAreaCenter(location) {
|
||||
var total = location.length;
|
||||
var X = 0;
|
||||
var Y = 0;
|
||||
var Z = 0;
|
||||
var total = location.length
|
||||
var X = 0
|
||||
var Y = 0
|
||||
var Z = 0
|
||||
location.forEach((lnglat) => {
|
||||
var lng = (lnglat[0] * Math.PI) / 180;
|
||||
var lat = (lnglat[1] * Math.PI) / 180;
|
||||
var x, y, z;
|
||||
x = Math.cos(lat) * Math.cos(lng);
|
||||
y = Math.cos(lat) * Math.sin(lng);
|
||||
z = Math.sin(lat);
|
||||
X += x;
|
||||
Y += y;
|
||||
Z += z;
|
||||
});
|
||||
X = X / total;
|
||||
Y = Y / total;
|
||||
Z = Z / total;
|
||||
var lng = (lnglat[0] * Math.PI) / 180
|
||||
var lat = (lnglat[1] * Math.PI) / 180
|
||||
var x, y, z
|
||||
x = Math.cos(lat) * Math.cos(lng)
|
||||
y = Math.cos(lat) * Math.sin(lng)
|
||||
z = Math.sin(lat)
|
||||
X += x
|
||||
Y += y
|
||||
Z += z
|
||||
})
|
||||
X = X / total
|
||||
Y = Y / total
|
||||
Z = Z / total
|
||||
|
||||
var Lng = Math.atan2(Y, X);
|
||||
var Hyp = Math.sqrt(X * X + Y * Y);
|
||||
var Lat = Math.atan2(Z, Hyp);
|
||||
return [parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI)];
|
||||
var Lng = Math.atan2(Y, X)
|
||||
var Hyp = Math.sqrt(X * X + Y * Y)
|
||||
var Lat = Math.atan2(Z, Hyp)
|
||||
return [parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI)]
|
||||
},
|
||||
/** 信息窗体 */
|
||||
createInfoWindow(e) {
|
||||
var info = document.createElement('div');
|
||||
info.className = 'InfoBox';
|
||||
var title = document.createElement('div');
|
||||
title.className = 'title';
|
||||
title.innerHTML = `${e.target._opts.extData.landName}`;
|
||||
var type = document.createElement('div');
|
||||
var typeName = '';
|
||||
var info = document.createElement('div')
|
||||
info.className = 'InfoBox'
|
||||
var title = document.createElement('div')
|
||||
title.className = 'title'
|
||||
title.innerHTML = `${e.target._opts.extData.landName}`
|
||||
var type = document.createElement('div')
|
||||
var typeName = ''
|
||||
this.landType.forEach((item) => {
|
||||
if (item.dictValue == e.target._opts.extData.landType) {
|
||||
typeName = item.dictLabel;
|
||||
typeName = item.dictLabel
|
||||
}
|
||||
});
|
||||
type.className = 'type';
|
||||
})
|
||||
type.className = 'type'
|
||||
type.innerHTML = `<div class="item">类型：<div class="tag">${typeName}</div></div>
|
||||
<div class="item">面积：${e.target._opts.extData.landArea}亩</div>`;
|
||||
info.appendChild(title);
|
||||
info.appendChild(type);
|
||||
<div class="item">面积：${e.target._opts.extData.landArea}亩</div>`
|
||||
info.appendChild(title)
|
||||
info.appendChild(type)
|
||||
const infoWindow = new this.AMap.InfoWindow({
|
||||
anchor: 'bottom-center',
|
||||
content: info, // 使用默认信息窗体框样式，显示信息内容
|
||||
});
|
||||
infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
|
||||
content: info // 使用默认信息窗体框样式，显示信息内容
|
||||
})
|
||||
infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()))
|
||||
},
|
||||
createInfoWindow2(e) {
|
||||
var info = document.createElement('div');
|
||||
info.className = 'InfoBox';
|
||||
var title = document.createElement('div');
|
||||
title.className = 'title';
|
||||
title.innerHTML = `${e.target._opts.extData.deviceName}`;
|
||||
var num = document.createElement('div');
|
||||
num.className = 'num';
|
||||
num.innerHTML = `<div>编号：${e.target._opts.extData.serialNumber}</div>`;
|
||||
var tips = document.createElement('div');
|
||||
tips.className = 'tips';
|
||||
var statusName = '';
|
||||
var info = document.createElement('div')
|
||||
info.className = 'InfoBox'
|
||||
var title = document.createElement('div')
|
||||
title.className = 'title'
|
||||
title.innerHTML = `${e.target._opts.extData.deviceName}`
|
||||
var num = document.createElement('div')
|
||||
num.className = 'num'
|
||||
num.innerHTML = `<div>编号：${e.target._opts.extData.serialNumber}</div>`
|
||||
var tips = document.createElement('div')
|
||||
tips.className = 'tips'
|
||||
var statusName = ''
|
||||
this.deviceType.forEach((item) => {
|
||||
if (item.dictValue == e.target._opts.extData.status) {
|
||||
statusName = item.dictLabel;
|
||||
statusName = item.dictLabel
|
||||
}
|
||||
});
|
||||
tips.innerHTML = `${statusName}`;
|
||||
info.appendChild(title);
|
||||
info.appendChild(num);
|
||||
info.appendChild(tips);
|
||||
})
|
||||
tips.innerHTML = `${statusName}`
|
||||
info.appendChild(title)
|
||||
info.appendChild(num)
|
||||
info.appendChild(tips)
|
||||
const infoWindow = new this.AMap.InfoWindow({
|
||||
anchor: 'bottom-center',
|
||||
content: info, // 使用默认信息窗体框样式，显示信息内容
|
||||
});
|
||||
infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
|
||||
},
|
||||
},
|
||||
};
|
||||
export default mapMixin;
|
||||
content: info // 使用默认信息窗体框样式，显示信息内容
|
||||
})
|
||||
infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()))
|
||||
}
|
||||
}
|
||||
}
|
||||
export default mapMixin
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user