标准农田
This commit is contained in:
parent
182ce9dbb6
commit
4db5df3fae
@ -17,10 +17,7 @@
|
||||
<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>
|
||||
@ -31,25 +28,12 @@
|
||||
<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>
|
||||
@ -59,18 +43,11 @@
|
||||
<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);
|
||||
@ -734,6 +711,7 @@ function showOverlayChart(position) {
|
||||
pop.style.left = position.x + 10 + 'px';
|
||||
pop.style.zIndex = 99;
|
||||
}
|
||||
const formLandRef = ref([])
|
||||
// 获取高标准农田
|
||||
function getFarmland() {
|
||||
axios({
|
||||
@ -741,11 +719,10 @@ 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 => {
|
||||
console.log('农田：', res);
|
||||
})
|
||||
.catch(err => {});
|
||||
}).then(res => {
|
||||
console.log('农田：', res);
|
||||
formLandRef.value = res.data.features
|
||||
}).catch(err => { });
|
||||
}
|
||||
//接口
|
||||
const getArea = (item, index) => {
|
||||
@ -812,7 +789,7 @@ const selectTab = () => {
|
||||
if (value.value == '370211') {
|
||||
getTownships();
|
||||
classData = [302034, 243990, 42344, 34234, 304235];
|
||||
} else if(value.value) {
|
||||
} else if (value.value) {
|
||||
classData = [102034, 173990, 22344, 14234, 104235];
|
||||
}
|
||||
|
||||
@ -1243,11 +1220,9 @@ 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 '';
|
||||
},
|
||||
@ -1512,7 +1487,7 @@ function farmland() {
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
fontSize: 14,
|
||||
},
|
||||
data: ['片区一', '片区二', '片区三', '片区四', '片区五','片区六','片区七'],
|
||||
data: ['片区1', '片区2', '片区3', '片区4', '片区5', '片区6', '片区7'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -1520,7 +1495,7 @@ function farmland() {
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: [160, 103, 155, 100, 50,122,98],
|
||||
data: [160, 103, 155, 100, 50, 122, 98],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
@ -1542,7 +1517,7 @@ function farmland() {
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: [160, 103, 155, 100, 50,124,168],
|
||||
data: [160, 103, 155, 100, 50, 124, 168],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
@ -1564,7 +1539,7 @@ function farmland() {
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: [160, 103, 155, 100, 50,45,321],
|
||||
data: [160, 103, 155, 100, 50, 45, 321],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
@ -1589,12 +1564,43 @@ function farmland() {
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
}
|
||||
// 图表点击事件
|
||||
function ChartClick() {
|
||||
function ChartClick(item) {
|
||||
console.log('item:', item)
|
||||
// 移除作物
|
||||
removeWms(['huangdaoqu_town'], true);
|
||||
let layername = 'shuzisannong:farmland';
|
||||
// 添加高标准农田服务
|
||||
addWms(layername, layername + 'gbznt');
|
||||
|
||||
// 判断是否存在避免重复添加
|
||||
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,
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function ASdivision() {
|
||||
@ -1946,11 +1952,9 @@ $height: calc(100vh - 100px);
|
||||
height: 25px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
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;
|
||||
@ -2152,7 +2156,10 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.bottom_center {
|
||||
position: absolute;
|
||||
left: calc(400px + 20px + 8vw);
|
||||
// left: calc(400px + 20px + 8vw);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: calc(100% - (400px * 2) - (10vw * 2));
|
||||
min-width: 380px;
|
||||
bottom: 5%;
|
||||
@ -2190,7 +2197,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);
|
||||
@ -2201,7 +2208,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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user