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

up

Browse Source
This commit is contained in:
tianlong 2023-04-23 14:57:17 +08:00
parent d20a1e0ca1
commit 49bcfb120c
6 changed files with 240 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

2
public/config.js
View File

@ -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",

4
src/main.js
View File

@ -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

76
src/views/crops/area/index.vue
View File

@ -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 => {

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

@ -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;