up
This commit is contained in:
parent
626e8fdb18
commit
b0524715df
@ -17,7 +17,10 @@
|
||||
<span>作物类型统计-高标准农田</span>
|
||||
<p>
|
||||
下载
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||
@ -28,12 +31,25 @@
|
||||
<span>作物类型统计-行政区划</span>
|
||||
<p>
|
||||
下载
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
<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
|
||||
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>
|
||||
@ -43,11 +59,18 @@
|
||||
<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="{
|
||||
<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" />
|
||||
}"
|
||||
v-model="checked3"
|
||||
:disabled="value.disabled"
|
||||
:label="item"
|
||||
/>
|
||||
|
||||
<!-- <el-checkbox style="
|
||||
background: rgba(251, 171, 60, 1);
|
||||
@ -137,7 +160,7 @@
|
||||
</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
<el-button class="back_button">111111</el-button>
|
||||
<el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -159,6 +182,7 @@ const ASdivisionDiv = ref(null);
|
||||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||||
const value = ref('370211');
|
||||
const clickInfoMap = ref({ info: [] });
|
||||
const flag = ref(false);
|
||||
let dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
@ -712,7 +736,7 @@ function showOverlayChart(position) {
|
||||
pop.style.left = position.x + 10 + 'px';
|
||||
pop.style.zIndex = 99;
|
||||
}
|
||||
const formLandRef = ref([])
|
||||
const formLandRef = ref([]);
|
||||
// 获取高标准农田
|
||||
function getFarmland() {
|
||||
axios({
|
||||
@ -720,10 +744,16 @@ function getFarmland() {
|
||||
serverAPI.geoserverUrl +
|
||||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
})
|
||||
.then(res => {
|
||||
console.log('农田：', res);
|
||||
formLandRef.value = res.data.features
|
||||
}).catch(err => { });
|
||||
formLandRef.value = res.data.features;
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
//返回
|
||||
function back() {
|
||||
removeWms(['huangdaoqu_town'], true);
|
||||
}
|
||||
//接口
|
||||
const getArea = (item, index) => {
|
||||
@ -888,7 +918,7 @@ function areachar() {
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
|
||||
data: ['小麦', '花生', '大豆', '花生', '蓝莓'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#C0C4CC',
|
||||
@ -1024,7 +1054,7 @@ function typesof() {
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '玉米',
|
||||
name: '花生',
|
||||
value: 56,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
@ -1221,9 +1251,7 @@ function typesof() {
|
||||
tooltip: {
|
||||
formatter: params => {
|
||||
if (params.seriesName !== 'mouseoutSeries') {
|
||||
return `${params.seriesName
|
||||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
|
||||
};"></span>`;
|
||||
return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>`;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
@ -1496,7 +1524,7 @@ function farmland() {
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: [160, 103, 155, 100, 50, 122, 98],
|
||||
data: [200, 300, 0, 200, 0, 100, 300],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
@ -1518,7 +1546,7 @@ function farmland() {
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: [160, 103, 155, 100, 50, 124, 168],
|
||||
data: [200, 300, 200, 100, 0, 100, 300],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
@ -1540,7 +1568,7 @@ function farmland() {
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: [160, 103, 155, 100, 50, 45, 321],
|
||||
data: [200, 0, 200, 100, 300, 200, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
@ -1557,6 +1585,28 @@ function farmland() {
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '花生',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: [0, 0, 200, 100, 300, 200, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(4, 247, 227, 0.9)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(4, 247, 227, 0.25)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -1566,17 +1616,21 @@ function farmland() {
|
||||
}
|
||||
// 图表点击事件
|
||||
function ChartClick(item) {
|
||||
console.log('item:', item)
|
||||
console.log('item:', item);
|
||||
// 移除作物
|
||||
removeWms(['huangdaoqu_town'], true);
|
||||
let layername = 'shuzisannong:farmland';
|
||||
|
||||
// 判断是否存在避免重复添加
|
||||
let cz = false
|
||||
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 (
|
||||
layers[f] &&
|
||||
layers[f]._imageryProvider.customName &&
|
||||
layers[f]._imageryProvider.customName === layername + 'gbznt'
|
||||
) {
|
||||
cz = true;
|
||||
}
|
||||
}
|
||||
if (!cz) {
|
||||
@ -1584,12 +1638,12 @@ function ChartClick(item) {
|
||||
addWms(layername, layername + 'gbznt');
|
||||
}
|
||||
// 定位到地块
|
||||
let features = formLandRef.value
|
||||
let features = formLandRef.value;
|
||||
features.forEach(it => {
|
||||
console.log('it.properties.name:',it.properties.name)
|
||||
console.log('item.name:',item.name)
|
||||
console.log('it.properties.name:', it.properties.name);
|
||||
console.log('item.name:', item.name);
|
||||
if (it.properties.name === item.name) {
|
||||
console.log('dingwei')
|
||||
console.log('dingwei');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
it.bbox[0],
|
||||
@ -1600,8 +1654,8 @@ function ChartClick(item) {
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
flag.value = true;
|
||||
}
|
||||
|
||||
function ASdivision() {
|
||||
@ -1821,11 +1875,11 @@ function ASdivision() {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 225, 104, 0.9)', // 0% 处的颜色
|
||||
color: 'rgba(4, 247, 227, 0.9)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 225, 104, 0.25)', // 100% 处的颜色
|
||||
color: 'rgba(4, 247, 227, 0.25)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -1953,9 +2007,11 @@ $height: calc(100vh - 100px);
|
||||
height: 25px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(180deg,
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%);
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -2199,7 +2255,7 @@ $height: calc(100vh - 100px);
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&>span:nth-child(1) {
|
||||
& > span:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
@ -2210,7 +2266,7 @@ $height: calc(100vh - 100px);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&>span:nth-child(2) {
|
||||
& > span:nth-child(2) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 129px;
|
||||
height: 24px;
|
||||
@ -2232,8 +2288,10 @@ $height: calc(100vh - 100px);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.back_button{
|
||||
.back_button {
|
||||
position: absolute;
|
||||
right: 30%;
|
||||
top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user