<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="drawing">
|
<div class="divli">
|
<div class="backimge8 h1"></div>
|
</div>
|
<div class="div_li">标绘</div>
|
</li>
|
<li style="margin-left: 20px" id="open">
|
<div class="divli">
|
<div class="backimge8 h1"></div>
|
</div>
|
<div class="div_li">打开json</div>
|
</li>
|
<li style="margin-left: 20px" @click="save">
|
<div class="divli">
|
<div class="backimge8 h1"></div>
|
</div>
|
<div class="div_li">保存json</div>
|
</li>
|
<li style="margin-left: 20px" @click="kmlopen">
|
<div class="divli">
|
<div class="backimge8 h1"></div>
|
</div>
|
<div class="div_li">原生kml</div>
|
</li>
|
<li style="margin-left: 20px" @click="handleOpenClick">
|
<div class="divli">
|
<div class="backimge8 h1"></div>
|
</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>
|
</template>
|
|
<script>
|
// 测量-信息弹窗
|
import terrainDig from "../Tools/terrainDig.vue";
|
import modelPress from "../Tools/modelPress.vue";
|
export default {
|
components: { terrainDig, modelPress },
|
data() {
|
return {
|
id: "",
|
plotStatus: {
|
delete: true,
|
upload: true,
|
insert: true,
|
update: true,
|
},
|
};
|
},
|
created() {
|
var cover_Id = this.$store.state.syntiesis.menu;
|
var cover_perms = this.$store.state.permsEntity;
|
|
for (var i = 0; i < cover_perms.length; i++) {
|
if (cover_perms[i].pid == cover_Id) {
|
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";
|
// 字符内容转变成blob地址
|
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;
|
switch (res.tag) {
|
case "/delete":
|
this.plotStatus.delete = true;
|
break;
|
case "/upload":
|
this.plotStatus.upload = true;
|
break;
|
case "/insert":
|
this.plotStatus.insert = true;
|
break;
|
case "/update":
|
this.plotStatus.update = true;
|
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();
|
if (window.Excavation) {
|
window.Excavation.clear();
|
window.Excavation = null;
|
}
|
if (window.TerrainFlattening) {
|
window.TerrainFlattening.remove();
|
window.TerrainFlattening = null;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style>
|
.box {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
|
.box li {
|
list-style: none;
|
float: left;
|
height: 60px;
|
text-align: center;
|
margin: 2px;
|
position: relative;
|
cursor: pointer;
|
margin-top: 5px;
|
}
|
.box ul {
|
margin: 0px;
|
}
|
.h1 {
|
background: url("../../assets/img/synthesis/椭圆 5 拷贝 3.png") no-repeat
|
center;
|
}
|
.h2 {
|
background: url("../../assets/img/synthesis/椭圆 3 拷贝 16.png") no-repeat
|
center;
|
}
|
.h3 {
|
background: url("../../assets/img/synthesis/椭圆 3 拷贝 20.png") no-repeat
|
center;
|
}
|
.h4 {
|
background: url("../../assets/img/synthesis/椭圆 3 拷贝 23.png") no-repeat
|
center;
|
}
|
.h5 {
|
background: url("../../assets/img/synthesis/矩形 14 拷贝.png") no-repeat
|
center;
|
}
|
.h6 {
|
background: url("../../assets/img/synthesis/矩形 14 拷贝 7.png") no-repeat
|
center;
|
}
|
.h7 {
|
background: url("../../assets/img/synthesis/文本风格.png") no-repeat center;
|
}
|
.h8 {
|
background: url("../../assets/img/synthesis/清除.png") no-repeat center;
|
}
|
.backimge8 {
|
width: 30px;
|
height: 30px;
|
position: absolute;
|
background-size: 100% 100%;
|
margin: 0% 30%;
|
}
|
.divli {
|
width: 100%;
|
height: 50%;
|
position: relative;
|
}
|
</style>
|
