range.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. <template>
  2. <div class="map-range">
  3. <div class="fwlxrange">
  4. <div :class="model.xzmj == 0 ? 'pointer' : ''" @click="drawMap">
  5. <el-button plain v-if="model.xzmj == 0" icon="edit-pen" size="mini"
  6. >绘制</el-button
  7. >
  8. <span v-if="model.xzmj != 0">{{ model.xzmj }} km²</span>
  9. </div>
  10. <el-upload
  11. class="upload-demo"
  12. :on-change="handleChange"
  13. :auto-upload="false"
  14. :show-file-list="false"
  15. :file-list="fileList"
  16. :limit="1"
  17. accept=".zip"
  18. >
  19. <el-tooltip
  20. v-if="fileList.length > 0"
  21. :content="fileList[0].name"
  22. placement="bottom-start"
  23. effect="light"
  24. >
  25. <span class="title-item" style="display: inline-block; width: 100%">{{
  26. fileList[0].name
  27. }}</span>
  28. </el-tooltip>
  29. <el-button v-else class="upload-btn" icon="Upload" size="mini"
  30. >导入</el-button
  31. >
  32. </el-upload>
  33. <!-- <div class="clear" @click="clearAll">清除</div> -->
  34. <div>
  35. <el-button size="mini" @click="clearAll">清除</el-button>
  36. </div>
  37. </div>
  38. </div>
  39. </template>
  40. <script>
  41. import { ShapeUpload } from "@/api/ghss/hgxfx.js";
  42. import { ElMessage } from "element-ui";
  43. // import { polygon } from "@turf/turf";
  44. import * as turf from "@turf/turf";
  45. export default {
  46. components: {},
  47. props: {
  48. //启用的组件,不传为所有
  49. keys: {
  50. type: Array,
  51. default: ["xzq", "hx", "sc", "zbd"],
  52. },
  53. activeTabs: {
  54. type: String,
  55. },
  56. type: {
  57. type: String,
  58. },
  59. },
  60. data() {
  61. return {
  62. userXZQ: "", //store.state.user.user.dept.district,
  63. fwlist: {
  64. xzq: {
  65. id: 0,
  66. name: "行政区",
  67. icon: "wind-power",
  68. },
  69. hx: {
  70. id: 1,
  71. name: "绘制",
  72. icon: "Share",
  73. },
  74. sc: {
  75. id: 2,
  76. name: "上传",
  77. icon: "Upload-filled",
  78. },
  79. zbd: {
  80. id: 3,
  81. name: "坐标点",
  82. icon: "Location",
  83. },
  84. },
  85. model: {
  86. fwlx: 0,
  87. xzfw: "",
  88. xzmj: 0,
  89. feature: null,
  90. },
  91. handlerDraw: null,
  92. draw: null, //绘制
  93. fileList: [], //文件
  94. fileDataID: "", //存储上传文件获取到的id
  95. };
  96. },
  97. mounted() {
  98. // this.model.fwlx = this.fwlist[this.$props.keys[0]].id;
  99. },
  100. methods: {
  101. //上传文件
  102. handleChange(file, fileList) {
  103. if (fileList.length > 0) {
  104. this.fileList = [fileList[fileList.length - 1]]; //这一步,是展示最后一次选择文件
  105. this.clearAll(false);
  106. }
  107. const formdata = new FormData();
  108. formdata.append("file", file.raw);
  109. formdata.append("fromType", 2);
  110. formdata.append("fromRoute", this.$route.path);
  111. // this.addPolygon();
  112. ShapeUpload(formdata).then((res) => {
  113. if (res.success) {
  114. this.model.xzmj = (res.data.area / 1000000).toFixed(2);
  115. viewer.entities.removeAll();
  116. this.fileDataID = res.data.id;
  117. let geoms = res.data.geom
  118. .substring(
  119. res.data.geom.indexOf("(((") + 3,
  120. res.data.geom.length - 3
  121. )
  122. .split(")),((");
  123. for (let i = 0; i < geoms.length; i++) {
  124. let geom = geoms[i].split(",");
  125. let points = [];
  126. for (let j = 0; j < geom.length; j++) {
  127. points.push(parseFloat(geom[j].split(" ")[0]));
  128. points.push(parseFloat(geom[j].split(" ")[1]));
  129. }
  130. points.push(parseFloat(geom[0].split(" ")[0]));
  131. points.push(parseFloat(geom[0].split(" ")[1]));
  132. viewer.entities.add({
  133. // polyline: new Cesium.PolylineGraphics({
  134. // positions: Cesium.Cartesian3.fromDegreesArray(points),
  135. // width: 3,
  136. // material: Cesium.Color.BLUE.withAlpha(0.9),
  137. // clampToGround: true,
  138. // }),
  139. polygon: {
  140. hierarchy: {
  141. positions: Cesium.Cartesian3.fromDegreesArray(points),
  142. },
  143. material: Cesium.Color.WHITE.withAlpha(0.3),
  144. clampToGround: true,
  145. outline: true,
  146. outlineWidth: 5,
  147. outlineColor: Cesium.Color.RED,
  148. },
  149. });
  150. }
  151. viewer.flyTo(viewer.entities);
  152. }
  153. });
  154. },
  155. //上传文件
  156. handleChange1(file, fileList) {
  157. if (fileList.length > 0) {
  158. this.fileList = [fileList[fileList.length - 1]]; //这一步,是展示最后一次选择文件
  159. this.clearAll(false);
  160. }
  161. const formdata = new FormData();
  162. formdata.append("file", file.raw);
  163. this.addPolygon();
  164. // ShapeUpload(formdata).then((res) => {
  165. // if (res.success) {
  166. // // var layer = myMap.addGeoJson("common_layer", res.data.geojson);
  167. // // var url = `${SYS_LAYERS.XZQXZ}/0/query`;
  168. // // var geom = layer.getSource().getFeatures()[0].getGeometry();
  169. // // 判断绘制范围是否在行政区范围内
  170. // let withinRange = true;
  171. // // arcMap.SearchWfsData(url, geom, function (fs) {
  172. // // if (fs.length) {
  173. // // fs.map((res) => {
  174. // // let xzqdm = res.get("XZQDM");
  175. // // if (!xzqdm.startsWith(this.userXZQ)) {
  176. // // withinRange = false;
  177. // // }
  178. // // });
  179. // // } else {
  180. // // withinRange = false;
  181. // // }
  182. // if (withinRange) {
  183. // this.model.xzfw = res.data.filepath;
  184. // // this.model.feature = layer.getSource().getFeatures()[0];
  185. // // this.model.xzmj = new OLTool().Tools.formatArea(
  186. // // this.model.feature.getGeometry(),
  187. // // true
  188. // // );
  189. // // myMap.zoomToextent(layer.getSource().getExtent());
  190. // } else {
  191. // // this.clearAll();
  192. // // ElMessage.warning("分析范围超出了权限范围,请重新上传文件!");
  193. // }
  194. // // });
  195. // }
  196. // });
  197. },
  198. // 加载GeoJSON数据
  199. addPolygon() {
  200. let geojson =
  201. this.$props.type == "hegxfx"
  202. ? "/static/data/ghss/导入.geojson"
  203. : "static/data/draw.geojson";
  204. let polygon = Cesium.GeoJsonDataSource.load(geojson, {
  205. // clampToGround: true
  206. stroke: Cesium.Color.RED,
  207. fill: Cesium.Color.WHITE.withAlpha(0.3),
  208. strokeWidth: 5,
  209. });
  210. polygon.then(function (dataSource) {
  211. // 将数据源添加到Cesium Viewer
  212. viewer.dataSources.add(dataSource);
  213. viewer.zoomTo(dataSource);
  214. // 可以获取实体并进行操作
  215. // var entities = dataSource.entities.values;
  216. // for (var i = 0; i < entities.length; i++) {
  217. // var entity = entities[i];
  218. // // 你可以在这里设置实体的属性,例如位置、颜色等
  219. // }
  220. });
  221. },
  222. //绘制
  223. drawMap() {
  224. if (!window.handlerPolygon) {
  225. common.initHandler("Polygon");
  226. }
  227. common.handlerDrawing("Polygon").then(
  228. (res) => {
  229. // console.log(res.positions, "------");
  230. //过滤掉高度
  231. const filteredArr = res.positions.filter((item, index) => {
  232. if ((index + 1) % 3 !== 0) {
  233. return item;
  234. }
  235. });
  236. // 数组变二维数组方法
  237. function listToMatrix(list, elementsPerSubArray) {
  238. var matrix = [],
  239. i,
  240. k;
  241. for (i = 0, k = -1; i < list.length; i++) {
  242. if (i % elementsPerSubArray === 0) {
  243. k++;
  244. matrix[k] = [];
  245. }
  246. matrix[k].push(list[i]);
  247. }
  248. return matrix;
  249. }
  250. var matrix = listToMatrix(filteredArr, 2);
  251. // console.log(matrix, "max-----");
  252. matrix.push(matrix[0]);
  253. const geojsonPolygon = turf.polygon([matrix]);
  254. var parse = require("wellknown"); //引入wellknow
  255. const wktPolygon = parse.stringify(geojsonPolygon);
  256. // console.log("WKT Polygon:", wktPolygon);
  257. const formdata = new FormData();
  258. // formdata.append("file", file.raw);
  259. formdata.append("fromType", 1);
  260. formdata.append("geom", wktPolygon);
  261. formdata.append("fromRoute", this.$route.path);
  262. // this.addPolygon();
  263. ShapeUpload(formdata).then((res) => {
  264. if (res.success) {
  265. this.fileDataID = res.data.id;
  266. this.model.xzmj = (res.data.area / 1000000).toFixed(2);
  267. this.$message({
  268. message: "绘制成功!",
  269. type: "success",
  270. });
  271. }
  272. });
  273. },
  274. (err) => {
  275. console.log(err);
  276. }
  277. );
  278. window.handlerPolygon.activate();
  279. },
  280. clear() {
  281. if (this.handlerDraw != null) {
  282. this.handlerDraw.clear();
  283. viewer.scene.globe.removeAllExcavationRegion();
  284. this.handlerDraw.deactivate();
  285. this.handlerDraw = null;
  286. this.result = null;
  287. }
  288. },
  289. //清除
  290. clearAll(clearfile = true) {
  291. //销毁上传创建的面
  292. viewer.entities.removeAll();
  293. this.model.xzfw = "";
  294. this.model.xzmj = 0;
  295. if (clearfile) {
  296. this.fileDataID = "";
  297. this.fileList = [];
  298. }
  299. common.clearHandlerDrawing("Polygon");
  300. },
  301. //输出:重置
  302. reset() {
  303. // this.model = {
  304. // fwlx: this.fwlist[this.$props.keys[0]].id,
  305. // xzfw: "",
  306. // xzmj: 0,
  307. // };
  308. // this.fileList = []; //文件
  309. this.clearAll();
  310. },
  311. //输出:获取范围
  312. getRange() {
  313. return this.model;
  314. },
  315. },
  316. };
  317. </script>
  318. <style lang="scss" scoped>
  319. .map-range {
  320. width: 100px;
  321. // height: 100px;
  322. color: #fff;
  323. .xz_type {
  324. margin-bottom: 10px;
  325. // display: flex;
  326. // justify-content: space-between;
  327. .keyitem {
  328. width: 100px;
  329. height: 30px;
  330. font-size: 16px;
  331. line-height: 30px;
  332. display: inline-block;
  333. cursor: pointer;
  334. }
  335. }
  336. .fwlxrange {
  337. display: flex;
  338. justify-content: space-between;
  339. text-align: center;
  340. .clear {
  341. width: 80px;
  342. }
  343. /deep/ .el-button--mini {
  344. background: #0f7ac8;
  345. border: none;
  346. border-radius: 0;
  347. color: #fff;
  348. width: 60px;
  349. height: 26px;
  350. font-size: 14px;
  351. // line-height: 32px;
  352. // text-align: center;
  353. }
  354. }
  355. }
  356. </style>