整理cesium开发过程中的一些基础操作

1.添加点位置信息,添加点位的同时可以加一些图片,cesium这里我用的就是广告牌了

  /******* 
     * @description: 添加点
     * @param {*} lng 点的经度
     * @param {*} lat 点的纬度
     * @param {*} Viewer 地图实例化对象
     * @param {*} Cesium 地图实例化对象
     * @param {*} sid 点的id
     * @param {*} type 点的类型
     * @return {*}
     */
    addPoint(lng, lat, Viewer, Cesium, sid,) {
        let point = Viewer.entities.add({
        id: sid,//这里是点的id保证唯一性
        name: '点',
        position: Cesium.Cartesian3.fromDegrees(lng, lat),//经纬度转世界坐标
        // point: {
        //     show: true,
        //     color: new Cesium.Color.fromCssColorString('#19E1C2'),
        //     pixelSize: 20,
        //     outlineColor: Cesium.Color.YELLOW,
        //     outlineWidth: 3,
        // }
        billboard: {
          //图像地址,UR或Canvas的属性就是
          image: url,
          // 设置颜色和透明度
          color: Cesium.Color.WHITE.withAlpha(0.8),
          // 高度(以像素为单位)
          height: 20,
          //宽度(以像素为单位)
          width: 20,
          //逆时针旋转
          // rotation: 20,
          //大小是否以米为单位
          sizelnMeters: false,
          //相对于坐标的垂直位置
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          //相对于坐标的水平位置
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          //该属性指定标签在屏幕空间中距此标签原点的像素偏移量
          // pixelOffset: new Cesium.Cartesian2(10, 0),
          //应用于图像的统一比例。比例大于会1.0放大标签,而比例小于会1.0缩小标签。
          scale: 1.0,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          //是否显示
          show: true
        }
         });
         },

点添加完之后如果要进行编辑我的做法是先找到当前这个点删掉,然后把编辑后的点在添加到地图上。

 /******* 
     * @description: 添加当前数据 
     * @param {*} item 当前数据
     * @return {*}
     */
    addTransmissionTower(item) {
      const radar = this.$_viewer.entities.getById(`lineid${item.line_id}`)
      if (radar) {
        this.$_viewer.entities.remove({ id: `lineid${item.line_id}` })
        this.getTSLinePointList()
      }
    },

当然了this.$_viewer.entities.getById()这个方法一定要保证数据在地图的唯一性

2.同样的道理线条的添加删除编辑也是一样的道理同样需要数据的唯一性,所以添加之前id要拼接一个唯一的字符串什么的,当然了线条的一些属性你也可以去添加,线条的编辑与删除也可以用上面的方法进行操作,先找到当前的线然后删除再去加载一条修改过的线,具体要怎么操作看个人的习惯就行

 addLine(msg, Viewer, Cesium, lineid) {
      // console.log(lineid)
      //点
      //线
      let line = Viewer.entities.add({
        id: lineid,
        name: '线',
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(msg),//经纬度数组转世界坐标,带高度的话是fromDegreesArrayHeights
          width: 2,
          material: Cesium.Color.fromCssColorString('#19E1C2'), //线的颜色
          clampToGround: true, //贴地
        }
      });
      // Viewer.flyTo(line)
    },
    
  addTransmissionTower(item) {
      const radar = this.$_viewer.entities.getById(`lineid${item.line_id}`)
      if (radar) {
        this.$_viewer.entities.remove({ id: `lineid${item.line_id}` })
        this.getTSLinePointList()
      }
    },

这样点线的操作就完成

3.电线操作完大家如果想要点击数据定位到当前的点位或线上 需要用到flyTo()或者 Viewer.camera.flyToBoundingSphere()但是两者使用不一样,一个是定位当前实体上,一个是定位到当前的经纬度上,所以需要的数据也是不一样的。
首先这个方法需要的是具体的经纬度,和一些角度指向的参数:
Viewer.camera.flyToBoundingSphere()

 cesiumLocation(Cesium, Viewer, location, config) {
            if (!location) return
            const { lng, lat, height } = location
            const position = this.GetDKRFromWGS84(Cesium, { lng, lat, height: height * 1 || 2000 })//笛卡尔坐标转换
            const boundingSphere = new Cesium.BoundingSphere(position, 100)
            const heading = Cesium.Math.toRadians(config ? config.heading : 0.0)
            const pitch = Cesium.Math.toRadians(config ? config.pitch : -90.0)
            const range = config ? config.range : 10.0
            Viewer.camera.flyToBoundingSphere(boundingSphere, {
                duration: 2,
                offset: new Cesium.HeadingPitchRange(heading, pitch, range)
                // orientation: {
                //   // 指向
                //   heading: heading,
                //   // 视角
                //   pitch: pitch,
                //   roll: 0.0,
                //   range: 5000,
                // },
            })
        },

然后flyTo()需要先找到当前的实体才行这里的id就是上面的数据的唯一的id:

  let findModel = this.$_viewer.entities.getById(id) 
                if (findModel) {
                   this.$_viewer.flyTo(findModel)
                } 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值