tianlong/Agriculture-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

分类标准农田

Browse Source
This commit is contained in:
伊丽莎白
2023-04-24 11:16:43 +08:00
parent 023f4ba4e0
commit 51f754a51d
1 changed files with 472 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

549
src/views/crops/classify/index.vue
View File

@@ -17,10 +17,7 @@
<span>作物类型统计-高标准农田</span>
<p>
下载 &nbsp;
<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>
下载 &nbsp;
<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);
@@ -143,7 +120,7 @@
</div>
<div class="rowWra">
<span>面积：</span>
<span>{{ item.Shape_Area }}</span>
<span>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</span>
</div>
<div class="rowWra">
<span>镇名：</span>
@@ -170,6 +147,7 @@ import 'echarts-gl';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import { useEcharts } from '@/hooks/useEcharts';
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import axios from 'axios';
let viewer = ref(null);
const areaDiv = ref(null);
@@ -238,6 +216,11 @@ const options = [
];
// 组件挂载完成后执行
onMounted(() => {
initonMounted()
// checkList.value = Object.keys(dic.filter(item => !item.disabled))
});
// 初始化
function initonMounted() {
getaArea(); //面积
getTownships();
getvillages(); //村
@@ -247,10 +230,9 @@ onMounted(() => {
farmland(); //图表
ASdivision(); //图表
getArea(); //请求
getFarmland()
checkList.value = Object.keys(dic);
// checkList.value = Object.keys(dic.filter(item => !item.disabled))
});
}
const mapOption = {
url:
'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
@@ -325,170 +307,19 @@ function initMap() {
// 去除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);
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
});
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;
let providerPoint = null;
layers.forEach(item => {
if (item._imageryProvider._layers == 'shuzisannong:huangdaoqu_town') {
providerPoint = item;
}
});
// 拿取最后一个图层
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);
// addwms();
// 图层点击事件
layerClick();
// 添加镇级矢量
addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town')
//加载黄岛区村级地图服务
// 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),
// },
// }
// );
}
const checkList = ref([]);
@@ -536,12 +367,12 @@ function getLevel(height) {
}
function change(e, a) {
console.log('e:', e, a);
// console.log('checkList:', checkList.value);
// console.log('e:', e, a);
// removeWms('crop');
// addwms();
}
// 农作物
watch(
() => checkList.value,
(val, oldVal) => {
@@ -555,7 +386,7 @@ watch(
});
newData.forEach(item => {
if (layersDic[item]) {
addLayerWms(layersDic[item], item);
addWms(layersDic[item], item + 'zuowu');
}
});
} else if (val.length < oldVal.length) {
@@ -568,47 +399,16 @@ watch(
});
newData.forEach(item => {
if (layersDic[item]) {
removeWms(item);
removeWms([item + 'zuowu']);
}
});
}
}
);
watch(
() => clickInfoMap.value,
val => {
console.log('valvalvalvalvalvalvalvalvalval:', val);
}
);
// 根据name移除wms
function removeWms(name) {
// 倒叙遍历，customName是自定义的属性
// let viewer = viewers.value
const layers = viewer.imageryLayers._layers;
for (let f = layers.length - 1; f >= 0; f--) {
if (layers[f]._imageryProvider.customName === name) {
viewer.imageryLayers.remove(layers[f]);
}
}
}
function addwms() {
// let viewer = viewers.value
const name = "'" + checkList.value.join("','") + "'";
let map = new Cesium.WebMapServiceImageryProvider({
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms?`,
layers: 'shuzisannong:fenlei', //图层名
parameters: {
service: 'WMS',
format: 'image/png',
transparent: true, //是否透明
CQL_FILTER: `crop in (${name})`,
},
});
map.customName = 'crop'; //自己定义各种属性
viewer.imageryLayers.addImageryProvider(map); //添加图层
}
// 添加wms
function addLayerWms(layers, customName) {
function addWms(layers, customName) {
let map = new Cesium.WebMapServiceImageryProvider({
url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
layers: layers, //图层名
@@ -620,9 +420,16 @@ function addLayerWms(layers, customName) {
},
});
map.customName = customName; //自己定义各种属性
viewer.imageryLayers.addImageryProvider(map); //添加图层
let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
if (customName.indexOf('gbznt') > -1) {
console.log('dididididi')
// viewer.imageryLayers.lower(dd);//将图层下移一层
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
viewer.imageryLayers.raise(dd); //将图层上移一层
}
}
// 图层点击事件
let XZDM = ''
function layerClick() {
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(async function (movement) {
@@ -635,32 +442,92 @@ function layerClick() {
let alti = viewer.camera.positionCartographic.height;
let level = getLevel(alti);
const layers = viewer.imageryLayers._layers;
console.log('layers:', layers);
// 筛选出种植结构的最后一个图层
// let newLayer = layers.filter(item => {
// const index = Object.values(layersDic).findIndex(it => item._imageryProvider._layers && it === item._imageryProvider._layers)
// if (index > -1) {
// return item
// }
// })
// 获取镇的图层 （点击镇后，再点击种植结构）
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(async 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.coordinates,
'townLine',
'red'
);
// 移除以前的
removeWms(['village_CQL']);
// 添加新的
addvillage(
`XZDM=${newData.properties.XZDM}`,
'village_CQL'
);
// 隐藏pop
hiddenOverlayChart();
} else {//已经点击了镇了，开始监测是否点击作物了
zuowuClick(layers, cartographic, level, xy, movement)
}
} else {
removeWms(['village_CQL']);
}
}
});
}
}
} else {
// 直接种植结构
zuowuClick(layers, cartographic, level, xy, movement)
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
// 种植结构
async function zuowuClick(layers, cartographic, level, xy, movement) {
let newData = [];
let promise = layers.map(async item => {
console.log('item');
if (item._imageryProvider._layers) {
// 是种植结构图层
if (
Object.values(layersDic).findIndex(
it => it === item._imageryProvider._layers
) > -1
) {
if (Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1) {
const providerPoint = item;
// 拿取最后一个图层
let provider = providerPoint._imageryProvider;
if (
provider &&
provider.ready &&
provider._layers &&
providerPoint.show === true
if (provider && provider.ready && provider._layers && providerPoint.show === true
) {
xy = provider.tilingScheme.positionToTileXY(
cartographic,
@@ -677,15 +544,20 @@ function layerClick() {
if (promise) {
await promise.then(data => {
if (data.length > 0) {
// 移除高亮
deleteEntityByName('landtype');
// 高亮边界
addBoundaryHandle(
data['0'].data.geometry.coordinates,
'landtype',
'red'
);
let info = data['0'].properties;
console.log('info:', info);
const ind = newData.findIndex(
ii => ii && ii.crop === info.crop
);
if (ind < 0) {
console.log('push:', info);
newData.push(info);
console.log('newData:', newData);
}
}
});
@@ -695,12 +567,10 @@ function layerClick() {
}
});
await Promise.all(promise);
console.log('newDatanewDatanewDatanewDatanewData:', newData);
if (newData.length > 0) {
const coordinate = movement.position; //屏幕坐标 // 转为经纬度，保存，用于监听时转换坐标
var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
console.log('cartesian:', cartesian);
if (cartesian) {
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
@@ -709,11 +579,6 @@ function layerClick() {
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 = {
info: newData,
// ...newData['0'],
@@ -726,14 +591,95 @@ function layerClick() {
} else {
hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
// 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, //贴地
},
});
});
}
// 添加村
// 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] && 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 infoWindowPostRender() {
// let viewer = viewers.value;
// console.log('clickInfoMap.value:', clickInfoMap.value);
if (clickInfoMap.value && clickInfoMap.value.lon && clickInfoMap.value.lat) {
//经纬度转为世界坐标
const gisPosition = Cesium.Cartesian3.fromDegrees(
@@ -762,7 +708,6 @@ function hiddenOverlayChart() {
}
//显示弹窗
function showOverlayChart(position) {
console.log('显示');
const pop = document.getElementById('popup1');
pop.style.display = 'block';
pop.style.position = 'absolute';
@@ -770,7 +715,15 @@ function showOverlayChart(position) {
pop.style.left = position.x + 10 + 'px';
pop.style.zIndex = 99;
}
// 获取高标准农田
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)
}).catch(err => { })
}
//接口
const getArea = (item, index) => {
return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
@@ -809,6 +762,7 @@ const getaArea = () => {
let arr = [];
let a = {};
getareas().then(res => {
console.log('res:', res)
Township.crr = res.features;
data.title.forEach((item, indexs) => {
let town = res.features.map(i => {
@@ -881,6 +835,7 @@ const selectTab = () => {
//图表
function areachar() {
if (areaDiv.value) {
const areaDivIntance = echarts.init(areaDiv.value);
let option = {
@@ -1040,9 +995,9 @@ function areachar() {
formatter: '面积:{c0}',
},
};
// option && areaDivIntance.setOption(option);
useEcharts(areaDivIntance, option);
}
}
function typesof() {
@@ -1197,7 +1152,6 @@ function typesof() {
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
console.log(series);
for (let i = 0; i < series.length; i += 1) {
endValue = startValue + series[i].pieData.value;
@@ -1236,10 +1190,8 @@ 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
return `${params.seriesName
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
};"></span>${option.series[params.seriesIndex].pieData.value}`;
}
return '';
@@ -1409,7 +1361,6 @@ function typesof() {
typesofDivIntance.on('globalout', function () {
handleOut();
});
console.log(option);
let seriesIndex = 0;
setInterval(() => {
handleOver({ seriesIndex: seriesIndex });
@@ -1422,7 +1373,7 @@ function typesof() {
// option && typesofDivIntance.setOption(option);
useEcharts(typesofDivIntance, option);
}
// 高标准农田echarts
function farmland() {
const farmlandDivIntance = echarts.init(farmlandDiv.value);
var option = {
@@ -1611,7 +1562,7 @@ function farmland() {
],
},
},
data: [1,2,4], // 系列中的数据内容数组
data: [1, 2, 4], // 系列中的数据内容数组
},
{
type: 'bar', // 系列类型
@@ -1729,8 +1680,20 @@ function farmland() {
},
],
};
// areaDivIntance.off('click') //图表渲染前销毁点击事件,防止点击图标多次触发
farmlandDivIntance.on("click", (param) => ChartClick(param));
useEcharts(farmlandDivIntance, option);
}
// 图表点击事件
function ChartClick() {
// 移除作物
removeWms(['huangdaoqu_town'], true);
let layername = 'shuzisannong:farmland'
// 添加高标准农田服务
addWms(layername, layername + 'gbznt');
}
function ASdivision() {
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
var option = {
@@ -2037,9 +2000,15 @@ function ASdivision() {
},
],
};
ASdivisionDivIntance.on("click", (param) => ChartClickRB(param));
// option && ASdivisionDivIntance.setOption(option, true);
useEcharts(ASdivisionDivIntance, option);
}
// 右下角图表点击事件
function ChartClickRB(param) {
console.log('右下点击', param)
}
</script>
<style lang="scss" scoped>
@@ -2075,11 +2044,9 @@ $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;
@@ -2118,6 +2085,7 @@ $height: calc(100vh - 100px);
display: flex;
flex-direction: column;
max-width: calc(100% - 7px);
.typesofDiv {
width: 100%;
height: 267px;
@@ -2177,6 +2145,7 @@ $height: calc(100vh - 100px);
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;
border-radius: 0;
@@ -2193,6 +2162,16 @@ $height: calc(100vh - 100px);
height: 368px;
opacity: 1;
}
:deep(.el-select__popper) {
border: none !important;
background: transparent !important;
}
:deep(.el-popper) {
border: none !important;
background: transparent !important;
}
}
}
@@ -2202,6 +2181,7 @@ $height: calc(100vh - 100px);
bottom: 7%;
width: 129px;
border: 1px solid rgba(4, 153, 153, 1);
// height: 50px;
:deep(.el-collapse-item__header) {
background: rgba(2, 31, 26, 0.6);
@@ -2302,7 +2282,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);
@@ -2313,7 +2293,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;
@@ -2341,12 +2321,29 @@ $height: calc(100vh - 100px);
.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>