Vue和cesium

快乐的打工人
308 阅读3分钟

1. 如何获取token：

如何创建token.jpg

2. 创建viewer实例

在Vue项目中，需要等组件挂载完毕时，再创建实例viewer，所以需在生命周期onMounted中创建实例

<template>
  <div id="cesiumContainer"></div>
</template>

onMounted(() => {
    //token
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MTVlY2UyNi1mN2Y0LTQxMGEtOTM0NS1iODRkMGY5M2E1YWIiLCJpZCI6MTg5Mzg3LCJpYXQiOjE3MDUwNTk3ODV9.EgccaHp0LVSWP4mib4BYr7wgCmmvHuQR6jCuEkjYUf8'
    const viewer = new Cesium.Viewer('cesiumContainer');
}

3. 自定义图层（默认是谷歌的影像图层）

// ArfGIS影像图层
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    enablePickFeatures: false //是否点击地图获取查询图层的要素
  })
const viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: esri, //自定义图层  默认是谷歌的影像图层
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true //设置水面特效
    }), //地形图层
  });

4.控件

加载时页面会出现许多控件，以下是控制控件的显示隐藏

const viewer = new Cesium.Viewer('cesiumContainer', {
    timeline: false,//时间轴控件
    animation:false,//动画控件
    geocoder:false,//搜索按钮
    homeButton:false,//主页按钮
    sceneModePicker:false,//投影方式按钮
    baseLayerPicker:false,//图层选择
    fullscreenButton:false,//全屏按钮
  });

5.坐标转换

  • 经纬度转笛卡尔坐标

const cartesian = Cesium.Cartesian3.fromDegrees(110, 20, 20) //精度 纬度 高度

  • 笛卡尔坐标转经纬度（分两步转）

   // 1.笛卡尔转弧度坐标
  let cartographic = Cesium.Cartographic.fromCartesian(cartesian)
  // 2.弧度转角度
  let lon = Cesium.Math.toDegrees(cartographic.longitude)
  let lat = Cesium.Math.toDegrees(cartographic.latitude)

6.相机

- setView

   // 创建一个相机
   const position = Cesium.Cartesian3.fromDegrees(110, 20, 20000) //笛卡尔坐标
   // setView通过定义相机目的地（方向），直接跳转到目的地
   viewer.camera.setView({
   destination:position,
   orientation:{//默认（0，-90，0）
     heading:Cesium.Math.toRadians(0),//上下看
     pitch:Cesium.Math.toRadians(0),//左右看
     roll:Cesium.Math.toRadians(0),//歪头看
    }
  })

- flyTo

    // flyTo快速切换视角，带有飞行动画，可以设置飞行的时长
      viewer.camera.flyTo({
      destination: position,
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: Cesium.Math.toRadians(0)
      },
      duration: 3//设置飞行时长，单位秒
    })

-lookAt

    // lookAt可以将视角固定到设置的点位上，可以放大缩小   但是不能移动
      const position2 = Cesium.Cartesian3.fromDegrees(110, 20)
      viewer.camera.lookAt(
        position2,
        new Cesium.HeadingPitchRange(
          Cesium.Math.toRadians(0),
          Cesium.Math.toRadians(-90),
          20000
        )
      )

7.创建实体

-点（point）

 const poinit = viewer.entities.add({
    id: 'point',
    position: Cesium.Cartesian3.fromDegrees(121, 30),
    point: {
      pixelSize: 20,
      color: Cesium.Color.BLUE
    }
  })

-广告牌（billboard）

// 广告牌
  const billboard = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116, 40, 10),
    billboard: {
      image: '/src/assets/th.jpg', //图片地址
      scale: 0.1,
      // color: Cesium.Color.YELLOW
    }
  })

-文字（label）

//文字 
  const label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(119.558965, 37.004641),
    label: {
      text: '四方医药',
      fillColor: Cesium.Color.YELLOWGREEN,
      showBackground: true,
      backgroundColor: new Cesium.Color(255, 255, 0)
    }
  })

-线（polyline）

const polyline = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([120, 20, 121, 20, 121, 20.5]),//返回笛卡尔坐标数组
      width: 10,
      material: Cesium.Color.YELLOW
    }
  })

-多边形（polygon）

  // 多边形
  const polygon = viewer.entities.add({
    polygon: {
      hierarchy: {
        positions: Cesium.Cartesian3.fromDegreesArray([120, 25, 121, 25, 121, 25.5])
      },
      material: Cesium.Color.RED,
      height: 100000,
      extrudedHeight: 200000,
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      fill: false, //是否填充
    }
  })

-盒子模型（box）

  // 创建一个盒子模型
  const box = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(119, 30, 3000),
    box: {
      dimensions: new Cesium.Cartesian3(2000, 1000, 3000),
      material: Cesium.Color.BLUEVIOLET
    }
  })

-椭圆（ellipse）

  // 绘制椭圆
  const ellipse = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(118, 30),
    ellipse: {
      semiMajorAxis: 500, //半长轴
      semiMinorAxis: 300, //半短轴
      material: Cesium.Color.RED,
      rotation: Math.PI / 4
    }
  })

-矩形（rectangle）

// 创建矩形
  const rectangle = viewer.entities.add({
    rectangle:{
      coordinates:Cesium.Rectangle.fromDegrees(120,40,123,45),
      extrudedHeight:30000,
      material:'/src/assets/th.jpg'
    }
  })

-组合实体

  // 使用组合实体
  const eitity = viewer.entities.add({
    position:Cesium.Cartesian3.fromDegrees(120, 30, 100),
    billboard: {
      image: '/src/assets/th.jpg',
      scale: 0.1,
      color: Cesium.Color.RED
    },
    label: {
      text: '四方医药',
      font: '13px',
      fillColor: Cesium.Color.WHITE,
      pixelOffset:new Cesium.Cartesian2(0,-40)
    },
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([120, 30, 0, 120, 30, 100]),
      material: Cesium.Color.AQUA
    }
  })

8.删除实体

  // 根据ID删除
  viewer.entities.removeById('eitity1')
  // 直接删除
  viewer.entities.remove(eitity)
  // 删除所有
  viewer.entities.removeAll()
  // 先拿后删
  const a = viewer.entities.getById('eitity1')
  viewer.entities.remove(a)

动态线段

  let viewer, lon, lat, num = 0
// CallbackProperty会生成一个动态的实体
  const line = viewer.entities.add({
    polyline: {
      positions: new Cesium.CallbackProperty(() => {
        num += 0.0005
        lon = 120 + num
        lat = 30 + num
        if (lon <= 121) {
          return Cesium.Cartesian3.fromDegreesArray([120, 30, lon, lat])
        }else{
          line.polyline.positions = Cesium.Cartesian3.fromDegreesArray([120, 30, 121, 31])
        }
      }, false),
      width: 5,
      material: Cesium.Color.YELLOW
    }
  })
avatar
文章
阅读
粉丝