2023-04-16 22:33:44 +08:00
|
|
|
|
<template>
|
2023-04-27 11:44:35 +08:00
|
|
|
|
<div class="center">
|
|
|
|
|
|
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
|
|
|
|
|
<div class="leftWra">
|
|
|
|
|
|
<div class="leftTop">
|
|
|
|
|
|
<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>
|
2023-04-27 18:03:12 +08:00
|
|
|
|
<div class="production">
|
|
|
|
|
|
<div class="leftProduction">
|
|
|
|
|
|
<p>
|
|
|
|
|
|
<span>900</span>
|
|
|
|
|
|
吨
|
|
|
|
|
|
<br />
|
|
|
|
|
|
最小值
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="rightProduction">
|
|
|
|
|
|
<p>
|
|
|
|
|
|
<span>960</span>
|
|
|
|
|
|
吨
|
|
|
|
|
|
<br />
|
|
|
|
|
|
最小值
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-04-27 11:44:35 +08:00
|
|
|
|
<div ref="areaDiv" class="areaDiv"></div>
|
|
|
|
|
|
</div>
|
2023-04-27 18:03:12 +08:00
|
|
|
|
|
2023-04-27 11:44:35 +08:00
|
|
|
|
<div class="leftFoldDiv" @click="leftFoldClick()">
|
|
|
|
|
|
<el-icon><ArrowRightBold /></el-icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</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/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.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>
|
|
|
|
|
|
<p
|
|
|
|
|
|
@click="
|
|
|
|
|
|
Deta(
|
|
|
|
|
|
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
下载
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="@/assets/icons/svg/downloads.svg"
|
|
|
|
|
|
style="width: 14px; height: 14px; cursor: pointer"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-select
|
|
|
|
|
|
popper-class="select_city"
|
|
|
|
|
|
@change="selectTab(item)"
|
|
|
|
|
|
v-model="value"
|
|
|
|
|
|
clearable
|
|
|
|
|
|
placeholder="全部"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
v-for="item in Township.arr"
|
|
|
|
|
|
:key="item.properties.XZDM"
|
|
|
|
|
|
:label="item.properties.XZMC"
|
|
|
|
|
|
:value="item.properties.XZDM"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="rightFoldDiv" @click="rightFoldClick()">
|
|
|
|
|
|
<el-icon><ArrowLeftBold /></el-icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bottom_center">
|
|
|
|
|
|
<TimeLine />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tool">
|
|
|
|
|
|
<span><img src="@/assets/images/LAYER.png" alt="" /></span>
|
|
|
|
|
|
<span><img src="@/assets/images/amplify.png" alt="" /></span>
|
|
|
|
|
|
<span><img src="@/assets/images/reduce.png" alt="" /></span>
|
|
|
|
|
|
<span><img src="@/assets/images/measure.png" alt="" /></span>
|
|
|
|
|
|
<span><img src="@/assets/images/face.png" alt="" /></span>
|
|
|
|
|
|
<span><img src="@/assets/images/position.png" alt="" /></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="popup">
|
|
|
|
|
|
<div>{{ clickInfoMap.name }}：</div>
|
|
|
|
|
|
<div>{{ clickInfoMap.value }}亩</div>
|
|
|
|
|
|
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="pop">
|
|
|
|
|
|
<div v-for="(item, index) in townZuowu.label" :key="index">
|
|
|
|
|
|
<div>{{ item.crop }}：</div>
|
|
|
|
|
|
<div>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div v-if="townZuowu.XZQMC">
|
|
|
|
|
|
<div>村名：</div>
|
|
|
|
|
|
<div>{{ townZuowu.XZQMC }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
|
2023-05-05 16:32:31 +08:00
|
|
|
|
<el-collapse class="legend" accordion>
|
|
|
|
|
|
<el-collapse-item name="1">
|
|
|
|
|
|
<template #title>图例</template>
|
|
|
|
|
|
<div class="mt-4">
|
|
|
|
|
|
<el-checkbox-group v-model="checkList" @change="change">
|
|
|
|
|
|
<!-- <el-checkbox
|
|
|
|
|
|
v-for="(value, item, key) in dic"
|
|
|
|
|
|
:key="key"
|
|
|
|
|
|
:style="{
|
|
|
|
|
|
background: value.color,
|
|
|
|
|
|
border: `1px solid ${value.color}`,
|
|
|
|
|
|
width: `100%`,
|
|
|
|
|
|
}"
|
|
|
|
|
|
v-model="checked3"
|
|
|
|
|
|
:disabled="value.disabled"
|
|
|
|
|
|
:label="item"
|
|
|
|
|
|
/> -->
|
|
|
|
|
|
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(255, 238, 204, 1);
|
|
|
|
|
|
border: 1px solid rgba(251, 171, 60, 1);
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked3"
|
|
|
|
|
|
label="0-200"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(255, 220, 153, 1);
|
|
|
|
|
|
border: 1px solid rgba(251, 219, 13, 1);
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked4"
|
|
|
|
|
|
label="200-400"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(255, 203, 102, 1);
|
|
|
|
|
|
border: 1px solid rgba(244, 218, 136, 1);
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked3"
|
|
|
|
|
|
label="400-600"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(255, 185, 51, 1);
|
|
|
|
|
|
border: 1px solid rgba(174, 83, 110, 1);
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked4"
|
|
|
|
|
|
label="600-800"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
style="
|
|
|
|
|
|
background: rgba(255, 168, 0, 1);
|
|
|
|
|
|
border: 1px solid rgba(242, 177, 167, 1);
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
"
|
|
|
|
|
|
v-model="checked3"
|
|
|
|
|
|
label="800-1000"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
|
</el-collapse>
|
2023-04-27 11:44:35 +08:00
|
|
|
|
</div>
|
2023-04-16 22:33:44 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
2023-04-27 11:44:35 +08:00
|
|
|
|
<script setup>
|
|
|
|
|
|
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
2023-05-05 16:54:23 +08:00
|
|
|
|
// import * as turf from '@turf/turf';
|
2023-04-27 11:44:35 +08:00
|
|
|
|
import { useEcharts } from '@/hooks/useEcharts';
|
|
|
|
|
|
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
|
import 'echarts-gl';
|
|
|
|
|
|
import { download } from '@/utils/request';
|
|
|
|
|
|
|
|
|
|
|
|
let viewer = ref(null);
|
|
|
|
|
|
const areaDiv = ref(null);
|
|
|
|
|
|
const farmlandDiv = ref(null);
|
|
|
|
|
|
const ProgressBarDiv = ref(null);
|
|
|
|
|
|
const ASdivisionDiv = ref(null);
|
|
|
|
|
|
const value = ref('370211');
|
|
|
|
|
|
const leftProgressBarDiv = ref(null);
|
|
|
|
|
|
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
|
|
|
|
|
let OptionArr = reactive({ arr: [] });
|
|
|
|
|
|
const clickInfoMap = ref({ name: '', value: '' });
|
|
|
|
|
|
const checkedCities = ref([]);
|
|
|
|
|
|
const formLandRef = ref([]);
|
|
|
|
|
|
const flag = ref(false);
|
|
|
|
|
|
let leftWraFlag = ref(true);
|
|
|
|
|
|
let rightWraFlag = ref(true);
|
|
|
|
|
|
let ff = ref('{x:765,y:191}');
|
|
|
|
|
|
let Pie3D = reactive({
|
|
|
|
|
|
arr: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '小麦',
|
|
|
|
|
|
value: 101,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
color: 'rgba(110, 209, 84, 0.9)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '花生',
|
|
|
|
|
|
value: 156,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(251, 201, 3, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '大豆',
|
|
|
|
|
|
value: 156,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(240, 129, 31, 0.9)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '地瓜',
|
|
|
|
|
|
value: 156,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(27, 85, 222, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '蓝莓',
|
|
|
|
|
|
value: 56,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(72, 102, 211, 0.9)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '茶叶',
|
|
|
|
|
|
value: 56,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(26, 255, 140, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
let dic = {
|
|
|
|
|
|
小麦: 'rgba(102, 142, 214, 0.8)',
|
|
|
|
|
|
玉米: 'rgba(255, 225, 104, 0.8)',
|
|
|
|
|
|
大豆: 'rgba(156, 220, 130, 0.8)',
|
|
|
|
|
|
地瓜: 'rgba(156, 220, 130, 0.8)',
|
|
|
|
|
|
花生: 'rgba(212, 236, 89, 0.8)',
|
|
|
|
|
|
蓝莓: 'rgba(50, 211, 235, 0.8)',
|
|
|
|
|
|
茶叶: 'rgba(91, 196, 159, 0.8)',
|
|
|
|
|
|
马铃薯: 'rgba(254, 182, 77, 0.8)',
|
|
|
|
|
|
白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
|
|
|
|
|
|
其他: 'rgba(250, 129, 109, 0.8)',
|
|
|
|
|
|
};
|
|
|
|
|
|
watch(
|
|
|
|
|
|
() => Township.arr,
|
|
|
|
|
|
val => {
|
|
|
|
|
|
console.log('val:', val);
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
//行政区划数据
|
|
|
|
|
|
var data = {
|
|
|
|
|
|
title: [],
|
|
|
|
|
|
};
|
|
|
|
|
|
let dd = {
|
|
|
|
|
|
小麦: [],
|
|
|
|
|
|
玉米: [],
|
|
|
|
|
|
大豆: [],
|
|
|
|
|
|
地瓜: [],
|
|
|
|
|
|
花生: [],
|
|
|
|
|
|
蓝莓: [],
|
|
|
|
|
|
茶叶: [],
|
|
|
|
|
|
马铃薯: [],
|
|
|
|
|
|
白菜和萝卜: [],
|
|
|
|
|
|
其他: [],
|
|
|
|
|
|
};
|
|
|
|
|
|
let areatext = '8383894';
|
|
|
|
|
|
|
|
|
|
|
|
//表格数据
|
|
|
|
|
|
let tableData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '小麦',
|
|
|
|
|
|
name: '2934362亩',
|
|
|
|
|
|
address: '35%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '玉米',
|
|
|
|
|
|
name: '1676778亩',
|
|
|
|
|
|
address: '20%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '大豆',
|
|
|
|
|
|
name: '1257584亩',
|
|
|
|
|
|
address: '15%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '地瓜',
|
|
|
|
|
|
name: '1341423亩',
|
|
|
|
|
|
address: '16%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '花生',
|
|
|
|
|
|
name: '1592939亩',
|
|
|
|
|
|
address: '19%',
|
|
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
let TypeTime = {
|
|
|
|
|
|
大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
|
|
|
|
|
|
小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
|
|
|
|
|
|
地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
|
|
|
|
|
|
花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 组件挂载完成后执行
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
getArea(); //请求
|
|
|
|
|
|
getaArea(); //面积
|
|
|
|
|
|
getTownships();
|
|
|
|
|
|
getvillages(); //村
|
|
|
|
|
|
|
|
|
|
|
|
//地图
|
|
|
|
|
|
initMap();
|
|
|
|
|
|
areachar();
|
|
|
|
|
|
farmland();
|
|
|
|
|
|
// ProgressBar();
|
|
|
|
|
|
ASdivision();
|
|
|
|
|
|
getFarmland();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/*-------------地图------------------------*/
|
|
|
|
|
|
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
|
|
|
|
|
|
}),
|
|
|
|
|
|
});
|
|
|
|
|
|
// 去除logo
|
|
|
|
|
|
viewer.cesiumWidget.creditContainer.style.display = 'none';
|
|
|
|
|
|
//加载地图服务
|
|
|
|
|
|
// let map = new Cesium.WebMapServiceImageryProvider({
|
|
|
|
|
|
// url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
|
|
|
|
|
// layers: 'shuzisannong:huangdaoqu_town', //图层名
|
|
|
|
|
|
// parameters: {
|
|
|
|
|
|
// service: 'WMS',
|
|
|
|
|
|
// format: 'image/png',
|
|
|
|
|
|
// transparent: true, //是否透明
|
|
|
|
|
|
// },
|
|
|
|
|
|
// });
|
|
|
|
|
|
// viewer.imageryLayers.addImageryProvider(map);
|
|
|
|
|
|
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
|
|
|
|
|
viewer.camera.flyTo({
|
|
|
|
|
|
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
|
|
|
|
|
duration: 2,
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 图层点击事件
|
|
|
|
|
|
layerClick();
|
|
|
|
|
|
// 蒙版
|
|
|
|
|
|
mbHandle();
|
|
|
|
|
|
|
|
|
|
|
|
//加载黄岛区村级地图服务
|
|
|
|
|
|
// Cesium.GeoJsonDataSource.load(
|
|
|
|
|
|
// 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_village&maxFeatures=1180&outputFormat=application%2Fjson',
|
|
|
|
|
|
// {
|
|
|
|
|
|
// stroke: Cesium.Color.fromCssColorString('red'), //轮廓颜色
|
|
|
|
|
|
// fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
|
|
|
|
|
|
// strokeWidth: 3, //轮廓宽度 clampToGround: true,//是否贴地
|
|
|
|
|
|
// }
|
|
|
|
|
|
// ).then(function (dataSource) {
|
|
|
|
|
|
// // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
|
|
|
|
|
|
// viewer.dataSources.add(dataSource); //添加
|
|
|
|
|
|
// viewer.flyTo(dataSource, {
|
|
|
|
|
|
// duration: 5,
|
|
|
|
|
|
// offset: {
|
|
|
|
|
|
// heading: 0.0,
|
|
|
|
|
|
// pitch: -90, //保持垂直视角
|
|
|
|
|
|
// },
|
|
|
|
|
|
// }); //移动到该位置
|
|
|
|
|
|
// });
|
|
|
|
|
|
//加载黄岛区镇级地图服务
|
|
|
|
|
|
// Cesium.GeoJsonDataSource.load(
|
|
|
|
|
|
// 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
|
|
|
|
|
// {
|
|
|
|
|
|
// stroke: Cesium.Color.fromCssColorString('#fff'), //轮廓颜色
|
|
|
|
|
|
// fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
|
|
|
|
|
|
// strokeWidth: 3, //轮廓宽度 clampToGround: true,//是否贴地
|
|
|
|
|
|
// }
|
|
|
|
|
|
// ).then(function (dataSource) {
|
|
|
|
|
|
// // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
|
|
|
|
|
|
// viewer.dataSources.add(dataSource); //添加
|
|
|
|
|
|
// viewer.flyTo(dataSource, {
|
|
|
|
|
|
// duration: 5,
|
|
|
|
|
|
// offset: {
|
|
|
|
|
|
// heading: 0.0,
|
|
|
|
|
|
// pitch: -90, //保持垂直视角
|
|
|
|
|
|
// },
|
|
|
|
|
|
// }); //移动到该位置
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
// axios({
|
|
|
|
|
|
// method: 'get',
|
|
|
|
|
|
// url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
|
|
|
|
|
// })
|
|
|
|
|
|
// .then(res => {
|
|
|
|
|
|
// res.data.features.forEach(item => {
|
|
|
|
|
|
// addBoundaryHandle(item.geometry.coordinates, '');
|
|
|
|
|
|
// });
|
|
|
|
|
|
// })
|
|
|
|
|
|
// .catch(error => {});
|
|
|
|
|
|
|
|
|
|
|
|
//作物分类面积提取地图服务
|
|
|
|
|
|
// let map2 = new Cesium.WebMapServiceImageryProvider({
|
|
|
|
|
|
// url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
|
|
|
|
|
// layers: 'shuzisannong:fenlei', //图层名
|
|
|
|
|
|
// parameters: {
|
|
|
|
|
|
// service: 'WMS',
|
|
|
|
|
|
// format: 'image/png',
|
|
|
|
|
|
// CQL_FILTER: `crop=${city_code}`,
|
|
|
|
|
|
// transparent: true, //是否透明
|
|
|
|
|
|
// },
|
|
|
|
|
|
// });
|
|
|
|
|
|
// viewer.imageryLayers.addImageryProvider(map2);
|
|
|
|
|
|
|
|
|
|
|
|
// Cesium.GeoJsonDataSource.load(
|
|
|
|
|
|
// 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=50&outputFormat=application%2Fjson',
|
|
|
|
|
|
// {
|
|
|
|
|
|
// stroke: Cesium.Color.fromCssColorString('rgba(165,214,63,1)'), //轮廓颜色
|
|
|
|
|
|
// fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
|
|
|
|
|
|
// strokeWidth: 3, //轮廓宽度 clampToGround: true,//是否贴地
|
|
|
|
|
|
// }
|
|
|
|
|
|
// ).then(function (dataSource) {
|
|
|
|
|
|
// // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
|
|
|
|
|
|
// viewer.dataSources.add(dataSource); //添加
|
|
|
|
|
|
// viewer.flyTo(dataSource, {
|
|
|
|
|
|
// duration: 5,
|
|
|
|
|
|
// offset: {
|
|
|
|
|
|
// heading: 0.0,
|
|
|
|
|
|
// pitch: -90, //保持垂直视角
|
|
|
|
|
|
// },
|
|
|
|
|
|
// }); //移动到该位置
|
|
|
|
|
|
// });
|
|
|
|
|
|
//全球注记
|
|
|
|
|
|
// let zhujiLayer = new Cesium.WebMapTileServiceImageryProvider({
|
|
|
|
|
|
// url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5956e6519f2bb0ae8e57bc834298c9f1',
|
|
|
|
|
|
// layer: 'tdtImgBasicLayer',
|
|
|
|
|
|
// style: 'default',
|
|
|
|
|
|
// format: 'image/jpeg',
|
|
|
|
|
|
// tileMatrixSetID: 'GoogleMapsCompatible',
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// });
|
|
|
|
|
|
// viewer.imageryLayers.addImageryProvider(zhujiLayer);
|
|
|
|
|
|
|
|
|
|
|
|
// viewer.camera.flyTo(
|
|
|
|
|
|
// {
|
|
|
|
|
|
// destination: new Cesium.Cartesian3.fromDegrees(104.9, 36.35, 8000000),
|
|
|
|
|
|
// duration: 0,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// offset: {
|
|
|
|
|
|
// heading: Cesium.Math.toRadians(0.0),
|
|
|
|
|
|
// pitch: Cesium.Math.toRadians(-25),
|
|
|
|
|
|
// },
|
|
|
|
|
|
// }
|
|
|
|
|
|
// );
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// data数据数组
|
|
|
|
|
|
// name实体名称，方便以后删除
|
|
|
|
|
|
// color实体颜色
|
|
|
|
|
|
function addBoundaryHandle(data, name, color) {
|
|
|
|
|
|
data.forEach(item => {
|
|
|
|
|
|
let arr = [];
|
|
|
|
|
|
item[0].forEach(mem => {
|
|
|
|
|
|
arr.push(mem[0]);
|
|
|
|
|
|
arr.push(mem[1]);
|
|
|
|
|
|
});
|
|
|
|
|
|
viewer.entities.add({
|
|
|
|
|
|
name: name,
|
|
|
|
|
|
polyline: {
|
|
|
|
|
|
positions: Cesium.Cartesian3.fromDegreesArray(arr),
|
|
|
|
|
|
width: 6,
|
|
|
|
|
|
// material: new Cesium.PolylineDashMaterialProperty({//虚线
|
|
|
|
|
|
material: new Cesium.PolylineGlowMaterialProperty({
|
|
|
|
|
|
//光晕
|
|
|
|
|
|
glowPower: 0.2,
|
|
|
|
|
|
color: color
|
|
|
|
|
|
? Cesium.Color.fromCssColorString(color)
|
|
|
|
|
|
: Cesium.Color.fromBytes(250, 128, 114), //#FA8072
|
|
|
|
|
|
}),
|
|
|
|
|
|
// followSurface: false, //是否贴着地表
|
|
|
|
|
|
clampToGround: true, //贴地
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
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 getFarmland() {
|
|
|
|
|
|
axios({
|
|
|
|
|
|
url:
|
|
|
|
|
|
serverAPI.geoserverUrl +
|
|
|
|
|
|
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
|
|
|
|
|
|
method: 'get',
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(res => {
|
|
|
|
|
|
console.log('农田：', res);
|
|
|
|
|
|
formLandRef.value = res.data.features;
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(err => {});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let townZuowu = ref({ label: [] }); //镇的作物
|
|
|
|
|
|
let XZDM = '';
|
|
|
|
|
|
// 图层点击事件
|
|
|
|
|
|
function layerClick() {
|
|
|
|
|
|
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
|
|
|
|
|
handler.setInputAction(function (movement) {
|
|
|
|
|
|
var ray = viewer.camera.getPickRay(movement.position);
|
|
|
|
|
|
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
|
|
|
|
|
if (cartesian) {
|
|
|
|
|
|
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
|
|
|
|
|
if (cartographic) {
|
|
|
|
|
|
let xy = new Cesium.Cartesian2();
|
|
|
|
|
|
let alti = viewer.camera.positionCartographic.height;
|
|
|
|
|
|
let level = getLevel(alti);
|
|
|
|
|
|
const layers = viewer.imageryLayers._layers;
|
|
|
|
|
|
const index = layers.findIndex(
|
|
|
|
|
|
item =>
|
|
|
|
|
|
item._imageryProvider._layers &&
|
|
|
|
|
|
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
|
|
|
|
|
|
);
|
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
|
const providerPoint = layers[index];
|
|
|
|
|
|
// 拿取最后一个图层
|
|
|
|
|
|
let provider = providerPoint._imageryProvider;
|
|
|
|
|
|
if (
|
|
|
|
|
|
provider &&
|
|
|
|
|
|
provider.ready &&
|
|
|
|
|
|
provider._layers &&
|
|
|
|
|
|
providerPoint.show === true
|
|
|
|
|
|
) {
|
|
|
|
|
|
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
|
|
|
|
|
|
let promise = provider.pickFeatures(
|
|
|
|
|
|
xy.x,
|
|
|
|
|
|
xy.y,
|
|
|
|
|
|
level,
|
|
|
|
|
|
cartographic.longitude,
|
|
|
|
|
|
cartographic.latitude
|
|
|
|
|
|
);
|
|
|
|
|
|
if (promise) {
|
|
|
|
|
|
promise.then(data => {
|
|
|
|
|
|
if (data.length > 0) {
|
|
|
|
|
|
let newData = data['0'];
|
|
|
|
|
|
if (newData.properties && newData.properties.XZDM) {
|
|
|
|
|
|
if (XZDM !== newData.properties.XZDM) {
|
|
|
|
|
|
//防止
|
|
|
|
|
|
XZDM = newData.properties.XZDM;
|
|
|
|
|
|
value.value = XZDM; //
|
|
|
|
|
|
selectTab(); //
|
|
|
|
|
|
let item = newData.data;
|
|
|
|
|
|
// 定位
|
|
|
|
|
|
viewer.camera.flyTo({
|
|
|
|
|
|
destination: Cesium.Rectangle.fromDegrees(
|
|
|
|
|
|
item.bbox[0],
|
|
|
|
|
|
item.bbox[1],
|
|
|
|
|
|
item.bbox[2],
|
|
|
|
|
|
item.bbox[3]
|
|
|
|
|
|
),
|
|
|
|
|
|
duration: 2,
|
|
|
|
|
|
});
|
|
|
|
|
|
// 移除高亮
|
|
|
|
|
|
deleteEntityByName('townLine');
|
|
|
|
|
|
// 高亮边界
|
|
|
|
|
|
addBoundaryHandle(
|
|
|
|
|
|
item.geometry && item.geometry.coordinates,
|
|
|
|
|
|
'townLine',
|
|
|
|
|
|
'yellow'
|
|
|
|
|
|
);
|
|
|
|
|
|
// 移除以前的
|
|
|
|
|
|
removeWms(['village_CQL']);
|
|
|
|
|
|
// 添加新的
|
|
|
|
|
|
addvillage(
|
|
|
|
|
|
`XZDM=${newData.properties.XZDM}`,
|
|
|
|
|
|
'village_CQL'
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
// 显示该镇的种植结构
|
|
|
|
|
|
let entitys = viewer.entities._entities._array;
|
|
|
|
|
|
for (var na = entitys.length - 1; na >= 0; na--) {
|
|
|
|
|
|
if (
|
|
|
|
|
|
entitys[na]._name &&
|
|
|
|
|
|
entitys[na]._name ===
|
|
|
|
|
|
'point' + newData.properties.XZDM
|
|
|
|
|
|
) {
|
|
|
|
|
|
let info = entitys[na]._info;
|
|
|
|
|
|
// entitys[na].label.show = true
|
|
|
|
|
|
townZuowu.value = info; //保存数据
|
|
|
|
|
|
console.log(
|
|
|
|
|
|
townZuowu.value,
|
|
|
|
|
|
'------------------'
|
|
|
|
|
|
);
|
|
|
|
|
|
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
|
|
|
|
|
viewer.scene.postRender.addEventListener(
|
|
|
|
|
|
infoWindowPostRender
|
|
|
|
|
|
);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// if (entitys[na].label) {
|
|
|
|
|
|
// entitys[na].label.show = false
|
|
|
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 移除村高亮
|
|
|
|
|
|
deleteEntityByName('villageLine');
|
|
|
|
|
|
XZQDM = '';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// // 已经有镇了，监听村点击
|
|
|
|
|
|
villageClick(layers, xy, level, cartographic);
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
removeWms(['village_CQL']);
|
|
|
|
|
|
// 移除框框
|
|
|
|
|
|
hiddenOverlayChart(); // 清除监听事件
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
|
|
}
|
|
|
|
|
|
let XZQDM = '';
|
|
|
|
|
|
// 村点击高亮
|
|
|
|
|
|
function villageClick(layers, xy, level, cartographic) {
|
|
|
|
|
|
const index = layers.findIndex(
|
|
|
|
|
|
item =>
|
|
|
|
|
|
item._imageryProvider._layers &&
|
|
|
|
|
|
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
|
|
|
|
|
|
);
|
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
|
const providerPoint = layers[index];
|
|
|
|
|
|
// 拿取最后一个图层
|
|
|
|
|
|
let provider = providerPoint._imageryProvider;
|
|
|
|
|
|
if (provider && provider.ready && provider._layers && providerPoint.show === true) {
|
|
|
|
|
|
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
|
|
|
|
|
|
let promise = provider.pickFeatures(
|
|
|
|
|
|
xy.x,
|
|
|
|
|
|
xy.y,
|
|
|
|
|
|
level,
|
|
|
|
|
|
cartographic.longitude,
|
|
|
|
|
|
cartographic.latitude
|
|
|
|
|
|
);
|
|
|
|
|
|
if (promise) {
|
|
|
|
|
|
promise.then(data => {
|
|
|
|
|
|
if (data.length > 0) {
|
|
|
|
|
|
let newData = data['0'];
|
|
|
|
|
|
if (newData.properties && newData.properties.XZQDM) {
|
|
|
|
|
|
if (XZQDM !== newData.properties.XZQDM) {
|
|
|
|
|
|
//防止
|
|
|
|
|
|
XZQDM = newData.properties.XZQDM;
|
|
|
|
|
|
let item = newData.data;
|
|
|
|
|
|
// 移除高亮
|
|
|
|
|
|
deleteEntityByName('villageLine');
|
|
|
|
|
|
// 高亮边界
|
|
|
|
|
|
addBoundaryHandle(
|
|
|
|
|
|
item.geometry && item.geometry.coordinates,
|
|
|
|
|
|
'villageLine',
|
|
|
|
|
|
'yellow'
|
|
|
|
|
|
);
|
|
|
|
|
|
// townZuowu.value = info//保存数据
|
|
|
|
|
|
|
|
|
|
|
|
// 后插和村
|
|
|
|
|
|
if (newData.properties.XZQDM === '370211104217') {
|
|
|
|
|
|
// console.log('后河岔村委会')
|
|
|
|
|
|
const rectangle = Cesium.Rectangle.fromDegrees(
|
|
|
|
|
|
item.bbox[0],
|
|
|
|
|
|
item.bbox[1],
|
|
|
|
|
|
item.bbox[2],
|
|
|
|
|
|
item.bbox[3]
|
|
|
|
|
|
);
|
|
|
|
|
|
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
|
|
|
|
|
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
|
|
|
|
|
let latitude = Cesium.Math.toDegrees(center.latitude);
|
|
|
|
|
|
let info = {
|
|
|
|
|
|
lon: longitude,
|
|
|
|
|
|
lat: latitude,
|
|
|
|
|
|
...item.properties,
|
|
|
|
|
|
// XZQMC
|
|
|
|
|
|
label: [
|
|
|
|
|
|
{ crop: '茶叶', Shape_Area: 2820 },
|
|
|
|
|
|
{ crop: '大豆', Shape_Area: 2767 },
|
|
|
|
|
|
{ crop: '花生', Shape_Area: 62356 },
|
|
|
|
|
|
{ crop: '蓝莓', Shape_Area: 5443 },
|
|
|
|
|
|
{ crop: '地瓜', Shape_Area: 897 },
|
|
|
|
|
|
{ crop: '小麦', Shape_Area: 20111 },
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
townZuowu.value = info; //保存数据
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 添加村
|
|
|
|
|
|
// CQL_FILTER:筛选的语句
|
|
|
|
|
|
// customName地图服务自定义属性名
|
|
|
|
|
|
function addvillage(CQL_FILTER, customName) {
|
|
|
|
|
|
let map2 = new Cesium.WebMapServiceImageryProvider({
|
|
|
|
|
|
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
|
|
|
|
|
layers: 'shuzisannong:huangdaoqu_village', //图层名
|
|
|
|
|
|
parameters: {
|
|
|
|
|
|
service: 'WMS',
|
|
|
|
|
|
format: 'image/png',
|
|
|
|
|
|
transparent: true, //是否透明
|
|
|
|
|
|
// CQL_FILTER: `XZDM=${value.value}`,
|
|
|
|
|
|
CQL_FILTER: CQL_FILTER,
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
map2.customName = customName;
|
|
|
|
|
|
viewer.imageryLayers.addImageryProvider(map2);
|
|
|
|
|
|
}
|
|
|
|
|
|
// 移除wms
|
|
|
|
|
|
// nameArry ：属性名数组（customName）
|
|
|
|
|
|
// isMohu ：是否模糊查询
|
|
|
|
|
|
function removeWms(nameArry, isMohu) {
|
|
|
|
|
|
if (viewer) {
|
|
|
|
|
|
// 倒叙遍历，customName是自定义的属性
|
|
|
|
|
|
const layers = viewer.imageryLayers._layers;
|
|
|
|
|
|
for (let f = layers.length - 1; f >= 0; f--) {
|
|
|
|
|
|
nameArry.forEach(item => {
|
|
|
|
|
|
if (layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
|
|
|
|
|
|
if (isMohu) {
|
|
|
|
|
|
if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
|
|
|
|
|
|
viewer.imageryLayers.remove(layers[f]);
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
if (layers[f]._imageryProvider.customName === item) {
|
|
|
|
|
|
viewer.imageryLayers.remove(layers[f]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 根据实体名字删除实体(模糊删除)
|
|
|
|
|
|
function deleteEntityByName(name) {
|
|
|
|
|
|
if (viewer) {
|
|
|
|
|
|
let entitys = viewer.entities._entities._array;
|
|
|
|
|
|
for (var na = entitys.length - 1; na >= 0; na--) {
|
|
|
|
|
|
if (entitys[na]._name && entitys[na]._name === name) {
|
|
|
|
|
|
viewer.entities.remove(entitys[na]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//折叠
|
|
|
|
|
|
|
|
|
|
|
|
function leftFoldClick() {
|
|
|
|
|
|
leftWraFlag.value = !leftWraFlag.value;
|
|
|
|
|
|
if (leftWraFlag.value) {
|
|
|
|
|
|
let leftWra = document.querySelector('.leftWra');
|
|
|
|
|
|
leftWra.style.transform = 'translate(0,0)';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
let leftWra = document.querySelector('.leftWra');
|
|
|
|
|
|
leftWra.style.transform = 'translate(-107%,0)';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function rightFoldClick() {
|
|
|
|
|
|
rightWraFlag.value = !rightWraFlag.value;
|
|
|
|
|
|
if (rightWraFlag.value) {
|
|
|
|
|
|
let rightWra = document.querySelector('.rightWra');
|
|
|
|
|
|
rightWra.style.transform = 'translate(0,0)';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
let rightWra = document.querySelector('.rightWra');
|
|
|
|
|
|
rightWra.style.transform = 'translate(107%,0)';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*------------------接口--------------------*/
|
|
|
|
|
|
const getArea = () => {
|
|
|
|
|
|
getarea({ time: '2023-04-25', subregion: '1', parent: '黄岛区' }).then(res => {
|
|
|
|
|
|
console.log(res);
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
//镇
|
|
|
|
|
|
const getTownships = () => {
|
|
|
|
|
|
getTownship().then(res => {
|
|
|
|
|
|
Township.arr = res.features;
|
|
|
|
|
|
Township.arr.unshift({
|
|
|
|
|
|
bbox: [119.5091, 35.5671, 120.3285, 36.1455],
|
|
|
|
|
|
properties: {
|
|
|
|
|
|
XZDM: '370211',
|
|
|
|
|
|
XZMC: '全部',
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
let arr = [...res.features];
|
|
|
|
|
|
let brr = [];
|
|
|
|
|
|
arr.splice(0, 1);
|
|
|
|
|
|
arr.forEach(item => {
|
|
|
|
|
|
brr.push(item.properties.XZMC);
|
|
|
|
|
|
});
|
|
|
|
|
|
data.title = [...Object.values(brr)];
|
|
|
|
|
|
ASdivision();
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
//村
|
|
|
|
|
|
const getvillages = () => {
|
|
|
|
|
|
getvillage().then(res => {
|
|
|
|
|
|
Township.brr = res.features;
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
//面积
|
|
|
|
|
|
const getaArea = () => {
|
|
|
|
|
|
getareas().then(res => {
|
|
|
|
|
|
Township.crr = res.features;
|
|
|
|
|
|
data.title.forEach((item, index) => {
|
|
|
|
|
|
let town = res.features.map(i => {
|
|
|
|
|
|
if (item === i.properties.town) {
|
|
|
|
|
|
return i.properties;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
Object.keys(dd).forEach(it => {
|
|
|
|
|
|
const index = town.findIndex(a => a && a.crop === it);
|
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
|
dd[it].push(town[index].Shape_Area);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
dd[it].push(null);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
ASdivision();
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const selectTab = () => {
|
|
|
|
|
|
getArea();
|
|
|
|
|
|
TypeTime = {
|
|
|
|
|
|
大豆: [1034, 1295, 1348, 1203, 2402, 1160, 1934, 1490],
|
|
|
|
|
|
小麦: [1083, 1883, 2139, 1033, 992, 1328, 2949, 1529],
|
|
|
|
|
|
地瓜: [1223, 1548, 1828, 2094, 2202, 2903, 3293, 2023],
|
|
|
|
|
|
花生: [1374, 1734, 3143, 2493, 1983, 1728, 2584, 3079],
|
|
|
|
|
|
};
|
|
|
|
|
|
Pie3D.arr = [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '小麦',
|
|
|
|
|
|
value: 20,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
color: 'rgba(110, 209, 84, 0.9)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '花生',
|
|
|
|
|
|
value: 10,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(251, 201, 3, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '大豆',
|
|
|
|
|
|
value: 13,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(240, 129, 31, 0.9)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '地瓜',
|
|
|
|
|
|
value: 18,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(27, 85, 222, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '茶叶',
|
|
|
|
|
|
value: 16,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(26, 255, 140, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
if (value.value == '370211') {
|
|
|
|
|
|
removeWms(['village_CQL']);
|
|
|
|
|
|
removeWms(['aaa']);
|
|
|
|
|
|
getTownships();
|
|
|
|
|
|
tableData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '小麦',
|
|
|
|
|
|
name: '2934362亩',
|
|
|
|
|
|
address: '35%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '玉米',
|
|
|
|
|
|
name: '1676778亩',
|
|
|
|
|
|
address: '20%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '大豆',
|
|
|
|
|
|
name: '1257584亩',
|
|
|
|
|
|
address: '15%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '地瓜',
|
|
|
|
|
|
name: '1341423亩',
|
|
|
|
|
|
address: '16%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '花生',
|
|
|
|
|
|
name: '1592939亩',
|
|
|
|
|
|
address: '19%',
|
|
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
TypeTime = {
|
|
|
|
|
|
大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490],
|
|
|
|
|
|
小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929],
|
|
|
|
|
|
地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323],
|
|
|
|
|
|
花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279],
|
|
|
|
|
|
};
|
|
|
|
|
|
areatext = '8383894';
|
|
|
|
|
|
Pie3D = reactive({
|
|
|
|
|
|
arr: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '小麦',
|
|
|
|
|
|
value: 101,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
color: 'rgba(110, 209, 84, 0.9)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '花生',
|
|
|
|
|
|
value: 156,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(251, 201, 3, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '大豆',
|
|
|
|
|
|
value: 156,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(240, 129, 31, 0.9)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '地瓜',
|
|
|
|
|
|
value: 156,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(27, 85, 222, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '蓝莓',
|
|
|
|
|
|
value: 56,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(72, 102, 211, 0.9)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 数据项名称
|
|
|
|
|
|
name: '茶叶',
|
|
|
|
|
|
value: 56,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// 透明度
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
// 扇形颜色
|
|
|
|
|
|
color: 'rgba(26, 255, 140, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
});
|
|
|
|
|
|
hiddenOverlayChart();
|
|
|
|
|
|
}
|
|
|
|
|
|
areatext = '1293842';
|
|
|
|
|
|
tableData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '小麦',
|
|
|
|
|
|
name: '414029亩',
|
|
|
|
|
|
address: '32%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '玉米',
|
|
|
|
|
|
name: '232891亩',
|
|
|
|
|
|
address: '18%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '大豆',
|
|
|
|
|
|
name: '194076亩',
|
|
|
|
|
|
address: '15%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '地瓜',
|
|
|
|
|
|
name: '207014亩',
|
|
|
|
|
|
address: '16%',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: '花生',
|
|
|
|
|
|
name: '245829亩',
|
|
|
|
|
|
address: '19%',
|
|
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
let arr = [...Township.arr];
|
|
|
|
|
|
console.log('arr:', arr);
|
|
|
|
|
|
arr.forEach(item => {
|
|
|
|
|
|
if (item.properties.XZDM == value.value) {
|
|
|
|
|
|
viewer.camera.flyTo({
|
|
|
|
|
|
destination: Cesium.Rectangle.fromDegrees(
|
|
|
|
|
|
item.bbox[0],
|
|
|
|
|
|
item.bbox[1],
|
|
|
|
|
|
item.bbox[2],
|
|
|
|
|
|
item.bbox[3]
|
|
|
|
|
|
),
|
|
|
|
|
|
duration: 2,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
let arr = [...Township.brr];
|
|
|
|
|
|
let brr = [];
|
|
|
|
|
|
// console.log(Township.brr);
|
|
|
|
|
|
arr.forEach(item => {
|
|
|
|
|
|
if (item.properties.XZDM == value.value) {
|
|
|
|
|
|
brr.push(item.properties.XZQMC);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
// console.log(brr);
|
|
|
|
|
|
data.title = [...Object.values(brr)];
|
|
|
|
|
|
});
|
|
|
|
|
|
ASdivision();
|
|
|
|
|
|
areachar();
|
|
|
|
|
|
let town = [...Township.arr];
|
|
|
|
|
|
const townData = town.find(item => item.properties.XZDM === value.value);
|
|
|
|
|
|
if (townData) {
|
|
|
|
|
|
// 移除镇高亮
|
|
|
|
|
|
deleteEntityByName('townLine');
|
|
|
|
|
|
// 高亮镇边界
|
|
|
|
|
|
addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow');
|
|
|
|
|
|
}
|
|
|
|
|
|
// 移除以前村
|
|
|
|
|
|
removeWms(['aaa']);
|
|
|
|
|
|
// 添加村
|
|
|
|
|
|
addvillage(`XZDM=${value.value}`, 'aaa');
|
|
|
|
|
|
getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
|
|
|
|
|
|
let arr = [];
|
|
|
|
|
|
res.data.map((item, index) => {
|
|
|
|
|
|
if (item.region == townData.properties.XZMC) {
|
|
|
|
|
|
arr.push({
|
|
|
|
|
|
crop: item.type,
|
|
|
|
|
|
Shape_Area: item.area,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
townZuowu.value = {
|
|
|
|
|
|
label: arr,
|
|
|
|
|
|
};
|
|
|
|
|
|
console.log();
|
|
|
|
|
|
console.log(arr);
|
|
|
|
|
|
showOverlayChart({ x: 642, y: 312 });
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
//下载
|
|
|
|
|
|
/*---------------------------*/
|
|
|
|
|
|
const Deta = item => {
|
|
|
|
|
|
downloadURL(item);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const downloadURL = url => {
|
|
|
|
|
|
let link = document.createElement('a');
|
|
|
|
|
|
link.style.display = 'none';
|
|
|
|
|
|
link.href = url;
|
|
|
|
|
|
document.body.appendChild(link);
|
|
|
|
|
|
link.click();
|
|
|
|
|
|
document.body.removeChild(link);
|
|
|
|
|
|
};
|
|
|
|
|
|
/*-------------echarts--------------*/
|
|
|
|
|
|
function areachar() {
|
|
|
|
|
|
const areaDivIntance = echarts.init(areaDiv.value);
|
|
|
|
|
|
// 统计百分比
|
|
|
|
|
|
var data1 = [2, 8, 5, 8, 10, 12, 11];
|
|
|
|
|
|
var data2 = [1, 7, 2, 7, 9, 11, 10];
|
|
|
|
|
|
var json = {
|
|
|
|
|
|
chart0: {
|
|
|
|
|
|
xcategory: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
|
|
|
|
|
|
low: data1,
|
|
|
|
|
|
lowLine: [],
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
var json2 = {
|
|
|
|
|
|
chart0: {
|
|
|
|
|
|
xcategory: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
|
|
|
|
|
|
low: data2,
|
|
|
|
|
|
lowLine: [],
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
var datacoords = [
|
|
|
|
|
|
{
|
|
|
|
|
|
coords: [],
|
|
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
var datacoords2 = [
|
|
|
|
|
|
{
|
|
|
|
|
|
coords: [],
|
|
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
for (var i = 0; i < json.chart0.xcategory.length; i++) {
|
|
|
|
|
|
datacoords[0].coords.push([json.chart0.xcategory[i], data1[i]]);
|
|
|
|
|
|
}
|
|
|
|
|
|
for (var i = 0; i < json.chart0.xcategory.length; i++) {
|
|
|
|
|
|
datacoords2[0].coords.push([json2.chart0.xcategory[i], data2[i]]);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#15ecf4',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
backgroundColor: 'rgba(0,0,0,.8)',
|
|
|
|
|
|
extraCssText: 'box-shadow: 4px 4px 10px rgba(21, 250, 255,.6);',
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
var result = params[0].name + '<br>';
|
|
|
|
|
|
params.forEach(function (item) {
|
|
|
|
|
|
result +=
|
|
|
|
|
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
|
|
|
|
|
|
item.color +
|
|
|
|
|
|
'"></span>';
|
|
|
|
|
|
// 判断设置增长还是降低
|
|
|
|
|
|
if (parseFloat(item.data) >= 50) {
|
|
|
|
|
|
result +=
|
|
|
|
|
|
item.seriesName +
|
|
|
|
|
|
': ' +
|
|
|
|
|
|
'<span class="growth">' +
|
|
|
|
|
|
item.data +
|
|
|
|
|
|
'吨</span><br>';
|
|
|
|
|
|
} else if (parseFloat(item.data) < 50) {
|
|
|
|
|
|
result +=
|
|
|
|
|
|
item.seriesName +
|
|
|
|
|
|
': ' +
|
|
|
|
|
|
'<span class="reduce">' +
|
|
|
|
|
|
item.data +
|
|
|
|
|
|
'吨</span><br>';
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
return result;
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
data: ['最大值', '最小值'],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: 'rgb(0,253,255,0.6)',
|
|
|
|
|
|
},
|
|
|
|
|
|
top: '5%',
|
|
|
|
|
|
right: '5%',
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
bottom: 50,
|
|
|
|
|
|
left: 70,
|
|
|
|
|
|
right: 50,
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#15faff',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
2023-04-27 18:03:12 +08:00
|
|
|
|
// interval:0,
|
2023-04-27 11:44:35 +08:00
|
|
|
|
},
|
|
|
|
|
|
data: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
|
color: '#4b4d64',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value}',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
//改变刻度字体样式
|
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '最大值',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
// smooth: true,
|
|
|
|
|
|
symbol: 'none',
|
|
|
|
|
|
symbolSize: 10,
|
|
|
|
|
|
areaStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
1,
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(255, 204,1, .9)',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0.8,
|
|
|
|
|
|
color: 'rgba(6, 8, 41,.1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
false
|
|
|
|
|
|
),
|
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#ffcb00',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: data1,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '最大值',
|
|
|
|
|
|
type: 'lines',
|
|
|
|
|
|
coordinateSystem: 'cartesian2d',
|
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
|
polyline: true,
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
effect: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
trailLength: 0.4,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
period: 8, //光点滑动速度
|
|
|
|
|
|
symbolSize: 8,
|
|
|
|
|
|
},
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#ffcb00',
|
|
|
|
|
|
width: 0,
|
|
|
|
|
|
opacity: 0,
|
|
|
|
|
|
curveness: 0,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: datacoords,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '最小值',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
// smooth: true,
|
|
|
|
|
|
symbol: 'none',
|
|
|
|
|
|
symbolSize: 10,
|
|
|
|
|
|
areaStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
1,
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(21, 250, 255,.9)',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0.8,
|
|
|
|
|
|
color: 'rgba(6, 8, 41,.1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
false
|
|
|
|
|
|
),
|
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#15faff',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: data2,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '最小值',
|
|
|
|
|
|
type: 'lines',
|
|
|
|
|
|
coordinateSystem: 'cartesian2d',
|
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
polyline: true,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
effect: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
trailLength: 0.4,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
period: 8, //光点滑动速度
|
|
|
|
|
|
symbolSize: 8,
|
|
|
|
|
|
},
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#15faff',
|
|
|
|
|
|
width: 0,
|
|
|
|
|
|
opacity: 0,
|
|
|
|
|
|
curveness: 0,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: datacoords2,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
option && areaDivIntance.setOption(option);
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener('resize', function () {
|
|
|
|
|
|
areaDivIntance.resize();
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function farmland() {
|
|
|
|
|
|
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
|
|
|
|
|
let xData = ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'];
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
calculable: true,
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
// data: ["已完成", "进行中"],
|
|
|
|
|
|
top: '7%',
|
|
|
|
|
|
right: '5%',
|
|
|
|
|
|
icon: 'rect',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: '15%',
|
|
|
|
|
|
// "top":0,
|
|
|
|
|
|
bottom: '16%',
|
|
|
|
|
|
right: '2%',
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(255,255,255,.5)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
splitArea: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
interval: 0,
|
|
|
|
|
|
color: 'rgba(255,255,255,0.7)',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
},
|
|
|
|
|
|
data: xData,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '产量(吨)',
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
color: 'rgba(255,255,255,0.8)',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
padding: [0, 60, 0, 10],
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
interval: 0,
|
|
|
|
|
|
color: 'rgba(255,255,255,0.5)',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
},
|
|
|
|
|
|
splitArea: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '最大值',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 14,
|
|
|
|
|
|
barGap: '85%',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
// fontWeight: 'bold',
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
barBorderRadius: 2,
|
|
|
|
|
|
color: {
|
|
|
|
|
|
type: 'linear',
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
x2: 0,
|
|
|
|
|
|
y2: 1,
|
|
|
|
|
|
colorStops: [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(242, 252, 252, 0.5)', // 0% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0.5,
|
|
|
|
|
|
color: 'rgba(242, 252, 252, 0.3)', // 100% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: 'rgba(242, 252, 252, 0)', // 100% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
global: false, // 缺省为 false
|
|
|
|
|
|
},
|
2023-04-27 18:03:12 +08:00
|
|
|
|
shadowColor: 'rgba(255, 255, 255, 0.5)',
|
|
|
|
|
|
shadowBlur: 10,
|
2023-04-27 11:44:35 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [709, 1917, 2455, 2610, 1719, 1433],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '最小值',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 14,
|
|
|
|
|
|
barGap: '85%',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
// fontWeight: 'bold',
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: {
|
|
|
|
|
|
type: 'linear',
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
x2: 0,
|
|
|
|
|
|
y2: 1,
|
|
|
|
|
|
colorStops: [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(143, 186, 243, 0.5)', // 0% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0.5,
|
|
|
|
|
|
color: 'rgba(143, 186, 243, 0.3)', // 100% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: 'rgba(143, 186, 243, 0)', // 100% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
global: false, // 缺省为 false
|
|
|
|
|
|
},
|
2023-04-27 18:03:12 +08:00
|
|
|
|
shadowColor: 'rgba(255, 255, 255, 0.5)',
|
|
|
|
|
|
shadowBlur: 10,
|
2023-04-27 11:44:35 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [300, 500, 700, 400, 600, 1200],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
farmlandDivIntance.on('click', function (params) {
|
|
|
|
|
|
console.log(params.name);
|
|
|
|
|
|
});
|
|
|
|
|
|
farmlandDivIntance.on('click', param => ChartClick(param));
|
|
|
|
|
|
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
|
|
|
|
|
useEcharts(farmlandDivIntance, option);
|
|
|
|
|
|
}
|
|
|
|
|
|
// 添加wms
|
|
|
|
|
|
function addWms(layers, customName) {
|
|
|
|
|
|
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) {
|
|
|
|
|
|
// viewer.imageryLayers.lower(dd);//将图层下移一层
|
|
|
|
|
|
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
|
|
|
|
|
|
viewer.imageryLayers.raise(dd); //将图层上移一层
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//返回
|
|
|
|
|
|
function back() {
|
|
|
|
|
|
removeWms(['gbznt'], true);
|
|
|
|
|
|
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
|
|
|
|
|
viewer.camera.flyTo({
|
|
|
|
|
|
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
|
|
|
|
|
duration: 2,
|
|
|
|
|
|
});
|
|
|
|
|
|
flag.value = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
// 图表点击事件
|
|
|
|
|
|
function ChartClick(item) {
|
|
|
|
|
|
console.log('item:', item);
|
|
|
|
|
|
// 移除作物
|
|
|
|
|
|
removeWms(['huangdaoqu_town'], true);
|
|
|
|
|
|
removeWms(['tl'], true);
|
|
|
|
|
|
let layername = 'shuzisannong:farmland';
|
|
|
|
|
|
|
|
|
|
|
|
// 判断是否存在避免重复添加
|
|
|
|
|
|
let cz = false;
|
|
|
|
|
|
const layers = viewer.imageryLayers._layers;
|
|
|
|
|
|
for (let f = layers.length - 1; f >= 0; f--) {
|
|
|
|
|
|
if (
|
|
|
|
|
|
layers[f] &&
|
|
|
|
|
|
layers[f]._imageryProvider.customName &&
|
|
|
|
|
|
layers[f]._imageryProvider.customName === layername + 'gbznt'
|
|
|
|
|
|
) {
|
|
|
|
|
|
cz = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
if (!cz) {
|
|
|
|
|
|
// 添加高标准农田服务
|
|
|
|
|
|
addWms(layername, layername + 'gbznt');
|
|
|
|
|
|
}
|
|
|
|
|
|
// 定位到地块
|
|
|
|
|
|
let features = formLandRef.value;
|
|
|
|
|
|
features.forEach(it => {
|
|
|
|
|
|
console.log('it.properties.name:', it.properties.name);
|
|
|
|
|
|
console.log('item.name:', item.name);
|
|
|
|
|
|
if (it.properties.name === item.name) {
|
|
|
|
|
|
console.log('dingwei');
|
|
|
|
|
|
viewer.camera.flyTo({
|
|
|
|
|
|
destination: Cesium.Rectangle.fromDegrees(
|
|
|
|
|
|
it.bbox[0],
|
|
|
|
|
|
it.bbox[1],
|
|
|
|
|
|
it.bbox[2],
|
|
|
|
|
|
it.bbox[3]
|
|
|
|
|
|
),
|
|
|
|
|
|
duration: 2,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
flag.value = true;
|
|
|
|
|
|
|
|
|
|
|
|
townZuowu.value = {
|
|
|
|
|
|
label: [
|
|
|
|
|
|
{ crop: '小麦', Shape_Area: '53000' },
|
|
|
|
|
|
{ crop: '地瓜', Shape_Area: '50000' },
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
console.log(townZuowu.label);
|
|
|
|
|
|
showOverlayChart({ x: 642, y: 312 });
|
|
|
|
|
|
}
|
|
|
|
|
|
function ASdivision() {
|
|
|
|
|
|
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
|
|
|
|
|
let xData = ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'];
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
calculable: true,
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
// data: ["已完成", "进行中"],
|
|
|
|
|
|
top: '7%',
|
|
|
|
|
|
right: '5%',
|
|
|
|
|
|
icon: 'rect',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: '15%',
|
|
|
|
|
|
// "top":0,
|
|
|
|
|
|
bottom: '16%',
|
|
|
|
|
|
right: '2%',
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(255,255,255,.5)',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
splitArea: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
interval: 0,
|
|
|
|
|
|
color: 'rgba(255,255,255,0.7)',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
},
|
|
|
|
|
|
data: xData,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '产量(吨)',
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
color: 'rgba(255,255,255,0.8)',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
padding: [0, 60, 0, 10],
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
interval: 0,
|
|
|
|
|
|
color: 'rgba(255,255,255,0.5)',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
},
|
|
|
|
|
|
splitArea: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '最大值',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 14,
|
|
|
|
|
|
barGap: '85%',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
// fontWeight: 'bold',
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
barBorderRadius: 2,
|
|
|
|
|
|
color: {
|
|
|
|
|
|
type: 'linear',
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
x2: 0,
|
|
|
|
|
|
y2: 1,
|
|
|
|
|
|
colorStops: [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(4, 247, 227, 1)', // 0% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0.8,
|
|
|
|
|
|
color: 'rgba(4, 247, 227, 0.5)', // 100% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: 'rgba(4, 247, 227, 0.0)', // 100% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
global: false, // 缺省为 false
|
|
|
|
|
|
},
|
|
|
|
|
|
// borderColor:'rgba(0, 170, 255, 0.9)',
|
|
|
|
|
|
shadowColor: 'rgba(255, 255, 255, 0.5)',
|
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [709, 1917, 2455, 2610, 1719, 1433],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '最小值',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 14,
|
|
|
|
|
|
barGap: '85%',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
// fontWeight: 'bold',
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: {
|
|
|
|
|
|
type: 'linear',
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
x2: 0,
|
|
|
|
|
|
y2: 1,
|
|
|
|
|
|
colorStops: [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(33, 187, 251, 0.5)', // 0% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0.5,
|
|
|
|
|
|
color: 'rgba(33, 187, 251, 0.3)', // 100% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: 'rgba(33, 187, 251, 0)', // 100% 处的颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
global: false, // 缺省为 false
|
|
|
|
|
|
},
|
|
|
|
|
|
shadowColor: 'rgba(255, 255, 255, 0.5)',
|
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [300, 500, 700, 400, 600, 1200],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
// option && ASdivisionDivIntance.setOption(option, true);
|
|
|
|
|
|
useEcharts(ASdivisionDivIntance, option);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*--------------------------------------------------------------------------------------------*/
|
|
|
|
|
|
function getAreaFenlei() {
|
|
|
|
|
|
let fl = fenleiRef.value;
|
|
|
|
|
|
console.log('fl:', fl);
|
|
|
|
|
|
axios({
|
|
|
|
|
|
url:
|
|
|
|
|
|
serverAPI.geoserverUrl +
|
|
|
|
|
|
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(res => {
|
|
|
|
|
|
console.log('res1111:', res);
|
|
|
|
|
|
let data = res.data.features;
|
|
|
|
|
|
data.forEach((item, index) => {
|
|
|
|
|
|
const rectangle = Cesium.Rectangle.fromDegrees(
|
|
|
|
|
|
item.bbox[0],
|
|
|
|
|
|
item.bbox[1],
|
|
|
|
|
|
item.bbox[2],
|
|
|
|
|
|
item.bbox[3]
|
|
|
|
|
|
);
|
|
|
|
|
|
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
|
|
|
|
|
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
|
|
|
|
|
let latitude = Cesium.Math.toDegrees(center.latitude);
|
|
|
|
|
|
|
|
|
|
|
|
if (item.properties.XZDM === '370211011') {
|
|
|
|
|
|
//灵山卫街道
|
|
|
|
|
|
longitude = 120.0863;
|
|
|
|
|
|
latitude = 35.941;
|
|
|
|
|
|
} else if (item.properties.XZDM === '370211003') {
|
|
|
|
|
|
//薛家岛街道
|
|
|
|
|
|
longitude = 120.243682;
|
|
|
|
|
|
latitude = 35.97123201;
|
|
|
|
|
|
}
|
|
|
|
|
|
const townData = fl[item.properties.XZMC];
|
|
|
|
|
|
let label = [];
|
|
|
|
|
|
if (townData) {
|
|
|
|
|
|
label = townData.map((it, inex) => {
|
|
|
|
|
|
// let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
|
|
|
|
|
|
// return dd
|
|
|
|
|
|
return it.properties;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
// label = label.join(' ')
|
|
|
|
|
|
// console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
|
|
|
|
|
|
// 添加点
|
|
|
|
|
|
viewer.entities.add({
|
|
|
|
|
|
name: 'point' + item.properties.XZDM,
|
|
|
|
|
|
position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
|
|
|
|
|
point: new Cesium.PointGraphics({
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
pixelSize: 10,
|
|
|
|
|
|
// heightReference: Cesium.HeightReference.NONE,
|
|
|
|
|
|
color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
|
|
|
|
|
|
outlineColor: new Cesium.Color(0, 0, 0, 0),
|
|
|
|
|
|
outlineWidth: 0,
|
|
|
|
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
|
|
|
|
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
|
|
|
|
|
|
}),
|
|
|
|
|
|
// label: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// text: label.join(' '),
|
|
|
|
|
|
// font: '12px sans-serif',
|
|
|
|
|
|
// fillColor: Cesium.Color.WHITE,
|
|
|
|
|
|
// showBackground: true,
|
|
|
|
|
|
// backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
|
|
|
|
|
|
// // style: Cesium.LabelStyle.FILL,
|
|
|
|
|
|
// outlineWidth: 3,
|
|
|
|
|
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
|
// horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
|
|
|
|
|
|
// pixelOffset: new Cesium.Cartesian2(-80, -10),
|
|
|
|
|
|
// },
|
|
|
|
|
|
info: {
|
|
|
|
|
|
label: label,
|
|
|
|
|
|
...item.properties,
|
|
|
|
|
|
// 经纬度，以便监听
|
|
|
|
|
|
lon: longitude,
|
|
|
|
|
|
lat: latitude,
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(err => {});
|
|
|
|
|
|
}
|
|
|
|
|
|
let fenleiRef = ref({});
|
|
|
|
|
|
function mbHandle() {
|
|
|
|
|
|
axios({
|
|
|
|
|
|
url:
|
|
|
|
|
|
serverAPI.geoserverUrl +
|
|
|
|
|
|
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(res => {
|
|
|
|
|
|
let features = res.data.features;
|
|
|
|
|
|
let town = {};
|
|
|
|
|
|
// 按镇分类
|
|
|
|
|
|
features.forEach(item => {
|
|
|
|
|
|
let key = item.properties.town;
|
|
|
|
|
|
if (town[key]) {
|
|
|
|
|
|
town[key].push(item);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
town[key] = [item];
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
fenleiRef.value = town;
|
|
|
|
|
|
getAreaFenlei();
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(err => {});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*------------------------------------------柱状图--------------------------------------------*/
|
|
|
|
|
|
// function getJson() {
|
|
|
|
|
|
// let dic = {
|
|
|
|
|
|
// 小麦: 'rgba(102, 142, 214, 0.8)',
|
|
|
|
|
|
// 玉米: 'rgba(255, 225, 104, 0.8)',
|
|
|
|
|
|
// 大豆: 'rgba(156, 220, 130, 0.8)',
|
|
|
|
|
|
// 地瓜: 'rgba(156, 220, 130, 0.8)',
|
|
|
|
|
|
// 花生: 'rgba(212, 236, 89, 0.8)',
|
|
|
|
|
|
// 蓝莓: 'rgba(50, 211, 235, 0.8)',
|
|
|
|
|
|
// 茶叶: 'rgba(91, 196, 159, 0.8)',
|
|
|
|
|
|
// 马铃薯: 'rgba(254, 182, 77, 0.8)',
|
|
|
|
|
|
// 白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
|
|
|
|
|
|
// 其他: 'rgba(250, 129, 109, 0.8)',
|
|
|
|
|
|
// };
|
|
|
|
|
|
// // let viewer = viewers.value;
|
|
|
|
|
|
// axios({
|
|
|
|
|
|
// url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
|
|
|
|
|
// })
|
|
|
|
|
|
// .then(res => {
|
|
|
|
|
|
// console.log('res:', res);
|
|
|
|
|
|
// let data = res.data.features;
|
|
|
|
|
|
// let name = Object.keys(dic);
|
|
|
|
|
|
// data.forEach((item, index) => {
|
|
|
|
|
|
// // let hh = name[Math.floor((Math.random() * name.length))]
|
|
|
|
|
|
// // let height = random(1000, 5000)
|
|
|
|
|
|
|
|
|
|
|
|
// const rectangle = Cesium.Rectangle.fromDegrees(
|
|
|
|
|
|
// item.bbox[0],
|
|
|
|
|
|
// item.bbox[1],
|
|
|
|
|
|
// item.bbox[2],
|
|
|
|
|
|
// item.bbox[3]
|
|
|
|
|
|
// );
|
|
|
|
|
|
// const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
|
|
|
|
|
// let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
|
|
|
|
|
// let latitude = Cesium.Math.toDegrees(center.latitude);
|
|
|
|
|
|
|
|
|
|
|
|
// if (item.properties.XZDM === '370211011') {
|
|
|
|
|
|
// //灵山卫街道
|
|
|
|
|
|
// let hh = name[Math.floor(Math.random() * name.length)];
|
|
|
|
|
|
// let height = random(2000, 500);
|
|
|
|
|
|
|
|
|
|
|
|
// longitude = 120.0863;
|
|
|
|
|
|
// latitude = 35.941;
|
|
|
|
|
|
// viewer.entities.add({
|
|
|
|
|
|
// position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
|
|
|
|
|
|
// ellipse: {
|
|
|
|
|
|
// semiMinorAxis: 400.0, //短轴
|
|
|
|
|
|
// semiMajorAxis: 400.0, //长轴
|
|
|
|
|
|
// height: height, //拉伸高度
|
|
|
|
|
|
// extrudedHeight: 0, //离地高度
|
|
|
|
|
|
// rotation: Cesium.Math.toRadians(60), //旋转
|
|
|
|
|
|
// stRotation: Cesium.Math.toRadians(60), //旋转
|
|
|
|
|
|
// fill: true, //是否显示圆的填充
|
|
|
|
|
|
// material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
|
|
|
|
|
|
// outline: false, //是否显示圆轮廓
|
|
|
|
|
|
// outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// info: {
|
|
|
|
|
|
// name: hh,
|
|
|
|
|
|
// value: height,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// });
|
|
|
|
|
|
// } else if (item.properties.XZDM === '370211003') {
|
|
|
|
|
|
// //薛家岛街道
|
|
|
|
|
|
// longitude = 120.243682;
|
|
|
|
|
|
// latitude = 35.97123201;
|
|
|
|
|
|
// let hh = name[Math.floor(Math.random() * name.length)];
|
|
|
|
|
|
// let height = random(300, 5000);
|
|
|
|
|
|
|
|
|
|
|
|
// viewer.entities.add({
|
|
|
|
|
|
// position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
|
|
|
|
|
|
// ellipse: {
|
|
|
|
|
|
// semiMinorAxis: 400.0, //短轴
|
|
|
|
|
|
// semiMajorAxis: 400.0, //长轴
|
|
|
|
|
|
// height: height, //拉伸高度
|
|
|
|
|
|
// extrudedHeight: 0, //离地高度
|
|
|
|
|
|
// rotation: Cesium.Math.toRadians(60), //旋转
|
|
|
|
|
|
// stRotation: Cesium.Math.toRadians(60), //旋转
|
|
|
|
|
|
// fill: true, //是否显示圆的填充
|
|
|
|
|
|
// material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
|
|
|
|
|
|
// outline: false, //是否显示圆轮廓
|
|
|
|
|
|
// outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// info: {
|
|
|
|
|
|
// name: hh,
|
|
|
|
|
|
// value: height,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// });
|
|
|
|
|
|
// } else if (index % 2 === 0) {
|
|
|
|
|
|
// let hh = name[Math.floor(Math.random() * name.length)];
|
|
|
|
|
|
// let height = random(100, 500);
|
|
|
|
|
|
|
|
|
|
|
|
// viewer.entities.add({
|
|
|
|
|
|
// position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
|
|
|
|
|
|
// ellipse: {
|
|
|
|
|
|
// semiMinorAxis: 400.0, //短轴
|
|
|
|
|
|
// semiMajorAxis: 400.0, //长轴
|
|
|
|
|
|
// height: height, //拉伸高度
|
|
|
|
|
|
// extrudedHeight: 0, //离地高度
|
|
|
|
|
|
// rotation: Cesium.Math.toRadians(60), //旋转
|
|
|
|
|
|
// stRotation: Cesium.Math.toRadians(60), //旋转
|
|
|
|
|
|
// fill: true, //是否显示圆的填充
|
|
|
|
|
|
// material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
|
|
|
|
|
|
// outline: false, //是否显示圆轮廓
|
|
|
|
|
|
// outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// info: {
|
|
|
|
|
|
// name: hh,
|
|
|
|
|
|
// value: height,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// });
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// let hh = name[Math.floor(Math.random() * name.length)];
|
|
|
|
|
|
// let height = random(1000, 5000); //圆柱与圆高度为0时是圆
|
|
|
|
|
|
|
|
|
|
|
|
// viewer.entities.add({
|
|
|
|
|
|
// position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
|
|
|
|
|
// ellipse: {
|
|
|
|
|
|
// semiMinorAxis: 400.0, //短轴
|
|
|
|
|
|
// semiMajorAxis: 400.0, //长轴
|
|
|
|
|
|
// height: height, //拉伸高度
|
|
|
|
|
|
// extrudedHeight: 0, //离地高度
|
|
|
|
|
|
// rotation: Cesium.Math.toRadians(60), //旋转
|
|
|
|
|
|
// stRotation: Cesium.Math.toRadians(60), //旋转
|
|
|
|
|
|
// fill: true, //是否显示圆的填充
|
|
|
|
|
|
// material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
|
|
|
|
|
|
// outline: false, //是否显示圆轮廓
|
|
|
|
|
|
// outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// info: {
|
|
|
|
|
|
// name: hh,
|
|
|
|
|
|
// value: height,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// }); //
|
|
|
|
|
|
|
|
|
|
|
|
// viewer.camera.flyTo({
|
|
|
|
|
|
// // destination: Cesium.Rectangle.fromDegrees(119.5091, 31.5671, 120.3285, 35.1455),
|
|
|
|
|
|
// // destination: new Cesium.Rectangle.fromDegrees(110.8, 30.8, 121.8, 30.9),
|
|
|
|
|
|
// destination: Cesium.Cartesian3.fromDegrees(119.9091, 35.0991, 55000),
|
|
|
|
|
|
// duration: 2,
|
|
|
|
|
|
// orientation: {
|
|
|
|
|
|
// pitch: Cesium.Math.toRadians(-30.0),
|
|
|
|
|
|
// roll: 0.0,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// }); // viewer.camera.twistRight(Cesium.Math.toDegrees(0.005).toFixed(2));
|
|
|
|
|
|
// });
|
|
|
|
|
|
// })
|
|
|
|
|
|
// .catch(err => {});
|
|
|
|
|
|
// }
|
|
|
|
|
|
// 地图移动时弹窗跟随
|
|
|
|
|
|
function infoWindowPostRender() {
|
|
|
|
|
|
// let viewer = viewers.value;
|
|
|
|
|
|
if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
|
|
|
|
|
|
//经纬度转为世界坐标
|
|
|
|
|
|
|
|
|
|
|
|
const gisPosition = Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
|
Number(townZuowu.value.lon),
|
|
|
|
|
|
Number(townZuowu.value.lat),
|
|
|
|
|
|
0
|
|
|
|
|
|
); //转化为屏幕坐标
|
|
|
|
|
|
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
|
|
|
|
|
viewer.scene,
|
|
|
|
|
|
gisPosition
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
if (Cesium.defined(windowPosition)) {
|
|
|
|
|
|
const pop = document.getElementById('pop');
|
|
|
|
|
|
pop.style.top = windowPosition.y - 10 + 'px';
|
|
|
|
|
|
pop.style.left = windowPosition.x + 10 + 'px';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// function mapClick() {
|
|
|
|
|
|
// // let viewer = viewers.value;
|
|
|
|
|
|
// viewer.screenSpaceEventHandler.setInputAction(function (movement) {
|
|
|
|
|
|
// const earthPosition = viewer.camera.pickEllipsoid(
|
|
|
|
|
|
// movement.position,
|
|
|
|
|
|
// viewer.scene.globe.ellipsoid
|
|
|
|
|
|
// ); //当前世界坐标笛卡尔积
|
|
|
|
|
|
// if (Cesium.defined(earthPosition)) {
|
|
|
|
|
|
// let pick = viewer.scene.pick(movement.position); //返回最上层模型属性
|
|
|
|
|
|
// let picks = viewer.scene.drillPick(movement.position); //返回所有模型属性
|
|
|
|
|
|
// if (pick && pick.id && pick.id.info) {
|
|
|
|
|
|
// console.log('pick:', pick);
|
|
|
|
|
|
// const data = pick.id.info;
|
|
|
|
|
|
// console.log('data:', data);
|
|
|
|
|
|
|
|
|
|
|
|
// const coordinate = movement.position; //屏幕坐标 // 转为经纬度，保存，用于监听时转换坐标
|
|
|
|
|
|
// var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
|
|
|
|
|
|
// var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
|
|
|
|
|
|
// let newData = {
|
|
|
|
|
|
// ...data,
|
|
|
|
|
|
// };
|
|
|
|
|
|
// if (cartesian) {
|
|
|
|
|
|
// let cartographic = ellipsoid.cartesianToCartographic(cartesian);
|
|
|
|
|
|
// let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
|
|
|
|
|
|
// let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
|
|
|
|
|
|
// console.log('longitudeString:', longitudeString);
|
|
|
|
|
|
// newData.lon = longitudeString;
|
|
|
|
|
|
// newData.lat = latitudeString; /*保存（弹窗）的数据*/
|
|
|
|
|
|
|
|
|
|
|
|
// console.log('data:', newData);
|
|
|
|
|
|
// clickInfoMap.value = newData;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// showOverlayChart(coordinate); // 添加地图移动监听：使地图移动弹窗跟着移动
|
|
|
|
|
|
// viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
|
|
|
|
|
// } else {
|
|
|
|
|
|
// hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// 隐藏弹窗
|
|
|
|
|
|
function hiddenOverlayChart() {
|
|
|
|
|
|
// 移除各种高亮
|
|
|
|
|
|
XZDM = '';
|
|
|
|
|
|
XZQDM = '';
|
|
|
|
|
|
removeWms(['village_CQL']);
|
|
|
|
|
|
removeWms(['aaa']);
|
|
|
|
|
|
|
|
|
|
|
|
deleteEntityByName('villageLine');
|
|
|
|
|
|
deleteEntityByName('townLine');
|
|
|
|
|
|
|
|
|
|
|
|
const pop = document.getElementById('pop');
|
|
|
|
|
|
pop.style.display = 'none'; // 清除监听事件
|
|
|
|
|
|
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
|
|
|
|
|
// 重定位
|
|
|
|
|
|
viewer.camera.flyTo({
|
|
|
|
|
|
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
|
|
|
|
|
duration: 2,
|
|
|
|
|
|
});
|
|
|
|
|
|
removeWms(['gbznt'], true);
|
|
|
|
|
|
// addWms('shuzisannong:huangdaoqu_town', 'tl');
|
|
|
|
|
|
flag.value = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
//显示弹窗
|
|
|
|
|
|
function showOverlayChart(position) {
|
|
|
|
|
|
console.log(position);
|
|
|
|
|
|
const pop = document.getElementById('pop');
|
|
|
|
|
|
pop.style.display = 'block';
|
|
|
|
|
|
pop.style.position = 'absolute';
|
|
|
|
|
|
pop.style.top = position.y - 10 + 'px';
|
|
|
|
|
|
pop.style.left = position.x + 10 + 'px';
|
|
|
|
|
|
pop.style.zIndex = 99;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// function random(min, max) {
|
|
|
|
|
|
// return Math.floor(Math.random() * (max - min)) + min;
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
/*-------------------------------------------------------------------------------------------*/
|
2023-04-16 22:33:44 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
2023-04-27 11:44:35 +08:00
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
$height: calc(100vh - 100px);
|
|
|
|
|
|
|
|
|
|
|
|
.center {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 45px;
|
|
|
|
|
|
background: url('@/assets/images/title.png');
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 110% 100%;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
line-height: 45px;
|
|
|
|
|
|
padding-left: 46px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
overflow: hidden;
|
2023-04-27 18:03:12 +08:00
|
|
|
|
background: linear-gradient(
|
|
|
|
|
|
180deg,
|
|
|
|
|
|
rgba(255, 255, 255, 1) 33.33%,
|
|
|
|
|
|
rgba(41, 255, 219, 1) 100%
|
|
|
|
|
|
);
|
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
2023-04-27 11:44:35 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
|
width: 79px;
|
|
|
|
|
|
height: 25px;
|
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
|
180deg,
|
|
|
|
|
|
rgba(16, 111, 111, 1) 0%,
|
|
|
|
|
|
rgba(47, 214, 214, 1) 100%
|
|
|
|
|
|
);
|
|
|
|
|
|
border: 1.5px solid rgba(23, 194, 180, 1);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.leftWra {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 10px;
|
|
|
|
|
|
left: 20px;
|
|
|
|
|
|
height: $height;
|
|
|
|
|
|
width: 23%;
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.85);
|
|
|
|
|
|
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
|
|
|
|
|
transition: transform 1s;
|
2023-04-27 18:03:12 +08:00
|
|
|
|
|
2023-04-27 11:44:35 +08:00
|
|
|
|
.leftFoldDiv {
|
|
|
|
|
|
width: 30px;
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: -12%;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
color: #ccc;
|
|
|
|
|
|
}
|
|
|
|
|
|
.leftTop {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
2023-04-27 18:03:12 +08:00
|
|
|
|
.production {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 125px;
|
|
|
|
|
|
padding: 0 37px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
|
span {
|
|
|
|
|
|
font-size: 48px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
line-height: 48px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
.leftProduction {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
|
background: url('@/assets/images/production.png');
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
background-position-y: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.rightProduction {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background: url('@/assets/images/production.png');
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
background-position-y: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-04-27 11:44:35 +08:00
|
|
|
|
.areaDiv {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 327px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
padding: 1px;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.ProgressBar {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 9px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.leftbottom {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 455px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding-top: 13px;
|
|
|
|
|
|
|
|
|
|
|
|
.tableDiv {
|
|
|
|
|
|
// background: rgba(255, 255, 255, 0.05);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
width: 85%;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
padding: 5px 10px 5px 10px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
|
|
|
|
|
|
.Crops {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
height: 31px;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
|
90deg,
|
|
|
|
|
|
rgba(21, 173, 148, 0.1) 0%,
|
|
|
|
|
|
rgba(21, 173, 148, 0) 100%
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-checkbox-group {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.ones) {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 171;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
--el-table-tr-bg-color: null;
|
|
|
|
|
|
--el-table-border-color: null;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
line-height: 0px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rightWra {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 10px;
|
|
|
|
|
|
right: 20px;
|
|
|
|
|
|
width: 23%;
|
|
|
|
|
|
height: $height;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.85);
|
|
|
|
|
|
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
|
|
|
|
|
transition: transform 1s;
|
|
|
|
|
|
.rightFoldDiv {
|
|
|
|
|
|
width: 30px;
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: -8%;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translate(0, -50%);
|
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
color: #ccc;
|
|
|
|
|
|
}
|
|
|
|
|
|
.rightTop {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 40%;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.farmlandDiv {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 340px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.ProgressBar {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 9px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rightbottom {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 490px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.el-select {
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
background: rgba(22, 94, 102, 1);
|
|
|
|
|
|
border: 1px solid rgba(4, 153, 153, 1) !important;
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-input__wrapper) {
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-input__inner) {
|
|
|
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.ASdivision {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 368px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.legend {
|
|
|
|
|
|
position: absolute;
|
2023-05-05 16:32:31 +08:00
|
|
|
|
right: 25%;
|
|
|
|
|
|
bottom: 7%;
|
2023-04-27 11:44:35 +08:00
|
|
|
|
width: 129px;
|
2023-05-05 16:32:31 +08:00
|
|
|
|
border: 1px solid rgba(4, 153, 153, 1);
|
|
|
|
|
|
|
|
|
|
|
|
// height: 50px;
|
|
|
|
|
|
:deep(.el-collapse-item__header) {
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.6);
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
padding: 0 30px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
--el-collapse-content-bg-color {
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.6);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-collapse-item__content) {
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.6);
|
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
|
}
|
2023-04-27 11:44:35 +08:00
|
|
|
|
|
2023-05-05 16:32:31 +08:00
|
|
|
|
--el-collapse-border-color: none;
|
|
|
|
|
|
--el-collapse-content-bg-color: none;
|
|
|
|
|
|
|
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
|
// border-radius: 4px;
|
|
|
|
|
|
// background: rgba(2, 31, 26, 0.6);
|
|
|
|
|
|
// display: flex;
|
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
|
// justify-content: flex-start;
|
|
|
|
|
|
// align-items: center;
|
|
|
|
|
|
// padding: 10px 10px 10px 10px;
|
2023-04-27 11:44:35 +08:00
|
|
|
|
p {
|
|
|
|
|
|
margin: 10px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
line-height: 0px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mt-4 {
|
|
|
|
|
|
.el-checkbox {
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
margin-bottom: 2px;
|
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
line-height: 0px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-checkbox__label) {
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bottom_center {
|
|
|
|
|
|
position: absolute;
|
2023-05-05 16:32:31 +08:00
|
|
|
|
// left: calc(400px + 20px + 8vw);
|
|
|
|
|
|
left: -2%;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
margin: auto;
|
2023-04-27 11:44:35 +08:00
|
|
|
|
width: calc(100% - (400px * 2) - (10vw * 2));
|
|
|
|
|
|
min-width: 380px;
|
|
|
|
|
|
bottom: 5%;
|
|
|
|
|
|
height: 75px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.6);
|
|
|
|
|
|
border: 1px solid rgba(4, 153, 153, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tool {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 30%;
|
|
|
|
|
|
top: 8%;
|
|
|
|
|
|
width: 30px;
|
|
|
|
|
|
height: 280px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#popup {
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.6);
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
// justify-content: flex-start;
|
|
|
|
|
|
// align-items: flex-end;
|
|
|
|
|
|
padding: 30px 8px 20px 8px;
|
|
|
|
|
|
|
|
|
|
|
|
& > div:nth-child(1) {
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
// margin-top: 20px;
|
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
& > div: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;
|
|
|
|
|
|
// margin-top: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cancel {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 10px;
|
|
|
|
|
|
top: 5px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#pop {
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
background: rgba(2, 31, 26, 1);
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
// justify-content: flex-start;
|
|
|
|
|
|
// align-items: flex-end;
|
|
|
|
|
|
padding: 30px 8px 20px 8px;
|
|
|
|
|
|
|
|
|
|
|
|
.cancel {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 10px;
|
|
|
|
|
|
top: 5px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
& > div {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
& > div:nth-child(1) {
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
|
// margin-top: 20px;
|
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
& > div: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;
|
|
|
|
|
|
// margin-top: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.back_button {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 30%;
|
|
|
|
|
|
top: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-select__popper.el-popper) {
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.select_city {
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.85);
|
|
|
|
|
|
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
|
|
|
|
|
|
|
|
|
|
|
.el-select-dropdown__item.hover {
|
|
|
|
|
|
background: rgba(2, 31, 26, 0.95);
|
|
|
|
|
|
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-select-dropdown__item {
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-select__popper {
|
|
|
|
|
|
border: none !important;
|
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-popper {
|
|
|
|
|
|
border: none !important;
|
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-popper__arrow::before {
|
|
|
|
|
|
background: rgba(41, 255, 255, 0.7) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
