From 02400ed870dd0adb9d865a1b383bab152018e6c1 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Fri, 20 Oct 2023 15:48:07 +0800
Subject: [PATCH] 修改
---
src/views/bigScreen/components/screen.vue | 186 ++++++++++++++++++++--------------------------
1 files changed, 80 insertions(+), 106 deletions(-)
diff --git a/src/views/bigScreen/components/screen.vue b/src/views/bigScreen/components/screen.vue
index dde3c1a..b20993d 100644
--- a/src/views/bigScreen/components/screen.vue
+++ b/src/views/bigScreen/components/screen.vue
@@ -26,7 +26,7 @@
</div>
</div>
<div class="main-content">
- <div id="bigMap"></div>
+<!-- <div id="bigMap"></div>-->
<div class="main-left">
<div class="left-top withFilter">
<div class="chart-head">
@@ -96,6 +96,15 @@
</div>
</div>
<div class="main-middle">
+<!-- <div class="bigMap">-->
+<!-- <div id="bigMap"></div>-->
+<!-- </div>-->
+ <baidu-map class="bigMap" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.057805, lat: 45.62550}" :zoom="16" @ready="initMap">
+ <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
+ <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
+ <bm-polygon :path="polygonPath" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>
+ </baidu-map>
+<!-- </div>-->
<div class="mid-bottom">
<div class="chart-head">
<div class="chart-tit">气象信息</div>
@@ -230,6 +239,8 @@
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { storeToRefs } from 'pinia';
+
+import {BaiduMap, BmMapType, BmNavigation, BmPolygon} from 'vue-baidu-map-3x'
import { useUserInfo } from '/@/stores/userInfo';
import {bigScreenApi} from "/@/api/bigScreen";
// 定义接口来定义对象的类型
@@ -263,8 +274,12 @@
yellowNum: null | number
redNum: null | number
weatherData: Array<any>
+ polygonPath: Array<location>
}
-
+interface location{
+ lng: number | null
+ lat: number | null
+}
interface gasType {
name: string
id: number | null
@@ -272,7 +287,7 @@
export default defineComponent({
name: 'bigScreen',
- components: { },
+ components: {BaiduMap, BmMapType, BmNavigation, BmPolygon },
props:{
isFull: Boolean
},
@@ -311,7 +326,8 @@
warningGas: {},
dialogWarning: false,
countTime: 1,
- weatherData: []
+ weatherData: [],
+ polygonPath: []
});
const router = useRouter();
const gasN = ref("eChartgasN" + Date.now() + Math.random())
@@ -326,6 +342,9 @@
second: '2-digit',
};
+ const updatePolygonPath = (e) => {
+ state.polygonPath = e.target.getPath()
+ };
// 页面加载时
onMounted(() => {
getGasData()
@@ -349,12 +368,21 @@
setInterval(() => {
getDateTime();
}, 1000);
- initMap()
+ // initMap()
})
onUnmounted(()=>{
destroyedWs()
})
+
+ const initMap=()=>{
+ state.polygonPath = [
+ { lng: 85.047805, lat: 45.62550 },
+ { lng: 85.047505, lat: 45.62350 },
+ { lng: 85.057205, lat: 45.62350 },
+ { lng: 85.057005, lat: 45.62750 }
+ ]
+ }
const toNdPage = () =>{
router.push('/gasData')
}
@@ -896,84 +924,6 @@
});
}
- const map = shallowRef(null)
- const initMap=()=> {
- let m = map.value
- window._AMapSecurityConfig = {
- securityJsCode: "456045075984862a9806587f0d7fee3c",
- };
- AMapLoader.load({
- key: '5dbeedfa28e0d7fffb59684446569773', // 申请好的Web端开发者Key，首次调用 load 时必填
- version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
- plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
- })
- .then(AMap => {
- if (AMap && typeof AMap.Map === 'function') {
- m = new AMap.Map('bigMap', {
- viewMode: '3D',
- mapStyle: 'amap://styles/normal',
- zoom: 18,
- center: [85.057805, 45.62550],
- layers:[
- // new AMap.TileLayer.RoadNet({}),
- // new AMap.TileLayer.Satellite()
- ],
- zooms:[2,20],
- })
-
- AMap.plugin(["AMap.DistrictSearch","AMap.ToolBar","AMap.ControlBar"],()=> {
- var district = new AMap.DistrictSearch({
- extensions: "all",
- subdistrict: 0,
- level: "district",
- });
- district.search("克拉玛依市", function (status, result) {
- // // 外多边形坐标数组和内多边形坐标数组
- var outer = [
- new AMap.LngLat(-360, 90, true),
- new AMap.LngLat(-360, -90, true),
- new AMap.LngLat(360, -90, true),
- new AMap.LngLat(360, 90, true),
- ]; // 使得遮盖填充反向
- var holes = result.districtList[0].boundaries; // 得到该区域的边界坐标集合
-
- var pathArray = [outer];
- pathArray.push.apply(pathArray, holes);
- var polygon = new AMap.Polygon({
- pathL: pathArray,
- //线条颜色，使用16进制颜色代码赋值。默认值为#006600
- strokeColor: "#11feee",
- strokeWeight: 3,
- fillColor: "#051342",
- fillOpacity: 1,
- strokeStyle: "solid",
- strokeDasharray: [2, 2],
- });
- polygon.setPath(pathArray)
- m.add(polygon);
- })
- m.addControl(new AMap.ToolBar({
- position: {
- top: '20px',
- left: 'calc(25% + 5px)'
- }
- }))
- m.addControl(new AMap.ControlBar({
- position: {
- top: '20px',
- right: 'calc(25% + 5px)'
- }
- }))
- })
-
- } else {
- console.error('AMap 或 AMap.Map 不可用');
- }
- })
- .catch(e => {
- console.log('加载高德地图时出错：', e)
- })
- }
// 当前时间
const getDateTime = () => {
const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
@@ -1019,7 +969,8 @@
config,
gasN,
gasT,
- map,
+ initMap,
+ updatePolygonPath,
toNdPage,
toTlPage,
timeChange,
@@ -1150,7 +1101,7 @@
display: flex;
align-items: flex-end;
justify-content: space-between;
- position: relative;
+ //position: relative;
&>div{
height: 100%;
@@ -1529,24 +1480,6 @@
}
}
- #bigMap{
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
-
- :deep(.amap-logo){
- display: none!important;
- visibility: hidden!important;
- }
-
- :deep(.amap-copyright) {
- display: none!important;
- visibility: hidden!important;
- }
- }
-
.main-left{
z-index: 9;
width: calc(25% - 5px);
@@ -1563,14 +1496,55 @@
background-size: 100% 100%;
}
}
+ //#bigMap{
+ //position: absolute;
+ //width: 100%;
+ //height: 100%;
+ //left: 0;
+ //top: 0;
+
+ // :deep(.amap-logo){
+ // display: none!important;
+ // visibility: hidden!important;
+ // }
+ //
+ // :deep(.amap-copyright) {
+ // display: none!important;
+ // visibility: hidden!important;
+ // }
+ //}
+ //.main-middle{
+ // width: calc(50% - 10px);
+ // height: calc((100%/3) - (20px/3));
+ // z-index: 9;
+ // .mid-bottom{
+ // width: 100%;
+ // height: 100%;
+ // background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
+ // background-size: 100% 100%;
+ // }
+ //}
.main-middle{
width: calc(50% - 10px);
- height: calc((100%/3) - (20px/3));
- z-index: 9;
+ .bigMap{
+ width: 100%;
+ height: calc((200% - 40px)/3 + 10px);
+ padding: 15px;
+ background: url('../../../assets/warningScreen/map-bg.png') no-repeat center;
+ background-size: 100% 100%;
+ :deep(.BMap_cpyCtrl){
+ display: none!important;
+ visibility: hidden!important;
+ }
+ :deep(.anchorBL) {
+ display: none!important;
+ visibility: hidden!important;
+ }
+ }
.mid-bottom{
width: 100%;
- height: 100%;
+ height: calc((100%/3) - (20px/3));
background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
background-size: 100% 100%;
}
--
Gitblit v1.9.2