From e1d380a930e73d8355a4695ca5f5b91f471c2394 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Mon, 28 Apr 2025 13:32:12 +0800
Subject: [PATCH] 修改大屏
---
src/views/hazardousChemicals/bigScreen/components/midTop2.vue | 115 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 69 insertions(+), 46 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/midTop2.vue b/src/views/hazardousChemicals/bigScreen/components/midTop2.vue
index 40d3749..b30547f 100644
--- a/src/views/hazardousChemicals/bigScreen/components/midTop2.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/midTop2.vue
@@ -86,7 +86,7 @@
// 表格数据
const companyData = ref([])
// 配置参数
-const visibleRows = 8 // 显示的行数
+const visibleRows = 10 // 显示的行数
const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
@@ -103,8 +103,6 @@
setTimeout(() => {
scrollAnimation()
}, 100)
- initMap()
-
})
onBeforeUnmount(() => {
@@ -148,63 +146,76 @@
}
]
-const initMap=()=>{
- var map = new BMapGL.Map("areaMap");
+const initMap=(mapData)=>{
+ let map = new BMapGL.Map("areaMap",{
+ backgroundColor: [0, 0, 0, 0]
+ });
map.setMapType(BMAP_NORMAL_MAP);
- var point = new BMapGL.Point(120.752833, 31.333439);
- map.centerAndZoom(point, 12);
+ let centerPoint = new BMapGL.Point(120.702833, 31.333439);
+ map.centerAndZoom(centerPoint, 12);
map.enableScrollWheelZoom(true);
- map.setTilt(40);
+ map.setTilt(30);
map.setMapStyleV2({
styleId: 'c66f44df4e55ce8f0fa90205997df335'
});
- // var bd = new BMapGL.Boundary();
- // bd.get('苏州市工业园区', function (rs) {
- // // console.log('外轮廓：', rs.boundaries[0])
- // // console.log('内镂空：', rs.boundaries[1])
- // var hole = new BMapGL.Polygon(rs.boundaries, {
- // fillColor: 'blue',
- // fillOpacity: 0.2
- // });
- // map.addOverlay(hole);
- // });
- var bd1 = new BMapGL.Boundary();
- bd1.get('苏州市工业园区', function (rs) {
+
+ let bd1 = new BMapGL.Boundary();
+ bd1.get('苏州市', function (rs) {
let count = rs.boundaries.length;
for (let i = 0; i < count; i++) {
let path = [];
let str = rs.boundaries[i].replace(' ', '');
let points = str.split(';');
for (let j = 0; j < points.length; j++) {
- let lng = points[j].split(',')[0];
- let lat = points[j].split(',')[1];
+ let lng = Number(points[j].split(',')[0]);
+ let lat = Number(points[j].split(',')[1]);
path.push(new BMapGL.Point(lng, lat));
}
- let prism = new BMapGL.Prism(path, 200, {
+ let mapMask = new BMapGL.MapMask(path, {
+ isBuildingMask: true,
+ isPoiMask: true,
+ isMapMask: true,
+ showRegion: 'inside',
topFillColor: '#5679ea',
- topFillOpacity: 0.6,
+ topFillOpacity: 0.5,
sideFillColor: '#5679ea',
sideFillOpacity: 0.9
});
+ let border = new BMapGL.Polyline(path, {
+ strokeColor: '#4ca7a2',
+ strokeWeight: 1,
+ strokeOpacity: 1
+ });
+ let prism = new BMapGL.Prism(path, 500, {
+ topFillColor: '#5679ea',
+ topFillOpacity: 0.4,
+ sideFillColor: '#5679ea',
+ sideFillOpacity: 1
+ });
+ map.addOverlay(mapMask);
+ map.addOverlay(border);
map.addOverlay(prism);
}
- });
- // var circle = new BMapGL.Circle(new BMapGL.Point(120.742833,31.333439),1000,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
- // map.addOverlay(circle);
- var point = new BMapGL.Point(120.742833,31.333439);
- var content = '企业一（10）';
- var label = new BMapGL.Label(content, {
- position: point,
- offset: new BMapGL.Size(-20, -10)
})
- map.addOverlay(label);
- label.setStyle({
- color: '#11FEEE',
- fontSize: '14px',
- border: 'none',
- backgroundColor: '#293075'
- })
- label.setPosition(point)
+
+ for(let i of mapData){
+ let pointMarker = new BMapGL.Marker(new BMapGL.Point(i.value[0],i.value[1]));
+ map.addOverlay(pointMarker);
+ var point = new BMapGL.Point(i.value[0],i.value[1]);
+ var content = i.name;
+ var label = new BMapGL.Label(content, {
+ position: point,
+ })
+ map.addOverlay(label);
+ label.setStyle({
+ color: '#11FEEE',
+ fontSize: '11px',
+ border: 'none',
+ backgroundColor: '#293075'
+ })
+ }
+
+
}
const getList = async () => {
const res = await getCompanyMessage(companyType.value)
@@ -217,7 +228,7 @@
value: [i.longitude,i.latitude]
}
})
- // initChart(mapData)
+ initMap(mapData)
}
}else{
@@ -380,15 +391,14 @@
}
.container-left{
+ flex: 1;
display: flex;
flex-direction: column;
align-items: center;
- width: 300px;
}
.filter{
- width: 300px;
- margin-top: 50px;
+ width: 100%;
display: flex;
align-items: center;
}
@@ -418,7 +428,7 @@
.table-wrapper {
position: relative;
- width: 300px;
+ width: 100%;
margin-top: 10px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 2px;
@@ -478,8 +488,13 @@
}
#areaMap{
- flex: 1;
+ flex: 2;
height: 100%;
+ background: none !important;
+ }
+
+ :deep(.bmap-container){
+ background-image: none !important;
}
:deep(.BMap_cpyCtrl) {
display: none !important;
@@ -487,4 +502,12 @@
:deep(.anchorBL) {
display: none !important;
}
+:deep(.BMapLabel){
+ min-width: 50px;
+ white-space: pre-wrap !important;
+}
+
+:deep(.BMap_mask){
+ background: #082c61 !important;
+}
</style>
--
Gitblit v1.9.2