| | |
| | | class="file" |
| | | style="display: none" |
| | | /> |
| | | <input |
| | | :accept="'.shp, .shx, .dbf, .prj'" |
| | | style="display: none" |
| | | ref="pathClear" |
| | | type="file" |
| | | name="file" |
| | | id="shpFile" |
| | | multiple="multiple" |
| | | @change="handleOpenShp()" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import mapinfo from '../Tools/mapinfo.vue'; |
| | | import maplayer from '../Tools/maplayer.vue'; |
| | | import queryinfo from '../Tools/queryinfo.vue'; |
| | | import $ from 'jquery' |
| | | import { getToken } from '@/utils/auth'; |
| | | import { |
| | | OverviewMap, |
| | | defaults as defaultControls, |
| | |
| | | ScaleLine, |
| | | Rotate, |
| | | } from "ol/control.js" |
| | | import * as turf from '@turf/turf'; |
| | | import { geometry } from '@turf/turf'; |
| | | |
| | | export default { |
| | | components: { mapinfo, maplayer, queryinfo }, |
| | | data() { |
| | |
| | | css: 'twoMenu_imge81', |
| | | }, |
| | | { |
| | | id: "h8", |
| | | label: "synthesis.textLabel", |
| | | name: "文本点", |
| | | css: "twoMenu_imge81", |
| | | id: 'h8', |
| | | label: 'synthesis.addlabel', |
| | | name: '文字', |
| | | css: 'twoMenu_imge88', |
| | | }, |
| | | { |
| | | id: 'h2', |
| | |
| | | { |
| | | id: 'h5', |
| | | label: 'synthesis.import', |
| | | name: '导入', |
| | | name: '导入KML', |
| | | css: 'twoMenu_imge85', |
| | | }, |
| | | { |
| | | id: 'h6', |
| | | label: 'synthesis.export', |
| | | name: '导出', |
| | | name: '导出KML', |
| | | css: 'twoMenu_imge86', |
| | | }, |
| | | { |
| | | id: 'h8', |
| | | label: 'synthesis.addlabel', |
| | | name: '文字', |
| | | css: 'twoMenu_imge88', |
| | | }, |
| | | |
| | | // { |
| | | // id: 'h9', |
| | | // label: 'synthesis.import1', |
| | | // name: '导入SHP', |
| | | // css: 'twoMenu_imge85', |
| | | // }, |
| | | // { |
| | | // id: 'h10', |
| | | // label: 'synthesis.export1', |
| | | // name: '导出SHP', |
| | | // css: 'twoMenu_imge86', |
| | | // }, |
| | | |
| | | |
| | | { |
| | | id: 'h7', |
| | | label: 'synthesis.removepaint', |
| | |
| | | UndergroundMode: false, |
| | | scaleLine: null, |
| | | Excavation: false, |
| | | entityaLayers: [], |
| | | }; |
| | | }, |
| | | methods: { |
| | | //二級菜单点击切换 |
| | | setChangeTwoMenu(res) { |
| | | //清除绘制图形对象 |
| | | sgworld.Creator.SimpleGraphic.clear(); |
| | | // sgworld.Creator.SimpleGraphic.clear(); |
| | | if (window.Viewer.scene.primitives.length != null) { |
| | | window.Viewer.scene.primitives.removeAll(); |
| | | } |
| | |
| | | case 'h6': |
| | | this.handleSaveClick(); |
| | | break; |
| | | case 'h9': |
| | | // this.handleOpenShp(); |
| | | $("#shpFile").click(); |
| | | break; |
| | | case 'h10': |
| | | this.handleSaveShp(); |
| | | break; |
| | | case 'h7': |
| | | sgworld.Creator.SimpleGraphic.clear(); |
| | | for (var i in this.entityaLayers) { |
| | | sgworld.Viewer.entities.remove(this.entityaLayers[i]); |
| | | } |
| | | this.entityaLayers = []; |
| | | break; |
| | | case 'h8': |
| | | sgworld.Creator.createSimpleGraphic('label', {}, function (entity) { |
| | |
| | | alert('当前场景没有entities实体'); |
| | | } |
| | | }, |
| | | handleSaveShp() { |
| | | |
| | | var entities = sgworld.Viewer.entities.values; |
| | | if (entities.length == 0) { |
| | | return; |
| | | } |
| | | var std = []; |
| | | for (var i in entities) { |
| | | var type, fillColor, alpha, wkt, name; |
| | | var bak = {} |
| | | |
| | | if (entities[i].name) { |
| | | |
| | | name = entities[i].name |
| | | } |
| | | if (entities[i].properties) { |
| | | |
| | | var properties = entities[i].properties.propertyNames; |
| | | for (var j in properties) { |
| | | bak[properties[j]] = entities[i].properties[properties[j]]._value; |
| | | } |
| | | } else { |
| | | bak = { |
| | | "name": entities[i].name |
| | | } |
| | | } |
| | | if (entities[i].rectangle) {//矩形 |
| | | type = 'rectangle' |
| | | var east = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().east); |
| | | var north = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().north); |
| | | var west = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().west); |
| | | var south = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().south); |
| | | var line = turf.lineString([[east, north], [west, south]]) |
| | | wkt = this.$wkt.convert(line.geometry) |
| | | var fill = entities[i].rectangle._material._color._value; |
| | | fillColor = fill.red + ',' + fill.green + ',' + fill.blue; |
| | | alpha = fill.alpha; |
| | | } else if (entities[i].point) {//点 |
| | | type = 'point' |
| | | let ellipsoid = Viewer.scene.globe.ellipsoid; |
| | | let cartographic = ellipsoid.cartesianToCartographic(entities[i].position.getValue()); |
| | | let lat = Cesium.Math.toDegrees(cartographic.latitude); |
| | | let lng = Cesium.Math.toDegrees(cartographic.longitude); |
| | | let alt = cartographic.height; |
| | | let point = turf.point([lng, lat, alt]) |
| | | wkt = this.$wkt.convert(point.geometry) |
| | | var fill = entities[i].point._color._value; |
| | | fillColor = fill.red + ',' + fill.green + ',' + fill.blue; |
| | | alpha = fill.alpha; |
| | | |
| | | |
| | | } else if (entities[i].polygon) { |
| | | type = 'polygon'; |
| | | var fill = entities[i].polygon._material._color._value; |
| | | fillColor = fill.red + ',' + fill.green + ',' + fill.blue; |
| | | alpha = fill.alpha; |
| | | var geometry = entities[i].polygon.hierarchy.getValue().positions; |
| | | var coordinates = []; |
| | | for (var k in geometry) { |
| | | coordinates.push(this.setCartesianToEightFour(geometry[k])) |
| | | } |
| | | if (coordinates[0] != coordinates[1]) { |
| | | coordinates.push(coordinates[0]) |
| | | } |
| | | var polygon = turf.polygon([coordinates]) |
| | | wkt = this.$wkt.convert(polygon.geometry) |
| | | } else if (entities[i].polyline) { |
| | | type = "polyline"; |
| | | var coordinates = []; |
| | | var geometry = entities[i].polyline.positions.getValue(); |
| | | for (var k in geometry) { |
| | | coordinates.push(this.setCartesianToEightFour(geometry[k])) |
| | | } |
| | | var polyline = turf.lineString(coordinates) |
| | | wkt = this.$wkt.convert(polyline.geometry) |
| | | |
| | | var fill = entities[i].polyline._material._color._value; |
| | | fillColor = fill.red + ',' + fill.green + ',' + fill.blue; |
| | | alpha = fill.alpha; |
| | | } else if (entities[i].label) { |
| | | type = "label"; |
| | | let ellipsoid = Viewer.scene.globe.ellipsoid; |
| | | let cartographic = ellipsoid.cartesianToCartographic(entities[i].position.getValue()); |
| | | let lat = Cesium.Math.toDegrees(cartographic.latitude); |
| | | let lng = Cesium.Math.toDegrees(cartographic.longitude); |
| | | let alt = cartographic.height; |
| | | let point = turf.point([lng, lat, alt]) |
| | | wkt = this.$wkt.convert(point.geometry) |
| | | var fill = entities[i].label.backgroundColor._value; |
| | | fillColor = fill.red + ',' + fill.green + ',' + fill.blue; |
| | | alpha = fill.alpha; |
| | | } |
| | | std.push({ |
| | | id: parseInt(i) + 1, |
| | | type: type, |
| | | fillColor: fillColor, |
| | | opacity: alpha, |
| | | name: name, |
| | | bak: JSON.stringify(bak), |
| | | wkt: wkt |
| | | }) |
| | | } |
| | | $.ajax({ |
| | | url: BASE_URL + "/comprehensive/downloadShp?token=" + getToken(), |
| | | type: "POST", |
| | | data: JSON.stringify(std), |
| | | dataType: 'json', // html、json、jsonp、script、text |
| | | contentType: "application/json", // "application/x-www-form-urlencoded" |
| | | success: (rs) => { |
| | | if (rs && rs.code == 200) { |
| | | var a = document.createElement('a'); // 创建一个a标签元素 |
| | | a.style.display = 'none'; // 设置元素不可见 |
| | | |
| | | a.href = BASE_URL + "/comprehensive/downloadFile?token=" + getToken() + "&guid=" + rs.result; |
| | | |
| | | document.body.appendChild(a); // 加入 |
| | | a.click(); // 触发点击,下载 |
| | | document.body.removeChild(a); // 释放 |
| | | } |
| | | }, |
| | | error: function (e) { |
| | | } |
| | | }); |
| | | |
| | | }, |
| | | handleOpenShp() { |
| | | var formData = new FormData(); |
| | | var fs = document.getElementById("shpFile"); |
| | | var exts = [".shp", ".shx", ".dbf", ".prj"]; |
| | | var count = 0; |
| | | for (var i = 0, c = fs.files.length; i < c; i++) { |
| | | var name = fs.files[i].name.toLocaleLowerCase(); |
| | | var ext = name.substring(name.lastIndexOf(".")); |
| | | if (exts.indexOf(ext) > -1) { |
| | | count++; |
| | | formData.append(fs.files[i].name, fs.files[i]); // fs.files[i].name,file |
| | | } |
| | | } |
| | | if (count != 4) { |
| | | alert("ShapeFile文件选择不全!"); |
| | | return; |
| | | } |
| | | var that = this; |
| | | $.ajax(BASE_URL + "/comprehensive/uploadShp?token=" + getToken(), { |
| | | type: "post", |
| | | data: formData, |
| | | async: true, |
| | | cache: false, |
| | | processData: false, |
| | | contentType: false, |
| | | success: function (rs) { |
| | | |
| | | if (rs.code == 200) { |
| | | that.showShpEntity(rs.result); |
| | | } |
| | | }, |
| | | error: function (e) { |
| | | console.error(e); |
| | | } |
| | | }); |
| | | }, |
| | | showShpEntity(res) { |
| | | |
| | | for (var i in res) { |
| | | |
| | | var wkt = this.$wkt.parse(res[i].wkt); |
| | | var fillColor = res[i].fillColor.split(","); |
| | | var color = new Cesium.Color(fillColor[0], fillColor[1], fillColor[2], res[i].opacity) |
| | | switch (res[i].type) { |
| | | case 'rectangle': |
| | | debugger |
| | | break; |
| | | case 'point': |
| | | debugger |
| | | break; |
| | | case 'polygon': |
| | | var std = []; |
| | | var geo = wkt.coordinates[0]; |
| | | for (var i in geo) { |
| | | std.push(geo[i][0]) |
| | | std.push(geo[i][1]) |
| | | } |
| | | const entity = Viewer.entities.add({ |
| | | name: 'Wyoming', |
| | | polygon: { |
| | | hierarchy: Cesium.Cartesian3.fromDegreesArray(std), |
| | | //height : 100000, |
| | | material:color, |
| | | outline: true, |
| | | outlineColor: color, |
| | | } |
| | | }) |
| | | this.entityaLayers.push(entity) |
| | | break; |
| | | case 'polyline': |
| | | debugger |
| | | break; |
| | | case 'label': |
| | | debugger |
| | | break; |
| | | } |
| | | } |
| | | }, |
| | | |
| | | setCartesianToEightFour(res) { |
| | | var std = []; |
| | | let ellipsoid = Viewer.scene.globe.ellipsoid; |
| | | let cartographic = ellipsoid.cartesianToCartographic(res); |
| | | let lat = Cesium.Math.toDegrees(cartographic.latitude); |
| | | let lng = Cesium.Math.toDegrees(cartographic.longitude); |
| | | let alt = cartographic.height; |
| | | std = [lng, lat, alt] |
| | | return std; |
| | | }, |
| | | handleOpenClick() { |
| | | var that = this; |
| | | sgworld.Creator.SimpleGraphic.edit(true, { editProp: true }); |
| | | let fileInput = document.querySelector('.file'); |
| | | fileInput.onchange = function (evt) { |
| | |
| | | fileReader.result, |
| | | kmlOptions |
| | | ); |
| | | |
| | | geocachePromise.then(function (dataSource) { |
| | | var geocacheEntities = dataSource.entities.values; |
| | | |
| | | that.entityaLayers = geocacheEntities; |
| | | for (var i = 0; i < geocacheEntities.length; i++) { |
| | | var entity = geocacheEntities[i]; |
| | | |