From c6a9b11ff0783bcd81a043a179fbc27f685eee70 Mon Sep 17 00:00:00 2001
From: lxl <lixuliang_hd@126.com>
Date: 星期一, 07 十一月 2022 16:19:43 +0800
Subject: [PATCH] 菜单
---
src/views/Synthesis/plotting.vue | 326 +++++++++++++++++++++++++++++++----------------------
1 files changed, 191 insertions(+), 135 deletions(-)
diff --git a/src/views/Synthesis/plotting.vue b/src/views/Synthesis/plotting.vue
index dd33b88..ebef7b6 100644
--- a/src/views/Synthesis/plotting.vue
+++ b/src/views/Synthesis/plotting.vue
@@ -1,41 +1,47 @@
<template>
<div class="box">
+ <div class="tooltip"></div>
+ <input type="file" accept=".kml" class="file" style="display: none" />
+
<ul>
- <li
- style="margin-left: 20px"
- @click="changePlot(item)"
- v-for="item in itemsOne"
- >
+ <li style="margin-left: 20px" @click="drawing">
<div class="divli">
- <div :class="item.class" class="backimge8"></div>
+ <div class="backimge8 h1"></div>
</div>
- <div class="div_li">{{ $t(item.name) }}</div>
+ <div class="div_li">鏍囩粯</div>
</li>
- <li v-if="plotStatus.delete" style="margin-left: 20px">
+ <li style="margin-left: 20px" id="open">
<div class="divli">
- <div class="backimge8"><i class="el-icon-delete"></i></div>
+ <div class="backimge8 h1"></div>
</div>
- <div class="div_li">鍒犻櫎</div>
+ <div class="div_li">鎵撳紑json</div>
</li>
- <li v-if="plotStatus.upload" style="margin-left: 20px">
+ <li style="margin-left: 20px" @click="save">
<div class="divli">
- <div class="backimge8"><i class="el-icon-upload2"></i></div>
+ <div class="backimge8 h1"></div>
</div>
- <div class="div_li">涓婁紶</div>
+ <div class="div_li">淇濆瓨json</div>
</li>
- <li v-if="plotStatus.upload" style="margin-left: 20px">
+ <li style="margin-left: 20px" @click="kmlopen">
<div class="divli">
- <div class="backimge8"><i class="el-icon-plus"></i></div>
+ <div class="backimge8 h1"></div>
</div>
- <div class="div_li">鏂板</div>
+ <div class="div_li">鍘熺敓kml</div>
</li>
- <li v-if="plotStatus.upload" style="margin-left: 20px">
+ <li style="margin-left: 20px" @click="handleOpenClick">
<div class="divli">
- <div class="backimge8"><i class="el-icon-edit"></i></div>
+ <div class="backimge8 h1"></div>
</div>
- <div class="div_li">淇敼</div>
+ <div class="div_li">瀵煎叆KML鏂囦欢</div>
+ </li>
+ <li style="margin-left: 20px" @click="handleSaveClick">
+ <div class="divli">
+ <div class="backimge8 h1"></div>
+ </div>
+ <div class="div_li">瀵煎嚭KML鏂囦欢</div>
</li>
</ul>
+
<terrainDig ref="terrainDig" />
<modelPress ref="modelPress" />
</div>
@@ -43,60 +49,19 @@
<script>
// 娴嬮噺-淇℃伅寮圭獥
-import terrainDig from '../Tools/terrainDig.vue';
-import modelPress from '../Tools/modelPress.vue';
+import terrainDig from "../Tools/terrainDig.vue";
+import modelPress from "../Tools/modelPress.vue";
export default {
components: { terrainDig, modelPress },
data() {
return {
+ id: "",
plotStatus: {
- delete: false,
- upload: false,
- insert: false,
- update: false,
+ delete: true,
+ upload: true,
+ insert: true,
+ update: true,
},
- itemsOne: [
- {
- id: '1',
- name: 'synthesis.point',
- class: 'h1',
- },
- {
- id: '2',
- name: 'synthesis.line',
- class: 'h2',
- },
- {
- id: '3',
- name: 'synthesis.rectangle',
- class: 'h3',
- },
- {
- id: '4',
- name: 'synthesis.polygon',
- class: 'h4',
- },
- {
- id: '7',
- name: 'synthesis.symboliclabel',
- class: 'h7',
- },
- {
- id: '5',
- name: 'synthesis.flatterrain',
- class: 'h5',
- },
- {
- id: '6',
- name: 'synthesis.terrainexcavation',
- class: 'h6',
- },
- {
- id: '8',
- name: 'synthesis.removepaint',
- class: 'h8',
- },
- ],
};
},
created() {
@@ -108,80 +73,170 @@
this.showViewMenu(cover_perms[i]);
}
}
+ layui.use("upload", function () {
+ var upload = layui.upload;
+ upload.render({
+ elem: "#open",
+ accept: "file", //鏅�氭枃浠�
+ auto: false,
+ choose: function (obj) {
+ var files = obj.pushFile();
+ for (var key in files) {
+ sgworld.Creator.SimpleGraphic.open(files[key]);
+ break;
+ }
+ },
+ });
+ });
},
methods: {
+ handleSaveClick() {
+ let funDownload = function (content, filename) {
+ let eleLink = document.createElement("a");
+ eleLink.download = filename;
+ eleLink.style.display = "none";
+ // 瀛楃鍐呭杞彉鎴恇lob鍦板潃
+ let blob = new Blob([content]);
+ eleLink.href = URL.createObjectURL(blob);
+ // 瑙﹀彂鐐瑰嚮
+ document.body.appendChild(eleLink);
+ eleLink.click();
+ // 鐒跺悗绉婚櫎
+ document.body.removeChild(eleLink);
+ };
+ let entities = new Cesium.EntityCollection();
+ let dataSources = sgworld.Viewer.dataSources;
+ for (let i = 0, j = dataSources.length; i < j; i++) {
+ for (let v of dataSources.get(i).entities.values) {
+ entities.add(v);
+ }
+ }
+ for (let v of sgworld.Viewer.entities.values) {
+ entities.add(v);
+ }
+
+ if (entities.values.length) {
+ console.log(sgworld.Viewer.entities);
+
+ let promise = Cesium.exportKml({ entities: sgworld.Viewer.entities });
+ console.log(entities);
+ // let promise = Cesium.exportKml({ entities: entities });
+ promise.then(function (e) {
+
+ funDownload(e.kml, new Date().getTime() + ".kml");
+ });
+ } else {
+ alert("褰撳墠鍦烘櫙娌℃湁entities瀹炰綋");
+ }
+ },
+ handleOpenClick() {
+ // let that = this;
+ let fileInput = document.querySelector(".file");
+ fileInput.onchange = function (evt) {
+ let files = evt.target.files;
+ if (files.length > 0) {
+ let file = evt.target.files[0];
+
+ let fileReader = new FileReader();
+ fileReader.readAsDataURL(file);
+ fileReader.onload = () => {
+ sgworld.Viewer.dataSources
+ .add(
+ Cesium.KmlDataSource.load(fileReader.result, {
+ camera: sgworld.Viewer.scene.camera,
+ canvas: sgworld.Viewer.scene.canvas,
+ })
+ )
+ .then((KmlDataSource) => {
+ console.log(KmlDataSource);
+ // let entities = kmlDataSource.entities;
+ });
+ };
+
+ // let fileReader = new FileReader();
+ // fileReader.onload = function () {
+ // sgworld.Viewer.dataSources
+ // .add(
+ // Cesium.KmlDataSource.load(new Blob([this.result]), {
+ // camera: sgworld.Viewer.scene.camera,
+ // canvas: sgworld.Viewer.scene.canvas,
+ // clampToGround: false,
+ // })
+ // )
+ // .then(function (kmlDataSource) {
+ // let entities = kmlDataSource.entities;
+ // let item = entities.values[entities.values.length - 1];
+ // sgworld.Viewer.zoomTo(entities);
+ // });
+ // fileInput = null;
+ // fileReader = null;
+ // };
+ // fileReader.readAsText(file);
+ }
+ // fileInput.value = null;
+ };
+ fileInput.click();
+ },
+
+ preview(event) {
+ var reader = new FileReader();
+ reader.readAsDataURL(file);
+ //鐩戝惉鏂囦欢璇诲彇缁撴潫鍚庝簨浠�
+ reader.onloadend = function (e) {
+ $(".img").attr("src", e.target.result); //e.target.result灏辨槸鏈�鍚庣殑璺緞鍦板潃
+ };
+ // let files = document.getElementById(this.id).files[0];
+ // this.imgDataUrl = this.getObjectURL(files);
+ // // this.$emit("sendImgUrl", this.imgDataUrl, this.id);
+ // console.log("sendImgUrl", this.imgDataUrl, this.id);
+ },
+ getObjectURL(file) {
+ let url = null;
+ if (window.createObjectURL != undefined) {
+ // basic
+ url = window.createObjectURL(file);
+ } else if (window.webkitURL != undefined) {
+ // webkit or chrome
+ url = window.webkitURL.createObjectURL(file);
+ } else if (window.URL != undefined) {
+ // mozilla(firefox)
+ url = window.URL.createObjectURL(file);
+ }
+ return url;
+ },
showViewMenu(res) {
- if (res.cnName != '鏍囩粯') return;
+ if (res.cnName != "鏍囩粯") return;
switch (res.tag) {
- case '/delete':
+ case "/delete":
this.plotStatus.delete = true;
break;
- case '/upload':
+ case "/upload":
this.plotStatus.upload = true;
break;
- case '/insert':
+ case "/insert":
this.plotStatus.insert = true;
break;
- case '/update':
+ case "/update":
this.plotStatus.update = true;
break;
}
},
- changePlot(res) {
- switch (res.id) {
- case '1':
- sgworld.Creator.createSimpleGraphic(
- 'point',
- {},
- function (entity) {}
- );
- break;
- case '2':
- sgworld.Creator.createSimpleGraphic(
- 'polyline',
- {},
- function (entity) {}
- );
- break;
- case '3':
- sgworld.Creator.createSimpleGraphic(
- 'rectangle',
- {},
- function (entity) {}
- );
- break;
- case '4':
- sgworld.Creator.createSimpleGraphic(
- 'polygon',
- {},
- function (entity) {}
- );
- break;
- case '6':
- if (window.Excavation) {
- window.Excavation.clear();
- window.Excavation = null;
- } else {
- this.$refs.terrainDig.open();
- }
-
- break;
- case '5':
- if (window.TerrainFlattening) {
- window.TerrainFlattening.remove();
- window.TerrainFlattening = null;
- } else {
- this.$refs.modelPress.open();
- }
-
- break;
- case '7':
- sgworld.Creator.createModelLibrary();
- break;
- case '8':
- this.clearAll();
- break;
- }
+ save() {
+ // var val_result = sgworld.Viewer.entities._entities._array;
+ // console.log(val_result[0]);
+ // console.log(sgworld.Core);
+ // console.log(sgworld.Core.getEntityPropValue(val_result[0], show));
+ sgworld.Creator.SimpleGraphic.save();
+ },
+ kmlopen() {
+ sgworld.Creator.addKmlLayer(
+ "kml鏁版嵁",
+ "http://183.162.245.49:82/sdkdemo_2022/demo/kml/facilities/facilities.kml",
+ true
+ );
+ },
+ drawing() {
+ this.$emit("drawing");
},
clearAll() {
sgworld.Creator.SimpleGraphic.clear();
@@ -204,6 +259,7 @@
height: 100%;
position: relative;
}
+
.box li {
list-style: none;
float: left;
@@ -218,34 +274,34 @@
margin: 0px;
}
.h1 {
- background: url('../../assets/img/synthesis/妞渾 5 鎷疯礉 3.png') no-repeat
+ background: url("../../assets/img/synthesis/妞渾 5 鎷疯礉 3.png") no-repeat
center;
}
.h2 {
- background: url('../../assets/img/synthesis/妞渾 3 鎷疯礉 16.png') no-repeat
+ background: url("../../assets/img/synthesis/妞渾 3 鎷疯礉 16.png") no-repeat
center;
}
.h3 {
- background: url('../../assets/img/synthesis/妞渾 3 鎷疯礉 20.png') no-repeat
+ background: url("../../assets/img/synthesis/妞渾 3 鎷疯礉 20.png") no-repeat
center;
}
.h4 {
- background: url('../../assets/img/synthesis/妞渾 3 鎷疯礉 23.png') no-repeat
+ background: url("../../assets/img/synthesis/妞渾 3 鎷疯礉 23.png") no-repeat
center;
}
.h5 {
- background: url('../../assets/img/synthesis/鐭╁舰 14 鎷疯礉.png') no-repeat
+ background: url("../../assets/img/synthesis/鐭╁舰 14 鎷疯礉.png") no-repeat
center;
}
.h6 {
- background: url('../../assets/img/synthesis/鐭╁舰 14 鎷疯礉 7.png') no-repeat
+ background: url("../../assets/img/synthesis/鐭╁舰 14 鎷疯礉 7.png") no-repeat
center;
}
.h7 {
- background: url('../../assets/img/synthesis/鏂囨湰椋庢牸.png') no-repeat center;
+ background: url("../../assets/img/synthesis/鏂囨湰椋庢牸.png") no-repeat center;
}
.h8 {
- background: url('../../assets/img/synthesis/娓呴櫎.png') no-repeat center;
+ background: url("../../assets/img/synthesis/娓呴櫎.png") no-repeat center;
}
.backimge8 {
width: 30px;
--
Gitblit v1.9.3