分类标准农田
This commit is contained in:
parent
023f4ba4e0
commit
51f754a51d
@ -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);
|
||||
@ -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'],
|
||||
@ -727,13 +592,94 @@ function layerClick() {
|
||||
hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
}
|
||||
}
|
||||
|
||||
// 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, //贴地
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
// 添加村
|
||||
// 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,10 +995,10 @@ function areachar() {
|
||||
formatter: '面积:{c0}',
|
||||
},
|
||||
};
|
||||
|
||||
// option && areaDivIntance.setOption(option);
|
||||
useEcharts(areaDivIntance, option);
|
||||
}
|
||||
}
|
||||
|
||||
function typesof() {
|
||||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||
@ -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 = {
|
||||
@ -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);
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user