From 31612136346954091921d97046745eafa9d95f17 Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期四, 16 二月 2023 17:44:54 +0800
Subject: [PATCH] 调整运维管理部分页面格式1
---
src/views/Synthesis/LeftMenu.vue | 354 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 332 insertions(+), 22 deletions(-)
diff --git a/src/views/Synthesis/LeftMenu.vue b/src/views/Synthesis/LeftMenu.vue
index a41aa50..8a000da 100644
--- a/src/views/Synthesis/LeftMenu.vue
+++ b/src/views/Synthesis/LeftMenu.vue
@@ -21,6 +21,16 @@
class="file"
style="display: none"
/>
+ <input
+ :accept="'.shp, .shx, .dbf, .prj'"
+ style="display: none"
+ ref="pathClear"
+ type="file"
+ name="file"
+ id="shpFile"
+ multiple="multiple"
+ @change="handleOpenShp()"
+ />
</div>
</template>
@@ -29,13 +39,19 @@
import mapinfo from '../Tools/mapinfo.vue';
import maplayer from '../Tools/maplayer.vue';
import queryinfo from '../Tools/queryinfo.vue';
+import $ from 'jquery'
+import { getToken } from '@/utils/auth';
import {
OverviewMap,
defaults as defaultControls,
FullScreen,
ScaleLine,
Rotate,
+
} from "ol/control.js"
+import * as turf from '@turf/turf';
+import { geometry } from '@turf/turf';
+
export default {
components: { mapinfo, maplayer, queryinfo },
data() {
@@ -303,10 +319,10 @@
css: 'twoMenu_imge81',
},
{
- id: "h8",
- label: "synthesis.textLabel",
- name: "鏂囨湰鐐�",
- css: "twoMenu_imge81",
+ id: 'h8',
+ label: 'synthesis.addlabel',
+ name: '鏂囧瓧',
+ css: 'twoMenu_imge88',
},
{
id: 'h2',
@@ -329,21 +345,30 @@
{
id: 'h5',
label: 'synthesis.import',
- name: '瀵煎叆',
+ name: '瀵煎叆KML',
css: 'twoMenu_imge85',
},
{
id: 'h6',
label: 'synthesis.export',
- name: '瀵煎嚭',
+ name: '瀵煎嚭KML',
css: 'twoMenu_imge86',
},
+
{
- id: 'h8',
- label: 'synthesis.addlabel',
- name: '鏂囧瓧',
- css: 'twoMenu_imge88',
+ id: 'h9',
+ label: 'synthesis.import1',
+ name: '瀵煎叆SHP',
+ css: 'twoMenu_imge85',
},
+ {
+ id: 'h10',
+ label: 'synthesis.export1',
+ name: '瀵煎嚭SHP',
+ css: 'twoMenu_imge86',
+ },
+
+
{
id: 'h7',
label: 'synthesis.removepaint',
@@ -378,20 +403,15 @@
UndergroundMode: false,
scaleLine: null,
Excavation: false,
+ entityaLayers: [],
+ isMenuFlag: null,
};
},
methods: {
//浜岀礆鑿滃崟鐐瑰嚮鍒囨崲
setChangeTwoMenu(res) {
- //娓呴櫎缁樺埗鍥惧舰瀵硅薄
- sgworld.Creator.SimpleGraphic.clear();
- if (window.Viewer.scene.primitives.length != null) {
- window.Viewer.scene.primitives.removeAll();
- }
- if (this.$store.state.primitLayer != null) {
- sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
- this.$store.state.primitLayer = null;
- }
+
+
//鍏抽棴鎵撳紑鐨勪俊鎭獥浣�
@@ -408,11 +428,29 @@
window.model = null;
}
-
+ if (this.isMenuFlag != val) {
+ sgworld.Creator.SimpleGraphic.clear();
+ this.isMenuFlag = val;
+ if (this.entityaLayers.length != 0) {
+ for (var i in this.entityaLayers) {
+ sgworld.Viewer.entities.remove(this.entityaLayers[i]);
+ }
+ this.entityaLayers = [];
+ }
+ for (var i in this.$store.state.queryInfo) {
+ sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]);
+ }
+ this.$store.state.queryInfo = [];
+ if (this.$store.state.primitLayer != null) {
+ sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
+ this.$store.state.primitLayer = null;
+ }
+ }
switch (val) {
case 'a': //鍥惧眰绠＄悊
+
this.setCoverage(res.id);
break;
case 'b':
@@ -476,8 +514,19 @@
case 'h6':
this.handleSaveClick();
break;
+ case 'h9':
+ // this.handleOpenShp();
+ $("#shpFile").click();
+ break;
+ case 'h10':
+ this.handleSaveShp();
+ break;
case 'h7':
sgworld.Creator.SimpleGraphic.clear();
+ for (var i in this.entityaLayers) {
+ sgworld.Viewer.entities.remove(this.entityaLayers[i]);
+ }
+ this.entityaLayers = [];
break;
case 'h8':
sgworld.Creator.createSimpleGraphic('label', {}, function (entity) {
@@ -524,8 +573,268 @@
alert('褰撳墠鍦烘櫙娌℃湁entities瀹炰綋');
}
},
+ handleSaveShp() {
+ var entities = sgworld.Viewer.entities.values;
+ if (entities.length == 0) {
+ return;
+ }
+ var std = [];
+ for (var i in entities) {
+ var type, fillColor, alpha, wkt, name;
+ var bak = {}
+
+ if (entities[i].name) {
+
+ name = entities[i].name
+ }
+ if (entities[i].properties) {
+
+ var properties = entities[i].properties.propertyNames;
+ for (var j in properties) {
+ bak[properties[j]] = entities[i].properties[properties[j]]._value;
+ }
+ } else {
+ bak = {
+ "name": entities[i].name
+ }
+ }
+ if (entities[i].rectangle) {//鐭╁舰
+ type = 'rectangle'
+ var east = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().east);
+ var north = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().north);
+ var west = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().west);
+ var south = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().south);
+ var line = turf.polygon([[[east, north], [west, north], [west, south], [east, south], [east, north]]])
+ wkt = this.$wkt.convert(line.geometry)
+ var fill = entities[i].rectangle._material._color._value;
+ fillColor = fill.red + ',' + fill.green + ',' + fill.blue;
+ alpha = fill.alpha;
+ } else if (entities[i].point) {//鐐�
+ type = 'point'
+ let ellipsoid = Viewer.scene.globe.ellipsoid;
+ let cartographic = ellipsoid.cartesianToCartographic(entities[i].position.getValue());
+ let lat = Cesium.Math.toDegrees(cartographic.latitude);
+ let lng = Cesium.Math.toDegrees(cartographic.longitude);
+ let alt = cartographic.height;
+ let point = turf.point([lng, lat, alt])
+ wkt = this.$wkt.convert(point.geometry)
+ var fill = entities[i].point._color._value;
+ fillColor = fill.red + ',' + fill.green + ',' + fill.blue;
+ alpha = fill.alpha;
+
+
+ } else if (entities[i].polygon) {
+ type = 'polygon';
+ var fill = entities[i].polygon._material._color._value;
+ fillColor = fill.red + ',' + fill.green + ',' + fill.blue;
+ alpha = fill.alpha;
+ var geometry = entities[i].polygon.hierarchy.getValue().positions;
+ var coordinates = [];
+ for (var k in geometry) {
+ coordinates.push(this.setCartesianToEightFour(geometry[k]))
+ }
+ if (coordinates[0] != coordinates[1]) {
+ coordinates.push(coordinates[0])
+ }
+ var polygon = turf.polygon([coordinates])
+ wkt = this.$wkt.convert(polygon.geometry)
+ } else if (entities[i].polyline) {
+ type = "polyline";
+ var coordinates = [];
+ var geometry = entities[i].polyline.positions.getValue();
+ for (var k in geometry) {
+ coordinates.push(this.setCartesianToEightFour(geometry[k]))
+ }
+ var polyline = turf.lineString(coordinates)
+ wkt = this.$wkt.convert(polyline.geometry)
+
+ var fill = entities[i].polyline._material._color._value;
+ fillColor = fill.red + ',' + fill.green + ',' + fill.blue;
+ alpha = fill.alpha;
+ } else if (entities[i].label) {
+ type = "label";
+ let ellipsoid = Viewer.scene.globe.ellipsoid;
+ let cartographic = ellipsoid.cartesianToCartographic(entities[i].position.getValue());
+ let lat = Cesium.Math.toDegrees(cartographic.latitude);
+ let lng = Cesium.Math.toDegrees(cartographic.longitude);
+ let alt = cartographic.height;
+ let point = turf.point([lng, lat, alt])
+ wkt = this.$wkt.convert(point.geometry)
+ var fill = entities[i].label.backgroundColor._value;
+ fillColor = fill.red + ',' + fill.green + ',' + fill.blue;
+ alpha = fill.alpha;
+ }
+ std.push({
+ id: parseInt(i) + 1,
+ type: type,
+ fillColor: fillColor,
+ opacity: alpha,
+ name: name,
+ bak: JSON.stringify(bak),
+ wkt: wkt
+ })
+ }
+ $.ajax({
+ url: BASE_URL + "/comprehensive/downloadShp?token=" + getToken(),
+ type: "POST",
+ data: JSON.stringify(std),
+ dataType: 'json', // html銆乯son銆乯sonp銆乻cript銆乼ext
+ contentType: "application/json", // "application/x-www-form-urlencoded"
+ success: (rs) => {
+ if (rs && rs.code == 200) {
+ var a = document.createElement('a'); // 鍒涘缓涓�涓猘鏍囩鍏冪礌
+ a.style.display = 'none'; // 璁剧疆鍏冪礌涓嶅彲瑙�
+
+ a.href = BASE_URL + "/comprehensive/downloadFile?token=" + getToken() + "&guid=" + rs.result;
+
+ document.body.appendChild(a); // 鍔犲叆
+ a.click(); // 瑙﹀彂鐐瑰嚮,涓嬭浇
+ document.body.removeChild(a); // 閲婃斁
+ }
+ },
+ error: function (e) {
+ }
+ });
+
+ },
+ handleOpenShp() {
+ var formData = new FormData();
+ var fs = document.getElementById("shpFile");
+ var exts = [".shp", ".shx", ".dbf", ".prj"];
+ var count = 0;
+ for (var i = 0, c = fs.files.length; i < c; i++) {
+ var name = fs.files[i].name.toLocaleLowerCase();
+ var ext = name.substring(name.lastIndexOf("."));
+ if (exts.indexOf(ext) > -1) {
+ count++;
+ formData.append(fs.files[i].name, fs.files[i]); // fs.files[i].name,file
+ }
+ }
+ if (count != 4) {
+ alert("ShapeFile鏂囦欢閫夋嫨涓嶅叏锛�");
+ return;
+ }
+ var that = this;
+ $.ajax(BASE_URL + "/comprehensive/uploadShp?token=" + getToken(), {
+ type: "post",
+ data: formData,
+ async: true,
+ cache: false,
+ processData: false,
+ contentType: false,
+ success: function (rs) {
+
+ if (rs.code == 200) {
+ that.showShpEntity(rs.result);
+ }
+ },
+ error: function (e) {
+ console.error(e);
+ }
+ });
+
+ document.getElementById("shpFile").value = ""
+
+ },
+ showShpEntity(res) {
+
+ for (var i in res) {
+ var wkt = this.$wkt.parse(res[i].wkt);
+ var fillColor = res[i].fillColor.split(",");
+ var color = new Cesium.Color(parseFloat(fillColor[0]), parseFloat(fillColor[1]), parseFloat(fillColor[2]), res[i].opacity);
+ var name = res[i].name
+ switch (res[i].type) {
+ case 'rectangle':
+ case 'polygon':
+
+ var std = [];
+ var geo = wkt.coordinates[0];
+ for (var i in geo) {
+ std.push(geo[i][0])
+ std.push(geo[i][1])
+ }
+ var entity = Viewer.entities.add({
+ name: name,
+ polygon: {
+ hierarchy: Cesium.Cartesian3.fromDegreesArray(std),
+ //height : 100000,
+ material: color,
+ outline: true,
+ outlineColor: color,
+ }
+ })
+ this.entityaLayers.push(entity)
+ break;
+ case 'point':
+ let point = Viewer.entities.add({
+ name: name,
+ position: Cesium.Cartesian3.fromDegrees(wkt.coordinates[0], wkt.coordinates[1]), //缁忕含搴﹁浆涓栫晫鍧愭爣
+ point: {
+ show: true,
+ color: color,
+ pixelSize: 10,
+ outlineColor: color,
+ outlineWidth: 3,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ },
+ });
+
+ this.entityaLayers.push(point)
+ break;
+ case 'polyline':
+ var std = [];
+ var geo = wkt.coordinates;
+ for (var i in geo) {
+ std.push(geo[i][0])
+ std.push(geo[i][1])
+ }
+ let line = Viewer.entities.add({
+ name: name,
+ polyline: {
+ //缁忕含搴︽暟缁勮浆涓栫晫鍧愭爣锛屽甫楂樺害鐨勮瘽鏄痜romDegreesArrayHeights
+ positions: Cesium.Cartesian3.fromDegreesArray(std),
+ width: 10,
+ material: color,
+ clampToGround: true,
+ }
+ })
+
+ this.entityaLayers.push(line)
+ break;
+ case 'label':
+ debugger
+ const label = Viewer.entities.add({
+ position: Cesium.Cartesian3.fromDegrees(wkt.coordinates[0], wkt.coordinates[1]),
+ label: {
+ text: name,
+ fillColor: color,
+ font: '28px',
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ verticalOrigin: Cesium.VerticalOrigin.TOP,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ },
+ })
+ this.entityaLayers.push(label)
+ break;
+ }
+ }
+ },
+
+ setCartesianToEightFour(res) {
+ var std = [];
+ let ellipsoid = Viewer.scene.globe.ellipsoid;
+ let cartographic = ellipsoid.cartesianToCartographic(res);
+ let lat = Cesium.Math.toDegrees(cartographic.latitude);
+ let lng = Cesium.Math.toDegrees(cartographic.longitude);
+ let alt = cartographic.height;
+ std = [lng, lat, alt]
+ return std;
+ },
handleOpenClick() {
+ var that = this;
sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
let fileInput = document.querySelector('.file');
fileInput.onchange = function (evt) {
@@ -544,9 +853,10 @@
fileReader.result,
kmlOptions
);
+
geocachePromise.then(function (dataSource) {
var geocacheEntities = dataSource.entities.values;
-
+ that.entityaLayers = geocacheEntities;
for (var i = 0; i < geocacheEntities.length; i++) {
var entity = geocacheEntities[i];
@@ -1204,7 +1514,7 @@
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
-
+ border: 1px solid rgba(0, 0, 0, 0);
padding: 10px;
min-width: 100px;
margin-left: 10px;
--
Gitblit v1.9.3