diff --git a/src/views/crops/area/index.vue b/src/views/crops/area/index.vue index 9200ce7..008f909 100644 --- a/src/views/crops/area/index.vue +++ b/src/views/crops/area/index.vue @@ -5,19 +5,13 @@
种植面积时间统计 -

+

下载   - +

@@ -26,18 +20,12 @@
种植面积统计 -

+

下载   - +

@@ -89,18 +77,12 @@
作物类型统计-高标准农田 -

+

下载   - +

@@ -109,27 +91,17 @@
作物类型统计-行政区划 -

+

下载   - +

- +
@@ -151,6 +123,17 @@
{{ clickInfoMap.value }}亩
X
+
+
+
{{ item.crop }}：
+
{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩
+
+
+
村名：
+
{{ townZuowu.XZQMC }}
+
+
X
+
@@ -357,6 +340,8 @@ function initMap() { // 图层点击事件 layerClick(); + // 蒙版 + mbHandle() //加载黄岛区村级地图服务 // Cesium.GeoJsonDataSource.load( @@ -535,6 +520,7 @@ function getLevel(height) { } } +let townZuowu = ref({ label: [] })//镇的作物 let XZDM = ''; // 图层点击事件 function layerClick() { @@ -549,7 +535,6 @@ function layerClick() { 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 && @@ -576,13 +561,11 @@ function layerClick() { 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); value.value = XZDM; // selectTab(); // let item = newData.data; @@ -611,9 +594,33 @@ function layerClick() { `XZDM=${newData.properties.XZDM}`, 'village_CQL' ); + + // 显示该镇的种植结构 + let entitys = viewer.entities._entities._array; + for (var na = entitys.length - 1; na >= 0; na--) { + if (entitys[na]._name && entitys[na]._name === 'point' + newData.properties.XZDM) { + let info = entitys[na]._info + // entitys[na].label.show = true + townZuowu.value = info//保存数据 + showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动 + viewer.scene.postRender.addEventListener(infoWindowPostRender); + } else { + // if (entitys[na].label) { + // entitys[na].label.show = false + // } + } + } + // 移除村高亮 + deleteEntityByName('villageLine'); + XZQDM = '' + } else { + // // 已经有镇了，监听村点击 + villageClick(layers, xy, level, cartographic) } } else { removeWms(['village_CQL']); + // 移除框框 + hiddenOverlayChart(); // 清除监听事件 } } }); @@ -624,11 +631,91 @@ function layerClick() { } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } +let XZQDM = '' +// 村点击高亮 +function villageClick(layers, xy, level, cartographic) { + const index = layers.findIndex( + item => + item._imageryProvider._layers && + item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village' + ); + 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) { + let newData = data['0']; + if (newData.properties && newData.properties.XZQDM) { + if (XZQDM !== newData.properties.XZQDM) { + //防止 + XZQDM = newData.properties.XZQDM; + let item = newData.data; + // 移除高亮 + deleteEntityByName('villageLine'); + // 高亮边界 + addBoundaryHandle( + item.geometry.coordinates, + 'villageLine', + 'yellow' + ); + // townZuowu.value = info//保存数据 + + // 后插和村 + if (newData.properties.XZQDM === '370211104217') { + // console.log('后河岔村委会') + const rectangle = Cesium.Rectangle.fromDegrees( + item.bbox[0], + item.bbox[1], + item.bbox[2], + item.bbox[3] + ); + const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic) + let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度 + let latitude = Cesium.Math.toDegrees(center.latitude); + let info = { + lon: longitude, + lat: latitude, + ...item.properties, + // XZQMC + label: [ + { crop: "茶叶", Shape_Area: 2820 }, + { crop: "大豆", Shape_Area: 2767 }, + { crop: "花生", Shape_Area: 62356 }, + { crop: "蓝莓", Shape_Area: 5443 }, + { crop: "地瓜", Shape_Area: 897 }, + { crop: "小麦", Shape_Area: 20111 }, + ] + } + townZuowu.value = info//保存数据 + } + } + } + } + }); + } + } + } +} // 添加村 // 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', //图层名 @@ -1778,6 +1865,108 @@ function ASdivision() { } /*--------------------------------------------------------------------------------------------*/ +function getAreaFenlei() { + let fl = fenleiRef.value + console.log('fl:', fl); + axios({ + url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson', + }).then(res => { + console.log('res1111:', res); + let data = res.data.features; + data.forEach((item, index) => { + const rectangle = Cesium.Rectangle.fromDegrees( + item.bbox[0], + item.bbox[1], + item.bbox[2], + item.bbox[3] + ); + const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic) + let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度 + let latitude = Cesium.Math.toDegrees(center.latitude); + + if (item.properties.XZDM === '370211011') { + //灵山卫街道 + longitude = 120.0863; + latitude = 35.941; + } else if (item.properties.XZDM === '370211003') { + //薛家岛街道 + longitude = 120.243682; + latitude = 35.97123201; + } + const townData = fl[item.properties.XZMC] + let label = [] + if (townData) { + label = townData.map((it, inex) => { + // let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩` + // return dd + return it.properties + }) + } + // label = label.join(' ') + // console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC) + // 添加点 + viewer.entities.add({ + name: 'point' + item.properties.XZDM, + position: Cesium.Cartesian3.fromDegrees(longitude, latitude), + point: new Cesium.PointGraphics({ + show: true, + pixelSize: 10, + // heightReference: Cesium.HeightReference.NONE, + color: Cesium.Color.fromBytes(30, 144, 255), + outlineColor: new Cesium.Color(0, 0, 0, 0), + outlineWidth: 0, + disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡 + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,//贴地 + }), + // label: { + // show: false, + // text: label.join(' '), + // font: '12px sans-serif', + // fillColor: Cesium.Color.WHITE, + // showBackground: true, + // backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色 + // // style: Cesium.LabelStyle.FILL, + // outlineWidth: 3, + // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置 + // pixelOffset: new Cesium.Cartesian2(-80, -10), + // }, + info: { + label: label, + ...item.properties, + // 经纬度，以便监听 + lon: longitude, + lat: latitude, + }, + }); + + }); + }).catch(err => { }) + +} +let fenleiRef = ref({}) +function mbHandle() { + axios({ + url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson', + }).then(res => { + let features = res.data.features + let town = {} + // 按镇分类 + features.forEach(item => { + let key = item.properties.town + if (town[key]) { + town[key].push(item) + } else { + town[key] = [item] + } + }) + fenleiRef.value = town + getAreaFenlei() + + }).catch(err => { }) + +} + /*------------------------------------------柱状图--------------------------------------------*/ // function getJson() { @@ -1930,28 +2119,27 @@ function ASdivision() { // .catch(err => {}); // } // 地图移动时弹窗跟随 -// 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( -// Number(clickInfoMap.value.lon), -// Number(clickInfoMap.value.lat), -// 0 -// ); //转化为屏幕坐标 -// var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates( -// viewer.scene, -// gisPosition -// ); +function infoWindowPostRender() { + // let viewer = viewers.value; + if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) { + //经纬度转为世界坐标 + const gisPosition = Cesium.Cartesian3.fromDegrees( + Number(townZuowu.value.lon), + Number(townZuowu.value.lat), + 0 + ); //转化为屏幕坐标 + var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates( + viewer.scene, + gisPosition + ); -// if (Cesium.defined(windowPosition)) { -// const pop = document.getElementById('popup'); -// pop.style.top = windowPosition.y - 10 + 'px'; -// pop.style.left = windowPosition.x + 10 + 'px'; -// } -// } -// } + if (Cesium.defined(windowPosition)) { + const pop = document.getElementById('pop'); + pop.style.top = windowPosition.y - 10 + 'px'; + pop.style.left = windowPosition.x + 10 + 'px'; + } + } +} // function mapClick() { // // let viewer = viewers.value; // viewer.screenSpaceEventHandler.setInputAction(function (movement) { @@ -1993,22 +2181,21 @@ function ASdivision() { // }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // } -// // 隐藏弹窗 -// function hiddenOverlayChart() { -// // let viewer = viewers.value; -// const pop = document.getElementById('popup'); -// pop.style.display = 'none'; // 清除监听事件 -// viewer.scene.postRender.removeEventListener(infoWindowPostRender); -// } -// //显示弹窗 -// function showOverlayChart(position) { -// const pop = document.getElementById('popup'); -// pop.style.display = 'flex'; -// pop.style.position = 'absolute'; -// pop.style.top = position.y - 10 + 'px'; -// pop.style.left = position.x + 10 + 'px'; -// pop.style.zIndex = 99; -// } +// 隐藏弹窗 +function hiddenOverlayChart() { + const pop = document.getElementById('pop'); + pop.style.display = 'none'; // 清除监听事件 + viewer.scene.postRender.removeEventListener(infoWindowPostRender); +} +//显示弹窗 +function showOverlayChart(position) { + const pop = document.getElementById('pop'); + pop.style.display = 'block'; + pop.style.position = 'absolute'; + pop.style.top = position.y - 10 + 'px'; + pop.style.left = position.x + 10 + 'px'; + pop.style.zIndex = 99; +} // function random(min, max) { // return Math.floor(Math.random() * (max - min)) + min; @@ -2050,11 +2237,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; @@ -2115,6 +2300,7 @@ $height: calc(100vh - 100px); flex-direction: column; padding: 5px 10px 5px 10px; color: rgba(255, 255, 255, 1); + .Crops { display: flex; width: 100%; @@ -2126,16 +2312,16 @@ $height: calc(100vh - 100px); align-items: center; justify-content: space-around; opacity: 1; - background: linear-gradient( - 90deg, - rgba(21, 173, 148, 0.1) 0%, - rgba(21, 173, 148, 0) 100% - ); + background: linear-gradient(90deg, + rgba(21, 173, 148, 0.1) 0%, + rgba(21, 173, 148, 0) 100%); + div { display: flex; align-items: center; } } + .el-checkbox-group { display: flex; flex-direction: column; @@ -2308,7 +2494,7 @@ $height: calc(100vh - 100px); // align-items: flex-end; padding: 30px 8px 20px 8px; - & > div:nth-child(1) { + &>div:nth-child(1) { font-weight: 400; letter-spacing: 0px; color: rgba(255, 255, 255, 1); @@ -2316,7 +2502,7 @@ $height: calc(100vh - 100px); line-height: 24px; } - & > div:nth-child(2) { + &>div:nth-child(2) { color: rgba(255, 255, 255, 1); width: 129px; height: 24px; @@ -2339,6 +2525,50 @@ $height: calc(100vh - 100px); } } -:deep(.el-select__popper.el-popper) { +#pop { + border-radius: 5px; + background: rgba(2, 31, 26, 0.6); + display: none; + // justify-content: flex-start; + // align-items: flex-end; + padding: 30px 8px 20px 8px; + + .cancel { + position: absolute; + right: 10px; + top: 5px; + color: rgba(255, 255, 255, 1); + cursor: pointer; + } + + &>div { + display: flex; + margin-bottom: 10px; + + &>div:nth-child(1) { + font-weight: 400; + letter-spacing: 0px; + color: rgba(255, 255, 255, 1); + // margin-top: 20px; + line-height: 24px; + margin-right: 10px; + } + + &>div:nth-child(2) { + color: rgba(255, 255, 255, 1); + width: 129px; + height: 24px; + opacity: 1; + border-radius: 2px; + background: rgba(217, 231, 255, 0.2); + display: flex; + justify-content: center; + align-items: center; + padding: 2px 10px 2px 10px; + // margin-top: 20px; + } + } } + +:deep(.el-select__popper.el-popper) {}