| | |
| | | import CryptoJS from "crypto-js"; |
| | | // import { Store } from "vuex"; |
| | | import store from "@/store"; |
| | | import temporaryTool from "./temporaryTools"; |
| | | const menuTool = { |
| | | toolMenu: null, |
| | | toolFlag: null, |
| | |
| | | polygon: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050"), |
| | | }, |
| | | exportSquare: null, |
| | | imageryProvider: null, |
| | | legendBox: null, |
| | | topTools(res) { |
| | | this.toolFlag = res.id; |
| | | |
| | | |
| | | Viewer.scene.globe.depthTestAgainstTerrain = false |
| | | Viewer.scene.pickTranslucentDepth = false |
| | | switch (res.id) { |
| | | case "a2": //点漫游 |
| | | this.pointRoam(); |
| | |
| | | this.snapshot(); |
| | | break; |
| | | case "f2": //点查询 |
| | | this.setClearLocation('空间查询_标绘'); |
| | | this.spatialPointQuery(); |
| | | break; |
| | | case "f3": //线查询 |
| | | this.setClearLocation('空间查询_标绘'); |
| | | this.spatialLineQuery(); |
| | | break; |
| | | case "f4": //面查询 |
| | | this.setClearLocation('空间查询_标绘'); |
| | | this.spatialQuery(); |
| | | break; |
| | | case "g1": //坐标定位 |
| | |
| | | Viewer.animation.container.style.visibility = "hidden"; |
| | | Viewer.timeline.container.style.visibility = "hidden"; |
| | | Viewer.clock.shouldAnimate = false; |
| | | return (earthCtrl.shadows = false); |
| | | Viewer.scene.globe.enableLighting = false; |
| | | earthCtrl.shadows = false; |
| | | return |
| | | } |
| | | Viewer.clock.shouldAnimate = true; |
| | | Viewer.scene.globe.enableLighting = true; |
| | | Viewer.animation.container.style.visibility = "visible"; |
| | | Viewer.timeline.container.style.visibility = "visible"; |
| | | earthCtrl.shadows = true; |
| | | earthCtrl.terrainShadows = SmartEarth.Cesium.ShadowMode.ENABLED |
| | | |
| | | earthCtrl.shadowMap.size = 1024 |
| | | }, |
| | | setLocalPosition(res) { |
| | | if (this.localPoint) { |
| | | this.setLocalPositionClose(); |
| | | } |
| | | var position = { |
| | | X: parseFloat(res.lon), |
| | | Y: parseFloat(res.lat), |
| | | Altitude: parseFloat(res.alt), |
| | | }; |
| | | this.localPoint = window.sgworld.Creator.CreateImageLabel( |
| | | position, |
| | | config.StaticFileBaseUrl + "/Workers/image/mark.png", |
| | | {}, |
| | | 0, |
| | | "标签点" |
| | | ); |
| | | var id = this.localPoint.item.id; |
| | | window.sgworld.Navigate.flyToObj(this.localPoint.item); |
| | | this.localPoint = window.Viewer.entities.add({ |
| | | name: '坐标定位', |
| | | position: Cesium.Cartesian3.fromDegrees(parseFloat(res.lon), parseFloat(res.lat), res.alt == null ? 0 : parseFloat(res.alt)), |
| | | billboard: { |
| | | image: config.StaticFileBaseUrl + '/Workers/image/location.png', |
| | | // 设置贴地 |
| | | heightReference: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.4), |
| | | verticalOrigin: Cesium.VerticalOrigin.BOTTOM, |
| | | scale: 0.3, |
| | | }, |
| | | }); |
| | | this.setViewerFlyTo(this.localPoint) |
| | | }, |
| | | setLocalPositionClose() { |
| | | this.localPoint.deleteObject(); |
| | | this.localPoint = null; |
| | | if (this.localPoint) { |
| | | // this.localPoint.deleteObject(); |
| | | window.Viewer.entities.remove(this.localPoint) |
| | | this.localPoint = null; |
| | | } |
| | | |
| | | }, |
| | | //坡度分析 |
| | | setSlopeMap() { |
| | | |
| | | |
| | | if (window.esriLayer) { |
| | | this.setCloseEsriLayer(); |
| | | return |
| | | } |
| | | sgworld.Creator.createSimpleGraphic('rectangle', {}, (entity) => { |
| | | if (entity) { |
| | | var west = Cesium.Math.toDegrees( |
| | | entity.rectangle._coordinates.getValue().west |
| | | ); // 根据弧度获取到经度 |
| | | var east = Cesium.Math.toDegrees( |
| | | entity.rectangle._coordinates.getValue().east |
| | | ); // 根据弧度获取到纬度 |
| | | var north = Cesium.Math.toDegrees( |
| | | entity.rectangle._coordinates.getValue().north |
| | | ); // 根据弧度获取到经度 |
| | | var south = Cesium.Math.toDegrees( |
| | | entity.rectangle._coordinates.getValue().south |
| | | ); // 根据弧度获取到纬度 |
| | | sgworld.Creator.SimpleGraphic.clear(); |
| | | this.legendBox = [ |
| | | west, south, east, north |
| | | ] |
| | | this.addTMSLayer(this.legendBox) |
| | | } |
| | | }); |
| | | |
| | | }, |
| | | |
| | | |
| | | addTMSLayer(obj) { |
| | | |
| | | var esri = new Cesium.WebMapServiceImageryProvider({ |
| | | url: config.esri, |
| | | name: 'esriLayer', |
| | | rectangle: Cesium.Rectangle.fromDegrees(obj[0], obj[1], obj[2], obj[3]), |
| | | crs: 'EPSG:4326', |
| | | //transparent: true |
| | | parameters: { |
| | | format: "image/png", |
| | | layers: [0] |
| | | } |
| | | }); |
| | | window.esriLayer = Viewer.imageryLayers.addImageryProvider(esri); |
| | | store.state.showlegendLayer = true; |
| | | }, |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | setSlopeMap1() { |
| | | const globe = Viewer.scene.globe; |
| | | if (window.material) { |
| | | window.material = null; |
| | | globe.material = null; |
| | | Viewer.scene.globe.enableLighting = false; |
| | | store.state.slopeQueyFlag = false; |
| | | store.state.showSlopeQuey = false; |
| | | return; |
| | | } |
| | | store.state.slopeQueyFlag = true; |
| | | window.material = new Cesium.Material({ |
| | | fabric: { |
| | | type: "ElevationRamp", |
| | | uniforms: { |
| | | image: config.StaticFileBaseUrl + "Assets/Images/color.png", |
| | | image: config.StaticFileBaseUrl + "Assets/Images/colors75.png", |
| | | minimumHeight: -10000, |
| | | maximumHeight: 10000, |
| | | |
| | | }, |
| | | }, |
| | | }); |
| | | |
| | | Viewer.scene.globe.material = window.material; |
| | | }, |
| | | setImageLayerChange() { |
| | | if (window.esriLayer) { |
| | | Viewer.imageryLayers.raiseToTop(window.esriLayer); |
| | | |
| | | } |
| | | if (this.imageryProvider) { |
| | | Viewer.imageryLayers.raiseToTop(this.imageryProvider); |
| | | } |
| | | }, |
| | | //等高线 |
| | | setcontour() { |
| | | // if (this.imageryProvider) { |
| | | // Viewer.imageryLayers.remove(this.imageryProvider); |
| | | // this.imageryProvider = null; |
| | | // return |
| | | // } |
| | | // var that = this; |
| | | // var imageryProvider = new Cesium.UrlTemplateImageryProvider({ |
| | | // url: 'http://192.168.20.83:80/Moon/LFData/2d/tiles/contour_500/{mz}/{my}/{mx}.png', |
| | | // tilingScheme: new Cesium.GeographicTilingScheme(), |
| | | // customTags: { |
| | | // mz: function (imageryProvider, x, y, level) { |
| | | // return 'L' + that.zeroFill(level + 1, 2, 10); // 注意观测,层级加1了 |
| | | // }, |
| | | // mx: function (imageryProvider, x, y, level) { |
| | | // return 'C' + that.zeroFill(x, 8, 16); |
| | | // }, |
| | | // my: function (imageryProvider, x, y, level) { |
| | | // return 'R' + that.zeroFill(y, 8, 16); |
| | | // } |
| | | // } |
| | | // }); |
| | | // this.imageryProvider = Viewer.imageryLayers.addImageryProvider(imageryProvider); |
| | | var globe = window.Viewer.scene.globe; |
| | | if (window.material) { |
| | | window.material = null; |
| | | globe.material = null; |
| | | |
| | | store.state.slopeQueyFlag = false; |
| | | store.state.showSlopeQuey = false; |
| | | |
| | | return; |
| | | } |
| | | |
| | |
| | | contourUniforms.spacing = 100.0; |
| | | contourUniforms.color = contourColor; |
| | | globe.material = window.material; |
| | | |
| | | }, |
| | | |
| | | zeroFill(num, len, radix) { |
| | | var str = num.toString(radix || 10) |
| | | while (str.length < len) { |
| | | str = '0' + str |
| | | } |
| | | |
| | | return str; |
| | | }, |
| | | //线查询 |
| | | spatialLineQuery() { |
| | |
| | | var line_data = this.setCartesianToEightFour(res[i]) |
| | | std.push([line_data.lng, line_data.lat]) |
| | | } |
| | | sgworld.Creator.SimpleGraphic.clear(); |
| | | this.setShowSpatialShp(std, 'polyline') |
| | | |
| | | |
| | | var line = turf.lineString(std, { name: "polyline" }) |
| | | var restVal = turf.buffer(line, this.bufferSize, { units: "meters" }) |
| | | that.setSpatialQuery(restVal) |
| | | }); |
| | | }, |
| | | |
| | | spatialPointQuery() { |
| | | var that = this; |
| | | sgworld.Creator.createSimpleGraphic('point', {}, (entity) => { |
| | | var res = entity.position.getValue(); |
| | | var val = that.setCartesianToEightFour(res) |
| | | sgworld.Creator.SimpleGraphic.clear(); |
| | | that.setShowSpatialShp(val, 'Point') |
| | | var options = { |
| | | steps: 10, |
| | | units: "meters", |
| | |
| | | that.setSpatialQuery(circle) |
| | | }); |
| | | }, |
| | | setShowSpatialShp(res, type) { |
| | | var position = []; |
| | | |
| | | var name = '空间查询_标绘' |
| | | switch (type) { |
| | | case 'polyline': |
| | | for (var i in res) { |
| | | position.push(res[i][0], res[i][1]) |
| | | } |
| | | window.Viewer.entities.add({ |
| | | name: name, |
| | | polyline: { |
| | | positions: Cesium.Cartesian3.fromDegreesArray(position), |
| | | width: 3.0, |
| | | material: new Cesium.PolylineOutlineMaterialProperty({ |
| | | color: new Cesium.Color.fromCssColorString('#A6D8AE').withAlpha(0.5), |
| | | outlineWidth: 1, |
| | | outlineColor: new Cesium.Color.fromCssColorString('#A6D8AE'), |
| | | }), |
| | | clampToGround: true, |
| | | |
| | | }, |
| | | }) |
| | | break; |
| | | case 'Point': |
| | | window.Viewer.entities.add({ |
| | | name: name, |
| | | position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat), |
| | | point: { |
| | | color: new Cesium.Color.fromCssColorString('#A6D8AE').withAlpha(0.5), |
| | | pixelSize: 20, |
| | | heightReference: Cesium.HeightReference.CLAMP_TO_GROUND |
| | | } |
| | | }); |
| | | break; |
| | | case 'Polygon': |
| | | window.Viewer.entities.add({ |
| | | name: name, |
| | | polygon: { |
| | | hierarchy: { positions: Cesium.Cartesian3.fromDegreesArray(res) }, |
| | | outline: true, |
| | | outlineWidth: 100, |
| | | arcType: Cesium.ArcType.RHUMB, |
| | | material: new Cesium.Color.fromCssColorString('#A6D8AE').withAlpha(0.5), |
| | | outline: true, // height is required for outline to display |
| | | outlineColor: new Cesium.Color.fromCssColorString('#A6D8AE') |
| | | } |
| | | }); |
| | | break; |
| | | } |
| | | |
| | | }, |
| | | |
| | | setCartesianToEightFour(res) { |
| | | var std = {} |
| | | let ellipsoid = Viewer.scene.globe.ellipsoid |
| | |
| | | var south = Cesium.Math.toDegrees( |
| | | entity.rectangle._coordinates.getValue().south |
| | | ); // 根据弧度获取到纬度 |
| | | |
| | | var arr = [west, north, east, north, east, south, west, south, west, north]; |
| | | this.setShowSpatialShp(arr, 'Polygon') |
| | | |
| | | sgworld.Creator.SimpleGraphic.clear(); |
| | | |
| | | var polygon = turf.polygon([ |
| | |
| | | break; |
| | | case "l3": //在线制图 |
| | | store.state.isShowMap = true; |
| | | this.setThematicMap(); |
| | | setTimeout(() => { |
| | | this.setThematicMap(); |
| | | }, 200); |
| | | |
| | | break; |
| | | case "l4": |
| | |
| | | var south1 = ss[1]; |
| | | this.exportSquare = ss; |
| | | var geometry = Cesium.Rectangle.fromDegrees(west1, south1, east1, north1); |
| | | |
| | | |
| | | |
| | | Viewer.camera.setView({ |
| | | destination: Cesium.Rectangle.fromDegrees(west, south, east, north), |
| | | }); |
| | | |
| | | |
| | | |
| | | setTimeout(() => { |
| | | window.functionForJs({ |
| | | type: "exportMap", |
| | |
| | | }, |
| | | // 创建图形 |
| | | createSimpleGraphic(type, scene) { |
| | | var that = this; |
| | | sgworld.Creator.createSimpleGraphic(type, {}, (entity) => { |
| | | |
| | | if (scene === "square") { |
| | | this.createRectangle(entity); |
| | | } |
| | | if (!scene) { |
| | | temporaryTool.setInsertEntityObj(type, entity) |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | colorRgbToHex(str) { |
| | | |
| | | let reg = /^(rgb|RGB)/; |
| | | if (!reg.test(str)) { return; } |
| | | var rgb = str.slice(4, str.length - 1).split(",") |
| | | // 将RGB色号拆分为红、绿、蓝三个通道的值 |
| | | var r = parseInt(rgb[0]); |
| | | var g = parseInt(rgb[1]); |
| | | var b = parseInt(rgb[2]); |
| | | |
| | | |
| | | return "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0'); |
| | | |
| | | |
| | | }, |
| | | |
| | | //在线制图 |
| | | setThematicMap() { |
| | | |
| | | earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE2D; |
| | | // var handle = new SmartEarth.Cesium.ScreenSpaceEventHandler( |
| | | // earthCtrl.viewer.scene.canvas |
| | |
| | | window.Volumetric.deleteObject(); |
| | | window.Volumetric = null; |
| | | } |
| | | Viewer.scene.globe.depthTestAgainstTerrain = true |
| | | Viewer.scene.pickTranslucentDepth = true |
| | | window.Volumetric = earthCtrl.analysis.createVolumetricMeasure({}); |
| | | window.Volumetric.startDrawing(); |
| | | }, |
| | |
| | | }, |
| | | //线漫游 |
| | | lineRoam() { |
| | | Viewer.scene.globe.depthTestAgainstTerrain = true; |
| | | // 绘制路线并获取路径动画数据 |
| | | earthCtrl.Command.execute(2, 3, "", (data) => { |
| | | |
| | | data.showPoint = false; |
| | | data.showLine = true; |
| | | data.mode = 1; |
| | | data.mode = 0; |
| | | // 弹窗数据 |
| | | window.PathAnimationData = { |
| | | flyData: data, |
| | |
| | | }, |
| | | }); |
| | | }); |
| | | |
| | | }, |
| | | //清除按钮 |
| | | clearALL(id) { |
| | |
| | | |
| | | // }); |
| | | }, |
| | | setCloseEsriLayer() { |
| | | if (window.esriLayer) { |
| | | Viewer.imageryLayers.remove(window.esriLayer); |
| | | window.esriLayer = null |
| | | this.legendBox = null; |
| | | store.state.showlegendLayer = false; |
| | | } |
| | | }, |
| | | //清除方法 |
| | | clearTopTools(id) { |
| | | store.state.doubleMap = false; |
| | | store.state.doubleMenu = false; |
| | | this.setCloseEsriLayer(); |
| | | if (earthCtrl.shadows) { |
| | | Viewer.animation.container.style.visibility = "hidden"; |
| | | Viewer.timeline.container.style.visibility = "hidden"; |
| | | Viewer.clock.shouldAnimate = false; |
| | | return (earthCtrl.shadows = false); |
| | | Viewer.scene.globe.enableLighting = false; |
| | | earthCtrl.shadows = false; |
| | | return |
| | | } |
| | | if (window.Volumetric) { |
| | | window.Volumetric.deleteObject(); |
| | |
| | | window.material = null; |
| | | globe.material = null; |
| | | Viewer.scene.globe.enableLighting = false; |
| | | return; |
| | | store.state.slopeQueyFlag = false; |
| | | store.state.showSlopeQuey = false; |
| | | } |
| | | if (this.imageryProvider) { |
| | | Viewer.imageryLayers.remove(this.imageryProvider) |
| | | this.imageryProvider = null; |
| | | } |
| | | if (window.DoubleScreen) { |
| | | window.DoubleScreen && window.DoubleScreen.destroy(); |
| | |
| | | //空间查询属性定位 |
| | | spaceLocation(res) { |
| | | var name = '空间查询'; |
| | | |
| | | this.setClearLocation(name); |
| | | switch (res.type) { |
| | | case 'MultiPolygon': |
| | |
| | | outline: true, |
| | | outlineWidth: 100, |
| | | arcType: Cesium.ArcType.RHUMB, |
| | | material: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.4), |
| | | material: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.5), |
| | | outline: true, // height is required for outline to display |
| | | outlineColor: Cesium.Color.DODGERBLUE, |
| | | } |
| | | |
| | | }); |
| | | this.setViewerFlyTo(locationPolygonEntity) |
| | | window.Viewer.flyTo(locationPolygonEntity, { |
| | | offset: { |
| | | heading: Cesium.Math.toRadians(0.0), |
| | | pitch: Cesium.Math.toRadians(-90), |
| | | range: 40 |
| | | } |
| | | } |
| | | ); |
| | | }, |
| | | setLocationPoint(res, name) { |
| | | const position = window.Viewer.entities.add({ |
| | |
| | | billboard: { |
| | | image: config.StaticFileBaseUrl + '/Workers/image/location.png', |
| | | // 设置贴地 |
| | | heightReference: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.4), |
| | | heightReference: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.5), |
| | | verticalOrigin: Cesium.VerticalOrigin.BOTTOM, |
| | | scale: 5.0, |
| | | scale: 0.3, |
| | | }, |
| | | }); |
| | | |
| | | this.setViewerFlyTo(position) |
| | | window.Viewer.flyTo(position, { |
| | | offset: { |
| | | heading: Cesium.Math.toRadians(0.0), |
| | | pitch: Cesium.Math.toRadians(-45), |
| | | range: 40000 |
| | | } |
| | | }); |
| | | }, |
| | | setViewerFlyTo(entity) { |
| | | |
| | | window.Viewer.flyTo(entity, { |
| | | offset: { |
| | | heading: Cesium.Math.toRadians(0.0), |
| | |
| | | positions: Cesium.Cartesian3.fromDegreesArray(position), |
| | | width: 10.0, |
| | | material: new Cesium.PolylineOutlineMaterialProperty({ |
| | | color: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.4), |
| | | color: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.5), |
| | | outlineWidth: 1, |
| | | outlineColor: Cesium.Color.CORNFLOWERBLUE, |
| | | }), |
| | |
| | | |
| | | }, |
| | | }) |
| | | this.setViewerFlyTo(polyline) |
| | | window.Viewer.flyTo(polyline, { |
| | | offset: { |
| | | heading: Cesium.Math.toRadians(0.0), |
| | | pitch: Cesium.Math.toRadians(-90), |
| | | range: 0 |
| | | } |
| | | } |
| | | ); |
| | | } |
| | | |
| | | }; |