up
This commit is contained in:
@ -186,16 +186,20 @@
|
||||
</div>
|
||||
<div id="pop"></div>
|
||||
<div id="popup1">
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index">
|
||||
<div>
|
||||
<div class="rowWra">
|
||||
<span>作物：</span>
|
||||
<span>{{ item.crop }}</span>
|
||||
<span>地区：</span>
|
||||
<span>{{ regionName }}</span>
|
||||
</div>
|
||||
<div class="rowWra">
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
|
||||
<span>{{ item.name }}：</span>
|
||||
<span>{{ item.area }}亩</span>
|
||||
</div>
|
||||
<!-- <div class="rowWra">
|
||||
<span>面积：</span>
|
||||
<span>{{ item.Shape_Area.toFixed(2) }} 亩</span>
|
||||
</div>
|
||||
<div class="rowWra">
|
||||
<span>{{ item.area}} 亩</span>
|
||||
</div> -->
|
||||
<!-- <div class="rowWra">
|
||||
<span>镇名：</span>
|
||||
<span>{{ item.town }}</span>
|
||||
</div>
|
||||
@ -206,7 +210,7 @@
|
||||
<div class="rowWra" v-if="item.people">
|
||||
<span>土地所有人：</span>
|
||||
<span>{{ item.people }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
@ -397,6 +401,9 @@ const insectarr = ref([]);
|
||||
let checkListdata = ref([]);
|
||||
let timeArr = ref([]); //年数组
|
||||
let SwitchFlag = ref(true);
|
||||
let cunVar = ref(null);
|
||||
let zhenVar = ref(null);
|
||||
let regionName = ref('');
|
||||
let highStandard = [
|
||||
'高标准农田1.0',
|
||||
'高标准农田2.0',
|
||||
@ -866,24 +873,24 @@ let dic = {
|
||||
小麦: { color: 'rgba(25, 196, 22, 1)', disabled: false },
|
||||
玉米: { color: 'rgba(255, 240, 26, 1)', disabled: true },
|
||||
大豆: { color: 'rgba(255, 184, 148, 1)', disabled: false },
|
||||
地瓜: { color: 'rgba(255, 77, 77, 1)', disabled: false },
|
||||
地瓜: { color: 'rgba(255, 18, 18, 1)', disabled: false },
|
||||
花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
|
||||
蓝莓: { color: 'rgba(26, 110, 255, 1)', disabled: false },
|
||||
蓝莓: { color: ' rgba(0, 153, 255, 1)', disabled: false },
|
||||
茶叶: { color: 'rgba(0, 209, 195, 1)', disabled: false },
|
||||
马铃薯: { color: 'rgba(255, 171, 87, 1)', disabled: true },
|
||||
马铃薯: { color: 'rgba(253, 127, 1, 1)', disabled: true },
|
||||
白菜和萝卜: { color: 'rgba(201, 255, 148, 1)', disabled: true },
|
||||
其他: { color: 'rgba(140, 26, 255, 1)', disabled: false },
|
||||
其他: { color: 'rgba(166, 224, 255, 1)', disabled: false },
|
||||
};
|
||||
// 图层字典
|
||||
let layersDic = {
|
||||
小麦: 'shuzisannong:xiaomai',
|
||||
小麦: 'xiaomai',
|
||||
// 玉米: 'shuzisannong:yumi',
|
||||
大豆: 'shuzisannong:dadou',
|
||||
地瓜: 'shuzisannong:digua',
|
||||
花生: 'shuzisannong:huasheng',
|
||||
蓝莓: 'shuzisannong:lanmei',
|
||||
茶叶: 'shuzisannong:chaye',
|
||||
其他: 'shuzisannong:other',
|
||||
大豆: 'dadou',
|
||||
地瓜: 'digua',
|
||||
花生: 'huasheng',
|
||||
蓝莓: 'lanmei',
|
||||
茶叶: 'chaye',
|
||||
其他: 'qitanongzuowu',
|
||||
// 马铃薯: 'rgba(225, 153, 75, 1)',
|
||||
// 白菜和萝卜: 'rgba(166, 209, 82, 1)',
|
||||
};
|
||||
@ -954,7 +961,7 @@ let dictionaryArr = [
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
color: 'rgba(255, 18, 18, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
@ -969,7 +976,7 @@ let dictionaryArr = [
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(26, 110, 255, 1)',
|
||||
color: ' rgba(0, 153, 255, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
@ -999,7 +1006,7 @@ let dictionaryArr = [
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(255, 171, 87, 1)',
|
||||
color: 'rgba(253, 127, 1, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
@ -1029,7 +1036,7 @@ let dictionaryArr = [
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(140, 26, 255, 1)',
|
||||
color: 'rgba(166, 224, 255, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
@ -1070,7 +1077,7 @@ function initonMounted() {
|
||||
typesof(); //图表
|
||||
farmland(); //图表
|
||||
ASdivision(); //图表
|
||||
getFarmland();
|
||||
// getFarmland();
|
||||
gethighStandards(); //高标准农田
|
||||
theTimes(); //年
|
||||
for (const key in dic) {
|
||||
@ -1086,7 +1093,6 @@ function initonMounted() {
|
||||
localStorage.setItem(router.currentRoute.value.path, true);
|
||||
}
|
||||
onUpdated(() => {
|
||||
console.log(localStorage.getItem(router.currentRoute.value.path));
|
||||
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
|
||||
document.querySelector('.mode').innerText = '地图模式';
|
||||
} else {
|
||||
@ -1173,32 +1179,221 @@ function initMap() {
|
||||
});
|
||||
|
||||
// 图层点击事件
|
||||
layerClick();
|
||||
// layerClick();
|
||||
// 监听相机移动，实现根据缩放级别村级矢量的显隐
|
||||
// cameraMove()
|
||||
// 图层遮罩
|
||||
// maskLayer()
|
||||
// // 添加镇级矢量
|
||||
// addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
|
||||
|
||||
// let cityDS = Cesium.GeoJsonDataSource.load(
|
||||
// `${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`,
|
||||
// {
|
||||
// fill: Cesium.Color.YELLOW.withAlpha(0.01),
|
||||
// strokeWidth: 3,
|
||||
// markerSymbol: '?',
|
||||
// clampToGround: true,
|
||||
// outline: true,
|
||||
// outlineColor: Cesium.Color.BLACK,
|
||||
// }
|
||||
// );
|
||||
|
||||
// viewer.dataSources.add(cityDS);
|
||||
zoomInCenter(viewer);
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
|
||||
viewer.scene.screenSpaceCameraController.enableRotate = false;
|
||||
// 如果为true，则允许用户平移地图。如果为假，相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
|
||||
// viewer.scene.screenSpaceCameraController.enableTranslate = false;
|
||||
// // 如果为真，允许用户放大和缩小。如果为假，相机将锁定到距离椭圆体的当前距离
|
||||
// viewer.scene.screenSpaceCameraController.enableZoom = false;
|
||||
// // 如果为真，则允许用户倾斜相机。如果为假，相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。
|
||||
// viewer.scene.screenSpaceCameraController.enableTilt = false;
|
||||
|
||||
addWheelEvent(); //鼠标滚动控制村级矢量显示隐藏
|
||||
// addEvent(); //点击事件
|
||||
clickSearch()
|
||||
}
|
||||
|
||||
const checkList = ref(['false']);
|
||||
//鼠标滑轮事件
|
||||
const addWheelEvent = () => {
|
||||
const handler = viewer.scene.preRender.addEventListener(() => {
|
||||
{
|
||||
//从Cesium中获取当前地图瓦片等级
|
||||
if (viewer.camera.positionCartographic.height <= 13000) {
|
||||
cunVar.show = true;
|
||||
} else {
|
||||
cunVar.show = false;
|
||||
zhenVar.show = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const clickSearch = () => {
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||||
handler.setInputAction(event => {
|
||||
var gaoliang = viewer.entities.getById('gaoliang');
|
||||
var gaoliangline = viewer.entities.getById('gaoliangline');
|
||||
if (gaoliang) {
|
||||
viewer.entities.remove(gaoliang);
|
||||
viewer.entities.remove(gaoliangline);
|
||||
gaoliang = null;
|
||||
gaoliangline = null;
|
||||
}
|
||||
var pickRay = viewer.camera.getPickRay(event.position);
|
||||
var featuresPromise = viewer.imageryLayers.pickImageryLayerFeatures(
|
||||
pickRay,
|
||||
viewer.scene
|
||||
);
|
||||
if (!Cesium.defined(featuresPromise)) {
|
||||
console.log('No features picked.');
|
||||
} else {
|
||||
Cesium.when(featuresPromise, features => {
|
||||
if (features.length > 0) {
|
||||
var start = features[0].data.outerHTML.indexOf('<gml:coordinates>');
|
||||
var end = features[0].data.outerHTML.indexOf('</gml:coordinates>');
|
||||
var result = features[0].data.outerHTML.substring(start + 17, end);
|
||||
var coordArr = result.split(' ').map(coord => {
|
||||
const [lon, lat] = coord.split(',');
|
||||
return Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat), 0);
|
||||
});
|
||||
var hierarchy = new Cesium.PolygonHierarchy(coordArr);
|
||||
var entity = viewer.entities.add({
|
||||
id: 'gaoliang',
|
||||
polygon: {
|
||||
hierarchy: hierarchy,
|
||||
material: Cesium.Color.YELLOW.withAlpha(0),
|
||||
},
|
||||
});
|
||||
let e = viewer.entities.getById('gaoliang');
|
||||
heightEntity = viewer.entities.add({
|
||||
id: 'gaoliangline',
|
||||
polyline: {
|
||||
positions: e.polygon.hierarchy.getValue().positions,
|
||||
width: 10,
|
||||
material: new Cesium.PolylineGlowMaterialProperty({
|
||||
glowPower: 0.5, // 一个数字属性，指定发光强度，占总线宽的百分比。
|
||||
color: Cesium.Color.ORANGERED,
|
||||
}),
|
||||
clampToGround: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
};
|
||||
|
||||
const cun = () => {
|
||||
var shp = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_village/wms111/`,
|
||||
layers: 'huangdaoqu_village@huangdaoqu_village',
|
||||
tileWidth: '256', //图片宽高
|
||||
tileHeight: '256', //图片宽高
|
||||
//STYLES: 'landmarks',
|
||||
//SLD_BODY: yanshi,
|
||||
enablePickFeatures: true, //是否允许点击
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
srs: 'EPSG:4326',
|
||||
VERSION: '1.1.1',
|
||||
transparent: true, //是否透明
|
||||
exceptions: 'application/vnd.ogc.se_inimage',
|
||||
},
|
||||
});
|
||||
cunVar = viewer.imageryLayers.addImageryProvider(shp);
|
||||
cunVar.show = false;
|
||||
};
|
||||
|
||||
const zhen = () => {
|
||||
var shp = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + '/map-huangdaoqu_town/wms111/',
|
||||
layers: 'huangdaoqu_town@huangdaoqu_town',
|
||||
tileWidth: '256', //图片宽高
|
||||
tileHeight: '256', //图片宽高
|
||||
//STYLES: 'landmarks',
|
||||
//SLD_BODY: yanshi,
|
||||
enablePickFeatures: true, //是否允许点击
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
srs: 'EPSG:4326',
|
||||
VERSION: '1.1.1',
|
||||
transparent: true, //是否透明
|
||||
exceptions: 'application/vnd.ogc.se_inimage',
|
||||
},
|
||||
});
|
||||
zhenVar = viewer.imageryLayers.addImageryProvider(shp);
|
||||
};
|
||||
|
||||
const addEvent = () => {
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||||
//长时间请求
|
||||
handler.setInputAction(event => {
|
||||
// event.position 是鼠标获取的屏幕坐标，也就是2D笛卡尔点（Cartesian2）
|
||||
// 屏幕坐标转为世界坐标
|
||||
let cartesian = viewer.scene.globe.pick(
|
||||
viewer.camera.getPickRay(event.position),
|
||||
viewer.scene
|
||||
);
|
||||
// 世界坐标转换为弧度
|
||||
let ellipsoid = viewer.scene.globe.ellipsoid;
|
||||
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
|
||||
// 弧度转换为经纬度
|
||||
let lon = Cesium.Math.toDegrees(cartographic.longitude); // 经度
|
||||
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
|
||||
// console.log(lon ,lat)
|
||||
|
||||
//选择feature
|
||||
viewer.selectedEntity = undefined;
|
||||
var pickRay = viewer.camera.getPickRay(event.position);
|
||||
var featuresPromise = viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
|
||||
// 用 async 函数包装事件处理逻辑
|
||||
(async () => {
|
||||
if (!Cesium.defined(featuresPromise)) {
|
||||
console.log('No features picked.');
|
||||
} else {
|
||||
try {
|
||||
// 使用 await 处理异步结果
|
||||
const features = await featuresPromise;
|
||||
console.log(features);
|
||||
if (!features[features.length - 1].properties.XZQDM) {
|
||||
value.value = features[features.length - 1].properties.XZDM;
|
||||
regionName.value = features[features.length - 1].properties.XZMC;
|
||||
getcropper({ divisions: value.value }).then(res => {
|
||||
clickInfoMap.value = {
|
||||
info: res.data,
|
||||
lon: lon,
|
||||
lat: lat,
|
||||
};
|
||||
});
|
||||
selectTab();
|
||||
showOverlayChart(event.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||||
} else {
|
||||
// value.value = features[features.length - 1].properties.XZDM;
|
||||
// regionName.value = features[features.length - 1].properties.XZQMC;
|
||||
// getvillage({
|
||||
// divisions: features[features.length - 1].properties.XZDM,
|
||||
// }).then(res => {
|
||||
// let arr = [];
|
||||
// res.data.forEach(item => {
|
||||
// if (
|
||||
// item.tomeName == features[features.length - 1].properties.XZQMC
|
||||
// ) {
|
||||
// arr.push(item);
|
||||
// }
|
||||
// });
|
||||
// clickInfoMap.value = {
|
||||
// info: arr,
|
||||
// lon: lon,
|
||||
// lat: lat,
|
||||
// };
|
||||
// });
|
||||
}
|
||||
// This function is called asynchronously when the list of picked features is available.
|
||||
} catch (error) {
|
||||
console.error('Error occurred:', error);
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
};
|
||||
|
||||
const checkList = ref(['false']);
|
||||
function getLevel(height) {
|
||||
if (height > 48000000) {
|
||||
return 0;
|
||||
@ -1273,11 +1468,12 @@ watch(
|
||||
});
|
||||
newData.forEach(item => {
|
||||
if (layersDic[item]) {
|
||||
addWms(layersDic[item], item + 'zuowu');
|
||||
addWms(layersDic[item], layersDic[item]);
|
||||
}
|
||||
});
|
||||
// 添加镇级矢量
|
||||
addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
|
||||
cun(); //添加村
|
||||
zhen(); //添加镇
|
||||
} else if (val.length < oldVal.length) {
|
||||
// 挑选出减少的数据
|
||||
const newData = oldVal.filter(item => {
|
||||
@ -1288,7 +1484,7 @@ watch(
|
||||
});
|
||||
newData.forEach(item => {
|
||||
if (layersDic[item]) {
|
||||
removeWms([item + 'zuowu']);
|
||||
removeWms([layersDic[item]]);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1298,13 +1494,15 @@ watch(
|
||||
// 添加wms
|
||||
function addWms(layers, customName, bottom) {
|
||||
let map = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
|
||||
layers: layers, //图层名
|
||||
url: serverAPI.geoserverUrl + `/map-${layers}/wms111/`,
|
||||
layers: layers + '@' + layers, //图层名
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
srs: 'EPSG:4326',
|
||||
VERSION: '1.1.1',
|
||||
transparent: true, //是否透明
|
||||
// CQL_FILTER: `crop in (${name})`,
|
||||
exceptions: 'application/vnd.ogc.se_inimage',
|
||||
},
|
||||
});
|
||||
map.customName = customName; //自己定义各种属性
|
||||
@ -1318,6 +1516,7 @@ function addWms(layers, customName, bottom) {
|
||||
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
|
||||
viewer.imageryLayers.raise(dd); //将图层上移一层
|
||||
}
|
||||
return map;
|
||||
}
|
||||
// 根据根据级别显示村级矢量
|
||||
function cameraMove() {
|
||||
@ -1345,7 +1544,7 @@ function cameraMove() {
|
||||
// }
|
||||
|
||||
// 添加全部
|
||||
addWms('shuzisannong:huangdaoqu_village', 'village');
|
||||
addWms('huangdaoqu_village', 'huangdaoqu_village');
|
||||
} else {
|
||||
removeWms(['village'], false);
|
||||
}
|
||||
@ -1397,7 +1596,7 @@ function maskLayer() {
|
||||
dataSources[k].name &&
|
||||
dataSources[k].name === 'geojsonDataSource'
|
||||
) {
|
||||
// this.viewer.dataSources.remove(dataSources[k])
|
||||
// viewer.dataSources.remove(dataSources[k])
|
||||
let entities = dataSources[k].entities.values;
|
||||
for (var i = 0; i < entities.length; i++) {
|
||||
let entity = entities[i];
|
||||
@ -1434,7 +1633,6 @@ let XZDM = '';
|
||||
|
||||
function layerClick() {
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||||
|
||||
handler.setInputAction(async function (movement) {
|
||||
var ray = viewer.camera.getPickRay(movement.position);
|
||||
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
||||
@ -1449,7 +1647,7 @@ function layerClick() {
|
||||
const index = layers.findIndex(
|
||||
item =>
|
||||
item._imageryProvider._layers &&
|
||||
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
|
||||
item._imageryProvider._layers === 'huangdaoqu_town@huangdaoqu_town'
|
||||
);
|
||||
if (index > -1) {
|
||||
const providerPoint = layers[index];
|
||||
@ -1502,10 +1700,10 @@ function layerClick() {
|
||||
removeWms(['village_CQL']);
|
||||
// 添加新的
|
||||
// 更改为根据级别添加村级矢量
|
||||
addvillage(
|
||||
`XZDM=${newData.properties.XZDM}`,
|
||||
'village_CQL'
|
||||
);
|
||||
// addvillage(
|
||||
// `XZDM=${newData.properties.XZDM}`,
|
||||
// 'village_CQL'
|
||||
// );
|
||||
// 隐藏pop
|
||||
hiddenOverlayChart();
|
||||
} else {
|
||||
@ -1589,7 +1787,7 @@ async function zuowuClick(layers, cartographic, level, xy, movement) {
|
||||
};
|
||||
}
|
||||
showOverlayChart(coordinate); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||||
// viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||||
} else {
|
||||
hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
}
|
||||
@ -1624,24 +1822,6 @@ function addBoundaryHandle(data, name, color) {
|
||||
});
|
||||
});
|
||||
}
|
||||
// 添加村
|
||||
// CQL_FILTER:筛选的语句
|
||||
// customName地图服务自定义属性名
|
||||
function addvillage(CQL_FILTER, customName) {
|
||||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
||||
url: `${serverAPI.geoserverUrl}/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 ：是否模糊查询
|
||||
@ -1658,7 +1838,7 @@ function removeWms(nameArry, isMohu) {
|
||||
) {
|
||||
if (isMohu) {
|
||||
if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
|
||||
viewer.imageryLayers.remove(layers[f]);
|
||||
viewer.imageryLayers.remove(layers[f] + '@' + layers[f]);
|
||||
}
|
||||
} else {
|
||||
if (layers[f]._imageryProvider.customName === item) {
|
||||
@ -1707,19 +1887,20 @@ function infoWindowPostRender() {
|
||||
}
|
||||
// 隐藏弹窗
|
||||
function hiddenOverlayChart() {
|
||||
// let viewer = viewers.value;
|
||||
const pop = document.getElementById('popup1');
|
||||
pop.style.display = 'none'; // 清除监听事件
|
||||
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
deleteEntityByName('landtype');
|
||||
value.value = '370211';
|
||||
deleteEntityByName('townLine');
|
||||
selectTab();
|
||||
}
|
||||
//显示弹窗
|
||||
function showOverlayChart(position) {
|
||||
const pop = document.getElementById('popup1');
|
||||
pop.style.display = 'block';
|
||||
pop.style.position = 'absolute';
|
||||
pop.style.top = position.y - 10 + 'px';
|
||||
pop.style.left = position.x + 10 + 'px';
|
||||
pop.style.display = 'block';
|
||||
pop.style.zIndex = 99;
|
||||
}
|
||||
|
||||
@ -1740,18 +1921,18 @@ function SwitchMode() {
|
||||
}
|
||||
const formLandRef = ref([]);
|
||||
// 获取高标准农田
|
||||
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 => {
|
||||
formLandRef.value = res.data.features;
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
// 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 => {
|
||||
// formLandRef.value = res.data.features;
|
||||
// })
|
||||
// .catch(err => {});
|
||||
// }
|
||||
//每页条数
|
||||
const handleCurrentChange = val => {
|
||||
currentPage.value = val;
|
||||
@ -1771,11 +1952,6 @@ function back() {
|
||||
value.value = '370211';
|
||||
// selectTab();
|
||||
deleteEntityByName('townLine');
|
||||
removeWms(['village_CQL']);
|
||||
getcropTypeStatisticss('370211');
|
||||
removeWms(['huangdaoqu_town'], true);
|
||||
removeWms(['shuzisannong:farmlandgbzn'], true);
|
||||
addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 2,
|
||||
@ -2028,29 +2204,15 @@ const selectTab = () => {
|
||||
XZDM = null;
|
||||
deleteEntityByName('townLine');
|
||||
removeWms(['village_CQL']);
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 2,
|
||||
});
|
||||
return;
|
||||
}
|
||||
getvillages(value.value);
|
||||
areachar();
|
||||
let arr = [...Township.arr];
|
||||
getgarrison().then(res => {
|
||||
res.features.forEach(item => {
|
||||
if (item.properties.XZDM == value.value) {
|
||||
deleteEntityByName('townLine');
|
||||
addBoundaryHandle(item.geometry.coordinates, 'townLine', 'yellow');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
item.bbox[0],
|
||||
item.bbox[1],
|
||||
item.bbox[2],
|
||||
item.bbox[3]
|
||||
),
|
||||
duration: 0,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -2084,7 +2246,7 @@ const selectTab = () => {
|
||||
// 移除镇高亮
|
||||
deleteEntityByName('townLine');
|
||||
// 添加新的
|
||||
addvillage(`XZDM=${value.value}`, 'village_CQL');
|
||||
// addvillage(`XZDM=${value.value}`, 'village_CQL');
|
||||
};
|
||||
//列表模式-年
|
||||
const theTimes = () => {
|
||||
@ -2478,7 +2640,7 @@ function typesof() {
|
||||
rotateSensitivity: 1,
|
||||
zoomSensitivity: 0,
|
||||
panSensitivity: 0,
|
||||
autoRotate: true,
|
||||
autoRotate: false,
|
||||
distance: 300,
|
||||
},
|
||||
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
|
||||
@ -3027,16 +3189,16 @@ function ASdivision() {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(255, 77, 77, 1)', // 设置边框颜色
|
||||
borderColor: 'rgba(255, 18, 18, 1)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 77, 77, 1)', // 0% 处的颜色
|
||||
color: 'rgba(255, 18, 18, 1)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 77, 77, 1)', // 100% 处的颜色
|
||||
color: 'rgba(255, 18, 18, 1)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -3178,16 +3340,16 @@ function ASdivision() {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(26, 110, 255, 1)', // 设置边框颜色
|
||||
borderColor: ' rgba(0, 153, 255, 1)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(26, 110, 255, 1)', // 0% 处的颜色
|
||||
color: ' rgba(0, 153, 255, 1)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(26, 110, 255, 1)', // 100% 处的颜色
|
||||
color: ' rgba(0, 153, 255, 1)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -3216,16 +3378,16 @@ function ASdivision() {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(140, 26, 255, 1)', // 设置边框颜色
|
||||
borderColor: 'rgba(166, 224, 255, 1)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(140, 26, 255, 1)', // 0% 处的颜色
|
||||
color: 'rgba(166, 224, 255, 1)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(140, 26, 255, 1)', // 100% 处的颜色
|
||||
color: 'rgba(166, 224, 255, 1)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -3407,7 +3569,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
color: 'rgba(255, 18, 18, 1)',
|
||||
},
|
||||
data: SweetPotato,
|
||||
},
|
||||
@ -3427,7 +3589,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(26, 110, 255, 1)',
|
||||
color: ' rgba(0, 153, 255, 1)',
|
||||
},
|
||||
data: Blueberries,
|
||||
},
|
||||
@ -3447,7 +3609,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 171, 87, 1)',
|
||||
color: 'rgba(253, 127, 1, 1)',
|
||||
},
|
||||
data: Potatoes,
|
||||
},
|
||||
@ -3467,7 +3629,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(140, 26, 255, 1)',
|
||||
color: 'rgba(166, 224, 255, 1)',
|
||||
},
|
||||
data: Other,
|
||||
},
|
||||
@ -3733,7 +3895,6 @@ $height: calc(100vh - 100px);
|
||||
.typesofDiv {
|
||||
width: 375px;
|
||||
height: 397px;
|
||||
background: url('@/assets/images/bj1_00000_iSpt.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85% 85%;
|
||||
background-position: center;
|
||||
@ -4051,7 +4212,7 @@ $height: calc(100vh - 100px);
|
||||
|
||||
& > span:nth-child(2) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 129px;
|
||||
width: 165px;
|
||||
height: 24px;
|
||||
opacity: 1;
|
||||
border-radius: 2px;
|
||||
|
||||
@ -128,13 +128,19 @@
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
<div id="pop">
|
||||
<div v-for="(item, index) in townZuowu.label" :key="index">
|
||||
<div>{{ item.crop }}：</div>
|
||||
<div>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</div>
|
||||
</div>
|
||||
<div v-if="townZuowu.XZQMC">
|
||||
<div>村名：</div>
|
||||
<div>{{ townZuowu.XZQMC }}</div>
|
||||
<div>
|
||||
<div class="rowWra">
|
||||
<span>地区：</span>
|
||||
<span>{{ regionName }}</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
|
||||
<span>单产量：</span>
|
||||
<span>{{ item.wheatUnitOutputValue }}公斤/亩</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
|
||||
<span>总产量：</span>
|
||||
<span>{{ item.wheatOutput }}亩</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
@ -337,6 +343,7 @@ import {
|
||||
getparameterEstimationYear,
|
||||
getparameterEstimation,
|
||||
} from '@/api/crops/wheat.js';
|
||||
import { getgarrison } from '@/api/crops/site.js';
|
||||
import axios from 'axios';
|
||||
import 'echarts-gl';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
@ -368,6 +375,9 @@ let tableItemAll = ref([]);
|
||||
const num = ref(1);
|
||||
let operate = ref(true);
|
||||
const chartModeDiv = ref(null);
|
||||
let cunVar = ref(null);
|
||||
let zhenVar = ref(null);
|
||||
let regionName = ref('');
|
||||
let amount = ref([
|
||||
{
|
||||
wheatUnitOutputValue: 0,
|
||||
@ -489,18 +499,164 @@ function initMap() {
|
||||
// 去除logo
|
||||
viewer.cesiumWidget.creditContainer.style.display = 'none';
|
||||
//加载地图服务
|
||||
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 2,
|
||||
});
|
||||
|
||||
// 图层点击事件
|
||||
layerClick();
|
||||
// layerClick();
|
||||
// 蒙版
|
||||
mbHandle();
|
||||
getAreaFenlei();
|
||||
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
|
||||
cun(); //添加村
|
||||
zhen(); //添加镇
|
||||
addWheelEvent(); //鼠标滚动控制村级矢量显示隐藏
|
||||
addEvent(); //点击事件
|
||||
}
|
||||
|
||||
//鼠标滑轮事件
|
||||
const addWheelEvent = () => {
|
||||
const handler = viewer.scene.preRender.addEventListener(() => {
|
||||
{
|
||||
//从Cesium中获取当前地图瓦片等级
|
||||
if (viewer.camera.positionCartographic.height <= 13000) {
|
||||
cunVar.show = true;
|
||||
} else {
|
||||
cunVar.show = false;
|
||||
zhenVar.show = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const cun = () => {
|
||||
var shp = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_village/wms111/`,
|
||||
layers: 'huangdaoqu_village@huangdaoqu_village',
|
||||
tileWidth: '256', //图片宽高
|
||||
tileHeight: '256', //图片宽高
|
||||
//STYLES: 'landmarks',
|
||||
//SLD_BODY: yanshi,
|
||||
enablePickFeatures: true, //是否允许点击
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
srs: 'EPSG:4326',
|
||||
VERSION: '1.1.1',
|
||||
transparent: true, //是否透明
|
||||
exceptions: 'application/vnd.ogc.se_inimage',
|
||||
},
|
||||
});
|
||||
cunVar = viewer.imageryLayers.addImageryProvider(shp);
|
||||
cunVar.show = false;
|
||||
};
|
||||
|
||||
const zhen = () => {
|
||||
var shp = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + '/map-huangdaoqu_town/wms111/',
|
||||
layers: 'huangdaoqu_town@huangdaoqu_town',
|
||||
tileWidth: '256', //图片宽高
|
||||
tileHeight: '256', //图片宽高
|
||||
//STYLES: 'landmarks',
|
||||
//SLD_BODY: yanshi,
|
||||
enablePickFeatures: true, //是否允许点击
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
srs: 'EPSG:4326',
|
||||
VERSION: '1.1.1',
|
||||
transparent: true, //是否透明
|
||||
exceptions: 'application/vnd.ogc.se_inimage',
|
||||
},
|
||||
});
|
||||
zhenVar = viewer.imageryLayers.addImageryProvider(shp);
|
||||
};
|
||||
|
||||
const addEvent = () => {
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||||
handler.setInputAction(event => {
|
||||
// event.position 是鼠标获取的屏幕坐标，也就是2D笛卡尔点（Cartesian2）
|
||||
// 屏幕坐标转为世界坐标
|
||||
let cartesian = viewer.scene.globe.pick(
|
||||
viewer.camera.getPickRay(event.position),
|
||||
viewer.scene
|
||||
);
|
||||
// 世界坐标转换为弧度
|
||||
let ellipsoid = viewer.scene.globe.ellipsoid;
|
||||
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
|
||||
// 弧度转换为经纬度
|
||||
let lon = Cesium.Math.toDegrees(cartographic.longitude); // 经度
|
||||
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
|
||||
// console.log(lon ,lat)
|
||||
|
||||
//选择feature
|
||||
viewer.selectedEntity = undefined;
|
||||
var pickRay = viewer.camera.getPickRay(event.position);
|
||||
var featuresPromise = viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
|
||||
// 用 async 函数包装事件处理逻辑
|
||||
(async () => {
|
||||
if (!Cesium.defined(featuresPromise)) {
|
||||
console.log('No features picked.');
|
||||
} else {
|
||||
try {
|
||||
// 使用 await 处理异步结果
|
||||
const features = await featuresPromise;
|
||||
if (!features[features.length - 1].properties.XZQDM) {
|
||||
value.value = features[features.length - 1].properties.XZDM;
|
||||
regionName.value = features[features.length - 1].properties.XZMC;
|
||||
getwheatGetAllTowns({ divisions: value.value }).then(res => {
|
||||
let arr = [];
|
||||
res.data.forEach(item => {
|
||||
if (item.subName == features[features.length - 1].properties.XZMC) {
|
||||
arr.push(item);
|
||||
}
|
||||
});
|
||||
clickInfoMap.value = {
|
||||
info: arr,
|
||||
lon: lon,
|
||||
lat: lat,
|
||||
};
|
||||
});
|
||||
selectTab();
|
||||
} else {
|
||||
// value.value = features[features.length - 1].properties.XZDM;
|
||||
// regionName.value = features[features.length - 1].properties.XZQMC;
|
||||
// getvillage({
|
||||
// divisions: features[features.length - 1].properties.XZDM,
|
||||
// }).then(res => {
|
||||
// let arr = [];
|
||||
// res.data.forEach(item => {
|
||||
// if (
|
||||
// item.tomeName == features[features.length - 1].properties.XZQMC
|
||||
// ) {
|
||||
// arr.push(item);
|
||||
// }
|
||||
// });
|
||||
// clickInfoMap.value = {
|
||||
// info: arr,
|
||||
// lon: lon,
|
||||
// lat: lat,
|
||||
// };
|
||||
// });
|
||||
}
|
||||
showOverlayChart(event.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||||
// This function is called asynchronously when the list of picked features is available.
|
||||
} catch (error) {
|
||||
console.error('Error occurred:', error);
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
};
|
||||
|
||||
// data数据数组
|
||||
// name实体名称，方便以后删除
|
||||
// color实体颜色
|
||||
@ -587,12 +743,15 @@ function getFarmland() {
|
||||
|
||||
let townZuowu = ref({ label: [] }); //镇的作物
|
||||
let XZDM = '';
|
||||
let cartesians = ref([]);
|
||||
// 图层点击事件
|
||||
function layerClick() {
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||||
handler.setInputAction(function (movement) {
|
||||
var ray = viewer.camera.getPickRay(movement.position);
|
||||
var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
|
||||
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
||||
cartesians = cartesian;
|
||||
if (cartesian) {
|
||||
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||||
if (cartographic) {
|
||||
@ -632,7 +791,6 @@ function layerClick() {
|
||||
//防止
|
||||
XZDM = newData.properties.XZDM;
|
||||
value.value = XZDM; //
|
||||
selectTab(); //
|
||||
let item = newData.data;
|
||||
// 定位
|
||||
viewer.camera.flyTo({
|
||||
@ -655,13 +813,47 @@ function layerClick() {
|
||||
// 移除以前的
|
||||
removeWms(['village_CQL']);
|
||||
// 添加新的
|
||||
addvillage(
|
||||
`XZDM=${newData.properties.XZDM}`,
|
||||
'village_CQL'
|
||||
);
|
||||
|
||||
// 显示该镇的种植结构
|
||||
// addvillage(
|
||||
// `XZDM=${newData.properties.XZDM}`,
|
||||
// 'village_CQL'
|
||||
// );
|
||||
let entitys = viewer.entities._entities._array;
|
||||
insectarr.value.forEach(item => {
|
||||
for (var na = entitys.length - 1; na >= 0; na--) {
|
||||
if (newData.properties.XZDM == item.subregion) {
|
||||
clickInfoMap.value = item;
|
||||
let info = entitys[na]._info;
|
||||
|
||||
if (cartesian) {
|
||||
let cartographic =
|
||||
ellipsoid.cartesianToCartographic(
|
||||
cartesian
|
||||
);
|
||||
let longitudeString =
|
||||
Cesium.Math.toDegrees(
|
||||
cartographic.longitude
|
||||
).toFixed(6);
|
||||
let latitudeString =
|
||||
Cesium.Math.toDegrees(
|
||||
cartographic.latitude
|
||||
).toFixed(6);
|
||||
townZuowu.value = {
|
||||
lon: longitudeString,
|
||||
lat: latitudeString,
|
||||
};
|
||||
}
|
||||
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(
|
||||
infoWindowPostRender
|
||||
);
|
||||
} else {
|
||||
// if (entitys[na].label) {
|
||||
// entitys[na].label.show = false
|
||||
// }
|
||||
}
|
||||
}
|
||||
});
|
||||
// 显示该镇的种植结构
|
||||
for (var na = entitys.length - 1; na >= 0; na--) {
|
||||
if (
|
||||
entitys[na]._name &&
|
||||
@ -671,10 +863,6 @@ function layerClick() {
|
||||
let info = entitys[na]._info;
|
||||
// entitys[na].label.show = true
|
||||
townZuowu.value = info; //保存数据
|
||||
console.log(
|
||||
townZuowu.value,
|
||||
'------------------'
|
||||
);
|
||||
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(
|
||||
infoWindowPostRender
|
||||
@ -686,11 +874,11 @@ function layerClick() {
|
||||
}
|
||||
}
|
||||
// 移除村高亮
|
||||
deleteEntityByName('villageLine');
|
||||
// deleteEntityByName('villageLine');
|
||||
XZQDM = '';
|
||||
} else {
|
||||
// // 已经有镇了，监听村点击
|
||||
villageClick(layers, xy, level, cartographic);
|
||||
// villageClick(layers, xy, level, cartographic);
|
||||
}
|
||||
} else {
|
||||
removeWms(['village_CQL']);
|
||||
@ -941,15 +1129,22 @@ const getwheatGetAllVillagess = city => {
|
||||
};
|
||||
|
||||
const selectTab = () => {
|
||||
console.log(value.value);
|
||||
if (value.value == '') {
|
||||
getwheatGetAllTownss();
|
||||
removeWms(['village_CQL']);
|
||||
removeWms(['aaa']);
|
||||
} else {
|
||||
getwheatGetAllVillagess(value.value);
|
||||
}
|
||||
getwheatTotalYearValues(value.value);
|
||||
getgarrison().then(res => {
|
||||
res.features.forEach(item => {
|
||||
if (item.properties.XZDM == value.value) {
|
||||
deleteEntityByName('townLine');
|
||||
addBoundaryHandle(item.geometry.coordinates, 'townLine', 'yellow');
|
||||
}
|
||||
});
|
||||
});
|
||||
// if (value.value == '') {
|
||||
// getwheatGetAllTownss();
|
||||
// removeWms(['village_CQL']);
|
||||
// removeWms(['aaa']);
|
||||
// } else {
|
||||
// getwheatGetAllVillagess(value.value);
|
||||
// }
|
||||
// getwheatTotalYearValues(value.value);
|
||||
};
|
||||
|
||||
//下载
|
||||
@ -976,7 +1171,6 @@ const Deta3 = item => {
|
||||
}
|
||||
};
|
||||
const dowcity = () => {
|
||||
console.log(insectarr);
|
||||
let arr = JSON.parse(JSON.stringify(amount.value[0]));
|
||||
console.log(arr);
|
||||
insectarr.value.push(arr);
|
||||
@ -999,7 +1193,7 @@ const onSubmit = () => {
|
||||
value: 'subName',
|
||||
},
|
||||
{
|
||||
lable: '单产量(斤/亩)',
|
||||
lable: '单产量(公斤/亩)',
|
||||
value: 'wheatUnitOutputValue',
|
||||
},
|
||||
{
|
||||
@ -1013,7 +1207,7 @@ const onSubmit = () => {
|
||||
value: 'subName',
|
||||
},
|
||||
{
|
||||
lable: '单产量(斤/亩)',
|
||||
lable: '单产量(公斤/亩)',
|
||||
value: 'wheatUnitOutputValue',
|
||||
},
|
||||
{
|
||||
@ -1043,12 +1237,10 @@ const onSubmit = () => {
|
||||
: 0;
|
||||
});
|
||||
for (const key in amount.value[0]) {
|
||||
console.log(amount.value[0][key]);
|
||||
if (amount.value[0][key] !== '合计') {
|
||||
amount.value[0][key] = amount.value[0][key].toFixed(2);
|
||||
}
|
||||
}
|
||||
console.log(amount);
|
||||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||||
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
|
||||
statInfo.style.height = window.innerHeight - 100 + 'px';
|
||||
@ -1095,7 +1287,7 @@ const exportExcel = (
|
||||
) => {
|
||||
let fieldNameObj = {
|
||||
subName: '区域名称',
|
||||
wheatUnitOutputValue: '单产量(斤/亩)',
|
||||
wheatUnitOutputValue: '单产量(公斤/亩)',
|
||||
wheatOutput: '总产量(吨)',
|
||||
};
|
||||
const list = changeTableHead(tableData, fieldNameObj);
|
||||
@ -1226,7 +1418,7 @@ function areachar() {
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '产量(斤/亩)',
|
||||
name: '产量(公斤/亩)',
|
||||
// min: 0,
|
||||
// max: calMax(data.yData, 0),
|
||||
// interval: calMax(data.yData, 0) / 5,
|
||||
@ -1400,7 +1592,7 @@ function farmland() {
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '产量(斤/亩)',
|
||||
name: '产量(公斤/亩)',
|
||||
min: 0,
|
||||
position: 'bottom',
|
||||
splitLine: {
|
||||
@ -1524,8 +1716,8 @@ function addWms(layers, customName) {
|
||||
}
|
||||
//返回
|
||||
function back() {
|
||||
removeWms(['gbznt'], true);
|
||||
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||||
deleteEntityByName('townLine');
|
||||
deleteEntityByName('villageLine');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 2,
|
||||
@ -1694,7 +1886,7 @@ function ASdivision() {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '单产量(斤/亩)',
|
||||
name: '单产量(公斤/亩)',
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
data: data[0],
|
||||
@ -1819,7 +2011,7 @@ function chartModes() {
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '单产量(斤/亩)',
|
||||
name: '单产量(公斤/亩)',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
@ -1867,7 +2059,7 @@ function chartModes() {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '单产量(斤/亩)',
|
||||
name: '单产量(公斤/亩)',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: 单产量,
|
||||
@ -1887,14 +2079,12 @@ function chartModes() {
|
||||
/*--------------------------------------------------------------------------------------------*/
|
||||
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(
|
||||
@ -1927,29 +2117,44 @@ function getAreaFenlei() {
|
||||
}
|
||||
// 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.fromCssColorString('rgba(255, 255, 26, 1)'),
|
||||
outlineColor: new Cesium.Color(0, 0, 0, 0),
|
||||
outlineWidth: 0,
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
|
||||
}),
|
||||
info: {
|
||||
label: label,
|
||||
...item.properties,
|
||||
// 经纬度，以便监听
|
||||
lon: longitude,
|
||||
lat: latitude,
|
||||
},
|
||||
});
|
||||
// // 添加点
|
||||
// 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.fromCssColorString('rgba(255, 255, 26, 1)'),
|
||||
// outlineColor: new Cesium.Color(0, 0, 0, 0),
|
||||
// outlineWidth: 0,
|
||||
// disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
|
||||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
|
||||
// }),
|
||||
// info: {
|
||||
// label: label,
|
||||
// ...item.properties,
|
||||
// // 经纬度，以便监听
|
||||
// lon: longitude,
|
||||
// lat: latitude,
|
||||
// },
|
||||
// });
|
||||
});
|
||||
// let entitys = viewer.entities._entities._array;
|
||||
// getparameterEstimation({
|
||||
// year: formInline.value.time,
|
||||
// statistical: formInline.value.statistical,
|
||||
// type: formInline.value.droughtRating,
|
||||
// area: formInline.value.area,
|
||||
// }).then(res => {
|
||||
// res.data.forEach(items => {
|
||||
// entitys.forEach(item => {
|
||||
// if (items.subName == item.info.XZMC) {
|
||||
// console.log(111);
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
@ -1974,26 +2179,23 @@ function mbHandle() {
|
||||
});
|
||||
fenleiRef.value = town;
|
||||
getAreaFenlei();
|
||||
console.log('11');
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
|
||||
// 地图移动时弹窗跟随
|
||||
function infoWindowPostRender() {
|
||||
// let viewer = viewers.value;
|
||||
if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
|
||||
if (clickInfoMap.value.lon && clickInfoMap.value.lat) {
|
||||
//经纬度转为世界坐标
|
||||
|
||||
const gisPosition = Cesium.Cartesian3.fromDegrees(
|
||||
Number(townZuowu.value.lon),
|
||||
Number(townZuowu.value.lat),
|
||||
Number(clickInfoMap.value.lon),
|
||||
Number(clickInfoMap.value.lat),
|
||||
0
|
||||
); //转化为屏幕坐标
|
||||
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||||
viewer.scene,
|
||||
gisPosition
|
||||
);
|
||||
|
||||
if (Cesium.defined(windowPosition)) {
|
||||
const pop = document.getElementById('pop');
|
||||
pop.style.top = windowPosition.y - 10 + 'px';
|
||||
@ -2006,27 +2208,14 @@ function hiddenOverlayChart() {
|
||||
// 移除各种高亮
|
||||
XZDM = '';
|
||||
XZQDM = '';
|
||||
removeWms(['village_CQL']);
|
||||
removeWms(['aaa']);
|
||||
|
||||
deleteEntityByName('villageLine');
|
||||
deleteEntityByName('townLine');
|
||||
|
||||
const pop = document.getElementById('pop');
|
||||
pop.style.display = 'none'; // 清除监听事件
|
||||
value.value = '370211';
|
||||
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
// 重定位
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 2,
|
||||
});
|
||||
removeWms(['gbznt'], true);
|
||||
// addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||||
flag.value = false;
|
||||
deleteEntityByName('townLine');
|
||||
}
|
||||
//显示弹窗
|
||||
function showOverlayChart(position) {
|
||||
console.log(position);
|
||||
const pop = document.getElementById('pop');
|
||||
pop.style.display = 'block';
|
||||
pop.style.position = 'absolute';
|
||||
@ -2037,9 +2226,7 @@ function showOverlayChart(position) {
|
||||
|
||||
// function random(min, max) {
|
||||
// return Math.floor(Math.random() * (max - min)) + min;
|
||||
// }
|
||||
|
||||
/*-------------------------------------------------------------------------------------------*/
|
||||
// }/*-------------------------------------------------------------------------------------------*/
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -2471,32 +2658,40 @@ $height: calc(100vh - 100px);
|
||||
|
||||
#popup {
|
||||
border-radius: 5px;
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
background: rgba(2, 31, 26, 1);
|
||||
display: none;
|
||||
// justify-content: flex-start;
|
||||
// align-items: flex-end;
|
||||
padding: 30px 8px 20px 8px;
|
||||
border: 2px solid rgba(4, 153, 153, 1);
|
||||
|
||||
& > div:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// margin-top: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
& > 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);
|
||||
.rowWra {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px 10px 2px 10px;
|
||||
// margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > span:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// margin-top: 20px;
|
||||
line-height: 24px;
|
||||
width: 3em;
|
||||
// font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
& > span: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;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
@ -2515,31 +2710,26 @@ $height: calc(100vh - 100px);
|
||||
// justify-content: flex-start;
|
||||
// align-items: flex-end;
|
||||
padding: 30px 8px 20px 8px;
|
||||
border: 2px solid rgba(4, 153, 153, 1);
|
||||
|
||||
.cancel {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > div {
|
||||
.rowWra {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > div:nth-child(1) {
|
||||
justify-content: space-between;
|
||||
& > span:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// margin-top: 20px;
|
||||
line-height: 24px;
|
||||
// width: 3em;
|
||||
// font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
& > span:nth-child(2) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 129px;
|
||||
width: 169px;
|
||||
height: 24px;
|
||||
opacity: 1;
|
||||
border-radius: 2px;
|
||||
@ -2548,9 +2738,16 @@ $height: calc(100vh - 100px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px 10px 2px 10px;
|
||||
// margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.back_button {
|
||||
position: absolute;
|
||||
|
||||
@ -157,16 +157,30 @@
|
||||
</div>
|
||||
<div id="popup">
|
||||
<div>
|
||||
等级：
|
||||
<p>{{ clickInfoMap.grade }}</p>
|
||||
</div>
|
||||
<div>
|
||||
经度：
|
||||
<p>{{ clickInfoMap.lon }}</p>
|
||||
</div>
|
||||
<div>
|
||||
纬度：
|
||||
<p>{{ clickInfoMap.lat }}</p>
|
||||
<div class="rowWra">
|
||||
<span>地区：</span>
|
||||
<span>{{ regionName }}</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
|
||||
<span>好：</span>
|
||||
<span>{{ item.good }}亩</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
|
||||
<span>较好：</span>
|
||||
<span>{{ item.better }}亩</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
|
||||
<span>适中：</span>
|
||||
<span>{{ item.moderate }}亩</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
|
||||
<span>较差：</span>
|
||||
<span>{{ item.difference }}亩</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
|
||||
<span>差：</span>
|
||||
<span>{{ item.poor }}亩</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
@ -375,6 +389,9 @@ let pageSize = ref(12); //每页条数
|
||||
let tableNewData = ref([]);
|
||||
let tableItem = ref([]);
|
||||
let operate = ref(true);
|
||||
let cunVar = ref(null);
|
||||
let zhenVar = ref(null);
|
||||
let regionName = ref('');
|
||||
let amount = ref([
|
||||
{
|
||||
好: 0,
|
||||
@ -418,6 +435,13 @@ let dic = {
|
||||
较差: { color: 'rgba(239, 152, 0, 1)', disabled: false },
|
||||
差: { color: 'rgba(247, 85, 0, 1)', disabled: false },
|
||||
};
|
||||
let layersDic = {
|
||||
好: 'hao',
|
||||
较好: 'jiaohao',
|
||||
适中: 'shizhong',
|
||||
较差: 'jiaocha',
|
||||
差: 'cha',
|
||||
};
|
||||
watch(
|
||||
() => checkList.value,
|
||||
(val, oldVal) => {
|
||||
@ -430,27 +454,12 @@ watch(
|
||||
}
|
||||
});
|
||||
newData.forEach(item => {
|
||||
switch (item) {
|
||||
case '好':
|
||||
addvillages(5, item);
|
||||
break;
|
||||
case '较好':
|
||||
addvillages(4, item);
|
||||
break;
|
||||
case '适中':
|
||||
addvillages(3, item);
|
||||
break;
|
||||
case '较差':
|
||||
addvillages(2, item);
|
||||
break;
|
||||
case '差':
|
||||
addvillages(1, item);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
if (layersDic[item]) {
|
||||
addWms(layersDic[item], layersDic[item]);
|
||||
}
|
||||
});
|
||||
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||||
cun(); //添加村
|
||||
zhen(); //添加镇
|
||||
} else if (val.length < oldVal.length) {
|
||||
// 挑选出减少的数据
|
||||
const newData = oldVal.filter(item => {
|
||||
@ -460,8 +469,7 @@ watch(
|
||||
}
|
||||
});
|
||||
newData.forEach(item => {
|
||||
console.log(item);
|
||||
removeWms([item]);
|
||||
removeWms([layersDic[item]]);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -503,7 +511,6 @@ function initonMounted() {
|
||||
|
||||
for (const key in dic) {
|
||||
if (dic[key].disabled !== true) {
|
||||
console.log(key);
|
||||
checkListdata.value.push(key);
|
||||
}
|
||||
}
|
||||
@ -589,11 +596,149 @@ function initMap() {
|
||||
});
|
||||
|
||||
// 图层点击事件
|
||||
layerClick();
|
||||
// layerClick();
|
||||
// 蒙版
|
||||
mbHandle();
|
||||
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
|
||||
addWheelEvent(); //鼠标滚动控制村级矢量显示隐藏
|
||||
addEvent(); //点击事件
|
||||
}
|
||||
|
||||
//鼠标滑轮事件
|
||||
const addWheelEvent = () => {
|
||||
const handler = viewer.scene.preRender.addEventListener(() => {
|
||||
{
|
||||
//从Cesium中获取当前地图瓦片等级
|
||||
if (viewer.camera.positionCartographic.height <= 13000) {
|
||||
cunVar.show = true;
|
||||
} else {
|
||||
cunVar.show = false;
|
||||
zhenVar.show = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const cun = () => {
|
||||
var shp = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_village/wms111/`,
|
||||
layers: 'huangdaoqu_village@huangdaoqu_village',
|
||||
tileWidth: '256', //图片宽高
|
||||
tileHeight: '256', //图片宽高
|
||||
//STYLES: 'landmarks',
|
||||
//SLD_BODY: yanshi,
|
||||
enablePickFeatures: true, //是否允许点击
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
srs: 'EPSG:4326',
|
||||
VERSION: '1.1.1',
|
||||
transparent: true, //是否透明
|
||||
exceptions: 'application/vnd.ogc.se_inimage',
|
||||
},
|
||||
});
|
||||
cunVar = viewer.imageryLayers.addImageryProvider(shp);
|
||||
cunVar.show = false;
|
||||
};
|
||||
|
||||
const zhen = () => {
|
||||
var shp = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + '/map-huangdaoqu_town/wms111/',
|
||||
layers: 'huangdaoqu_town@huangdaoqu_town',
|
||||
tileWidth: '256', //图片宽高
|
||||
tileHeight: '256', //图片宽高
|
||||
//STYLES: 'landmarks',
|
||||
//SLD_BODY: yanshi,
|
||||
enablePickFeatures: true, //是否允许点击
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
srs: 'EPSG:4326',
|
||||
VERSION: '1.1.1',
|
||||
transparent: true, //是否透明
|
||||
exceptions: 'application/vnd.ogc.se_inimage',
|
||||
},
|
||||
});
|
||||
zhenVar = viewer.imageryLayers.addImageryProvider(shp);
|
||||
};
|
||||
|
||||
const addEvent = () => {
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||||
handler.setInputAction(event => {
|
||||
// event.position 是鼠标获取的屏幕坐标，也就是2D笛卡尔点（Cartesian2）
|
||||
// 屏幕坐标转为世界坐标
|
||||
let cartesian = viewer.scene.globe.pick(
|
||||
viewer.camera.getPickRay(event.position),
|
||||
viewer.scene
|
||||
);
|
||||
// 世界坐标转换为弧度
|
||||
let ellipsoid = viewer.scene.globe.ellipsoid;
|
||||
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
|
||||
// 弧度转换为经纬度
|
||||
let lon = Cesium.Math.toDegrees(cartographic.longitude); // 经度
|
||||
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
|
||||
// console.log(lon ,lat)
|
||||
|
||||
//选择feature
|
||||
viewer.selectedEntity = undefined;
|
||||
var pickRay = viewer.camera.getPickRay(event.position);
|
||||
var featuresPromise = viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
|
||||
// 用 async 函数包装事件处理逻辑
|
||||
(async () => {
|
||||
if (!Cesium.defined(featuresPromise)) {
|
||||
console.log('No features picked.');
|
||||
} else {
|
||||
try {
|
||||
// 使用 await 处理异步结果
|
||||
const features = await featuresPromise;
|
||||
if (!features[features.length - 1].properties.XZQDM) {
|
||||
value.value = features[features.length - 1].properties.XZDM;
|
||||
regionName.value = features[features.length - 1].properties.XZMC;
|
||||
getfarmland({ divisions: value.value }).then(res => {
|
||||
clickInfoMap.value = {
|
||||
info: res.data,
|
||||
lon: lon,
|
||||
lat: lat,
|
||||
};
|
||||
});
|
||||
selectTab();
|
||||
} else {
|
||||
// value.value = features[features.length - 1].properties.XZDM;
|
||||
// regionName.value = features[features.length - 1].properties.XZQMC;
|
||||
// getvillage({
|
||||
// divisions: features[features.length - 1].properties.XZDM,
|
||||
// }).then(res => {
|
||||
// let arr = [];
|
||||
// res.data.forEach(item => {
|
||||
// if (
|
||||
// item.tomeName == features[features.length - 1].properties.XZQMC
|
||||
// ) {
|
||||
// arr.push(item);
|
||||
// }
|
||||
// });
|
||||
// clickInfoMap.value = {
|
||||
// info: arr,
|
||||
// lon: lon,
|
||||
// lat: lat,
|
||||
// };
|
||||
// });
|
||||
}
|
||||
showOverlayChart(event.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||||
// This function is called asynchronously when the list of picked features is available.
|
||||
} catch (error) {
|
||||
console.error('Error occurred:', error);
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
};
|
||||
|
||||
// data数据数组
|
||||
// name实体名称，方便以后删除
|
||||
// color实体颜色
|
||||
@ -978,6 +1123,7 @@ function removeWms(nameArry, isMohu) {
|
||||
}
|
||||
} else {
|
||||
if (layers[f]._imageryProvider.customName === item) {
|
||||
console.log(layers[f]);
|
||||
viewer.imageryLayers.remove(layers[f]);
|
||||
}
|
||||
}
|
||||
@ -1341,27 +1487,13 @@ const getvillages = city => {
|
||||
|
||||
const selectTab = () => {
|
||||
getgarrison().then(res => {
|
||||
console.log(res);
|
||||
res.features.forEach(item => {
|
||||
if (item.properties.XZDM == value.value) {
|
||||
deleteEntityByName('townLine');
|
||||
addBoundaryHandle(item.geometry.coordinates, 'townLine', 'yellow');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
item.bbox[0],
|
||||
item.bbox[1],
|
||||
item.bbox[2],
|
||||
item.bbox[3]
|
||||
),
|
||||
duration: 0,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 2,
|
||||
});
|
||||
getfarmlands(value.value); //作物长势等级面积统计
|
||||
getstatisticss(value.value); //作物长势等级面积占比
|
||||
if (value.value !== '370211') {
|
||||
@ -1506,7 +1638,7 @@ const Deta4 = item => {
|
||||
getadministrativeDivisions({ divisions: value.value, whetherToDownload: false }).then(
|
||||
res => {
|
||||
res.data.forEach(item => {
|
||||
console.log(item)
|
||||
console.log(item);
|
||||
arr.push({
|
||||
region: item.subregionName,
|
||||
good: item.good,
|
||||
@ -2100,33 +2232,36 @@ function farmland() {
|
||||
}
|
||||
|
||||
// 添加wms
|
||||
function addWms(layers, customName) {
|
||||
function addWms(layers, customName, bottom) {
|
||||
let map = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
|
||||
layers: layers, //图层名
|
||||
url: serverAPI.geoserverUrl + `/map-${layers}/wms111/`,
|
||||
layers: layers + '@' + layers, //图层名
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
srs: 'EPSG:4326',
|
||||
VERSION: '1.1.1',
|
||||
transparent: true, //是否透明
|
||||
// CQL_FILTER: `crop in (${name})`,
|
||||
exceptions: 'application/vnd.ogc.se_inimage',
|
||||
},
|
||||
});
|
||||
map.customName = customName; //自己定义各种属性
|
||||
let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
|
||||
if (customName.indexOf('gbznt') > -1) {
|
||||
// viewer.imageryLayers.lower(dd);//将图层下移一层
|
||||
if (bottom) {
|
||||
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
|
||||
viewer.imageryLayers.raise(dd); //将图层上移一层
|
||||
}
|
||||
}
|
||||
//返回
|
||||
function back() {
|
||||
removeWms(['gbznt'], true);
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 2,
|
||||
});
|
||||
getTownships('370211');
|
||||
delete townZuowu.value.XZQMC;
|
||||
deleteEntityByName('townLine');
|
||||
deleteEntityByName('villageLine');
|
||||
value.value = '370211';
|
||||
selectTab();
|
||||
flag.value = false;
|
||||
hiddenOverlayChart();
|
||||
}
|
||||
// 图表点击事件
|
||||
function ChartClick(item) {
|
||||
@ -2829,6 +2964,12 @@ function hiddenOverlayChart() {
|
||||
pop.style.display = 'none'; // 清除监听事件
|
||||
}
|
||||
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
value.value = '370211';
|
||||
deleteEntityByName('townLine');
|
||||
getfarmlands(value.value); //作物长势等级面积统计
|
||||
getstatisticss(value.value); //作物长势等级面积占比
|
||||
getTownships(value.value)
|
||||
// selectTab();
|
||||
}
|
||||
//显示弹窗
|
||||
function showOverlayChart(position) {
|
||||
@ -3295,58 +3436,42 @@ $height: calc(100vh - 100px);
|
||||
|
||||
#popup {
|
||||
border-radius: 5px;
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
background: rgba(2, 31, 26, 1);
|
||||
display: none;
|
||||
// justify-content: flex-start;
|
||||
// align-items: flex-end;
|
||||
padding: 30px 8px 20px 8px;
|
||||
border: 2px solid rgba(4, 153, 153, 1);
|
||||
|
||||
& > div:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
.rowWra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > span:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// margin-top: 20px;
|
||||
line-height: 24px;
|
||||
width: 3em;
|
||||
// font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
& > span:nth-child(2) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 165px;
|
||||
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;
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
p {
|
||||
background: rgba(217, 231, 255, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px 10px 2px 10px;
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
p {
|
||||
background: rgba(217, 231, 255, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px 10px 2px 10px;
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
.cancel {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
Reference in New Issue
Block a user