代码更新

surprise

2024-03-01 12075d0fa73d963ff5d6dbc4727fb95fb6084961

 src/assets/js/Map/menuTool.js

@@ -5,6 +5,8 @@
import CryptoJS from "crypto-js";
// import { Store } from "vuex";
import store from "@/store";
import temporaryTool from "./temporaryTools";
import { getToken } from "@/utils/auth";
const menuTool = {
  toolMenu: null,
  toolFlag: null,
@@ -17,8 +19,16 @@
    polyline: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050"),
    polygon: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050"),
  },
  exportSquare: null,
  imageryProvider: null,
  legendBox: null,
  Point1: false,
  topTools(res) {
    this.toolFlag = res.id;


    Viewer.scene.globe.depthTestAgainstTerrain = false
    Viewer.scene.pickTranslucentDepth = false
    switch (res.id) {
      case "a2": //点漫游
        this.pointRoam();
@@ -73,12 +83,15 @@
        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": //坐标定位
@@ -92,64 +105,185 @@
      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)
      }
    });

  },
  getLayrUrl(res) {
    var url;
    if (res.indexOf('{token}')>-1) {
      const token = getToken();

      url = config.proxy + res.replaceAll("{token}", token);
    } else {
      url = res;
    }
    return url;
  },

  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;
    }

@@ -166,6 +300,16 @@
    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() {
@@ -177,17 +321,23 @@
        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",
@@ -197,6 +347,59 @@
      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
@@ -224,6 +427,10 @@
        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([
@@ -308,7 +515,9 @@
        break;
      case "l3": //在线制图
        store.state.isShowMap = true;
        this.setThematicMap();
        setTimeout(() => {
          this.setThematicMap();
        }, 200);

        break;
      case "l4":
@@ -366,16 +575,11 @@
    var east1 = ss[2];
    var north1 = ss[3];
    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",
@@ -385,14 +589,37 @@
  },
  // 创建图形
  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
@@ -427,6 +654,8 @@
    window.rightViewer.imageryLayers.removeAll();
    window.rightViewer = DoubleScreen.right._Viewer;
    window.rightViewer.animation.container.style.visibility = "hidden";
    window.rightViewer.scene.sun.show = false; //隐藏太阳和月亮 
    window.rightViewer.scene.moon.show = false;
    // window.rightViewer.timeline.container.style.visibility = "hidden";
    //大气层
    window.rightViewer.scene.globe.showGroundAtmosphere = false;
@@ -448,6 +677,8 @@
      window.Volumetric.deleteObject();
      window.Volumetric = null;
    }
    Viewer.scene.globe.depthTestAgainstTerrain = true
    Viewer.scene.pickTranslucentDepth = true
    window.Volumetric = earthCtrl.analysis.createVolumetricMeasure({});
    window.Volumetric.startDrawing();
  },
@@ -480,14 +711,128 @@
  },
  //点漫游
  pointRoam() {
    earthCtrl.Analysis.setPointFly();
    store.state.menuFlag = "pointRoam"
 
    Viewer.scene.globe.depthTestAgainstTerrain = true;
    let tooltip = earthCtrl.Core.CreateTooltip();
    let isFly = false, PointFly;
    let distance = 2000 //设置距离选择点观察的初始高度
    //设置鼠标样式
    earthCtrl.Core.mouse(earthCtrl.Viewer.container, 1, SmartEarthRootUrl + 'Workers/image/cursor/draw.cur');
    const pickHandler = new Cesium.ScreenSpaceEventHandler(earthCtrl.Viewer.scene.canvas);
    const end = () => {
      //提示词关闭
      tooltip.show(false);
      pickHandler && pickHandler.destroy();
      //鼠标样式恢复
      earthCtrl.Core.mouse(earthCtrl.Viewer.container, 0);
      PointFly.end(); //移除旋转视角飞行
    }
    const fly = (degree) => {
      const duration = 3 // 从起始点飞到选择的点位时间
      //回调绕飞
      const callback = function () {
        PointFly = earthCtrl.Analysis.setPointFly({
          position: Cesium.Cartesian3.fromDegrees(degree.lon, degree.lat, degree.height+2000),
          distance: distance,
        })
      }
      earthCtrl.camera.flyTo(degree.lon, degree.lat, 100000, 0, -90, 0, duration, callback)
    }
    pickHandler.setInputAction(function (movement) {
      if (!isFly) {
        tooltip.showAt(movement.position, '点击结束绕飞');
        isFly = true;
        let degree = earthCtrl.Navigate.getMouseDegrees(movement);
        fly(degree)
      } else {
        end();
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    pickHandler.setInputAction(function (movement) {
      !isFly && tooltip.showAt(movement.endPosition, '点击选择定位点');
      isFly && tooltip.showAt(movement.endPosition, '点击结束绕飞');
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    pickHandler.setInputAction(function (movement) {
      distance -= movement * distance / 300;
      distance < 1 && (distance = 1);
      PointFly.distance = distance
    }, Cesium.ScreenSpaceEventType.WHEEL);

    // earthCtrl.Analysis.setPointFly({distance:5000});
    // earthCtrl.measure.pickPosition({}, (e) => {
    //   Viewer.scene.globe.depthTestAgainstTerrain = false;
    //   const lon = e.result.longitude
    //   const lat = e.result.latitude
    //   const alt = e.result.alt
    //   const hei = 10000 //飞行到点位的高度
    //   const heading = 0
    //   const pitch = -90
    //   const roll = 0
    //   const duration = 3 //飞行时间
    //   //标记选择的点位为红点
    //   const Point1 = earthCtrl.factory.createPoint({
    //     id: earthCtrl.factory.createUUID(),
    //     name: '点击的点',
    //     lon: lon,
    //     lat: lat,
    //     alt: 300,
    //     pixelSize: 15,
    //     color: SmartEarth.Cesium.Color.fromCssColorString("#ff0000"),
    //     outlineColor: SmartEarth.Cesium.Color.BLACK,
    //     outlineWidth: 1,
    //   });
    //  this.Point1 =  earthCtrl.factory.createBillboard({
    //     name: "标签点",
    //     id: earthCtrl.factory.createUUID(),
    //     image:imageUrl+"/img/mark.png",
    //     width:16,
    //     height:22,
    //     lon: lon,
    //     lat: lat,
    //     alt: 10,
    //     scale: 1.5,
    // });





    //   //回调绕飞
    //   const callback = () => {
    //     earthCtrl.tools.clearTool();//结束拾取
    //     const useTime = 5 //单位秒
    //     //旋转绕飞
    //     const roate = earthCtrl.camera.rotateCamera({
    //       lon: lon,
    //       lat: lat,
    //       distance: hei,
    //       pitch: -30,
    //       time: useTime
    //     })
    //     const timeout = setTimeout(() => {
    //       roate.removeFromMap(); //移除旋转视角锁定
    //       clearTimeout(timeout)
    //       this.Point1.removeFromMap()
    //     }, useTime * 1000);
    //   }
    //   //飞行
    //   earthCtrl.camera.flyTo(lon, lat, hei, heading, pitch, roll, duration, callback)


    // })
  },
  //线漫游
  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,
@@ -505,6 +850,7 @@
        },
      });
    });

  },
  //清除按钮
  clearALL(id) {
@@ -513,15 +859,26 @@

    // });
  },
  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();
@@ -536,7 +893,12 @@
      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();
@@ -557,7 +919,6 @@
  //空间查询属性定位
  spaceLocation(res) {
    var name = '空间查询';

    this.setClearLocation(name);
    switch (res.type) {
      case 'MultiPolygon':
@@ -597,12 +958,20 @@
        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({
@@ -611,15 +980,22 @@
      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),
@@ -642,7 +1018,7 @@
        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,
        }),
@@ -650,7 +1026,14 @@

      },
    })
    this.setViewerFlyTo(polyline)
    window.Viewer.flyTo(polyline, {
      offset: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-90),
        range: 0
      }
    }
    );
  }

};