|
|
@@ -0,0 +1,244 @@
|
|
|
+<template>
|
|
|
+ <!-- 上传数据弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="上传数据"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :before-close="handleClose"
|
|
|
+ width="400px"
|
|
|
+ >
|
|
|
+ <template slot="title">
|
|
|
+ <div class="dialogTitle">
|
|
|
+ <div class="dialogTitleIcon"></div>
|
|
|
+ 请选择你要上传的文件
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div id="uploadingBox">
|
|
|
+ <!-- <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ accept="shp"
|
|
|
+ multiple
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :file-list="fileList"
|
|
|
+ >
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
+ <div class="el-upload__tip" slot="tip">
|
|
|
+ *仅支持Geojson格式文件，且不超过5MB
|
|
|
+ </div>
|
|
|
+ </el-upload> -->
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ accept="shp"
|
|
|
+ multiple
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :file-list="fileList"
|
|
|
+ >
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
+ <div class="el-upload__tip" slot="tip">
|
|
|
+ *仅支持Geojson格式文件，且不超过5MB
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="clearDialogVisible()">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="subMitDialogVisible()">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * 上传数据功能 -- 支持shp
|
|
|
+ * @author: LiuMengxiang
|
|
|
+ * @Date: 2023年2月27日
|
|
|
+ */
|
|
|
+import shp from "shpjs";
|
|
|
+export default {
|
|
|
+ name: "UploadingDataShp",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 文件目标路径
|
|
|
+ filePath: "",
|
|
|
+ // 上传文件列表
|
|
|
+ fileList: [],
|
|
|
+ // 暂存上传文件数据
|
|
|
+ fileDataList: {},
|
|
|
+ // 上传数据弹窗显示状态
|
|
|
+ dialogVisible: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 上传数据事件监听
|
|
|
+ this.$bus.$off("scsj");
|
|
|
+ this.$bus.$on("scsj", () => {
|
|
|
+ this.changeShowBottomMenusStatus();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ destroy() {
|
|
|
+ // 当容器销毁时，需要停止监听该事件
|
|
|
+ this.$bus.$off("scsj");
|
|
|
+ },
|
|
|
+ props: [],
|
|
|
+ methods: {
|
|
|
+ // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
|
|
|
+ changeShowBottomMenusStatus() {
|
|
|
+ // 打开弹窗
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.$emit("changeShowBottomMenusStatus", false);
|
|
|
+ },
|
|
|
+ // 弹窗关闭询问
|
|
|
+ handleClose() {
|
|
|
+ if (this.dialogVisible && this.fileList.length > 0) {
|
|
|
+ this.$confirm("确认关闭？")
|
|
|
+ .then((_) => {
|
|
|
+ this.clearDialogVisible();
|
|
|
+ })
|
|
|
+ .catch((_) => {});
|
|
|
+ } else {
|
|
|
+ this.clearDialogVisible();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上传数据关闭
|
|
|
+ clearDialogVisible() {
|
|
|
+ this.fileList = [];
|
|
|
+ this.fileDataList = {};
|
|
|
+ // 关闭弹窗
|
|
|
+ this.dialogVisible = false;
|
|
|
+ // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
|
|
|
+ this.$emit("changeShowBottomMenusStatus", true);
|
|
|
+ },
|
|
|
+ // 上传数据表单提交
|
|
|
+ subMitDialogVisible() {
|
|
|
+ let fileDataList = this.fileDataList;
|
|
|
+ for (let key in fileDataList) {
|
|
|
+ console.log(fileDataList[key],"上传");
|
|
|
+ const dataJson = JSON.parse(fileDataList[key]);
|
|
|
+ console.log(dataJson);
|
|
|
+ // this.uploadRENDER(dataJson);
|
|
|
+ }
|
|
|
+ // setTimeout(() => {
|
|
|
+ // if (map2DViewer.analysisGroups[`upload_layer_unique`]) {
|
|
|
+ // this.$message.success("数据上传成功!");
|
|
|
+ // map2DViewer.map.fitBounds(
|
|
|
+ // map2DViewer.analysisGroups[`upload_layer_unique`].getBounds()
|
|
|
+ // );
|
|
|
+ // }
|
|
|
+ // let options = {
|
|
|
+ // id: "upload_layer_unique",
|
|
|
+ // label: "我的图层1",
|
|
|
+ // };
|
|
|
+ // this.$bus.$emit("addUploadLayerEvent", options);
|
|
|
+ // }, 1000);
|
|
|
+
|
|
|
+ this.clearDialogVisible();
|
|
|
+ },
|
|
|
+ // 文件列表移除文件时
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ this.fileList = fileList;
|
|
|
+ delete this.fileDataList[file.uid];
|
|
|
+ },
|
|
|
+ // 点击文件列表中已上传的文件时
|
|
|
+ handlePreview(file) {},
|
|
|
+ // 文件超出个数限制时
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ // this.$message.warning(
|
|
|
+ // `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
|
|
+ // files.length + fileList.length
|
|
|
+ // } 个文件`
|
|
|
+ // );
|
|
|
+ },
|
|
|
+ // 删除文件之前
|
|
|
+ beforeRemove(file, fileList) {
|
|
|
+ this.$message.success(`文件${file.name}移除成功！`);
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ // 文件上传成功时
|
|
|
+ handleSuccess(response, file, fileList) {
|
|
|
+ console.log(file,"handleSuccess");
|
|
|
+ this.getActionData(file);
|
|
|
+ },
|
|
|
+ // 根据上传的文件渲染到地图中
|
|
|
+ uploadRENDER(geoJson) {
|
|
|
+ // 呈现数据已经成功
|
|
|
+ let firstPolygon = JSON.parse(JSON.stringify(geoJson));
|
|
|
+ // let uniqueId = firstPolygon.name;
|
|
|
+ let uniqueId = `upload_layer_unique`;
|
|
|
+ if (!map2DViewer.analysisGroups[uniqueId]) {
|
|
|
+ map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
|
|
|
+ map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
|
|
|
+ if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
|
|
|
+ this.$store.state.selectSelectDataMap["singlePolygon"] = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log("上传文件读取到的数据", firstPolygon);
|
|
|
+ firstPolygon.features.forEach((ele, index) => {
|
|
|
+ let cid = `myLayer_${index}`;
|
|
|
+ let geometry = JSON.stringify(ele);
|
|
|
+ this.$store.state.mapMethodsCollection
|
|
|
+ .get("RENDER")
|
|
|
+ .addSinglePolygon(
|
|
|
+ geometry,
|
|
|
+ cid,
|
|
|
+ "rgb(0,255,255)",
|
|
|
+ uniqueId,
|
|
|
+ "我的图层",
|
|
|
+ "土地资源"
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 读取file对象内容
|
|
|
+ getActionData(file) {
|
|
|
+ console.log(file,"检测上传的数据");
|
|
|
+ const __this = this;
|
|
|
+ var reader = new FileReader(); // 新建一个FileReader
|
|
|
+ reader.readAsText(file.raw, "UTF-8"); // 读取文件
|
|
|
+ reader.onload = function (evt) {
|
|
|
+ __this.fileList.push(file);
|
|
|
+ __this.fileDataList[file.uid] = evt.target.result;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 上传文件之前
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ // const isJPG = file.name.indexOf(".geojson") === file.name.length - 8;
|
|
|
+ const isShp = file.name.indexOf(".zip") === file.name.length - 4
|
|
|
+ const isLt10M = file.size / 1024 / 1024 < 10;
|
|
|
+ if (!isShp) {
|
|
|
+ this.$message.error("仅支持shp格式的压缩包!");
|
|
|
+ }
|
|
|
+ if (!isLt10M) {
|
|
|
+ this.$message.error("上传文件大小不能超过 10MB!");
|
|
|
+ }
|
|
|
+ return isShp && isLt10M;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+#uploadingBox {
|
|
|
+ display: flex;
|
|
|
+ .el-upload *:not(em) {
|
|
|
+ color: #f2f6fc;
|
|
|
+ }
|
|
|
+ .el-upload__tip {
|
|
|
+ color: #c0c4cc;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Bella