diff --git a/package-lock.json b/package-lock.json index efc5e2f..963241b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "element-plus": "2.2.21", "file-saver": "2.0.5", "fuse.js": "6.6.2", + "highcharts": "^10.3.3", "js-cookie": "3.0.1", "jsencrypt": "3.3.1", "lib-flexible": "^0.3.2", @@ -2068,6 +2069,11 @@ "he": "bin/he" } }, + "node_modules/highcharts": { + "version": "10.3.3", + "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-10.3.3.tgz", + "integrity": "sha512-r7wgUPQI9tr3jFDn3XT36qsNwEIZYcfgz4mkKEA6E4nn5p86y+u1EZjazIG4TRkl5/gmGRtkBUiZW81g029RIw==" + }, "node_modules/htmlparser2": { "version": "3.10.1", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", @@ -6114,6 +6120,11 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "highcharts": { + "version": "10.3.3", + "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-10.3.3.tgz", + "integrity": "sha512-r7wgUPQI9tr3jFDn3XT36qsNwEIZYcfgz4mkKEA6E4nn5p86y+u1EZjazIG4TRkl5/gmGRtkBUiZW81g029RIw==" + }, "htmlparser2": { "version": "3.10.1", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", diff --git a/package.json b/package.json index 9709495..fe07b45 100755 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "element-plus": "2.2.21", "file-saver": "2.0.5", "fuse.js": "6.6.2", + "highcharts": "^10.3.3", "js-cookie": "3.0.1", "jsencrypt": "3.3.1", "lib-flexible": "^0.3.2", diff --git a/public/config.js b/public/config.js index 41a7edb..c61d645 100644 --- a/public/config.js +++ b/public/config.js @@ -1,5 +1,5 @@ window.serverAPI = { - baseUrl: "http://118.24.27.47:6802", + baseUrl: "http://192.168.2.96:8080", // geoserver geoserverUrl: "http://192.168.2.20:9080/geoserver", diff --git a/src/main.js b/src/main.js index 5df9017..979664a 100755 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,10 @@ import store from './store' import router from './router' import directive from './directive' // directive +import highcharts from 'highcharts' +import highcharts3d from 'highcharts/highcharts-3d' +highcharts3d(highcharts) + // 注册指令 import plugins from './plugins' // plugins diff --git a/src/views/crops/area/index.vue b/src/views/crops/area/index.vue index 7482b3a..13f8c9d 100644 --- a/src/views/crops/area/index.vue +++ b/src/views/crops/area/index.vue @@ -385,48 +385,45 @@ function initMap() { 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; - 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) { - } - }); - } + 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; + console.log(providerPoint); + 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.ScreenSpaceEventType.LEFT_CLICK); //加载黄岛区村级地图服务 // Cesium.GeoJsonDataSource.load( @@ -602,7 +599,6 @@ function getLevel(height) { } } - /*------------------接口--------------------*/ const getArea = () => { getarea({ time: '2023-04-19', subregion: '0', parent: '黄岛区' }).then(res => { diff --git a/src/views/crops/classify/index.vue b/src/views/crops/classify/index.vue index a98885d..b27c41e 100644 --- a/src/views/crops/classify/index.vue +++ b/src/views/crops/classify/index.vue @@ -208,6 +208,7 @@ var data = { wheat: [null, 500, null, 500, null, 500, null, null], Blueberries: [null, null, null, null, null, null, null, 500], }; +let classData = [200, 85, 112, 275, 305]; const options = [ { value: 'Option1', @@ -319,6 +320,46 @@ function initMap() { 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; + console.log(provider); + 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(); //加载黄岛区村级地图服务 @@ -429,6 +470,48 @@ function initMap() { const checkList = ref(Object.keys(dic)); +function getLevel(height) { + if (height > 48000000) { + return 0; + } else if (height > 24000000) { + return 1; + } else if (height > 12000000) { + return 2; + } else if (height > 6000000) { + return 3; + } else if (height > 3000000) { + return 4; + } else if (height > 1500000) { + return 5; + } else if (height > 750000) { + return 6; + } else if (height > 375000) { + return 7; + } else if (height > 187500) { + return 8; + } else if (height > 93750) { + return 9; + } else if (height > 46875) { + return 10; + } else if (height > 23437.5) { + return 11; + } else if (height > 11718.75) { + return 12; + } else if (height > 5859.38) { + return 13; + } else if (height > 2929.69) { + return 14; + } else if (height > 1464.84) { + return 15; + } else if (height > 732.42) { + return 16; + } else if (height > 366.21) { + return 17; + } else { + return 18; + } +} + function change(e) { console.log('e:', e); console.log('checkList:', checkList.value); @@ -465,12 +548,12 @@ function addwms() { } //接口 -const getArea = () => { - getarea({ time: '2023-04-19', subregion: '0', parent: '黄岛区' }).then(response => { - console.log(response); +const getArea = (item, index) => { + return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => { + console.log(response.data); + return response.data; }); }; - //镇 const getTownships = () => { getTownship().then(res => { @@ -501,9 +584,10 @@ const getvillages = () => { //面积 const getaArea = () => { let arr = []; + let a = {}; getareas().then(res => { Township.crr = res.features; - data.title.forEach((item, index) => { + data.title.forEach((item, indexs) => { let town = res.features.map(i => { if (item === i.properties.town) { return i.properties; @@ -512,25 +596,27 @@ const getaArea = () => { Object.keys(dd).forEach(it => { const index = town.findIndex(a => a && a.crop === it); if (index > -1) { - dd[it].push(town[index].Shape_Area); + dd[it].push(1); } else { dd[it].push(null); } }); }); - console.log(dd); ASdivision(); }); }; const selectTab = () => { - console.log(value.value); + classData = [116, 75, 96, 168, 245]; + areachar(); if (value.value == '370211') { getTownships(); } let arr = [...Township.arr]; arr.forEach(item => { if (item.properties.XZDM == value.value) { + console.log(item.properties); + getArea(item.properties.XZMC, '2'); viewer.camera.flyTo({ destination: Cesium.Rectangle.fromDegrees( item.bbox[0], @@ -674,7 +760,7 @@ function areachar() { }, series: [ { - data: [200, 85, 112, 275, 305], + data: classData, type: 'bar', barMaxWidth: 'auto', barWidth: 30, @@ -690,7 +776,14 @@ function areachar() { offset: 0, color: ' rgba(0, 208, 255, 0.1)', }, - + { + offset: 0.5, + color: '#86eef1', // 左边的右边 颜色 + }, + { + offset: 0.5, + color: '#5ad6d9', // 右边的左边 颜色 + }, { offset: 1, color: 'rgba(0, 208, 255, 0.9) ', @@ -714,7 +807,7 @@ function areachar() { symbolSize: [30, 15], }, { - data: [200, 85, 112, 275, 305], + data: classData, type: 'pictorialBar', barMaxWidth: '20', @@ -1025,7 +1118,7 @@ function ASdivision() { dataZoom: [ { type: 'slider', - show: true, + show: false, zoomLock: true, //禁止拉伸 width: 8, yAxisIndex: [0], @@ -1145,7 +1238,22 @@ function ASdivision() { }, // 图形样式 itemStyle: { - color: '#fdad3c', + barBorderRadius: [0, 0, 0, 0], + barBorderRadius: [0, 0, 0, 0], // + borderWidth: 1, // 设置边框宽度 + borderColor: ' rgba(222, 194, 7, 0.8)', // 设置边框颜色 + color: { + colorStops: [ + { + offset: 0, + color: 'rgba(222, 194, 7, 0.9)', // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(222, 194, 7, 0.25)', // 100% 处的颜色 + }, + ], + }, }, data: dd.玉米, // 系列中的数据内容数组 }, @@ -1168,7 +1276,21 @@ function ASdivision() { }, // 图形样式 itemStyle: { - color: 'rgba(156, 220, 130, 0.8)', + barBorderRadius: [0, 0, 0, 0], // + borderWidth: 1, // 设置边框宽度 + borderColor: 'rgba(255, 161, 59, 0.8)', // 设置边框颜色 + color: { + colorStops: [ + { + offset: 0, + color: 'rgba(255, 161, 59, 0.9)', // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(255, 161, 59, 0.3)', // 100% 处的颜色 + }, + ], + }, }, data: dd.大豆, // 系列中的数据内容数组 }, @@ -1191,7 +1313,22 @@ function ASdivision() { }, // 图形样式 itemStyle: { - color: 'rgba(212, 236, 89, 0.8)', + barBorderRadius: [0, 0, 0, 0], + barBorderRadius: [0, 0, 0, 0], // + borderWidth: 1, // 设置边框宽度 + borderColor: 'rgba(236, 80, 129, 0.8)', // 设置边框颜色 + color: { + colorStops: [ + { + offset: 0, + color: 'rgba(236, 80, 129, 0.9)', // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(236, 80, 129, 0.25)', // 100% 处的颜色 + }, + ], + }, }, data: dd.花生, // 系列中的数据内容数组 }, @@ -1214,7 +1351,22 @@ function ASdivision() { }, // 图形样式 itemStyle: { - color: 'rgba(102, 142, 214, 0.8)', + barBorderRadius: [0, 0, 0, 0], + barBorderRadius: [0, 0, 0, 0], // + borderWidth: 1, // 设置边框宽度 + borderColor: 'rgba(30, 200, 23, 0.8)', // 设置边框颜色 + color: { + colorStops: [ + { + offset: 0, + color: 'rgba(30, 200, 23, 0.9)', // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(30, 200, 23, 0.25)', // 100% 处的颜色 + }, + ], + }, }, data: dd.小麦, // 系列中的数据内容数组 }, @@ -1237,7 +1389,22 @@ function ASdivision() { }, // 图形样式 itemStyle: { - color: 'rgba(50, 211, 235, 0.8)', + barBorderRadius: [0, 0, 0, 0], + barBorderRadius: [0, 0, 0, 0], // + borderWidth: 1, // 设置边框宽度 + borderColor: 'rgba(14, 223, 255, 0.8)', // 设置边框颜色 + color: { + colorStops: [ + { + offset: 0, + color: 'rgba(14, 223, 255, 0.9)', // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(14, 223, 255, 0.25) ', // 100% 处的颜色 + }, + ], + }, }, data: dd.蓝莓, // 系列中的数据内容数组 }, @@ -1383,6 +1550,9 @@ $height: calc(100vh - 100px); } } } +:deep(.el-select-dropdown) { + background: red !important; +} .legend { position: absolute;