up
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@ -378,6 +378,7 @@ const chartModeDiv = ref(null);
|
||||
let cunVar = ref(null);
|
||||
let zhenVar = ref(null);
|
||||
let regionName = ref('');
|
||||
let flags = ref(false);
|
||||
let amount = ref([
|
||||
{
|
||||
wheatUnitOutputValue: 0,
|
||||
@ -1051,13 +1052,13 @@ function rightFoldClick() {
|
||||
const SwitchMode = () => {
|
||||
SwitchFlag.value = !SwitchFlag.value;
|
||||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||||
statInfo.style.width = window.innerWidth - 200 + 'px'; //初始化echarts图表宽度
|
||||
statInfo.style.height = window.innerHeight - 200 + 'px';
|
||||
statInfo.style.width = document.querySelector('.chartMode').offsetWidth + 'px'; //初始化echarts图表宽度
|
||||
statInfo.style.height = document.querySelector('.chartMode').offsetHeight + 'px';
|
||||
const myChart = echarts.init(statInfo);
|
||||
// 设置宽度自适应
|
||||
window.addEventListener('resize', () => {
|
||||
statInfo.style.width = window.innerWidth - 200 + 'px';
|
||||
statInfo.style.height = window.innerHeight - 200 + 'px';
|
||||
statInfo.style.width = document.querySelector('.chartMode').offsetWidth + 'px';
|
||||
statInfo.style.height = document.querySelector('.chartMode').offsetHeight + 'px';
|
||||
myChart.resize();
|
||||
});
|
||||
chartModes();
|
||||
@ -1242,13 +1243,13 @@ const onSubmit = () => {
|
||||
}
|
||||
}
|
||||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||||
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
|
||||
statInfo.style.height = window.innerHeight - 100 + 'px';
|
||||
statInfo.style.width = document.querySelector('.app-main').offsetWidth-50 + 'px'; //初始化echarts图表宽度
|
||||
statInfo.style.height = document.querySelector('.app-main').offsetHeight + 'px';
|
||||
const myChart = echarts.init(statInfo);
|
||||
// 设置宽度自适应
|
||||
window.addEventListener('resize', () => {
|
||||
statInfo.style.width = window.innerWidth - 200 + 'px';
|
||||
statInfo.style.height = window.innerHeight - 200 + 'px';
|
||||
statInfo.style.width = document.querySelector('.app-main').offsetWidth + 'px';
|
||||
statInfo.style.height = document.querySelector('.app-main').offsetHeight + 'px';
|
||||
myChart.resize();
|
||||
});
|
||||
chartModes();
|
||||
@ -1316,6 +1317,7 @@ const Nindex = index => {
|
||||
return index + 1 + (page - 1) * pagesize;
|
||||
};
|
||||
|
||||
|
||||
/*-------------echarts--------------*/
|
||||
function areachar() {
|
||||
const areaDivIntance = echarts.init(areaDiv.value);
|
||||
@ -1943,8 +1945,8 @@ function chartModes() {
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
bottom: '15%',
|
||||
top: '5%',
|
||||
bottom: '20%',
|
||||
},
|
||||
// legend: {
|
||||
// data: ['人群数量', '基金金额'],
|
||||
@ -1959,7 +1961,7 @@ function chartModes() {
|
||||
type: 'slider',
|
||||
width: '40%',
|
||||
zoomLock: true,
|
||||
top: '90%',
|
||||
top: '85%',
|
||||
start: 0,
|
||||
end: ends,
|
||||
showDataShadow: false,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -346,6 +346,11 @@ function initMap() {
|
||||
duration: 0,
|
||||
});
|
||||
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
|
||||
// 图层点击事件
|
||||
// layerClick();
|
||||
// 蒙版
|
||||
|
||||
@ -351,6 +351,11 @@ function initMap() {
|
||||
duration: 0,
|
||||
});
|
||||
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
|
||||
// 图层点击事件
|
||||
// layerClick();
|
||||
// 蒙版
|
||||
|
||||
@ -345,7 +345,10 @@ function initMap() {
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 0,
|
||||
});
|
||||
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
// 图层点击事件
|
||||
// layerClick();
|
||||
// 蒙版
|
||||
|
||||
@ -114,6 +114,12 @@
|
||||
>
|
||||
雨量/蒸发量
|
||||
</p>
|
||||
<p
|
||||
:class="active == '6' ? 'SelectedDiv' : ''"
|
||||
@click="depthclick(6)"
|
||||
>
|
||||
大气压力
|
||||
</p>
|
||||
</div>
|
||||
<div ref="chartDiv" class="chartDiv"></div>
|
||||
</div>
|
||||
@ -466,6 +472,13 @@ function farmland() {
|
||||
arr2 = chartData.value.evaporation;
|
||||
color = 'rgba(0, 209, 195, 1)';
|
||||
break;
|
||||
case 6:
|
||||
leftY = '大气压力(hpa)';
|
||||
rightY = '';
|
||||
arr1 = chartData.value.atmosphericPressure;
|
||||
arr2 = [];
|
||||
color = 'rgba(9, 187, 222, 0.8)';
|
||||
break;
|
||||
}
|
||||
var time = chartData.value.dataTimeArr;
|
||||
console.log(arr1);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -567,6 +567,11 @@ function initMap() {
|
||||
// 去除logo
|
||||
viewer.cesiumWidget.creditContainer.style.display = 'none';
|
||||
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
|
||||
addWms('huangdaoqu_town', 'huangdaoqu_town');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -95,7 +95,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cesiumContainersDiv">
|
||||
<div v-if="!flags" class="cesiumContainersDiv">
|
||||
<div id="cesiumContainers" class="detailed"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -139,9 +139,11 @@ let formInline = ref({
|
||||
flag: '',
|
||||
divisions: '',
|
||||
});
|
||||
let flags = ref(false);
|
||||
let currentPage = ref(1); //当前页
|
||||
let pageSize = ref(12); //每页条数
|
||||
let center = null; // 指定中心点
|
||||
const newData=ref({})
|
||||
const data = reactive({
|
||||
videoSrc:
|
||||
'http://cmgw-vpc.lechange.com:8888/LCO/9C023C5FACFE48F/0/1/20230530T033445/a44e6e04b0608347f0209ab2b25aa258.m3u8',
|
||||
@ -151,7 +153,10 @@ onMounted(() => {
|
||||
initLeafletMap();
|
||||
getCameraNames();
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
// document.querySelector('.mode').style.display = 'none';
|
||||
window.document.querySelector('#screenfull').style.display = 'none';
|
||||
});
|
||||
const initLeafletMap = () => {
|
||||
//加载地图
|
||||
map = L.map('cesiumContainers', {
|
||||
@ -163,7 +168,7 @@ const initLeafletMap = () => {
|
||||
});
|
||||
// 渲染底图
|
||||
L.tileLayer(
|
||||
'http://t0.tianditu.com/DataServer?T=vec_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||||
'http://t0.tianditu.com/DataServer?T=img_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||||
).addTo(map);
|
||||
L.tileLayer(
|
||||
'http://t0.tianditu.com/DataServer?T=cia_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||||
@ -182,7 +187,11 @@ const getTreeDatas = () => {
|
||||
const getCameraNames = videoName => {
|
||||
getCameraName({ name: videoName }).then(res => {
|
||||
tabulation.value = res.data;
|
||||
tableNewData.value = res.data;
|
||||
console.log(newData.value)
|
||||
if(newData.value.children!==null){
|
||||
tableNewData.value = res.data;
|
||||
}
|
||||
|
||||
res.data.forEach((item, index) => {
|
||||
center = L.latLng(item.latitude,item.longitude);
|
||||
map.setView(center, 17);
|
||||
@ -202,8 +211,8 @@ const handleNodeClick = (data, node, data1, data2) => {
|
||||
formInline.value.flag = '';
|
||||
// let oriFatherId = node.parent.parent.data;
|
||||
// label1.value = oriFatherId.label;
|
||||
newData.value=data
|
||||
getCameraNames(label2.value);
|
||||
console.log(data);
|
||||
};
|
||||
const onDetail = e => {
|
||||
console.log(e);
|
||||
@ -232,6 +241,10 @@ var LeafIcon = L.Icon.extend({
|
||||
var greenIcon = new LeafIcon({
|
||||
iconUrl: iconShadow,
|
||||
});
|
||||
//tabs
|
||||
const foldClick = () => {
|
||||
flags.value = !flags.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -2,26 +2,6 @@
|
||||
<div class="center">
|
||||
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||||
<div class="rightWra">
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<span>撂荒耕地类型统计</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||
<!-- <div ref="ProgressBarDiv" class="ProgressBar"></div> -->
|
||||
</div>
|
||||
<div class="rightbottom">
|
||||
<div class="title">
|
||||
<span>撂荒耕地面积统计</span>
|
||||
@ -168,30 +148,31 @@
|
||||
<span><img src="@/assets/images/face.png" alt="" /></span>
|
||||
<span><img src="@/assets/images/position.png" alt="" /></span>
|
||||
</div>
|
||||
<div id="popup1">
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index">
|
||||
<div class="rowWra">
|
||||
<span>作物：</span>
|
||||
<span>{{ item.crop }}</span>
|
||||
</div>
|
||||
<div class="rowWra">
|
||||
<span>面积：</span>
|
||||
<span>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</span>
|
||||
</div>
|
||||
<div class="rowWra">
|
||||
<span>镇名：</span>
|
||||
<span>{{ item.town }}</span>
|
||||
</div>
|
||||
<div class="rowWra" v-if="item.village">
|
||||
<span>村名：</span>
|
||||
<span>{{ item.village }}</span>
|
||||
</div>
|
||||
<div class="rowWra" v-if="item.people">
|
||||
<span>土地所有人：</span>
|
||||
<span>{{ item.people }}</span>
|
||||
<div id="popup" class="ol-popup">
|
||||
<div class="pophead" style="width: 100%; height: 20px">
|
||||
<div
|
||||
id="popup-title"
|
||||
style="
|
||||
font: bold 15px sans-serif;
|
||||
align: left;
|
||||
position: absolute;
|
||||
/* top: 5px; */
|
||||
left: 17px;
|
||||
color: #fff;
|
||||
"
|
||||
></div>
|
||||
<a href="#" id="popup-closer" class="ol-popup-closer" style="color: #8e908c"></a>
|
||||
</div>
|
||||
<div id="popup-content" style="padding: 10px">
|
||||
<div v-for="(item, index) in alterArr" :key="index">
|
||||
<p>
|
||||
<span>撂荒地</span>
|
||||
:
|
||||
<span>{{ Number(item.wasteland).toFixed(2) }}(亩)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
<div id="popup-pagination"></div>
|
||||
</div>
|
||||
<el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
|
||||
</div>
|
||||
@ -203,12 +184,10 @@ import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||||
import { getAbandon, getNonFoodHuoChun } from '@/api/plough/abandonedLand.js';
|
||||
import axios from 'axios';
|
||||
|
||||
let viewer = ref(null);
|
||||
const farmlandDiv = ref(null);
|
||||
const ProgressBarDiv = ref(null);
|
||||
const ASdivisionDiv = ref(null);
|
||||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||||
const value = ref('370211');
|
||||
@ -216,6 +195,9 @@ const clickInfoMap = ref({ info: [] });
|
||||
const flag = ref(false);
|
||||
let leftWraFlag = ref(true);
|
||||
let rightWraFlag = ref(true);
|
||||
const checkList = ref([]);
|
||||
let checkListdata = ref([]);
|
||||
let alterArr = ref([]);
|
||||
//下载
|
||||
/*---------------------------*/
|
||||
const Deta = item => {
|
||||
@ -231,109 +213,18 @@ const downloadURL = url => {
|
||||
};
|
||||
let dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
大豆: [],
|
||||
地瓜: [],
|
||||
花生: [],
|
||||
蓝莓: [],
|
||||
茶叶: [],
|
||||
马铃薯: [],
|
||||
白菜和萝卜: [],
|
||||
其他: [],
|
||||
};
|
||||
let dic = {
|
||||
小麦: { color: 'rgba(255, 141, 26, 1)', disabled: false },
|
||||
玉米: { color: 'rgba(255, 255, 26, 1)', disabled: true },
|
||||
大豆: { color: 'rgba(255, 201, 148, 1)', disabled: false },
|
||||
地瓜: { color: 'rgba(255, 84, 84, 1)', disabled: false },
|
||||
花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
|
||||
蓝莓: { color: 'rgba(26, 255, 255, 1)', disabled: false },
|
||||
茶叶: { color: 'rgba(26, 255, 140, 1)', disabled: false },
|
||||
马铃薯: { color: 'rgba(255, 171, 87, 1)', disabled: true },
|
||||
白菜和萝卜: { color: 'rgba(140, 255, 26, 1)', disabled: true },
|
||||
其他: { color: 'rgba(140, 26, 255, 1)', disabled: false },
|
||||
撂荒地: { color: 'rgba(255, 141, 26, 1)', disabled: false },
|
||||
};
|
||||
// 图层字典
|
||||
let layersDic = {
|
||||
小麦: 'shuzisannong:xiaomai',
|
||||
// 玉米: 'shuzisannong:yumi',
|
||||
大豆: 'shuzisannong:dadou',
|
||||
地瓜: 'shuzisannong:digua',
|
||||
花生: 'shuzisannong:huasheng',
|
||||
蓝莓: 'shuzisannong:lanmei',
|
||||
茶叶: 'shuzisannong:chaye',
|
||||
其他: 'shuzisannong:other',
|
||||
// 马铃薯: 'rgba(225, 153, 75, 1)',
|
||||
// 白菜和萝卜: 'rgba(166, 209, 82, 1)',
|
||||
撂荒地: {
|
||||
setOf: '2022-06-01-gengdi',
|
||||
name: 'T2022_06_01_liaohuang',
|
||||
},
|
||||
};
|
||||
let Pie3D = reactive({
|
||||
arr: [
|
||||
{
|
||||
name: '小麦',
|
||||
value: 101,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
color: 'rgba(110, 209, 84, 0.9)',
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '花生',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(251, 201, 3, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '大豆',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(240, 129, 31, 0.9)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '地瓜',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(27, 85, 222, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '蓝莓',
|
||||
value: 56,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(72, 102, 211, 0.9)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
let layers = ref(null); //村
|
||||
var data = {
|
||||
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
|
||||
corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
|
||||
@ -359,152 +250,312 @@ onMounted(() => {
|
||||
// checkList.value = Object.keys(dic.filter(item => !item.disabled))
|
||||
});
|
||||
// 初始化
|
||||
function initonMounted() {
|
||||
getaArea(); //面积
|
||||
getTownships();
|
||||
getvillages(); //村
|
||||
initMap(); //地图
|
||||
farmland(); //图表
|
||||
ASdivision(); //图表
|
||||
getArea(); //请求
|
||||
getFarmland();
|
||||
checkList.value = Object.keys(dic);
|
||||
}
|
||||
const mapOption = {
|
||||
url:
|
||||
'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
|
||||
'&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
|
||||
'&style=default&format=tiles&tk=31091965e263284a501a723b8909f405',
|
||||
layer: 'tdtCva',
|
||||
style: 'default',
|
||||
format: 'tiles',
|
||||
tileMatrixSetID: 'c',
|
||||
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
|
||||
tilingScheme: new Cesium.GeographicTilingScheme(),
|
||||
tileMatrixLabels: [
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'13',
|
||||
'14',
|
||||
'15',
|
||||
'16',
|
||||
'17',
|
||||
'18',
|
||||
'19',
|
||||
],
|
||||
maximumLevel: 18,
|
||||
};
|
||||
Cesium.Ion.defaultAccessToken =
|
||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzcwZmJmNi02MzQ5LTQ1MGEtODgzMy0yZTZiZGExY2MzMGMiLCJpZCI6MTAxOTgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJnYyJdLCJpYXQiOjE1ODEzMDgxNTR9.NeJU4yfUi-SnLrNDOBYsQgmiSh3B4axCTi1m84Qw99c';
|
||||
function initMap() {
|
||||
viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
baseLayerPicker: false,
|
||||
shouldAnimate: true, //自动播放
|
||||
infoBox: false, //信息框
|
||||
animation: false, //“动画”窗口小部件提供用于播放，暂停和倒退的按钮，以及当前时间和日期，并由“飞梭环”包围，用于控制动画的速度。cesium示例地图左下角那个
|
||||
timeline: false, //时间轴是用于显示和控制当前场景时间的小部件。
|
||||
geocoder: false, //查找，用于查找地址和地标，以及将照相机悬挂到它们。使用铯离子进行地址解析。,cesium示例地图右上角的放大镜
|
||||
homeButton: false, //主页按钮
|
||||
navigationHelpButton: false, //导航帮助按钮
|
||||
selectionIndicator: false, //原生选择绿框
|
||||
fullscreenButton: false, //右下角的全屏按钮
|
||||
// terrainProvider:new Cesium.createWorldTerrain(),
|
||||
terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
|
||||
sceneModePicker: false, //是否显示投影方式控件
|
||||
contextOptions: {
|
||||
webgl: {
|
||||
alpha: true,
|
||||
},
|
||||
},
|
||||
|
||||
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||||
...mapOption,
|
||||
// url: "http://service.sdmap.gov.cn/hisimage/weipian202209?tk=9cc3e9deb3cf643b6f133717c333d16d",
|
||||
// layer: "c",
|
||||
// style: ",c",
|
||||
// format: "image/png",
|
||||
// tileMatrixSetID: "EPSG:4490",
|
||||
// rectangle: Cesium.Rectangle.fromDegrees(114.8, 34.35, 122.82, 38.43),
|
||||
// // subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
|
||||
// tilingScheme: new Cesium.GeographicTilingScheme(),
|
||||
// tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
|
||||
// // maximumLevel: 18
|
||||
function initonMounted() {
|
||||
// getTownships();
|
||||
// getvillages(); //村
|
||||
initmap(); //地图
|
||||
alter();
|
||||
// farmland(); //图表
|
||||
// ASdivision(); //图表
|
||||
// getArea(); //请求
|
||||
// getFarmland();
|
||||
for (const key in dic) {
|
||||
if (dic[key].disabled !== true) {
|
||||
checkListdata.value.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
checkList.value = checkListdata.value;
|
||||
console.log(checkList.value);
|
||||
}
|
||||
|
||||
/*-------------地图------------------------*/
|
||||
let map = ref(null);
|
||||
let container = ref(null);
|
||||
let content = ref(null);
|
||||
let popupCloser = ref(null);
|
||||
let overlay = ref(null);
|
||||
function initmap() {
|
||||
// 获取父元素和地图容器
|
||||
var parentElement = document.querySelector('.center');
|
||||
var mapContainer = document.getElementById('cesiumContainer');
|
||||
map = new ol.Map({
|
||||
target: 'cesiumContainer',
|
||||
controls: [],
|
||||
view: new ol.View({
|
||||
center: [119.86763411957472, 35.88435182141938],
|
||||
zoom: 11,
|
||||
projection: 'EPSG:4326',
|
||||
}),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Tianditu({
|
||||
layerType: 'img',
|
||||
key: '1d109683f4d84198e37a38c442d68311',
|
||||
}),
|
||||
}),
|
||||
//注记
|
||||
// new ol.layer.Tile({
|
||||
// source: new ol.source.Tianditu({
|
||||
// layerType: 'img',
|
||||
// isLabel: true,
|
||||
// key: '1d109683f4d84198e37a38c442d68311',
|
||||
// }),
|
||||
// }),
|
||||
],
|
||||
});
|
||||
cun();
|
||||
zhen();
|
||||
//滚轮控制村级矢量
|
||||
map.on('moveend', function (e) {
|
||||
var zoom = map.getView().getZoom(); //获取当前地图的缩放级别
|
||||
if (zoom >= 13) {
|
||||
layers.setVisible(true); //显示图层
|
||||
} else {
|
||||
layers.setVisible(false);
|
||||
}
|
||||
});
|
||||
map.on('singleclick', function (e) {
|
||||
var coodinate = e.coordinate;
|
||||
var lon = coodinate[0];
|
||||
var lat = coodinate[1];
|
||||
var view = map.getView();
|
||||
var zoom = map.getView().getZoom();
|
||||
console.log(lon, lat);
|
||||
view.animate({
|
||||
center: [lon, lat],
|
||||
duration: 1000,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'huangdaoqu_village@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'huangdaoqu_town@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
});
|
||||
// 监听父元素大小变化
|
||||
var resizeObserver = new ResizeObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
// 获取父元素的新大小
|
||||
var newWidth = entry.contentRect.width;
|
||||
var newHeight = entry.contentRect.height;
|
||||
|
||||
// 调整地图容器的大小
|
||||
mapContainer.style.width = newWidth + 'px';
|
||||
mapContainer.style.height = newHeight + 'px';
|
||||
|
||||
// 重新渲染地图
|
||||
map.updateSize();
|
||||
});
|
||||
});
|
||||
// 开始监听父元素大小变化
|
||||
resizeObserver.observe(parentElement);
|
||||
}
|
||||
|
||||
const cun = () => {
|
||||
layers = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'huangdaoqu_village',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
map.addLayer(layers);
|
||||
};
|
||||
const zhen = () => {
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
map.addLayer(layer);
|
||||
};
|
||||
|
||||
const addwms = name => {
|
||||
let layer = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
// url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_village/rest/maps/huangdaoqu_village@huangdaoqu_village',
|
||||
url: serverAPI.geoserverUrl + `/map-${name.setOf}/rest/maps/${name.name}@${name.setOf}`,
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: name.name,
|
||||
projection: 'EPSG:4326', //3857
|
||||
});
|
||||
map.addLayer(layer);
|
||||
};
|
||||
|
||||
function QueryData(e, name, url, item) {
|
||||
let newDataZh = [];
|
||||
var point = new ol.geom.Point(e.coordinate);
|
||||
var param = new ol.supermap.QueryByGeometryParameters({
|
||||
queryParams: {
|
||||
name: name,
|
||||
},
|
||||
geometry: point,
|
||||
});
|
||||
let titleDiv = document.querySelector('#popup-title');
|
||||
let layergaoliang = ref(null);
|
||||
let layerzhezhao = ref(null);
|
||||
new ol.supermap.QueryService(url).queryByGeometry(param, function (data) {
|
||||
layerzhezhao = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
let name = '';
|
||||
if (item == '镇' && data.result.recordsets[0].features.features[0].properties.XJQYDM) {
|
||||
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
|
||||
value.value = code;
|
||||
let arr = [];
|
||||
getAbandon().then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.subregionCode == code) {
|
||||
name = item.subregionName;
|
||||
arr.push(item);
|
||||
}
|
||||
});
|
||||
alter();
|
||||
alterArr.value = arr;
|
||||
});
|
||||
}else if (
|
||||
item == '村' &&
|
||||
data.result.recordsets[0].features.features[0].properties.CJQYDM
|
||||
) {
|
||||
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
|
||||
let arr = [];
|
||||
getNonFoodHuoChun({ divisions: code ,yearMonth:'2023-05'}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.subregionCode == code) {
|
||||
name = item.subregionName;
|
||||
console.log(item)
|
||||
arr.push(item);
|
||||
}
|
||||
});
|
||||
alterArr.value = arr;
|
||||
alter();
|
||||
});
|
||||
}
|
||||
function alter() {
|
||||
if (data.result.currentCount > 0) {
|
||||
console.log(data.result.recordsets[0].features);
|
||||
if (data.result.recordsets[0].features) {
|
||||
overlay.setPosition(point.flatCoordinates);
|
||||
console.log(name);
|
||||
titleDiv.innerHTML = name;
|
||||
}
|
||||
layergaoliang = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||||
map.removeLayer(layergaoliang);
|
||||
var llll = new ol.format.GeoJSON().readFeatures(data.result.recordsets[0].features);
|
||||
newDataZh = data.result.recordsets[0].features.features[0].geometry.coordinates;
|
||||
addConver(data.result.recordsets[0].features.features[0].geometry.coordinates);
|
||||
var selectFeatureSource = new ol.source.Vector();
|
||||
selectFeatureSource.addFeatures(llll);
|
||||
const style = new ol.style.Style({
|
||||
// fill: new ol.style.Fill({
|
||||
// color: 'rgba(255, 219, 113, 0.3)',
|
||||
// }),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(255, 219, 113, 1.0)',
|
||||
// lineDash: [10, 10],
|
||||
width: 5,
|
||||
}),
|
||||
});
|
||||
var vectorQuery = new ol.layer.Vector({
|
||||
id: 'dianjigaoliang',
|
||||
source: selectFeatureSource,
|
||||
zIndex: 9999,
|
||||
});
|
||||
vectorQuery.setStyle(style);
|
||||
map.addLayer(vectorQuery);
|
||||
}
|
||||
}
|
||||
});
|
||||
popupCloser.addEventListener('click', function () {
|
||||
layerzhezhao = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
erase(newDataZh);
|
||||
value.value = '370211';
|
||||
layergaoliang = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||||
map.removeLayer(layergaoliang);
|
||||
overlay.setPosition(undefined);
|
||||
});
|
||||
}
|
||||
// 弹窗
|
||||
const alter = () => {
|
||||
container = document.getElementById('popup');
|
||||
//拿到弹出框内容元素
|
||||
content = document.getElementById('popup-content');
|
||||
//拿到弹出框关闭元素
|
||||
popupCloser = document.getElementById('popup-closer');
|
||||
//创建弹出框容器
|
||||
overlay = new ol.Overlay({
|
||||
element: document.getElementById('popup'), // 弹框容器的id
|
||||
positioning: 'bottom-center',
|
||||
stopEvent: true,
|
||||
offset: [0, -10],
|
||||
});
|
||||
map.addOverlay(overlay);
|
||||
};
|
||||
//添加遮罩
|
||||
function addConver(data) {
|
||||
let source = new ol.source.Vector();
|
||||
var converLayer = new ol.layer.Vector({
|
||||
id: 'zhezhao',
|
||||
source: source,
|
||||
style: new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba( 105, 105, 105, 0.9)',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
// 去除logo
|
||||
viewer.cesiumWidget.creditContainer.style.display = 'none';
|
||||
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 0,
|
||||
const converGeom = erase(data);
|
||||
const convertFt = new ol.Feature({
|
||||
geometry: converGeom,
|
||||
});
|
||||
|
||||
// 图层点击事件
|
||||
layerClick();
|
||||
// 添加镇级矢量
|
||||
addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
|
||||
converLayer.getSource().addFeature(convertFt);
|
||||
map.addLayer(converLayer);
|
||||
}
|
||||
|
||||
const checkList = ref([]);
|
||||
|
||||
function getLevel(height) {
|
||||
if (height > 48000000) {
|
||||
return 0;
|
||||
} else if (height > 24000000) {
|
||||
return 1;
|
||||
} else if (height > 12000000) {
|
||||
return 2;
|
||||
} else if (height > 6000000) {
|
||||
return 3;
|
||||
} else if (height > 3000000) {
|
||||
return 4;
|
||||
} else if (height > 1500000) {
|
||||
return 5;
|
||||
} else if (height > 750000) {
|
||||
return 6;
|
||||
} else if (height > 375000) {
|
||||
return 7;
|
||||
} else if (height > 187500) {
|
||||
return 8;
|
||||
} else if (height > 93750) {
|
||||
return 9;
|
||||
} else if (height > 46875) {
|
||||
return 10;
|
||||
} else if (height > 23437.5) {
|
||||
return 11;
|
||||
} else if (height > 11718.75) {
|
||||
return 12;
|
||||
} else if (height > 5859.38) {
|
||||
return 13;
|
||||
} else if (height > 2929.69) {
|
||||
return 14;
|
||||
} else if (height > 1464.84) {
|
||||
return 15;
|
||||
} else if (height > 732.42) {
|
||||
return 16;
|
||||
} else if (height > 366.21) {
|
||||
return 17;
|
||||
} else {
|
||||
return 18;
|
||||
}
|
||||
//擦除操作，生产遮罩范围
|
||||
function erase(data) {
|
||||
console.log(data);
|
||||
const extent = [-180, -90, 180, 90];
|
||||
const polygonRing = ol.geom.Polygon.fromExtent(extent);
|
||||
const coords = data;
|
||||
console.log(coords);
|
||||
coords.forEach(coord => {
|
||||
const linearRing = new ol.geom.LinearRing(coord[0]);
|
||||
polygonRing.appendLinearRing(linearRing);
|
||||
});
|
||||
return polygonRing;
|
||||
}
|
||||
|
||||
function change(e, a) {
|
||||
// console.log('e:', e, a);
|
||||
// removeWms('crop');
|
||||
// addwms();
|
||||
}
|
||||
|
||||
// 农作物
|
||||
watch(
|
||||
() => checkList.value,
|
||||
@ -519,9 +570,11 @@ watch(
|
||||
});
|
||||
newData.forEach(item => {
|
||||
if (layersDic[item]) {
|
||||
addWms(layersDic[item], item + 'zuowu');
|
||||
console.log(layersDic[item]);
|
||||
addwms(layersDic[item]);
|
||||
}
|
||||
});
|
||||
// 添加镇级矢量
|
||||
} else if (val.length < oldVal.length) {
|
||||
// 挑选出减少的数据
|
||||
const newData = oldVal.filter(item => {
|
||||
@ -532,38 +585,23 @@ watch(
|
||||
});
|
||||
newData.forEach(item => {
|
||||
if (layersDic[item]) {
|
||||
removeWms([item + 'zuowu']);
|
||||
// 假设要删除的图层为 layerToRemove
|
||||
var index = map.getLayers().getArray().indexOf(layersDic[item].name);
|
||||
console.log(map.getLayers().getArray());
|
||||
map.getLayers()
|
||||
.getArray()
|
||||
.forEach((ite, index) => {
|
||||
if (ite.A.name) {
|
||||
if (ite.A.name == layersDic[item].name) {
|
||||
map.getLayers().removeAt(index);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 添加wms
|
||||
function addWms(layers, customName, bottom) {
|
||||
let map = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
|
||||
layers: layers, //图层名
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
transparent: true, //是否透明
|
||||
// CQL_FILTER: `crop in (${name})`,
|
||||
},
|
||||
});
|
||||
map.customName = customName; //自己定义各种属性
|
||||
let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
|
||||
// if (customName.indexOf('gbznt') > -1) {
|
||||
// console.log('dididididi');
|
||||
// // viewer.imageryLayers.lower(dd);//将图层下移一层
|
||||
// viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
|
||||
// viewer.imageryLayers.raise(dd); //将图层上移一层
|
||||
// }
|
||||
if (bottom) {
|
||||
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
|
||||
viewer.imageryLayers.raise(dd); //将图层上移一层
|
||||
}
|
||||
}
|
||||
// 图层点击事件
|
||||
let XZDM = '';
|
||||
function layerClick() {
|
||||
@ -1161,122 +1199,6 @@ const selectTab = () => {
|
||||
addvillage(`XZDM=${value.value}`, 'village_CQL');
|
||||
};
|
||||
|
||||
//图表echarts
|
||||
function farmland() {
|
||||
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||||
let option = {
|
||||
color: ['#1C86F1'],
|
||||
legend: {
|
||||
show: true,
|
||||
top: '10',
|
||||
left: 'center',
|
||||
textStyle: { color: 'rgba(255,255,255,.9)' },
|
||||
itemWidth: 20,
|
||||
itemHeight: 12.5,
|
||||
icon: 'rect',
|
||||
backgroundColor: 'transparent',
|
||||
x: 'right', // 水平居右
|
||||
},
|
||||
tooltip: {},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '9%',
|
||||
top: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['水田', '旱地', '水浇地', '其他', '其他'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#657CA8',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#eeeeee',
|
||||
rotate: 0,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
nameTextStyle: {
|
||||
color: '#c0c3cd',
|
||||
padding: [0, 0, 0, 0],
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#c0c3cd',
|
||||
fontSize: 14,
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#668092',
|
||||
width: 1,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
width: 1,
|
||||
// "type": "dashed"
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
name: '面积(亩)',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: [100, 78, 56, 124, 67],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
var colorList = [
|
||||
['rgba(12, 141, 211, 1)', 'transparent'],
|
||||
['rgba(67, 189, 178, 1)', 'transparent'],
|
||||
['rgba(254, 201, 107, 1)', 'transparent'],
|
||||
['rgba(255, 107, 107, 1)', 'transparent'],
|
||||
['rgba(107, 107, 255, 1)', 'transparent'],
|
||||
];
|
||||
var index = params.dataIndex;
|
||||
if (params.dataIndex >= colorList.length) {
|
||||
index = params.dataIndex - colorList.length;
|
||||
}
|
||||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: colorList[index][0] },
|
||||
{ offset: 0.5, color: colorList[index][0] },
|
||||
{ offset: 1, color: colorList[index][1] },
|
||||
]);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// areaDivIntance.off('click') //图表渲染前销毁点击事件,防止点击图标多次触发
|
||||
farmlandDivIntance.on('click', param => ChartClick(param));
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
}
|
||||
// 图表点击事件
|
||||
function ChartClick(item) {
|
||||
console.log('item:', item);
|
||||
@ -1300,7 +1222,7 @@ function ChartClick(item) {
|
||||
}
|
||||
if (!cz) {
|
||||
// 添加高标准农田服务
|
||||
addWms(layername, layername + 'gbznt', true);
|
||||
// addWms(layername, layername + 'gbznt', true);
|
||||
}
|
||||
// 定位到地块
|
||||
let features = formLandRef.value;
|
||||
@ -1784,51 +1706,60 @@ $height: calc(100vh - 100px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
#popup1 {
|
||||
/*设置弹出框样式*/
|
||||
.ol-popup {
|
||||
position: absolute;
|
||||
background-color: #eeeeee;
|
||||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
bottom: 12px;
|
||||
left: -50px;
|
||||
min-width: 280px;
|
||||
}
|
||||
.ol-popup:after,
|
||||
.ol-popup:before {
|
||||
top: 100%;
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ol-popup:after {
|
||||
border-top-color: #eeeeee;
|
||||
border-width: 10px;
|
||||
left: 48px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.ol-popup:before {
|
||||
border-top-color: #cccccc;
|
||||
border-width: 11px;
|
||||
left: 48px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
.ol-popup-closer {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 8px;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: '✖';
|
||||
}
|
||||
#popup {
|
||||
border-radius: 5px;
|
||||
background: rgba(2, 31, 26, 1);
|
||||
display: none;
|
||||
// display: none;
|
||||
// justify-content: flex-start;
|
||||
// align-items: flex-end;
|
||||
padding: 30px 8px 20px 8px;
|
||||
border: 2px solid rgba(4, 153, 153, 1);
|
||||
|
||||
.rowWra {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > span:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// margin-top: 20px;
|
||||
line-height: 24px;
|
||||
width: 3em;
|
||||
// font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
& > span:nth-child(2) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 129px;
|
||||
height: 24px;
|
||||
opacity: 1;
|
||||
border-radius: 2px;
|
||||
background: rgba(217, 231, 255, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px 10px 2px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
color: #fff;
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
border: rgba(41, 255, 255, 1);
|
||||
}
|
||||
|
||||
.back_button {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user