Web/digital-agriculture-admin
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

基地地块绘制可视区域的展示

Browse Source
This commit is contained in:
13713575202 2025-04-17 15:28:18 +08:00
parent a99c523128
commit f45dad0462
2 changed files with 120 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dataV/layOut.vue
View File

@ -7,7 +7,7 @@
element-loading-background="#263840" element-loading-background="#263840"
element-loading-text="地图加载中" element-loading-text="地图加载中"
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
:style="{ height: '100vh', width: '100vw', transform: `${scale}` }" :style="{ height: 'calc(100vh - 310px)', width: '67%', 'margin-top': '65px', transform: `${scale}` }"
/> />
<div class="boxTop" /> <div class="boxTop" />
<div v-if="type != 'pageThree' && type != 'pageFive'" class="boxCentLeft"> <div v-if="type != 'pageThree' && type != 'pageFive'" class="boxCentLeft">

237
src/views/dataV/map.js
View File

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