301 lines
10 KiB
JavaScript
301 lines
10 KiB
JavaScript
import { listDevice } from '@/api/iot/device';
|
|
import { listLand } from '@/api/agriculture/land';
|
|
import { getDicts } from '@/api/system/dict/data';
|
|
const mapMixinLand = {
|
|
data() {
|
|
return {
|
|
area: [],
|
|
device: [],
|
|
baseUrl: process.env.VUE_APP_BASE_API,
|
|
loading: false,
|
|
landType: [],
|
|
deviceType: [],
|
|
staticArea: [
|
|
{
|
|
id: '01',
|
|
landPath: ["99.88785,24.426105|99.892485,24.424855|99.894545,24.426418|99.89094,24.428137"],
|
|
fillColor: '#d96298', fillOpacity: 0.8, strokeColor: "#d96298", strokeWeight: 1, strokeOpacity: 0.8,
|
|
},
|
|
{
|
|
id: '02',
|
|
landPath: ["99.877778,24.414434|99.880525,24.411073|99.883272,24.412245|99.881727,24.414981"],
|
|
fillColor: '#d9e961', fillOpacity: 0.8, strokeColor: "#d9e961", strokeWeight: 1, strokeOpacity: 0.8,
|
|
},
|
|
{
|
|
id: '03',
|
|
landPath:
|
|
["99.853174,24.424073|99.850256,24.426105|99.855749,24.426731|99.880812,24.421885",
|
|
|
|
],
|
|
fillColor: '#ba8ae3', fillOpacity: 0.8, strokeColor: "#ba8ae3", strokeWeight: 1, strokeOpacity: 0.8,
|
|
},
|
|
{
|
|
id: '04',
|
|
landPath: ["99.866907,24.415946|99.861243,24.413601|99.859183,24.417196|99.880812,24.421885"],
|
|
fillColor: '#88b0d3', fillOpacity: 0.8, strokeColor: "#88b0d3", strokeWeight: 1, strokeOpacity: 0.8,
|
|
},
|
|
{
|
|
id: '05',
|
|
landPath: ["99.865247,24.416309|99.867736,24.411151|99.869796,24.412323|99.86971,24.415684"],
|
|
fillColor: '#efc0ac', fillOpacity: 0.8, strokeColor: "#efc0ac", strokeWeight: 1, strokeOpacity: 0.8,
|
|
},
|
|
{
|
|
id: '06',
|
|
landPath: ["99.858209,24.408963|99.86087,24.40396|99.863445,24.406305|99.862243,24.408806"],
|
|
fillColor: '#80f1b0', fillOpacity: 0.8, strokeColor: "#80f1b0", strokeWeight: 1, strokeOpacity: 0.8,
|
|
}
|
|
|
|
],
|
|
overlayGroup:[],
|
|
};
|
|
},
|
|
watch: {
|
|
baseId: {
|
|
handler: async function (n) {
|
|
if (n) {
|
|
await this.$nextTick();
|
|
if (this.type == 'pageLand') {
|
|
this.loading = true;
|
|
// 获去地块数据
|
|
const res = await listLand({ baseId: this.baseId });
|
|
this.area = res.rows;
|
|
|
|
// 获取设备数据
|
|
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();
|
|
getDicts('agriculture_land_type').then((response) => {
|
|
this.landType = response.data;
|
|
});
|
|
getDicts('iot_device_status').then((response) => {
|
|
this.deviceType = response.data;
|
|
});
|
|
}
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
async mounted() { },
|
|
methods: {
|
|
/** 初始化map */
|
|
async initMap() {
|
|
this.map = new this.AMap.Map('landMap', {
|
|
// 设置地图容器id
|
|
mapStyle: 'amap://styles/grey',
|
|
zoom: 12, // 初始化地图级别
|
|
doubleClickZoom: false,
|
|
center: [99.920974, 24.592758]
|
|
});
|
|
await this.createAreaPolygon(true);
|
|
// await this.createDevicePoint();
|
|
},
|
|
/** 绘制地块 */
|
|
createAreaPolygon(type, ids,options) {
|
|
const label = [];
|
|
let overlayGroupNew = [];
|
|
// console.info('this.area', this.area)
|
|
// this.area.forEach((item) => {
|
|
let areaList = [];
|
|
if (ids) {
|
|
if (ids.length > 0) {
|
|
areaList = this.staticArea.filter((m) => {
|
|
return ids.includes(m.id)
|
|
}) || []
|
|
} else {areaList = [] }
|
|
|
|
} else { areaList = this.staticArea }
|
|
|
|
if(areaList.length>0){
|
|
areaList.forEach((item) => {
|
|
if (item.landPath) {
|
|
const path = [];
|
|
const pointList = [];
|
|
if( item.landPath && item.landPath.length && item.landPath.length>0){
|
|
item.landPath.forEach((k)=>{
|
|
k.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])]);
|
|
});
|
|
})
|
|
|
|
}
|
|
|
|
let colorVal='';
|
|
if(options && options.length>0){
|
|
let indexF=options.findIndex((m)=>{
|
|
return m.id==item.id
|
|
})
|
|
colorVal=indexF>-1 ? options[indexF].color : ''
|
|
}
|
|
const polygon = new this.AMap.Polygon({
|
|
path: path,
|
|
fillColor:colorVal|| item.fillColor,
|
|
fillOpacity: item.fillOpacity,
|
|
strokeColor:colorVal || '',
|
|
strokeWeight: colorVal|| item.fillColor,
|
|
strokeOpacity: item.strokeOpacity,
|
|
extData: {
|
|
...item,
|
|
},
|
|
});
|
|
polygon.on('click', (e) => {
|
|
this.createInfoWindow(e);
|
|
});
|
|
|
|
this.overlayGroup.push(polygon);
|
|
if(type==false){
|
|
overlayGroupNew.push(polygon)
|
|
}
|
|
// 添加地块名称
|
|
label.push(
|
|
new this.AMap.Text({
|
|
text: item.landName ? item.landName : '名称',
|
|
anchor: 'center',
|
|
position: this.getAreaCenter(pointList),
|
|
style: {
|
|
background: 'transparent',
|
|
color: '#fff',
|
|
border: 'none',
|
|
fontSize: '16px',
|
|
},
|
|
})
|
|
);
|
|
}
|
|
});
|
|
}
|
|
// this.map.add(new this.AMap.OverlayGroup(label));
|
|
if (type) {
|
|
if(this.overlayGroup.length>0){
|
|
this.map.add(new this.AMap.OverlayGroup(this.overlayGroup));
|
|
this.map.setFitView(this.overlayGroup);
|
|
this.map.setZoom(13)
|
|
// this.map.moveCamera(CameraUpdateFactory.zoomTo(15))
|
|
this.loading = false;
|
|
}
|
|
}else{
|
|
this.map.remove(this.overlayGroup)
|
|
this.map.add(new this.AMap.OverlayGroup(overlayGroupNew));
|
|
}
|
|
|
|
},
|
|
getlandPath(ids) {
|
|
if (ids && ids.length > 0) {
|
|
let key = Object.keys(this.ob)
|
|
}
|
|
},
|
|
/** 创建设备marker点 */
|
|
createDevicePoint() {
|
|
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),
|
|
}),
|
|
position: [device.longitude, device.latitude],
|
|
title: device.deviceName,
|
|
anchor: 'bottom-center',
|
|
extData: {
|
|
...device,
|
|
},
|
|
});
|
|
marker.on('click', (e) => {
|
|
this.createInfoWindow2(e);
|
|
});
|
|
devicePointList.push(marker);
|
|
}
|
|
});
|
|
this.map.add(new this.AMap.OverlayGroup(devicePointList));
|
|
this.loading = false;
|
|
},
|
|
upLayersIds(ids,options) {
|
|
console.info('upLayersIds**********', ids)
|
|
this.createAreaPolygon(false, ids,options)
|
|
},
|
|
/** 获取地块中心点 */
|
|
getAreaCenter(location) {
|
|
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 = 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 = '';
|
|
this.landType.forEach((item) => {
|
|
if (item.dictValue == e.target._opts.extData.landType) {
|
|
typeName = item.dictLabel;
|
|
}
|
|
});
|
|
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);
|
|
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()));
|
|
},
|
|
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 = '';
|
|
this.deviceType.forEach((item) => {
|
|
if (item.dictValue == e.target._opts.extData.status) {
|
|
statusName = item.dictLabel;
|
|
}
|
|
});
|
|
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 mapMixinLand;
|