diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 63ffebe..d55cbf7 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
import infoDetail from './infoWindow.vue'
import infoDetail2 from './infoWindow2.vue'
import infoDetailHot from './infoWindowHot.vue'
-import { branchList, electNodeList } from './mock.js'
+import { branchList, electNodeList, guangfuList } from './mock.js'
import { getDictByCode } from '@/api/system/dict'
import { electricityBranch, electricityNode, getAreaPosition, getDeviceListPage, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
const publicPath = import.meta.env.BASE_URL
@@ -140,61 +140,61 @@
map.value.add([marker])
}
// // 光伏标记点及光伏绘制
- // for (let i = 0; i < markerArr1.value.length; i++) {
- // const icon = new AMap.Icon({
- // size: new AMap.Size(36, 36), // 图标尺寸
- // image: `${publicPath}img/icon2.png`, // Icon的图像
- // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
- // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等
- // })
- // const marker = new AMap.Marker({
- // zooms: [16, 20],
- // position: markerArr1.value[i], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
- // map: map.value,
- // icon,
- // offset: new AMap.Pixel(-20, -20),
- // })
- // // 信息窗体
- // infoWindow2.value = new AMap.InfoWindow({
- // isCustom: true, // 自定义信息窗体
- // content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
- // offset: new AMap.Pixel(9, -5), // 偏移
- // })
- // marker.on('click', (e) => {
- // // 打开信息窗口
- // infoWindow2.value.open(map.value, e.lnglat)
- // // 初始化信息窗口
- // windowInfoRef2.value.initialize({
- // overlay: e.target,
- // infoWindow: infoWindow2.value,
- // info: markerArrInfo1.value[i],
- // })
- // })
- // // 标记点的文本
- // marker.setLabel({
- // zooms: [16, 20],
- // offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
- // content: `
${markerArrInfo1.value[i].stationName}
`, // 设置文本标注内容
- // direction: 'right', // 设置文本标注方位
- // })
- // map.value.add([marker])
- // // 绘制电网和节点连线
- // const path = markerArrInfo1.value.map((item) => {
- // return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
- // })
- // const polyline = new AMap.Polyline({
- // path,
- // strokeColor: '#03A382',
- // strokeStyle: 'dashed',
- // strokeDasharray: [10, 3],
- // lineJoin: 'round',
- // lineCap: 'round',
- // zIndex: 50,
- // zooms: [16, 20],
- // })
- // polyline.setMap(map.value)
- // map.value.add(polyline)
- // }
+ for (let i = 0; i < markerArr1.value.length; i++) {
+ const icon = new AMap.Icon({
+ size: new AMap.Size(36, 36), // 图标尺寸
+ image: `${publicPath}img/icon2.png`, // Icon的图像
+ imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+ imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等
+ })
+ const marker = new AMap.Marker({
+ zooms: [16, 20],
+ position: markerArr1.value[i], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
+ map: map.value,
+ icon,
+ offset: new AMap.Pixel(-20, -20),
+ })
+ // 信息窗体
+ infoWindow2.value = new AMap.InfoWindow({
+ isCustom: true, // 自定义信息窗体
+ content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
+ offset: new AMap.Pixel(9, -5), // 偏移
+ })
+ marker.on('click', (e) => {
+ // 打开信息窗口
+ infoWindow2.value.open(map.value, e.lnglat)
+ // 初始化信息窗口
+ windowInfoRef2.value.initialize({
+ overlay: e.target,
+ infoWindow: infoWindow2.value,
+ info: markerArrInfo1.value[i],
+ })
+ })
+ // 标记点的文本
+ marker.setLabel({
+ zooms: [16, 20],
+ offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+ content: `${markerArrInfo1.value[i].stationName}
`, // 设置文本标注内容
+ direction: 'right', // 设置文本标注方位
+ })
+ map.value.add([marker])
+ // 绘制电网和节点连线
+ const path = markerArrInfo1.value.map((item) => {
+ return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
+ })
+ const polyline = new AMap.Polyline({
+ path,
+ strokeColor: '#03A382',
+ strokeStyle: 'dashed',
+ strokeDasharray: [10, 3],
+ lineJoin: 'round',
+ lineCap: 'round',
+ zIndex: 50,
+ zooms: [16, 20],
+ })
+ polyline.setMap(map.value)
+ map.value.add(polyline)
+ }
// 电网支路折线绘制
for (let i = 0; i < lineArr.value.length; i++) {
const path = lineArr.value[i].branchNodeInfos
@@ -363,9 +363,10 @@
// console.log(res1.data, '折线记点')
}
// 获取光伏列表
- // const list1 = await getMonitorStationList()
- // markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)]))
- // markerArrInfo1.value = list1.data
+ const list1 = guangfuList
+ // console.log(list1, '广福街店')
+ markerArr1.value = list1.map(item => ([Number(item.lng), Number(item.lat)]))
+ markerArrInfo1.value = list1
// 初始化地图
await initMap()
useElectricity()
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 63ffebe..d55cbf7 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
import infoDetail from './infoWindow.vue'
import infoDetail2 from './infoWindow2.vue'
import infoDetailHot from './infoWindowHot.vue'
-import { branchList, electNodeList } from './mock.js'
+import { branchList, electNodeList, guangfuList } from './mock.js'
import { getDictByCode } from '@/api/system/dict'
import { electricityBranch, electricityNode, getAreaPosition, getDeviceListPage, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
const publicPath = import.meta.env.BASE_URL
@@ -140,61 +140,61 @@
map.value.add([marker])
}
// // 光伏标记点及光伏绘制
- // for (let i = 0; i < markerArr1.value.length; i++) {
- // const icon = new AMap.Icon({
- // size: new AMap.Size(36, 36), // 图标尺寸
- // image: `${publicPath}img/icon2.png`, // Icon的图像
- // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
- // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等
- // })
- // const marker = new AMap.Marker({
- // zooms: [16, 20],
- // position: markerArr1.value[i], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
- // map: map.value,
- // icon,
- // offset: new AMap.Pixel(-20, -20),
- // })
- // // 信息窗体
- // infoWindow2.value = new AMap.InfoWindow({
- // isCustom: true, // 自定义信息窗体
- // content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
- // offset: new AMap.Pixel(9, -5), // 偏移
- // })
- // marker.on('click', (e) => {
- // // 打开信息窗口
- // infoWindow2.value.open(map.value, e.lnglat)
- // // 初始化信息窗口
- // windowInfoRef2.value.initialize({
- // overlay: e.target,
- // infoWindow: infoWindow2.value,
- // info: markerArrInfo1.value[i],
- // })
- // })
- // // 标记点的文本
- // marker.setLabel({
- // zooms: [16, 20],
- // offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
- // content: `${markerArrInfo1.value[i].stationName}
`, // 设置文本标注内容
- // direction: 'right', // 设置文本标注方位
- // })
- // map.value.add([marker])
- // // 绘制电网和节点连线
- // const path = markerArrInfo1.value.map((item) => {
- // return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
- // })
- // const polyline = new AMap.Polyline({
- // path,
- // strokeColor: '#03A382',
- // strokeStyle: 'dashed',
- // strokeDasharray: [10, 3],
- // lineJoin: 'round',
- // lineCap: 'round',
- // zIndex: 50,
- // zooms: [16, 20],
- // })
- // polyline.setMap(map.value)
- // map.value.add(polyline)
- // }
+ for (let i = 0; i < markerArr1.value.length; i++) {
+ const icon = new AMap.Icon({
+ size: new AMap.Size(36, 36), // 图标尺寸
+ image: `${publicPath}img/icon2.png`, // Icon的图像
+ imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+ imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等
+ })
+ const marker = new AMap.Marker({
+ zooms: [16, 20],
+ position: markerArr1.value[i], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
+ map: map.value,
+ icon,
+ offset: new AMap.Pixel(-20, -20),
+ })
+ // 信息窗体
+ infoWindow2.value = new AMap.InfoWindow({
+ isCustom: true, // 自定义信息窗体
+ content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
+ offset: new AMap.Pixel(9, -5), // 偏移
+ })
+ marker.on('click', (e) => {
+ // 打开信息窗口
+ infoWindow2.value.open(map.value, e.lnglat)
+ // 初始化信息窗口
+ windowInfoRef2.value.initialize({
+ overlay: e.target,
+ infoWindow: infoWindow2.value,
+ info: markerArrInfo1.value[i],
+ })
+ })
+ // 标记点的文本
+ marker.setLabel({
+ zooms: [16, 20],
+ offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+ content: `${markerArrInfo1.value[i].stationName}
`, // 设置文本标注内容
+ direction: 'right', // 设置文本标注方位
+ })
+ map.value.add([marker])
+ // 绘制电网和节点连线
+ const path = markerArrInfo1.value.map((item) => {
+ return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
+ })
+ const polyline = new AMap.Polyline({
+ path,
+ strokeColor: '#03A382',
+ strokeStyle: 'dashed',
+ strokeDasharray: [10, 3],
+ lineJoin: 'round',
+ lineCap: 'round',
+ zIndex: 50,
+ zooms: [16, 20],
+ })
+ polyline.setMap(map.value)
+ map.value.add(polyline)
+ }
// 电网支路折线绘制
for (let i = 0; i < lineArr.value.length; i++) {
const path = lineArr.value[i].branchNodeInfos
@@ -363,9 +363,10 @@
// console.log(res1.data, '折线记点')
}
// 获取光伏列表
- // const list1 = await getMonitorStationList()
- // markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)]))
- // markerArrInfo1.value = list1.data
+ const list1 = guangfuList
+ // console.log(list1, '广福街店')
+ markerArr1.value = list1.map(item => ([Number(item.lng), Number(item.lat)]))
+ markerArrInfo1.value = list1
// 初始化地图
await initMap()
useElectricity()
diff --git a/src/components/map/mock.js b/src/components/map/mock.js
index 7a20077..9901876 100644
--- a/src/components/map/mock.js
+++ b/src/components/map/mock.js
@@ -121,8 +121,8 @@
flowRate: '0.00',
gs: 0,
id: '1',
- lat: '40.831333',
- lng: '111.729712',
+ lat: '40.831326',
+ lng: '111.729689',
nodeName: 'B座公寓',
pd: '0.00',
qd: '0.00',
@@ -175,8 +175,8 @@
flowRate: '0.00',
gs: 0,
id: '1',
- lat: '40.831498',
- lng: '111.73034',
+ lat: '40.831475',
+ lng: '111.730364',
nodeName: 'C座公寓',
pd: '0.00',
qd: '0.00',
@@ -202,8 +202,8 @@
flowRate: '0.00',
gs: 0,
id: '1',
- lat: '40.830977',
- lng: '111.73115',
+ lat: '40.831027',
+ lng: '111.731106',
nodeName: '网络教室',
pd: '0.00',
qd: '0.00',
@@ -439,7 +439,7 @@
[111.730077, 40.83078],
[111.730552, 40.830891],
[111.729815, 40.831051],
- [111.729712, 40.831333],
+ [111.729689, 40.831326],
],
branchNumber: '1号支路',
},
@@ -447,14 +447,14 @@
branchNodeInfos: [
[111.729815, 40.831051],
[111.730472, 40.831205],
- [111.73034, 40.831498],
+ [111.730364, 40.831475],
],
branchNumber: '2号支路',
},
{
branchNodeInfos: [
[111.730552, 40.830891],
- [111.731122, 40.831045],
+ [111.731106, 40.831027],
[111.731217, 40.830697],
],
branchNumber: '3号支路',
@@ -474,3 +474,185 @@
branchNumber: '4号支路',
},
]
+export const guangfuList = [
+ {
+ createTime: '2023-05-10',
+ deviceId: '2',
+ deviceNo: '',
+ deviceType: '',
+ deviceTypeName: '',
+ electricalVoltage: '',
+ id: '2',
+ installLocaltion: '',
+ lat: '40.830948',
+ lng: '111.730561',
+ mbase: '100.00',
+ nodeId: '9',
+ // nodeLat: '40.830858',
+ // nodeLng: '111.730585',
+ pg: '0.30',
+ pmax: '10.00',
+ pmin: '0.00',
+ power: '',
+ qg: '0.00',
+ qmax: '0.00',
+ qmin: '0.00',
+ stationName: '教学北楼光伏采集点',
+ stationType: 0,
+ status: 1,
+ strength: '0.00',
+ sttusName: '',
+ uploadTime: '2023-08-02',
+ vg: '1.00',
+ },
+ {
+ createTime: '2023-05-10',
+ deviceId: '2',
+ deviceNo: '',
+ deviceType: '',
+ deviceTypeName: '',
+ electricalVoltage: '',
+ id: '2',
+ installLocaltion: '',
+ lat: '40.831377',
+ lng: '111.729912',
+ mbase: '100.00',
+ nodeId: '9',
+ // nodeLat: '40.830858',
+ // nodeLng: '111.730585',
+ pg: '0.30',
+ pmax: '10.00',
+ pmin: '0.00',
+ power: '',
+ qg: '0.00',
+ qmax: '0.00',
+ qmin: '0.00',
+ stationName: 'B座公寓光伏采集点',
+ stationType: 0,
+ status: 1,
+ strength: '0.00',
+ sttusName: '',
+ uploadTime: '2023-08-02',
+ vg: '1.00',
+ },
+ {
+ createTime: '2023-05-10',
+ deviceId: '2',
+ deviceNo: '',
+ deviceType: '',
+ deviceTypeName: '',
+ electricalVoltage: '',
+ id: '2',
+ installLocaltion: '',
+ lat: '40.831528',
+ lng: '111.730581',
+ mbase: '100.00',
+ nodeId: '9',
+ // nodeLat: '40.830858',
+ // nodeLng: '111.730585',
+ pg: '0.30',
+ pmax: '10.00',
+ pmin: '0.00',
+ power: '',
+ qg: '0.00',
+ qmax: '0.00',
+ qmin: '0.00',
+ stationName: 'C座公寓光伏采集点',
+ stationType: 0,
+ status: 1,
+ strength: '0.00',
+ sttusName: '',
+ uploadTime: '2023-08-02',
+ vg: '1.00',
+ },
+ {
+ createTime: '2023-05-10',
+ deviceId: '2',
+ deviceNo: '',
+ deviceType: '',
+ deviceTypeName: '',
+ electricalVoltage: '',
+ id: '2',
+ installLocaltion: '',
+ lat: '40.830178',
+ lng: '111.730829',
+ mbase: '100.00',
+ nodeId: '9',
+ // nodeLat: '40.830858',
+ // nodeLng: '111.730585',
+ pg: '0.30',
+ pmax: '10.00',
+ pmin: '0.00',
+ power: '',
+ qg: '0.00',
+ qmax: '0.00',
+ qmin: '0.00',
+ stationName: '教学南楼光伏采集点',
+ stationType: 0,
+ status: 1,
+ strength: '0.00',
+ sttusName: '',
+ uploadTime: '2023-08-02',
+ vg: '1.00',
+ },
+ {
+ createTime: '2023-05-10',
+ deviceId: '2',
+ deviceNo: '',
+ deviceType: '',
+ deviceTypeName: '',
+ electricalVoltage: '',
+ id: '2',
+ installLocaltion: '',
+ lat: '40.829763',
+ lng: '111.730109',
+ mbase: '100.00',
+ nodeId: '9',
+ // nodeLat: '40.830858',
+ // nodeLng: '111.730585',
+ pg: '0.30',
+ pmax: '10.00',
+ pmin: '0.00',
+ power: '',
+ qg: '0.00',
+ qmax: '0.00',
+ qmin: '0.00',
+ stationName: 'A座公寓光伏采集点',
+ stationType: 0,
+ status: 1,
+ strength: '0.00',
+ sttusName: '',
+ uploadTime: '2023-08-02',
+ vg: '1.00',
+ },
+ {
+ createTime: '2023-05-10',
+ deviceId: '2',
+ deviceNo: '',
+ deviceType: '',
+ deviceTypeName: '',
+ electricalVoltage: '',
+ id: '2',
+ installLocaltion: '',
+ lat: '40.829607',
+ lng: '111.730734',
+ mbase: '100.00',
+ nodeId: '9',
+ // nodeLat: '40.830858',
+ // nodeLng: '111.730585',
+ pg: '0.30',
+ pmax: '10.00',
+ pmin: '0.00',
+ power: '',
+ qg: '0.00',
+ qmax: '0.00',
+ qmin: '0.00',
+ stationName: '四号楼光伏采集点',
+ stationType: 0,
+ status: 1,
+ strength: '0.00',
+ sttusName: '',
+ uploadTime: '2023-08-02',
+ vg: '1.00',
+ },
+]