面积
This commit is contained in:
parent
d20a1e0ca1
commit
a8e0623460
16092
package-lock.json
generated
16092
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
91
package.json
91
package.json
@ -1,47 +1,48 @@
|
|||||||
{
|
{
|
||||||
"name": "ruoyi",
|
"name": "ruoyi",
|
||||||
"version": "3.8.4",
|
"version": "3.8.4",
|
||||||
"description": "若依管理系统",
|
"description": "若依管理系统",
|
||||||
"author": "若依",
|
"author": "若依",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build:prod": "vite build",
|
"build:prod": "vite build",
|
||||||
"build:stage": "vite build --mode staging",
|
"build:stage": "vite build --mode staging",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
|
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "2.0.10",
|
"@element-plus/icons-vue": "2.0.10",
|
||||||
"@fit-screen/vue": "^0.2.0",
|
"@fit-screen/vue": "^0.2.0",
|
||||||
"@vueuse/core": "9.5.0",
|
"@vueuse/core": "9.5.0",
|
||||||
"axios": "0.27.2",
|
"axios": "0.27.2",
|
||||||
"echarts": "^5.3.0",
|
"echarts": "^5.3.0",
|
||||||
"element-plus": "2.2.21",
|
"element-plus": "2.2.21",
|
||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
"fuse.js": "6.6.2",
|
"fuse.js": "6.6.2",
|
||||||
"js-cookie": "3.0.1",
|
"js-cookie": "3.0.1",
|
||||||
"jsencrypt": "3.3.1",
|
"jsencrypt": "3.3.1",
|
||||||
"lib-flexible": "^0.3.2",
|
"lib-flexible": "^0.3.2",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"pinia": "2.0.22",
|
"pinia": "2.0.22",
|
||||||
"postcss-px2rem": "^0.3.0",
|
"postcss-px2rem": "^0.3.0",
|
||||||
"v-scale-screen": "^2.2.0",
|
"v-scale-screen": "^2.2.0",
|
||||||
"vue": "3.2.45",
|
"vue": "3.2.45",
|
||||||
"vue-cropper": "1.0.3",
|
"vue-cropper": "1.0.3",
|
||||||
"vue-router": "4.1.4"
|
"vue-router": "4.1.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "3.1.0",
|
"@vitejs/plugin-vue": "3.1.0",
|
||||||
"@vue/compiler-sfc": "3.2.45",
|
"@vue/compiler-sfc": "3.2.45",
|
||||||
"sass": "1.56.1",
|
"sass": "1.56.1",
|
||||||
"unplugin-auto-import": "0.11.4",
|
"unplugin-auto-import": "0.11.4",
|
||||||
"vite": "3.2.3",
|
"vite": "3.2.3",
|
||||||
"vite-plugin-compression": "0.5.1",
|
"vite-plugin-compression": "0.5.1",
|
||||||
"vite-plugin-svg-icons": "2.0.1",
|
"vite-plugin-svg-icons": "2.0.1",
|
||||||
"vite-plugin-vue-setup-extend": "0.4.0"
|
"vite-plugin-vue-setup-extend": "0.4.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
@ -5,19 +5,13 @@
|
|||||||
<div class="leftTop">
|
<div class="leftTop">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>种植面积时间统计</span>
|
<span>种植面积时间统计</span>
|
||||||
<p
|
<p @click="Deta(
|
||||||
@click="
|
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||||
Deta(
|
)
|
||||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
">
|
||||||
)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
下载
|
下载
|
||||||
|
|
||||||
<img
|
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||||
src="@/assets/icons/svg/downloads.svg"
|
|
||||||
style="width: 14px; height: 14px; cursor: pointer"
|
|
||||||
/>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div ref="areaDiv" class="areaDiv"></div>
|
<div ref="areaDiv" class="areaDiv"></div>
|
||||||
@ -26,18 +20,12 @@
|
|||||||
<div class="leftbottom">
|
<div class="leftbottom">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>种植面积统计</span>
|
<span>种植面积统计</span>
|
||||||
<p
|
<p @click="Deta(
|
||||||
@click="
|
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
|
||||||
Deta(
|
)
|
||||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
|
">
|
||||||
)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
下载
|
下载
|
||||||
<img
|
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||||
src="@/assets/icons/svg/downloads.svg"
|
|
||||||
style="width: 14px; height: 14px; cursor: pointer"
|
|
||||||
/>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||||
@ -54,18 +42,12 @@
|
|||||||
<div class="rightTop">
|
<div class="rightTop">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>作物类型统计-高标准农田</span>
|
<span>作物类型统计-高标准农田</span>
|
||||||
<p
|
<p @click="Deta(
|
||||||
@click="
|
'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'
|
||||||
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
|
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||||
src="@/assets/icons/svg/downloads.svg"
|
|
||||||
style="width: 14px; height: 14px; cursor: pointer"
|
|
||||||
/>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||||
@ -74,27 +56,17 @@
|
|||||||
<div class="rightbottom">
|
<div class="rightbottom">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>作物类型统计-行政区划</span>
|
<span>作物类型统计-行政区划</span>
|
||||||
<p
|
<p @click="Deta(
|
||||||
@click="
|
'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'
|
||||||
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
|
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||||
src="@/assets/icons/svg/downloads.svg"
|
|
||||||
style="width: 14px; height: 14px; cursor: pointer"
|
|
||||||
/>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部">
|
<el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部">
|
||||||
<el-option
|
<el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
|
||||||
v-for="item in Township.arr"
|
:value="item.properties.XZDM" />
|
||||||
:key="item.properties.XZDM"
|
|
||||||
:label="item.properties.XZMC"
|
|
||||||
:value="item.properties.XZDM"
|
|
||||||
/>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -103,78 +75,42 @@
|
|||||||
<p>图例</p>
|
<p>图例</p>
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<el-checkbox-group @change="change()" v-model="checkedCities">
|
<el-checkbox-group @change="change()" v-model="checkedCities">
|
||||||
<el-checkbox
|
<el-checkbox checked style="
|
||||||
checked
|
|
||||||
style="
|
|
||||||
background: rgba(102, 142, 214, 0.8);
|
background: rgba(102, 142, 214, 0.8);
|
||||||
border: 1px solid rgba(102, 142, 214, 1);
|
border: 1px solid rgba(102, 142, 214, 1);
|
||||||
"
|
" label="小麦" />
|
||||||
label="小麦"
|
<el-checkbox checked style="
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
checked
|
|
||||||
style="
|
|
||||||
background: rgba(255, 225, 104, 0.8);
|
background: rgba(255, 225, 104, 0.8);
|
||||||
border: 1px solid rgba(255, 225, 104, 1);
|
border: 1px solid rgba(255, 225, 104, 1);
|
||||||
"
|
" label="玉米" />
|
||||||
label="玉米"
|
<el-checkbox checked style="
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
checked
|
|
||||||
style="
|
|
||||||
background: rgba(156, 220, 130, 0.8);
|
background: rgba(156, 220, 130, 0.8);
|
||||||
border: 1px solid rgba(156, 220, 130, 1);
|
border: 1px solid rgba(156, 220, 130, 1);
|
||||||
"
|
" label="大豆" />
|
||||||
label="大豆"
|
<el-checkbox checked style="
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
checked
|
|
||||||
style="
|
|
||||||
background: rgba(209, 91, 127, 0.8);
|
background: rgba(209, 91, 127, 0.8);
|
||||||
border: 1px solid rgba(209, 91, 127, 1);
|
border: 1px solid rgba(209, 91, 127, 1);
|
||||||
"
|
" label="地瓜" />
|
||||||
label="地瓜"
|
<el-checkbox checked style="
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
checked
|
|
||||||
style="
|
|
||||||
background: rgba(212, 236, 89, 0.8);
|
background: rgba(212, 236, 89, 0.8);
|
||||||
border: 1px solid rgba(212, 236, 89, 1);
|
border: 1px solid rgba(212, 236, 89, 1);
|
||||||
"
|
" label="花生" />
|
||||||
label="花生"
|
<el-checkbox checked style="
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
checked
|
|
||||||
style="
|
|
||||||
background: rgba(50, 211, 235, 0.8);
|
background: rgba(50, 211, 235, 0.8);
|
||||||
border: 1px solid rgba(50, 211, 235, 1);
|
border: 1px solid rgba(50, 211, 235, 1);
|
||||||
"
|
" label="蓝莓" />
|
||||||
label="蓝莓"
|
<el-checkbox checked style="
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
checked
|
|
||||||
style="
|
|
||||||
background: rgba(91, 196, 159, 0.8);
|
background: rgba(91, 196, 159, 0.8);
|
||||||
border: 1px solid rgba(91, 196, 159, 1);
|
border: 1px solid rgba(91, 196, 159, 1);
|
||||||
"
|
" label="茶叶" />
|
||||||
label="茶叶"
|
<el-checkbox checked style="
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
checked
|
|
||||||
style="
|
|
||||||
background: rgba(254, 182, 77, 0.8);
|
background: rgba(254, 182, 77, 0.8);
|
||||||
border: 1px solid rgba(254, 182, 77, 1);
|
border: 1px solid rgba(254, 182, 77, 1);
|
||||||
"
|
" label="马铃薯" />
|
||||||
label="马铃薯"
|
<el-checkbox checked style="
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
checked
|
|
||||||
style="
|
|
||||||
background: rgba(250, 129, 109, 0.8);
|
background: rgba(250, 129, 109, 0.8);
|
||||||
border: 1px solid rgba(250, 129, 109, 1);
|
border: 1px solid rgba(250, 129, 109, 1);
|
||||||
"
|
" label="白菜和萝卜" />
|
||||||
label="白菜和萝卜"
|
|
||||||
/>
|
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -198,7 +134,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, inject, reactive } from 'vue';
|
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||||||
import { useEcharts } from '@/hooks/useEcharts';
|
import { useEcharts } from '@/hooks/useEcharts';
|
||||||
@ -230,7 +166,9 @@ let dic = {
|
|||||||
白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
|
白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
|
||||||
其他: 'rgba(250, 129, 109, 0.8)',
|
其他: 'rgba(250, 129, 109, 0.8)',
|
||||||
};
|
};
|
||||||
|
watch(() => Township.arr, (val) => {
|
||||||
|
console.log('val:', val)
|
||||||
|
})
|
||||||
//行政区划数据
|
//行政区划数据
|
||||||
var data = {
|
var data = {
|
||||||
title: [],
|
title: [],
|
||||||
@ -386,47 +324,8 @@ function initMap() {
|
|||||||
duration: 2,
|
duration: 2,
|
||||||
});
|
});
|
||||||
|
|
||||||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
// 图层点击事件
|
||||||
handler.setInputAction(function (movement) {
|
layerClick()
|
||||||
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;
|
|
||||||
console.log(layers);
|
|
||||||
const providerPoint = layers[layers.length - 1];
|
|
||||||
// 拿取最后一个图层
|
|
||||||
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) {
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//加载黄岛区村级地图服务
|
//加载黄岛区村级地图服务
|
||||||
// Cesium.GeoJsonDataSource.load(
|
// Cesium.GeoJsonDataSource.load(
|
||||||
@ -534,6 +433,9 @@ function initMap() {
|
|||||||
// );
|
// );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// data数据数组
|
||||||
|
// name实体名称，方便以后删除
|
||||||
|
// color实体颜色
|
||||||
function addBoundaryHandle(data, name, color) {
|
function addBoundaryHandle(data, name, color) {
|
||||||
data.forEach(item => {
|
data.forEach(item => {
|
||||||
let arr = [];
|
let arr = [];
|
||||||
@ -602,6 +504,124 @@ function getLevel(height) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
console.log('layers:', 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) {
|
||||||
|
console.log('data:', data)
|
||||||
|
let newData = data['0']
|
||||||
|
if (newData.properties && newData.properties.XZDM) {
|
||||||
|
if (XZDM !== newData.properties.XZDM) {//防止
|
||||||
|
XZDM = newData.properties.XZDM
|
||||||
|
console.log('111', newData)
|
||||||
|
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.coordinates, 'townLine', 'yellow')
|
||||||
|
// 移除以前的
|
||||||
|
removeWms(['village_CQL'])
|
||||||
|
// 添加新的
|
||||||
|
addvillage(`XZDM=${newData.properties.XZDM}`, 'village_CQL')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
removeWms(['village_CQL'])
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||||
|
|
||||||
|
}
|
||||||
|
// 添加村
|
||||||
|
// CQL_FILTER:筛选的语句
|
||||||
|
// customName地图服务自定义属性名
|
||||||
|
function addvillage(CQL_FILTER, customName) {
|
||||||
|
console.log('222')
|
||||||
|
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]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*------------------接口--------------------*/
|
/*------------------接口--------------------*/
|
||||||
const getArea = () => {
|
const getArea = () => {
|
||||||
@ -665,6 +685,7 @@ const selectTab = () => {
|
|||||||
getTownships();
|
getTownships();
|
||||||
}
|
}
|
||||||
let arr = [...Township.arr];
|
let arr = [...Township.arr];
|
||||||
|
console.log('arr:', arr)
|
||||||
arr.forEach(item => {
|
arr.forEach(item => {
|
||||||
if (item.properties.XZDM == value.value) {
|
if (item.properties.XZDM == value.value) {
|
||||||
viewer.camera.flyTo({
|
viewer.camera.flyTo({
|
||||||
@ -689,24 +710,20 @@ const selectTab = () => {
|
|||||||
data.title = [...Object.values(brr)];
|
data.title = [...Object.values(brr)];
|
||||||
ASdivision();
|
ASdivision();
|
||||||
});
|
});
|
||||||
const layers = viewer.imageryLayers._layers;
|
|
||||||
for (let f = layers.length - 1; f >= 0; f--) {
|
let town = [...Township.arr]
|
||||||
if (layers[f]._imageryProvider.aaa === 'aaa') {
|
const townData = town.find(item => item.properties.XZDM === value.value)
|
||||||
viewer.imageryLayers.remove(layers[f]);
|
if (townData) {
|
||||||
}
|
// 移除镇高亮
|
||||||
|
deleteEntityByName('townLine')
|
||||||
|
// 高亮镇边界
|
||||||
|
addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow')
|
||||||
}
|
}
|
||||||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
// 移除以前村
|
||||||
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
removeWms(['aaa'])
|
||||||
layers: 'shuzisannong:huangdaoqu_village', //图层名
|
// 添加村
|
||||||
parameters: {
|
addvillage(`XZDM=${value.value}`, 'aaa')
|
||||||
service: 'WMS',
|
|
||||||
format: 'image/png',
|
|
||||||
transparent: true, //是否透明
|
|
||||||
CQL_FILTER: `XZDM=${value.value}`,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
map2.aaa = 'aaa';
|
|
||||||
viewer.imageryLayers.addImageryProvider(map2);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
//下载
|
//下载
|
||||||
@ -1310,7 +1327,6 @@ function ProgressBar() {
|
|||||||
// option && ProgressBarDivIntance.setOption(option);
|
// option && ProgressBarDivIntance.setOption(option);
|
||||||
useEcharts(ProgressBarDivIntance, option);
|
useEcharts(ProgressBarDivIntance, option);
|
||||||
}
|
}
|
||||||
|
|
||||||
function ASdivision() {
|
function ASdivision() {
|
||||||
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
||||||
var option = {
|
var option = {
|
||||||
@ -1546,6 +1562,7 @@ function ASdivision() {
|
|||||||
// option && ASdivisionDivIntance.setOption(option, true);
|
// option && ASdivisionDivIntance.setOption(option, true);
|
||||||
useEcharts(ASdivisionDivIntance, option);
|
useEcharts(ASdivisionDivIntance, option);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------------------------*/
|
/*--------------------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
/*------------------------------------------柱状图--------------------------------------------*/
|
/*------------------------------------------柱状图--------------------------------------------*/
|
||||||
@ -1782,14 +1799,17 @@ function ASdivision() {
|
|||||||
// function random(min, max) {
|
// function random(min, max) {
|
||||||
// return Math.floor(Math.random() * (max - min)) + min;
|
// return Math.floor(Math.random() * (max - min)) + min;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
/*-------------------------------------------------------------------------------------------*/
|
/*-------------------------------------------------------------------------------------------*/
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$height: calc(100vh - 100px);
|
$height: calc(100vh - 100px);
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
@ -1803,22 +1823,22 @@ $height: calc(100vh - 100px);
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
width: 79px;
|
width: 79px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
background: linear-gradient(
|
background: linear-gradient(180deg,
|
||||||
180deg,
|
rgba(16, 111, 111, 1) 0%,
|
||||||
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);
|
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -1839,6 +1859,7 @@ $height: calc(100vh - 100px);
|
|||||||
max-width: calc(100% - 20px);
|
max-width: calc(100% - 20px);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.areaDiv {
|
.areaDiv {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 327px;
|
height: 327px;
|
||||||
@ -1846,12 +1867,14 @@ $height: calc(100vh - 100px);
|
|||||||
display: flex;
|
display: flex;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ProgressBar {
|
.ProgressBar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 9px;
|
height: 9px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.leftbottom {
|
.leftbottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 455px;
|
height: 455px;
|
||||||
@ -1861,15 +1884,18 @@ $height: calc(100vh - 100px);
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 13px;
|
padding-top: 13px;
|
||||||
|
|
||||||
.typesofDiv {
|
.typesofDiv {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableDiv {
|
.tableDiv {
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 85%;
|
width: 85%;
|
||||||
|
|
||||||
:deep(.ones) {
|
:deep(.ones) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 171;
|
height: 171;
|
||||||
@ -1900,6 +1926,7 @@ $height: calc(100vh - 100px);
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: rgba(2, 31, 26, 0.3);
|
background: rgba(2, 31, 26, 0.3);
|
||||||
|
|
||||||
.rightTop {
|
.rightTop {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40%;
|
height: 40%;
|
||||||
@ -1908,17 +1935,20 @@ $height: calc(100vh - 100px);
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.farmlandDiv {
|
.farmlandDiv {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 340px;
|
height: 340px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ProgressBar {
|
.ProgressBar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 9px;
|
height: 9px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rightbottom {
|
.rightbottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 490px;
|
height: 490px;
|
||||||
@ -1935,13 +1965,16 @@ $height: calc(100vh - 100px);
|
|||||||
background: rgba(22, 94, 102, 1);
|
background: rgba(22, 94, 102, 1);
|
||||||
border: 1px solid rgba(4, 153, 153, 1) !important;
|
border: 1px solid rgba(4, 153, 153, 1) !important;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
|
||||||
:deep(.el-input__wrapper) {
|
:deep(.el-input__wrapper) {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-input__inner) {
|
:deep(.el-input__inner) {
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ASdivision {
|
.ASdivision {
|
||||||
width: 415px;
|
width: 415px;
|
||||||
height: 368px;
|
height: 368px;
|
||||||
@ -1964,6 +1997,7 @@ $height: calc(100vh - 100px);
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px 10px 10px 10px;
|
padding: 10px 10px 10px 10px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -1973,6 +2007,7 @@ $height: calc(100vh - 100px);
|
|||||||
color: rgba(255, 255, 255, 1);
|
color: rgba(255, 255, 255, 1);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-4 {
|
.mt-4 {
|
||||||
.el-checkbox {
|
.el-checkbox {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
@ -1987,6 +2022,7 @@ $height: calc(100vh - 100px);
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-checkbox__label) {
|
:deep(.el-checkbox__label) {
|
||||||
color: rgba(255, 255, 255, 1);
|
color: rgba(255, 255, 255, 1);
|
||||||
}
|
}
|
||||||
@ -2004,6 +2040,7 @@ $height: calc(100vh - 100px);
|
|||||||
background: rgba(2, 31, 26, 0.6);
|
background: rgba(2, 31, 26, 0.6);
|
||||||
border: 1px solid rgba(4, 153, 153, 1);
|
border: 1px solid rgba(4, 153, 153, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool {
|
.tool {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 30%;
|
right: 30%;
|
||||||
@ -2016,6 +2053,7 @@ $height: calc(100vh - 100px);
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
#popup {
|
#popup {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: rgba(2, 31, 26, 0.6);
|
background: rgba(2, 31, 26, 0.6);
|
||||||
@ -2024,7 +2062,7 @@ $height: calc(100vh - 100px);
|
|||||||
// align-items: flex-end;
|
// align-items: flex-end;
|
||||||
padding: 30px 8px 20px 8px;
|
padding: 30px 8px 20px 8px;
|
||||||
|
|
||||||
& > div:nth-child(1) {
|
&>div:nth-child(1) {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: 0px;
|
letter-spacing: 0px;
|
||||||
color: rgba(255, 255, 255, 1);
|
color: rgba(255, 255, 255, 1);
|
||||||
@ -2032,7 +2070,7 @@ $height: calc(100vh - 100px);
|
|||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > div:nth-child(2) {
|
&>div:nth-child(2) {
|
||||||
color: rgba(255, 255, 255, 1);
|
color: rgba(255, 255, 255, 1);
|
||||||
width: 129px;
|
width: 129px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
@ -2054,6 +2092,6 @@ $height: calc(100vh - 100px);
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:deep(.el-select__popper.el-popper) {
|
|
||||||
}
|
:deep(.el-select__popper.el-popper) {}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user