|
|
@@ -13,7 +13,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<div id="uploadingBox">
|
|
|
- <el-upload
|
|
|
+ <!-- <el-upload
|
|
|
class="upload-demo"
|
|
|
ref="upload"
|
|
|
drag
|
|
|
@@ -21,30 +21,35 @@
|
|
|
action="#"
|
|
|
:limit="1"
|
|
|
:show-file-list="false"
|
|
|
- accept=".zip,.shp"
|
|
|
>
|
|
|
<i class="el-icon-upload"></i>
|
|
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
- </el-upload>
|
|
|
- <!-- <el-upload
|
|
|
+ <div class="el-upload__tip" slot="tip">
|
|
|
+ *仅支持上传zip格式的shp压缩包,json(或geojson)格式的数据
|
|
|
+ </div>
|
|
|
+ </el-upload> -->
|
|
|
+ <el-upload
|
|
|
class="upload-demo"
|
|
|
drag
|
|
|
- action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ action=""
|
|
|
+ :http-request="uploadSectionFile"
|
|
|
:on-preview="handlePreview"
|
|
|
:on-remove="handleRemove"
|
|
|
- :on-success="handleSuccess"
|
|
|
:before-remove="beforeRemove"
|
|
|
:before-upload="beforeAvatarUpload"
|
|
|
- multiple
|
|
|
+ :limit="1"
|
|
|
: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
|
|
|
+ *仅支持上传zip格式的shp压缩包,json(或geojson)格式的数据,且不超过100MB
|
|
|
</div>
|
|
|
- </el-upload> -->
|
|
|
+ <!-- <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>
|
|
|
@@ -56,19 +61,31 @@
|
|
|
<script>
|
|
|
/**
|
|
|
* 底部菜单（上传数据）组件
|
|
|
- * @author: LiuMengxiang
|
|
|
- * @Date: 2022年11月21-25日
|
|
|
+ * 支持geosjon格式的数据以及shp的压缩包 -- 坐标系必须为上海2000高斯投影坐标
|
|
|
+ * @author: GAO LU
|
|
|
+ * @Date: 2023年3月6-8日
|
|
|
*/
|
|
|
import shp from "shpjs";
|
|
|
import JsZip from "jszip";
|
|
|
+import iconv from "iconv-lite";
|
|
|
+import { open, openShp, openDbf } from "shapefile";
|
|
|
+import coordinate from "@/utils/coordinate";
|
|
|
export default {
|
|
|
name: "UploadingData",
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- // 文件目标路径
|
|
|
- upName: null,
|
|
|
+ headerObj:{
|
|
|
+
|
|
|
+ },
|
|
|
+ // 当前上传文件的unique名称
|
|
|
+ layerUniqueName: null,
|
|
|
+ // shp数据
|
|
|
shpFile: null,
|
|
|
+ fileUniqueObj: {},
|
|
|
+ shpDataList: [],
|
|
|
+ // 属性信息
|
|
|
+ shpFileAttributes: null,
|
|
|
filePath: "",
|
|
|
// 上传文件列表
|
|
|
fileList: [],
|
|
|
@@ -120,52 +137,148 @@ export default {
|
|
|
},
|
|
|
// 上传判断
|
|
|
uploadSectionFile(params) {
|
|
|
+ debugger
|
|
|
const file = params.file;
|
|
|
const fileName = file.name;
|
|
|
+ const isGeojson =
|
|
|
+ fileName.indexOf("json") != -1 || fileName.indexOf("geojson") != -1;
|
|
|
const isZip = fileName.indexOf("zip") !== -1;
|
|
|
const isShp = fileName.indexOf("shp") !== -1;
|
|
|
- this.upName = fileName; //项目中需要传文件名字，所以这里保存下来
|
|
|
- if (!(isZip || isShp)) {
|
|
|
- this.$message.error("只能上传zip、shp格式!");
|
|
|
- this.abortLoad(); //因为手动上传，所以这里是取消上传
|
|
|
- return false;
|
|
|
- } else {
|
|
|
- isZip ? this.openZip(file) : this.toGeo(file);
|
|
|
- }
|
|
|
+ // 用于识别不同文件，并作为图层名称
|
|
|
+ this.layerUniqueName = ""
|
|
|
+ if (isGeojson) {
|
|
|
+ this.layerUniqueName =
|
|
|
+ fileName.slice(0, fileName.indexOf(".json")) ||
|
|
|
+ fileName.slice(0, fileName.indexOf(".geojson"));
|
|
|
+ this.fileUniqueObj[this.layerUniqueName] = [];
|
|
|
+ console.log("读取geojson格式的数据");
|
|
|
+ this.readGeojson(file,this.layerUniqueName);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (isZip) {
|
|
|
+ this.layerUniqueName = fileName.slice(0, fileName.indexOf(".zip"));
|
|
|
+ this.fileUniqueObj[this.layerUniqueName] = [];
|
|
|
+ console.log("读取shp压缩包");
|
|
|
+ this.openZip(file,this.layerUniqueNamee);
|
|
|
+ }
|
|
|
},
|
|
|
- // 为zip时，读取压缩包，选取shp文件
|
|
|
- openZip(data) {
|
|
|
+ openZip(data, uniqueName) {
|
|
|
let newZip = new JsZip();
|
|
|
- newZip.loadAsync(data).then((file) => {
|
|
|
- // 压缩包里的内容file,files
|
|
|
- const fileList = Object.keys(file.files);
|
|
|
- const pattern = new RegExp(/\S\.shp$/);
|
|
|
- this.shpFile = fileList.find((i) => pattern.test(i));
|
|
|
- newZip
|
|
|
- .file(this.shpFile)
|
|
|
- .async("arraybuffer")
|
|
|
- .then((content) => {
|
|
|
- // 文件中的内容
|
|
|
- this.shapefileOpen(content);
|
|
|
+ newZip
|
|
|
+ .loadAsync(data, {
|
|
|
+ decodeFileName: function (bytes) {
|
|
|
+ return iconv.decode(bytes, "gbk"); // 按中文编码
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((file) => {
|
|
|
+ // 压缩包里的内容file,files
|
|
|
+ const fileList = Object.keys(file.files);
|
|
|
+ const pattern = new RegExp(/\S\.shp$/);
|
|
|
+ const attrPattern = new RegExp(/\S\.dbf$/);
|
|
|
+ this.shpFile = fileList.find((i) => pattern.test(i));
|
|
|
+ this.shpFileAttributes = fileList.find((i) => attrPattern.test(i));
|
|
|
+ // 此处是压缩包中的shp文件,arraybuffer(此时在回调的参数中已经可以获取到上传的zip压缩包下的所有文件)
|
|
|
+ newZip
|
|
|
+ .file(this.shpFile)
|
|
|
+ .async("arraybuffer")
|
|
|
+ .then((geoContent) => {
|
|
|
+ let geometryInfo = geoContent;
|
|
|
+ newZip
|
|
|
+ .file(this.shpFileAttributes)
|
|
|
+ .async("arraybuffer")
|
|
|
+ .then((attrContent) => {
|
|
|
+ // 文件中的内容
|
|
|
+ this.shapefileOpen(geometryInfo, attrContent,uniqueName);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ // 是否是合法的zip包，解决rar包改后缀zip
|
|
|
+ console.log(err);
|
|
|
+ this.$message.error("请上传正确格式的文件!");
|
|
|
+ });
|
|
|
+ // zip.forEach((path, zipEntry) => {
|
|
|
+ // console.log(zipEntry.name); // 输出不乱码中文
|
|
|
+ // });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 为zip时，读取压缩包，选取shp文件
|
|
|
+ // 读取geojson数据
|
|
|
+ readGeojson(data, uniqueName) {
|
|
|
+ debugger;
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.readAsText(data, "UTF-8");
|
|
|
+ // reader.readAsArrayBuffer(data);
|
|
|
+ reader.onload = (e) => {
|
|
|
+ let result = e.target.result;
|
|
|
+ this.fileUniqueObj[uniqueName] = result;
|
|
|
+ // 转换坐标 -- 渲染疑点，添加到我的图层
|
|
|
+ // this.geojsonFileRender(result,uniqueName);
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 渲染geojson的数据
|
|
|
+ geojsonFileRender(content, uniqueName) {},
|
|
|
+ // 解析.shp或.dbf文件
|
|
|
+ shapefileOpen(geoContent, attrContent, uniqueName) {
|
|
|
+ let options = {
|
|
|
+ encoding: "utf8",
|
|
|
+ };
|
|
|
+ let that = this
|
|
|
+ that.shpDataList = [];
|
|
|
+ // 读取几何信息
|
|
|
+ open(geoContent, attrContent, options)
|
|
|
+ .then((source) =>
|
|
|
+ source.read().then(function log(result) {
|
|
|
+ if (result.done) return;
|
|
|
+ // console.log(result)
|
|
|
+ that.shpDataList.push(result.value);
|
|
|
+ return source.read().then(log);
|
|
|
})
|
|
|
- .catch((err) => {
|
|
|
- // 是否是合法的zip包，解决rar包改后缀zip
|
|
|
- console.log(err);
|
|
|
- this.$message.error("请上传正确格式的文件!");
|
|
|
- });
|
|
|
- });
|
|
|
+ )
|
|
|
+ .catch((error) => console.error(error.stack));
|
|
|
+ this.fileUniqueObj[uniqueName] = that.shpDataList
|
|
|
+ console.log(this.fileUniqueObj[uniqueName], "读取到的shp数据");
|
|
|
},
|
|
|
- // 转ArrayBuffer
|
|
|
- toGeo(data) {
|
|
|
- const reader = new FileReader()
|
|
|
- reader.readAsArrayBuffer(data)
|
|
|
- reader.onload = (e) =>{
|
|
|
- this.shapefileOpen(this.result)
|
|
|
+ /**
|
|
|
+ * 上海2000高斯投影坐标转上海2000经纬度坐标
|
|
|
+ */
|
|
|
+ latLngsTransform(latlngsAry) {
|
|
|
+ // 深拷贝
|
|
|
+ var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
|
|
|
+ if (typeof tempLatlngsAry[0] === "number") {
|
|
|
+ if (tempLatlngsAry.length < 3 && tempLatlngsAry.length > 0) {
|
|
|
+ tempLatlngsAry = coordinate.shcj_to_wgs84(
|
|
|
+ tempLatlngsAry[0],
|
|
|
+ tempLatlngsAry[1]
|
|
|
+ );
|
|
|
+ tempLatlngsAry = [
|
|
|
+ tempLatlngsAry[0] - 0.19195,
|
|
|
+ tempLatlngsAry[1] + 0.00011,
|
|
|
+ ];
|
|
|
+
|
|
|
+ return tempLatlngsAry;
|
|
|
}
|
|
|
+ if (tempLatlngsAry.length === 3) {
|
|
|
+ tempLatlngsAry = coordinate.shcj_to_wgs84(
|
|
|
+ tempLatlngsAry[0],
|
|
|
+ tempLatlngsAry[1]
|
|
|
+ );
|
|
|
+ tempLatlngsAry = [
|
|
|
+ tempLatlngsAry[0] - 0.19195,
|
|
|
+ tempLatlngsAry[1] + 0.00011,
|
|
|
+ ];
|
|
|
+ return tempLatlngsAry;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var i = 0, l = tempLatlngsAry.length; i < l; i++) {
|
|
|
+ tempLatlngsAry[i] = latLngsTransform(tempLatlngsAry[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return tempLatlngsAry;
|
|
|
},
|
|
|
- shapefileOpen(content){
|
|
|
- // open(content).then()
|
|
|
- }
|
|
|
+ // 上传表单提交，开始渲染上传的图层数据，并且添加到我的图层
|
|
|
+ subMitDialogVisible(){
|
|
|
+
|
|
|
+ },
|
|
|
// 上传数据表单提交
|
|
|
// subMitDialogVisible() {
|
|
|
// let fileDataList = this.fileDataList;
|
|
|
@@ -190,29 +303,25 @@ export default {
|
|
|
// this.clearDialogVisible();
|
|
|
// },
|
|
|
// 文件列表移除文件时
|
|
|
- // handleRemove(file, fileList) {
|
|
|
- // this.fileList = fileList;
|
|
|
- // delete this.fileDataList[file.uid];
|
|
|
- // },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ this.fileList = fileList;
|
|
|
+ delete this.fileDataList[file.uid];
|
|
|
+ },
|
|
|
// 点击文件列表中已上传的文件时
|
|
|
- // handlePreview(file) {},
|
|
|
+ handlePreview(file) {},
|
|
|
// 文件超出个数限制时
|
|
|
- // handleExceed(files, fileList) {
|
|
|
- // this.$message.warning(
|
|
|
- // `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
|
|
- // files.length + fileList.length
|
|
|
- // } 个文件`
|
|
|
- // );
|
|
|
- // },
|
|
|
+ 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) {
|
|
|
- // this.getActionData(file);
|
|
|
- // },
|
|
|
+ beforeRemove(file, fileList) {
|
|
|
+ this.$message.success(`文件${file.name}移除成功！`);
|
|
|
+ return true;
|
|
|
+ },
|
|
|
// 根据上传的文件渲染到地图中
|
|
|
// uploadRENDER(geoJson) {
|
|
|
// // 呈现数据已经成功
|
|
|
@@ -244,27 +353,38 @@ export default {
|
|
|
// }
|
|
|
// },
|
|
|
// // 读取file对象内容
|
|
|
- // getActionData(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;
|
|
|
- // };
|
|
|
- // },
|
|
|
+ getActionData(file) {
|
|
|
+ console.log(file, "getActionData");
|
|
|
+ // 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 isLt5M = file.size / 1024 / 1024 < 5;
|
|
|
- // if (!isJPG) {
|
|
|
- // this.$message.error("仅支持Geojson格式文件!");
|
|
|
- // }
|
|
|
- // if (!isLt5M) {
|
|
|
- // this.$message.error("上传文件大小不能超过 5MB!");
|
|
|
- // }
|
|
|
- // return isJPG && isLt5M;
|
|
|
- // },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ console.log(file, "beforeUpload");
|
|
|
+ let fileName = file.name;
|
|
|
+ const isGeojson =
|
|
|
+ fileName.indexOf("json") != -1 || fileName.indexOf("geojson") != -1;
|
|
|
+ const isZip = fileName.indexOf("zip") !== -1;
|
|
|
+ const isLt100M = file.size / 1024 / 1024 < 100;
|
|
|
+
|
|
|
+ if (!(isGeojson || isZip)) {
|
|
|
+ this.$message.error("仅支持json格式文件或shp格式的压缩包!");
|
|
|
+ }
|
|
|
+ // const isJPG = file.name.indexOf(".geojson") === file.name.length - 8;
|
|
|
+ // const isLt5M = file.size / 1024 / 1024 < 5;
|
|
|
+ // if (!isJPG) {
|
|
|
+ // this.$message.error("仅支持Geojson格式文件!");
|
|
|
+ // }
|
|
|
+ if (!isLt100M) {
|
|
|
+ this.$message.error("上传文件大小不能超过 100MB!");
|
|
|
+ }
|
|
|
+ return (isGeojson || isZip) && isLt100M;
|
|
|
+ },
|
|
|
},
|
|
|
watch: {},
|
|
|
};
|
Bella