Cesium 基本知识、控件、坐标、相机、实体、实体删除、数据加载

已于 2024-05-24 08:04:03 修改
阅读量31 收藏
点赞数
文章标签： vue.js 前端 图像处理 javascript
于 2024-05-24 08:03:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhushanlin/article/details/139161589
版权

1、viewer是操控地图api的开始

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  const viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,//隐藏动画控件
    timeline: false,//隐藏时间轴
    geocoder: false,//隐藏搜索按钮
    homeButton: false,//隐藏主页按钮
    sceneModePicker: false,//隐藏投影方式按钮
    baseLayerPicker: false,//隐藏图层选择按钮
    navigationHelpButton: false,//隐藏帮助按钮
    fullscreenButton: false,//隐藏全屏按钮
  })
})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

2、坐标转换

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  const viewer = new Cesium.Viewer('cesiumContainer', {})

  // 实例化一个笛卡尔坐标(x轴，y轴，z轴) z轴不是高度
  const position = new Cesium.Cartesian3(100, 100, 100)
  console.log(position)

  // 经纬度转笛卡尔(经度，纬度，高度)  高度可以不传  默认是0  高度是相对于地表高度 单位是米
  const Cartesian1 = Cesium.Cartesian3.fromDegrees(110, 20)
  const Cartesian2 = Cesium.Cartesian3.fromDegrees(110, 20, 100)
  console.log(Cartesian1)
  console.log(Cartesian2)

  // 笛卡尔转经纬度(分两步)
  // 1、笛卡尔转弧度坐标
  const Cartographic = Cesium.Cartographic.fromCartesian(Cartesian2)
  console.log(Cartographic) //高度在弧度坐标中
  // 2、弧度坐标转角度坐标
  let lon = Cesium.Math.toDegrees(Cartographic.longitude)
  let lat = Cesium.Math.toDegrees(Cartographic.latitude)
  // let lon = 180 / Math.PI * Cartographic.longitude
  // let lat = 180 / Math.PI * Cartographic.latitude
  console.log(lon, lat)
  // js小数位精度问题 0.1 + 0.2 != 0.3
})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

3、相机 setView、flyTo、lookAt

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  const viewer = new Cesium.Viewer('cesiumContainer', {
  })

  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跟setView相比带飞行动画，可以设置飞行时长
  // viewer.camera.flyTo({
  //   destination: position,
  //   duration: 3//飞行时长
  // })

  // lookAt将相机固定在设置的点位上，可以选择视角，不能改变位置
  const position2 = Cesium.Cartesian3.fromDegrees(110, 20)
  viewer.camera.lookAt(
    position2,
    new Cesium.HeadingPitchRange(
      Cesium.Math.toRadians(0),
      Cesium.Math.toRadians(-90),
      20000
    )
  )

})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

5、实体（点、线、多边形、盒子、椭圆、矩形）

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  const viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator: false,//隐藏选中框
    infoBox: false//隐藏右上角信息框
  })
  // 二维：    要素---->数据源---->图层---->地图
  // 三维：    实体---->地图

  // 点
  // 写法一：
  const point = new Cesium.Entity({
    position: Cesium.Cartesian3.fromDegrees(120, 30),
    id: 'point', //唯一且必要
    point: {
      color: Cesium.Color.BLUE, //颜色
      pixelSize: 10//像素大小
    }
  })
  console.log(point)
  viewer.entities.add(point)  //地图添加实体

  // 写法二：
  const point2 = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(120, 31),
    id: 'point2',
    point: {
      color: Cesium.Color.RED, //颜色
      pixelSize: 10//像素大小
    }
  })
  // 标注
  const billboard = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116, 40, 30),
    billboard: {
      image: '/src/assets/position.png',
      scale: 0.3,
      color: new Cesium.Color(255 / 255, 0 / 255, 0 / 255) // 1对应255
    }
  })

  // 文本
  const label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(112, 30),
    label: {
      text: 'Cesium',
      showBackground: true,
      backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8),
      fillColor: Cesium.Color.YELLOWGREEN
    }
  })

  // 线  
  const polyline = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([120, 20, 121, 20, 121, 21]), //得到一个笛卡尔坐标数组
      width: 10,
      material: Cesium.Color.fromCssColorString('#fff'), //颜色字符串
    }
  })


  // 多边形
  const polygon = viewer.entities.add({
    polygon: {
      hierarchy: {
        positions: Cesium.Cartesian3.fromDegreesArray([120, 25, 121, 25, 121, 26]),
      },
      material: Cesium.Color.fromRandom().withAlpha(0.5), //随机颜色   带透明度
      height: 100000, //指定多边形相对于椭球表面的高度
      extrudedHeight: 200000, //指定多边形的凸出面相对于椭球面的高度
      outline: true,
      outlineColor: Cesium.Color.fromCssColorString('#fff'),
      fill: false //是否填充
    }
  })

  // 盒子
  const box = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(118, 30, 3000),
    box: {
      dimensions: new Cesium.Cartesian3(100, 200, 300),
      material: Cesium.Color.YELLOWGREEN
    }
  })


  // 椭圆
  const ellipse = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(119, 30),
    ellipse: {
      semiMajorAxis: 500,
      semiMinorAxis: 300,
      rotation: Math.PI / 4,
      material: Cesium.Color.BLUEVIOLET
    }
  })

  //矩形
  const rectangle = viewer.entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(120, 40, 123, 45),  //左下右上
      extrudedHeight: 30000,
      material: '/src/assets/dog.jpg'  //可以用自定义图片填充
    }
  })
  viewer.zoomTo(rectangle) //跳转到实体
})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

###5.1 组合实体

<template>
  <div id="cesiumContainer">
  </div>
  <button @click="toDel" class="btn">删除</button>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
// 二维：    100红点---->数据源---->图层---->地图  100蓝点---->数据源---->图层---->地图
// 三维：    把空数组当数据源使用
let redList = []
const toDel = () => {
  // 1、直接删除
  // viewer.entities.remove(point)
  // 2、通过ID删除
  // viewer.entities.removeById('point666')
  // 3、先查后删
  // const entity = viewer.entities.getById('point666')
  // viewer.entities.remove(entity)
  // 4、全部删除
  // viewer.entities.removeAll()
  // 5、分类删除
  // redList.forEach(item => {
  //   viewer.entities.remove(item)
  // })
  // redList = []  //不要忘了
}
let viewer, point
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator: false,//隐藏选中框
    infoBox: false//隐藏右上角信息框
  })

  point = viewer.entities.add({
    id: 'point666',
    position: Cesium.Cartesian3.fromDegrees(121, 30),
    point: {
      pixelSize: 20,
      color: Cesium.Color.RED
    }
  })
  redList.push(point)
  let red1 = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(121.0001, 30),
    point: {
      pixelSize: 20,
      color: Cesium.Color.RED
    }
  })
  redList.push(red1)
  let red2 = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(121.0002, 30),
    point: {
      pixelSize: 20,
      color: Cesium.Color.RED
    }
  })
  redList.push(red2)

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(121.0004, 30),
    point: {
      pixelSize: 20,
      color: Cesium.Color.BLUE
    }
  })
  viewer.zoomTo(point)
})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.btn {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 999;
}
</style>

6、数据加载（topojson、kmz）

<template>
  <div id="cesiumContainer">
  </div>
  <button @click="toDel" class="btn">删除</button>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
const toDel = () => {
  viewer.dataSources.removeAll()
}
let viewer
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    // selectionIndicator: false,//隐藏选中框
    // infoBox: false//隐藏右上角信息框
  })
  // 加载GeoJson数据
  // const linestring = turf.lineString([[-24, 63], [-23, 60], [-25, 65], [-20, 69]]);
  // const promise = Cesium.GeoJsonDataSource.load(linestring)
  // promise.then(res => {
  //   const entity = res.entities.values[0]
  //   viewer.entities.add(entity)
  // })

  // const polygon = turf.polygon([[[-5, 52], [-4, 56], [-7, 54], [-5, 52]]]);
  // Cesium.GeoJsonDataSource.load(polygon).then(res => {
  //   viewer.dataSources.add(res)
  //   viewer.zoomTo(res)
  // })

  // const multiLine = turf.multiLineString([[[0, 0], [4, 4]], [[6, 6], [10, 10]]]);
  // const promise = Cesium.GeoJsonDataSource.load(multiLine)
  // viewer.dataSources.add(promise)
  // viewer.zoomTo(promise)

  // 加载topoJson数据
  // const promise = Cesium.GeoJsonDataSource.load('/src/assets/usa.topojson')
  // viewer.dataSources.add(promise)
  // viewer.zoomTo(promise)

  // 加载kml数据
  const promise = Cesium.KmlDataSource.load('/src/assets/gdp2008.kmz')
  viewer.dataSources.add(promise)
  viewer.zoomTo(promise)
})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.btn {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 999;
}
</style>
@仗剑走天涯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Cesium：获取某个entity的位置属性 Cartesian3
KaiSarH
08-31 4147
cesium中获取某个entity的位置属性 Cartesian3
Cesium根据经纬度获得该位置的实体+实体闪烁
Y13349887034的博客
01-10 661
cesium坐标转换，根据经纬度计算屏幕坐标，简易实体闪烁
cesium 定位到实体
weixin_39238200的博客
04-12 862
cesium 定位到实体
cesium编程入门(九)实体 Entity
weixin_30911809的博客
02-07 338
cesium编程入门(九)实体 Entity 在cesium编程入门(五)绘制形状提到过添加实体的方法，这一节聊一聊实体相关的一些内容： 先来看 Entity 的各个属性 id 唯一标志，如果没设置，值就为一个默认给定的GUID name 名称，可以不唯一 availability 可用性 show 可见性 description 描述 position 位置 orientation 方向 vi...
5.Cesium中的Entity(实体)和各种图形
玖玖年的程序猿
12-22 3136
Entity的常用属性和方法
Cesium结合Canvas画布创建billboard实体
09-16
使用了Cesium，并且有Canvas画布生成图片，用于billboard实体，详细请查看博客：https://blog.csdn.net/qq_35984445/article/details/132920793
Cesium实体加载演示案例
01-09
Cesium实体加载演示案例，根据Cesium官网提供的两种实体加载接口，在Vue+Cesium项目中实现了entity和primitive两种实体加载方式演示案例。
Cesium加载OSGB倾斜摄影数据Demo
06-01
Cesium加载OSGB倾斜摄影数据Demo，内附由OSGB倾斜摄影数据转换的Cesium3DTile数据，可直接运行。另：原始的OSGB倾斜摄影数据以及转换工具也可以由本人提供的资源进行下载。
Cesium 坐标转换,cesium坐标系
09-11
本篇将深入探讨Cesium中的坐标转换及其相关知识。 首先，我们要知道在Cesium中主要涉及的坐标系有以下几种： 1. WGS84（World Geodetic System 1984）：这是一个全球通用的大地坐标系，基于地球椭球体模型，是GPS...
43.（cesium篇）cesium加载gif图片.zip
06-09
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“43.（cesium篇）cesium加载gif图片”。如下载有问题，可联系博主。 解压密码：cesium
Cesium图标聚合中，获取脱离聚合的实体
最新发布
cyrna的博客
04-30 90
这个arrCluster 就是当前参与了聚合的所有实体了，然后再与自己的标绘数据比较就可以找到所有未参与聚合的实体并进行处理了。希望Cesium以后可以提供脱离聚合的数据吧。然后我发现在dataSource.clustering._clusterPointCollection._pointPrimitives中放置了当前的聚合数据；但在我的项目中，需要对当前脱离聚合的图标再进行一些处理，哪些实体脱离了聚合呢？在Cesium的官方图标聚合例子中，我们通过添加监听可以很容易的获取到当前聚合的实体列表，见。
Cesium笔记 获取实体位置并转化为经纬度坐标
qq_40216244的博客
08-18 1860
Cesium 获取实体经纬度位置
cesium的四种点击拾取方法
DTCloud
04-20 2360
通过坐标位置，拾取实体（Entity），图元（Primitive）,3DTiles对象，返回的是scene中指定位置最上层的对象。例如点击获取Entity的pick对象，通过pick.id可以拾取当前的entity对象。拾取后，可以用于改变对象的属性参数，如颜色，图片等。：只能获取一个对象，并且是最顶部的对象。如果拾取点没有对象，则会返回undefined。
cesium根据id选中（绿色框）实体
Stranger6699的博客
05-25 1427
【代码】cesium根据id选中（绿色框）实体。
Ceisum实时获取后台数据 实时更新实体位置信息
yangwq的博客
05-27 6390
var viewer = new Cesium.Viewer('cesiumContainer', { infoBox : false, selectionIndicator : false, shadows : true, shouldAnimate : true }); var positions = []; var poly = undefined; var entityArr=[]; var PolyLinePrimitive = (function(){ .
3.Cesium中实体Entity创建(超详细)
热门推荐
极限突破者的博客
07-17 1万+
本文中，我将介绍 Cesium 中创建实体的方法，并对其进行分类，帮助读者快速理解 Cesium 中实体的类别，创建代码以及具体效果；
【Cesium学习笔记】entity实体构建
weixin_53880641的博客
01-10 1095
前面加载token#创建一个地球#添加实体#具体的一些操作，定义实体具体形状})#将相机固定在实体位置处。
cesium 投影cgs2000 坐标系的实体
05-24
Cesium支持使用CGS2000坐标系的实体。在Cesium中，可以使用Entity对象来表示具有位置、方向、尺寸、形状和其他属性的实体。要将实体放置在CGS2000坐标系中，需要指定实体的位置属性。这可以使用Cartesian3对象来完成，该对象表示在三维笛卡尔坐标系中的位置。要将CGS2000坐标转换为Cartesian3位置，可以使用Cesium提供的Ellipsoid和Cartesian3.fromDegrees方法。例如： ``` // 使用CGS2000坐标系的位置 var longitude = 120.0; var latitude = 30.0; var height = 1000.0; // 将CGS2000坐标转换为Cartesian3位置 var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height, Cesium.Ellipsoid.WGS84, new Cesium.Cartesian3()); // 创建实体并设置位置 var entity = viewer.entities.add({ position : position, // 其他实体属性... }); ``` 这将创建一个位置位于CGS2000坐标系中的实体，并将其添加到Cesium场景中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@仗剑走天涯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值