|
@@ -16,7 +16,7 @@
|
|
<el-icon class="el-input__icon"><search /></el-icon>
|
|
<el-icon class="el-input__icon"><search /></el-icon>
|
|
</template>
|
|
</template>
|
|
</el-select>
|
|
</el-select>
|
|
- </el-form-item>
|
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
|
<el-form-item label="所属基地:" prop="base">
|
|
<el-form-item label="所属基地:" prop="base">
|
|
<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
|
|
<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
|
|
@@ -27,15 +27,15 @@
|
|
<el-form-item><div class="lv-state">设备正常3</div></el-form-item>
|
|
<el-form-item><div class="lv-state">设备正常3</div></el-form-item>
|
|
<el-form-item><div class="hong-state">设备故障2</div></el-form-item>
|
|
<el-form-item><div class="hong-state">设备故障2</div></el-form-item>
|
|
<el-form-item><div class="cheng-state">危险天气1{{ info.one }}</div></el-form-item> <!-- 操作1 -->
|
|
<el-form-item><div class="cheng-state">危险天气1{{ info.one }}</div></el-form-item> <!-- 操作1 -->
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 基本信息 -->
|
|
<!-- 基本信息 -->
|
|
<el-form-item>
|
|
<el-form-item>
|
|
- <el-popover
|
|
|
|
- v-model="visible"
|
|
|
|
|
|
+ <el-popover
|
|
|
|
+ v-model="visible"
|
|
@show="handleShowChange"
|
|
@show="handleShowChange"
|
|
- @hide="handleHideChange"
|
|
|
|
- placement="bottom"
|
|
|
|
- :width="200"
|
|
|
|
|
|
+ @hide="handleHideChange"
|
|
|
|
+ placement="bottom"
|
|
|
|
+ :width="200"
|
|
trigger="click">
|
|
trigger="click">
|
|
<el-checkbox-group v-model="checkList">
|
|
<el-checkbox-group v-model="checkList">
|
|
<!--鹰眼 -->
|
|
<!--鹰眼 -->
|
|
@@ -54,7 +54,7 @@
|
|
size="large"
|
|
size="large"
|
|
v-model="showNineGrid"
|
|
v-model="showNineGrid"
|
|
inline-prompt
|
|
inline-prompt
|
|
- active-text="开九宫格"
|
|
|
|
|
|
+ active-text="开九宫格"
|
|
inactive-text="关九宫格"
|
|
inactive-text="关九宫格"
|
|
/>
|
|
/>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
@@ -87,7 +87,7 @@
|
|
active-text="街道地图"
|
|
active-text="街道地图"
|
|
inactive-text="关闭"
|
|
inactive-text="关闭"
|
|
/>
|
|
/>
|
|
- </el-form-item>
|
|
|
|
|
|
+ </el-form-item>
|
|
</el-checkbox-group>
|
|
</el-checkbox-group>
|
|
<template #reference>
|
|
<template #reference>
|
|
<div :class="visible ? 'hei-state-primary' : 'hei-state'">基本功能</div>
|
|
<div :class="visible ? 'hei-state-primary' : 'hei-state'">基本功能</div>
|
|
@@ -95,7 +95,7 @@
|
|
</el-popover>
|
|
</el-popover>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
- </el-form>
|
|
|
|
|
|
+ </el-form>
|
|
<!-- 右侧功能栏 -->
|
|
<!-- 右侧功能栏 -->
|
|
<div class="header-button-ri">
|
|
<div class="header-button-ri">
|
|
<el-popover
|
|
<el-popover
|
|
@@ -119,7 +119,7 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='温湿度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='温湿度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
<!-- 气压 -->
|
|
<!-- 气压 -->
|
|
@@ -134,7 +134,7 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='气压'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='气压'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
<!-- 湿度 -->
|
|
<!-- 湿度 -->
|
|
@@ -149,9 +149,9 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='温湿度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='温湿度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 风 -->
|
|
<!-- 风 -->
|
|
<el-tab-pane>
|
|
<el-tab-pane>
|
|
<template #label>
|
|
<template #label>
|
|
@@ -167,19 +167,19 @@
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
- <!-- 降雨 -->
|
|
|
|
|
|
+ <!-- 降雨 -->
|
|
<el-tab-pane>
|
|
<el-tab-pane>
|
|
<template #label>
|
|
<template #label>
|
|
<div class="gis-c">
|
|
<div class="gis-c">
|
|
<span>降雨</span>
|
|
<span>降雨</span>
|
|
<img class="gis-icon" src="../../../assets/images/rainfall.svg">
|
|
<img class="gis-icon" src="../../../assets/images/rainfall.svg">
|
|
</div>
|
|
</div>
|
|
- </template>
|
|
|
|
|
|
+ </template>
|
|
<div class="container-tag" style="overflow-y:auto; height:300px ">
|
|
<div class="container-tag" style="overflow-y:auto; height:300px ">
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='降水'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='降水'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
@@ -196,7 +196,7 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='云'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='云'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
<!-- 能见度 -->
|
|
<!-- 能见度 -->
|
|
@@ -211,7 +211,7 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='能见度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='能见度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
<!-- 天气现象 -->
|
|
<!-- 天气现象 -->
|
|
@@ -226,7 +226,7 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='天气现象'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='天气现象'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-tabs>
|
|
<template #reference>
|
|
<template #reference>
|
|
@@ -238,8 +238,8 @@
|
|
</template>
|
|
</template>
|
|
</el-popover>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
-
|
|
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<!-- 地图与经纬度显示区域 -->
|
|
<!-- 地图与经纬度显示区域 -->
|
|
<div id="map" class="map" style="width: 100%; height: 100vh;">
|
|
<div id="map" class="map" style="width: 100%; height: 100vh;">
|
|
<!-- 九宫格盒子 -->
|
|
<!-- 九宫格盒子 -->
|
|
@@ -248,13 +248,13 @@
|
|
{{ value }}
|
|
{{ value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <div id="mouse-position" class="mouse-position">经纬度: </div>
|
|
|
|
|
|
+
|
|
|
|
+ <div id="mouse-position" class="mouse-position">经纬度: </div>
|
|
|
|
|
|
<!-- 地图底部控制栏 -->
|
|
<!-- 地图底部控制栏 -->
|
|
- <div class="gis-bottom-box">
|
|
|
|
|
|
+ <div class="gis-bottom-box">
|
|
<div class="gis-bottom-item">
|
|
<div class="gis-bottom-item">
|
|
<div class="button-bg" @click="isPlay=!isPlay">
|
|
<div class="button-bg" @click="isPlay=!isPlay">
|
|
<img v-if="isPlay" class="button-bg-c" style="margin-left: 3px" src="../../../assets/images/stop.svg"/>
|
|
<img v-if="isPlay" class="button-bg-c" style="margin-left: 3px" src="../../../assets/images/stop.svg"/>
|
|
@@ -295,14 +295,15 @@
|
|
<div class="gis-bottom-item">
|
|
<div class="gis-bottom-item">
|
|
<div class="gis-bottom-hei-state">当前时间 {{formatTooltip(value2)}}</div>
|
|
<div class="gis-bottom-hei-state">当前时间 {{formatTooltip(value2)}}</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+
|
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { ref, reactive, onMounted } from "vue";
|
|
|
|
+ import imglogo from '/src/assets/images/logo.svg'
|
|
import 'ol/ol.css';
|
|
import 'ol/ol.css';
|
|
import TileLayer from 'ol/layer/Tile';
|
|
import TileLayer from 'ol/layer/Tile';
|
|
import OverviewMap from 'ol/control/OverviewMap';
|
|
import OverviewMap from 'ol/control/OverviewMap';
|
|
@@ -334,13 +335,13 @@
|
|
|
|
|
|
|
|
|
|
const showNineGrid = ref(false); // 控制九宫格显示与否
|
|
const showNineGrid = ref(false); // 控制九宫格显示与否
|
|
- const dataValues = ref(Array(9).fill(0)); // 替换为实际的数据
|
|
|
|
|
|
+ const dataValues = ref(Array(9).fill(0)); // 替换为实际的数据
|
|
const currentStationIndex = ref(0); // 选择的站点索引
|
|
const currentStationIndex = ref(0); // 选择的站点索引
|
|
// const stationCoordinates = { longitude: 116.397128, latitude: 39.916527 }; // 示例经纬度(北京天安门)
|
|
// const stationCoordinates = { longitude: 116.397128, latitude: 39.916527 }; // 示例经纬度(北京天安门)
|
|
|
|
|
|
// 存储站点的经纬度和数据值
|
|
// 存储站点的经纬度和数据值
|
|
const stations = ref([
|
|
const stations = ref([
|
|
- { lat: 34.638163632, lon: 116.426066261, value: 10 },
|
|
|
|
|
|
+ { lat: 34.638163632, lon: 116.426066261, value: 10 },
|
|
{ lat: 34.638263632, lon: 116.426166261, value: 20 },
|
|
{ lat: 34.638263632, lon: 116.426166261, value: 20 },
|
|
{ lat: 34.638363632, lon: 116.426266261, value: 30 },
|
|
{ lat: 34.638363632, lon: 116.426266261, value: 30 },
|
|
// 继续添加其他站点
|
|
// 继续添加其他站点
|
|
@@ -400,10 +401,10 @@
|
|
const checkList = ref(['Value selected and disabled', 'Value A']);
|
|
const checkList = ref(['Value selected and disabled', 'Value A']);
|
|
const isPlay = ref(true);
|
|
const isPlay = ref(true);
|
|
const isEagleEyeOn = ref(true); // 鹰眼开关状态
|
|
const isEagleEyeOn = ref(true); // 鹰眼开关状态
|
|
- const isjGG = ref(false); // 九宫格开关状态 默认关闭
|
|
|
|
- const isboxDrawn = ref(false); // 框选开关状态 默认关闭 boxDrawn
|
|
|
|
|
|
+ const isjGG = ref(false); // 九宫格开关状态 默认关闭
|
|
|
|
+ const isboxDrawn = ref(false); // 框选开关状态 默认关闭 boxDrawn
|
|
const isstationName = ref(false); // 站名开关状态 默认关闭 isstationName
|
|
const isstationName = ref(false); // 站名开关状态 默认关闭 isstationName
|
|
- const isstreet = ref(true); // 街道地图开关状态 默认关闭
|
|
|
|
|
|
+ const isstreet = ref(true); // 街道地图开关状态 默认关闭
|
|
const searchParam = reactive({ base: undefined, station: undefined });
|
|
const searchParam = reactive({ base: undefined, station: undefined });
|
|
const baseOptions = ref([{ value: 0, label: '基地1' }, { value: 1, label: '基地2' }]);
|
|
const baseOptions = ref([{ value: 0, label: '基地1' }, { value: 1, label: '基地2' }]);
|
|
const stationOptions = ref([{ value: 0, label: 'M1986' }, { value: 1, label: 'M1987' }]);
|
|
const stationOptions = ref([{ value: 0, label: 'M1986' }, { value: 1, label: 'M1987' }]);
|
|
@@ -419,14 +420,14 @@
|
|
const getPlatforms = async () => {
|
|
const getPlatforms = async () => {
|
|
try{
|
|
try{
|
|
const { data } = await getPlatformList(queryas.value);
|
|
const { data } = await getPlatformList(queryas.value);
|
|
- platformList.value = data.list;
|
|
|
|
- console.log("platformList.value:",+ platformList.value); // 在控制台输出平台列表
|
|
|
|
|
|
+ platformList.value = data.list;
|
|
|
|
+ console.log("platformList.value:",+ platformList.value); // 在控制台输出平台列表
|
|
|
|
|
|
getStations(data.list);
|
|
getStations(data.list);
|
|
// console.log("打印data.list的数据:",+data.list)
|
|
// console.log("打印data.list的数据:",+data.list)
|
|
}catch(error){
|
|
}catch(error){
|
|
console.log("获取平台列表失败:",error)
|
|
console.log("获取平台列表失败:",error)
|
|
- }
|
|
|
|
|
|
+ }
|
|
};
|
|
};
|
|
|
|
|
|
const pageable = ref<any>({
|
|
const pageable = ref<any>({
|
|
@@ -446,7 +447,7 @@
|
|
const { data } = await getDataItemList(pageable.value); // 假设此函数调用成功并返回数据
|
|
const { data } = await getDataItemList(pageable.value); // 假设此函数调用成功并返回数据
|
|
processTableData.value = data.list || []; //保证processTableData不会为null
|
|
processTableData.value = data.list || []; //保证processTableData不会为null
|
|
getStations(platformList.value); //更新getStation更新站点
|
|
getStations(platformList.value); //更新getStation更新站点
|
|
-
|
|
|
|
|
|
+
|
|
return data.list; // 确保返回数据
|
|
return data.list; // 确保返回数据
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error("获取数据时出错:", error);
|
|
console.error("获取数据时出错:", error);
|
|
@@ -454,17 +455,17 @@
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
- // 地图台站信息标注
|
|
|
|
|
|
+ // 地图台站信息标注
|
|
const getStations = (stations) => {
|
|
const getStations = (stations) => {
|
|
- console.log(stations,'getstation2');
|
|
|
|
-
|
|
|
|
|
|
+ console.log(stations,'getstation2');
|
|
|
|
+
|
|
stationSource.clear(); // 清除之前的站点标记
|
|
stationSource.clear(); // 清除之前的站点标记
|
|
stations.forEach(station => {
|
|
stations.forEach(station => {
|
|
- console.log(processTableData.value,'11');
|
|
|
|
-
|
|
|
|
|
|
+ console.log(processTableData.value,'11');
|
|
|
|
+
|
|
if (station.as_lon && station.as_lat) {
|
|
if (station.as_lon && station.as_lat) {
|
|
const result = processTableData.value.find(item => item.as_code === station.as_code)
|
|
const result = processTableData.value.find(item => item.as_code === station.as_code)
|
|
- console.log(result,'......result');
|
|
|
|
|
|
+ console.log(result,'......result');
|
|
|
|
|
|
const latitude = parseFloat(station.as_lat.replace('N', ''));
|
|
const latitude = parseFloat(station.as_lat.replace('N', ''));
|
|
const longitude = parseFloat(station.as_lon.replace('E', ''));
|
|
const longitude = parseFloat(station.as_lon.replace('E', ''));
|
|
@@ -503,7 +504,7 @@
|
|
// 设置站点图标和文字样式
|
|
// 设置站点图标和文字样式
|
|
feature.setStyle(new Style({
|
|
feature.setStyle(new Style({
|
|
image: new Icon({
|
|
image: new Icon({
|
|
- src: '/src/assets/images/logo.svg', // 图标路径
|
|
|
|
|
|
+ src: imglogo, // 图标路径
|
|
scale: 0.008,
|
|
scale: 0.008,
|
|
}),
|
|
}),
|
|
text: new Text({
|
|
text: new Text({
|
|
@@ -518,8 +519,8 @@
|
|
|
|
|
|
// 将站点特征添加到站点源
|
|
// 将站点特征添加到站点源
|
|
stationSource.addFeature(feature);
|
|
stationSource.addFeature(feature);
|
|
-
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ }
|
|
});
|
|
});
|
|
};
|
|
};
|
|
|
|
|
|
@@ -601,7 +602,7 @@ const initializeMap = () => {
|
|
view: view
|
|
view: view
|
|
});
|
|
});
|
|
|
|
|
|
-
|
|
|
|
|
|
+
|
|
// 定义鹰眼视图层
|
|
// 定义鹰眼视图层
|
|
const overviewMapLayer = new TileLayer({
|
|
const overviewMapLayer = new TileLayer({
|
|
source: new TileWMS({
|
|
source: new TileWMS({
|
|
@@ -623,7 +624,7 @@ const initializeMap = () => {
|
|
layers: [overviewMapLayer]
|
|
layers: [overviewMapLayer]
|
|
});
|
|
});
|
|
map.addControl(overviewMapControl);
|
|
map.addControl(overviewMapControl);
|
|
-
|
|
|
|
|
|
+
|
|
// 显示小数点经纬度
|
|
// 显示小数点经纬度
|
|
map.on('pointermove', (evt) => {
|
|
map.on('pointermove', (evt) => {
|
|
// const [lon, lat] = toLonLat(map.getCoordinateFromPixel(evt.pixel));
|
|
// const [lon, lat] = toLonLat(map.getCoordinateFromPixel(evt.pixel));
|
|
@@ -636,8 +637,8 @@ const initializeMap = () => {
|
|
watch(isEagleEyeOn, (newValue) => {
|
|
watch(isEagleEyeOn, (newValue) => {
|
|
overviewMapControl.setCollapsed(!newValue);
|
|
overviewMapControl.setCollapsed(!newValue);
|
|
});
|
|
});
|
|
-// 鹰眼图层的初始化
|
|
|
|
-const initializeOverviewMap = () => {
|
|
|
|
|
|
+// 鹰眼图层的初始化
|
|
|
|
+const initializeOverviewMap = () => {
|
|
const overviewMapLayer = new TileLayer({
|
|
const overviewMapLayer = new TileLayer({
|
|
source: new TileWMS({
|
|
source: new TileWMS({
|
|
url: 'http://192.168.43.77:8080/geoserver/wms',
|
|
url: 'http://192.168.43.77:8080/geoserver/wms',
|
|
@@ -651,7 +652,7 @@ const initializeOverviewMap = () => {
|
|
serverType: 'geoserver'
|
|
serverType: 'geoserver'
|
|
})
|
|
})
|
|
})
|
|
})
|
|
-};
|
|
|
|
|
|
+};
|
|
|
|
|
|
// 查询所有人工要素字典表
|
|
// 查询所有人工要素字典表
|
|
const elementList =ref<any>([])
|
|
const elementList =ref<any>([])
|
|
@@ -663,10 +664,10 @@ const getAllRgDataList = async () => {
|
|
|
|
|
|
// 存放选中要素列表
|
|
// 存放选中要素列表
|
|
const copiedCustomizeColumns = ref<any>([]);
|
|
const copiedCustomizeColumns = ref<any>([]);
|
|
-// 要素的选中和取消
|
|
|
|
|
|
+// 要素的选中和取消
|
|
const toggleSelection = (item) => {
|
|
const toggleSelection = (item) => {
|
|
item.isSelected = !item.isSelected;
|
|
item.isSelected = !item.isSelected;
|
|
-
|
|
|
|
|
|
+
|
|
if (item.isSelected) {
|
|
if (item.isSelected) {
|
|
// 添加选中的要素
|
|
// 添加选中的要素
|
|
copiedCustomizeColumns.value.push(item);
|
|
copiedCustomizeColumns.value.push(item);
|
|
@@ -686,11 +687,11 @@ const toggleSelection = (item) => {
|
|
|
|
|
|
};
|
|
};
|
|
|
|
|
|
- // 在组件挂载时初始化地图
|
|
|
|
|
|
+ // 在组件挂载时初始化地图
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
getAllRgDataList(); // 存放人工选择的要素列表
|
|
getAllRgDataList(); // 存放人工选择的要素列表
|
|
initializeMap();
|
|
initializeMap();
|
|
- getPlatforms();
|
|
|
|
|
|
+ getPlatforms();
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
</script>
|
|
@@ -706,7 +707,7 @@ const toggleSelection = (item) => {
|
|
</style>
|
|
</style>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
-.map {
|
|
|
|
|
|
+.map {
|
|
width: 100%;
|
|
width: 100%;
|
|
/* height: 100vh; */
|
|
/* height: 100vh; */
|
|
height: calc(100vh - 50px); /* 使用 calc() 来确保地图占满视口高度,减去上方的固定高度 */
|
|
height: calc(100vh - 50px); /* 使用 calc() 来确保地图占满视口高度,减去上方的固定高度 */
|
|
@@ -739,25 +740,25 @@ const toggleSelection = (item) => {
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
-.slider-scale {
|
|
|
|
- width: 720px;
|
|
|
|
- margin-top: -10px;
|
|
|
|
|
|
+.slider-scale {
|
|
|
|
+ width: 720px;
|
|
|
|
+ margin-top: -10px;
|
|
}
|
|
}
|
|
|
|
|
|
.gis-bottom-box {
|
|
.gis-bottom-box {
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
/* 经纬度所在位置 */
|
|
/* 经纬度所在位置 */
|
|
.mouse-position {
|
|
.mouse-position {
|
|
- position: absolute;
|
|
|
|
- bottom: 0px;
|
|
|
|
- right: 1px;
|
|
|
|
- background-color: rgba(255, 255, 255, 0.7);
|
|
|
|
- padding: 3px;
|
|
|
|
- border: 1px solid #ccc;
|
|
|
|
- font-size: 14px;
|
|
|
|
- z-index: 1000;
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 0px;
|
|
|
|
+ right: 1px;
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.7);
|
|
|
|
+ padding: 3px;
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ z-index: 1000;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|