GisCesium一些功能封装

GisCesium官网地址

GisCesium初始化

  initGis() {
    let that = this;
    Cesium.Ion.defaultAccessToken ='key值';
      this.viewer = new Cesium.Viewer(this.element, {
      animation: this.option.animation || false, // 是否显示动画控件
      homeButton: this.option.homeButton || false, // 是否显示home键
      geocoder: this.option.geocoder || false, // 是否显示地名查找控件
      baseLayerPicker: this.option.baseLayerPicker || false, // 是否显示图层选择控件
      timeline: this.option.timeline || false, // 是否显示时间线控件
      fullscreenButton: this.option.fullscreenButton || false, // 是否全屏显示
      infoBox: this.option.infoBox || false, // 是否显示点击要素之后显示的信息
      sceneModePicker: this.option.sceneModePicker || false, // 是否显示投影方式控件  三维/二维
      navigationInstructionsInitiallyVisible:
        this.option.navigationInstructionsInitiallyVisible || false,
      navigationHelpButton: this.option.navigationHelpButton || false, // 是否显示帮助信息控件
      orderIndependentTranslucency:
        this.option.orderIndependentTranslucency || false,
      shouldAnimate: this.option.shouldAnimate || true,
      scene3DOnly: this.option.scene3DOnly || false, // 每个几何实例将只能以3D渲染以节省GPU内存
      selectionIndicator: this.option.selectionIndicator || false, // 取消点击有绿框
      sceneMode: Cesium.SceneMode.SCENE2D,
      mapMode2D: Cesium.MapMode2D.ROTATE
    });
    this.viewer._cesiumWidget._creditContainer.style.display = 'none';
    //this.viewer.scene.globe.terrainExaggeration = 18.0;
    // this.viewer.scene.terrainProvider = new Cesium.CesiumTerrainProvider({
    //     url: "http://172.20.234.125:8082/sdElevation",
    // });
    //设置初始摄像头位置 方法 setView 直接跳转 flyto 有过度动画 lookAt 视角锁定 viewBoundingSphere 三维顶点锁定
    this.viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(
        117.02355186605194,
        36.67742420109383,
        18634.9164642105
      ),
      duration: 5,
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90.0),
        roll: 0
      }
    });
    this.viewer.scene.globe.depthTestAgainstTerrain = true;
    this.nv.viewer = this.viewer
  }

相机视角重定向方法

flyto(params) {
    this.viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(
        params.lon,
        params.lat,
        params.height
      ),
      duration: 2,
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90.0),
        roll: 0
      }
    });
  }

获取当前鼠标点击的经纬度

 // 鼠标点击事件
  mouseClick() {
    let that = this;
    let ellipsoid = this.viewer.scene.globe.ellipsoid;
    let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    handler.setInputAction(function (event) {
      var earthPosition = that.viewer.camera.pickEllipsoid(
        event.position,
        that.viewer.scene.globe.ellipsoid
      );
      var cartographic = Cesium.Cartographic.fromCartesian(
        earthPosition,
        that.viewer.scene.globe.ellipsoid,
        new Cesium.Cartographic()
      );
      var lat = Cesium.Math.toDegrees(cartographic.latitude);
      var lng = Cesium.Math.toDegrees(cartographic.longitude);
      var height = ellipsoid.cartesianToCartographic(
        that.viewer.camera.position
      ).height;
      //打印当前点击坐标
      console.log('[Lng=>' + lng + ',Lat=>' + lat + ',H=>' + height + ']');
      var cameraParam = that.viewer.camera;
      var direction = cameraParam.direction;
      var pos = cameraParam.position;
      var right = cameraParam.right;
      var up = cameraParam.up;
      var viewerCenterPosition = {
        direction: direction,
        pos: pos,
        right: right,
        up: up
      };
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }

加载散点功能

  addLandMark(data, config) {
    let array = []
    var that = this;
    let landmark = {}
    data.forEach(item => {
      landmark = this.viewer.entities.add({
        id: item.id,
        position: Cesium.Cartesian3.fromDegrees(item.lon, item.lat, 0),
        billboard: {
          image: item.img,
          width: item.size.width, //一定要加！！
          height: item.size.height //一定要加！！
        },
        showPopup: item.showPopup,
        data: item.data,
        type: item.type || '',
        setView: item.setView || '',
        lon:item.lon,
        lat:item.lat
      });
      array.push(landmark)
    });
    this.landmarkList.push(array)
  }

添加标牌

  addClickMark() {
    var that = this;
    //添加散点点击功能
    var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    handler.setInputAction(function (movement) {
      //修复因为自适应scale缩放引起的坐标偏差
      movement.position.x = movement.position.x / that.scale;
      movement.position.y = movement.position.y / that.scale;
      var point = new Cesium.Cartesian2(
        movement.position.x,
        movement.position.y
      );
      var pick = that.viewer.scene.pick(movement.position);

      //debugger
      if (Cesium.defined(pick)) {
        //确认是否存在pick
        console.log(pick.id);
        //let entID = that.viewer.dataSources.entities.getById(pick.id.id);
        //console.log(entID);
        if (pick.id.showPopup) {
          console.log(pick.id);
          that.nv.$eventBus.$emit('addPopup', pick.id);
        }
        if(pick.id.setView){
          that.flyto({lon:pick.id.lon,lat:pick.id.lat,height:18634.9164642105})
        }
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }

添加热力图

addHeatMap(heatPoints) {
    let bounds = {
      west: 116,
      south: 36,
      east: 118,
      north: 38
    };
    let heatMap = CesiumHeatmap.create(
      this.viewer, // your cesium viewer
      bounds, // bounds for heatmap layer
      {
        radius: 10,
        // heatmap.js options go here
        // maxOpacity: 0.3
        gradient: {
          // the gradient used if not given in the heatmap options object
          '.3': '#d9e7fc',
          '.65': '#2a7aed',
          '.8': '#fbd801',
          '.95': '#18c3a1'
        }
      }
    );
    let data = [
      { x: 117.0449626368413, y: 36.63954481026545, value: 76 },
      { x: 117.15729272718127, y: 37.30826097926067, value: 63 },
      { x: 116.9946451088803, y: 36.64666654350774, value: 1 },
      { x: 117.02566398659755, y: 36.67216943729425, value: 21 },
      { x: 116.92555218147234, y: 36.700846175206784, value: 28 },
      { x: 116.92655427167166, y: 36.70232126776355, value: 41 },
      { x: 117.08069738104648, y: 36.64932850662347, value: 75 },
      { x: 117.05261300170432, y: 36.65937973619217, value: 76 },
      { x: 117.0795402479288, y: 36.649106559040966, value: 100 },
      { x: 117.09187645935566, y: 36.64468015649103, value: 80 },
      { x: 117.03748110968552, y: 36.608566758388804, value: 1 },
      { x: 116.99398876536601, y: 36.59350844121165, value: 21 },
      { x: 116.92714568862036, y: 36.702373107214804, value: 28 },
      { x: 117.077996532977, y: 36.65190961966299, value: 41 }
    ];
    let valueMin = 0;
    let valueMax = 20;
    heatMap.setWGS84Data(valueMin, valueMax, heatPoints);
  }

删除所有散点,标牌

  delLandMark() {
    this.viewer.entities.removeAll();
    this.nv.$eventBus.$emit('addPopup', '');
    this.viewer.dataSources.removeAll();
    this.landmarkList = []
    if (this.time) {
      for (let o in this.time) {
        this.time[o].forEach(item => {
          clearInterval(item)
        })
      }
    }
  }

获取当前屏幕的经纬度

  getViewExtend() {
    let params = {};
    let extend = this.viewer.camera.computeViewRectangle();
    if (typeof extend === 'undefined') {
      //2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
      let canvas = this.viewer.scene.canvas;
      let upperLeft = new Cesium.Cartesian2(0, 0); //canvas左上角坐标转2d坐标
      let lowerRight = new Cesium.Cartesian2(
        canvas.clientWidth,
        canvas.clientHeight
      ); //canvas右下角坐标转2d坐标

      let ellipsoid = this.viewer.scene.globe.ellipsoid;
      let upperLeft3 = this.viewer.camera.pickEllipsoid(upperLeft, ellipsoid); //2D转3D世界坐标

      let lowerRight3 = this.viewer.camera.pickEllipsoid(lowerRight, ellipsoid); //2D转3D世界坐标

      let upperLeftCartographic = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(
        upperLeft3
      ); //3D世界坐标转弧度
      let lowerRightCartographic = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(
        lowerRight3
      ); //3D世界坐标转弧度

      let minx = Cesium.Math.toDegrees(upperLeftCartographic.longitude); //弧度转经纬度
      let maxx = Cesium.Math.toDegrees(lowerRightCartographic.longitude); //弧度转经纬度

      let miny = Cesium.Math.toDegrees(lowerRightCartographic.latitude); //弧度转经纬度
      let maxy = Cesium.Math.toDegrees(upperLeftCartographic.latitude); //弧度转经纬度

      console.log('经度：' + minx + '----' + maxx);
      console.log('纬度：' + miny + '----' + maxy);

      params.minx = minx;
      params.maxx = maxx;
      params.miny = miny;
      params.maxy = maxy;
    } else {
      //3D获取方式
      params.maxx = Cesium.Math.toDegrees(extend.east);
      params.maxy = Cesium.Math.toDegrees(extend.north);

      params.minx = Cesium.Math.toDegrees(extend.west);
      params.miny = Cesium.Math.toDegrees(extend.south);
    }
    return params; //返回屏幕所在经纬度范围
  }

轨迹图

  DrawTransformCurve(params) {
    var data = {}
    let array = []
    let timeArray = []
    params.forEach(item => {
      data[item.name] = []
    })
    params.forEach(item => {
      for (let o in data) {
        if (item.name == o) {
          data[o].push(item)
        }
      }
    })
    //console.log(data,'看我看我2')
    for (let o in data) {
      this._entitys[data[o][0].name] = this.viewer.entities.add({
        id: data[o][0].name,
        position: Cesium.Cartesian3.fromDegrees(data[o][0].lon, data[o][0].lat, 0),
        billboard: {
          image: data[o][0].img,
          width: data[o][0].size.width, //一定要加！！！！！！！！
          height: data[o][0].size.height //一定要加！！！！！！！！
          //distanceDisplayCondition: new Cesium.DistanceDisplayCondition(2000, 2000000000)
        },
      });
      data[o].forEach((item, index) => {
        var time = setTimeout(() => {
          this.startTransfromEnt(item)
        }, 1000 * index);
        timeArray.push(time)
      })
      this.time[data[o][0].type] = timeArray
      array.push(this._entitys[data[o][0].name])
    }
    this.landmarkList.push(array)
  }