cesium的使用

已于 2023-07-17 02:21:11 修改
阅读量1.1k 收藏 11
点赞数
文章标签： cesium
于 2023-07-17 02:21:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48255917/article/details/131751401
版权

cesium的使用

cesium的使用

1.下载或者安装cesium的插件
官方文档

在这里插入图片描述
下载下来后创建文件夹整个包引入

在这里插入图片描述
2.生成token
新的包应该有默认token如果没有的这边就需要登录使用自己的token
官网右边有个open ion 点击注册
在这里插入图片描述
注册完毕右边有个token

3.初次生成3d效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../cusium/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="../cusium/Build/Cesium/Widgets/widgets.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #cesiumContainer {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
</body>
<script>
    Cesium.Ion.defaultAccessToken = '生成的token'
    new Cesium.Viewer('cesiumContainer')
</script>

</html>

效果
在这里插入图片描述
在这里插入图片描述

创建一个vue项目 vue+vite+cesium

1.首先创建一个项目 yarn create vite node版本16以上
2.安装依赖 npm i 或者yarn
3.安装cesium包npm i cesium@1.99 vite-plugin-cesium 或者yarn add cesium@1.99 vite-plugin-cesium
4.启动项目npm run dev或者 yarn dev
vite.config.js 文件下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), cesium()],
})


<template>
  <div id="cesiumContain"></div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
console.log(Cesium);
onMounted(()=>{
  Cesium.Ion.defaultAccessToken = 'token'
  new Cesium.Viewer('cesiumContain')
})
</script>
<style scoped></style>

参数的使用

 //影像图层
  var img_arcgis = new Cesium.ArcGisMapServerImageryProvider({
    name: "img_arcgis",
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
    enablePickFeatures: false
  });
  const viewer = new Cesium.Viewer('cesiumContain',{
    imageryProvider:img_arcgis,
    terrainProvider:Cesium.createWorldTerrain({
      // requestWaterMask:true,//水面特效 耗性能
    })//地形图层
  })```

控件属性

```c
const viewer = new Cesium.Viewer('cesiumContain', {
    timeline: false,//时间轴控件
    animation:false,//动画控件
    geocoder:false,//搜索控件
    homeButton:false,//主页控件
    sceneModePicker:false,//模式控件 3d2.5d,2d
    baseLayerPicker:false,//图层选择
    navigationHelpButton:false,//帮助手势
    fullscreenButton:false,//全屏按钮
     infoBox: false,//右侧信息框隐藏
    selectionIndicator: false,//选中状态
  })
  标签不想要的话可以全局display，none

2.经纬度笛卡尔坐标相互转换

  //经纬度转笛卡尔弧度  经度，纬度，z!=高度 笛卡尔坐标是根据圆心计算的
  const cartesian = Cesium.Cartesian3.fromDegrees(110, 20, 20)//笛卡尔
	console.log(cartesian )//x: -2050703.247253584,y: 5634260.865831492,z: 2167703.6282316237
  // 弧度转角度坐标 有两步
  const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
  console.log(cartographic)  //longitude: 1.9198621771937627, latitude: 0.34906585039886584, height: 19.999999999848896
  // let lon = 180 / Math.PI * cartographic.longitude //计算公式
  let lon = Cesium.Math.toDegrees(cartographic.longitude)
  console.log(lon,cartographic.height);//110,20,由于精度问题有点差异

3.通过经纬度目的地跳转

 //setView定义终点位置直接跳转目的地
  const position = new Cesium.Cartesian3.fromDegrees(110, 10, 10000)
  viewer.camera.setView({
    destination: position,//定位位置
    orientation: {//默认（0，-90,0）面向海平线
      heading: Cesium.Math.toRadians(0),//左右看y轴
      pitch: Cesium.Math.toRadians(0),//上下看 x轴
      roll: Cesium.Math.toRadians(0),//歪头 ，z轴
    }
  })

 //flyTo定义终点位置有飞行动画可以设置动画时间
  const position = new Cesium.Cartesian3.fromDegrees(110, 10, 10000)
  viewer.camera.flyTo({
    destination: position,//定位位置
    duration:1,//时间单位秒
    orientation: {//默认（0，-90,0）面向海平线
      heading: Cesium.Math.toRadians(0),//左右看y轴
      pitch: Cesium.Math.toRadians(0),//上下看 x轴
      roll: Cesium.Math.toRadians(0),//歪头 ，z轴
    }
  })

lookAt锁定视角可以左右转动但是不能移动

const position = Cesium.Cartesian3.fromDegrees(110, 20)
  viewer.camera.lookAt(
    position,
    new Cesium.HeadingPitchRange(
      Cesium.Math.toRadians(0),
      Cesium.Math.toRadians(-90),
      20000
    )
  )

4.添加实体点位

//实体 entity
  // 写法一、
  // const point = new Cesium.Entity({
  //   position: Cesium.Cartesian3.fromDegrees(120, 30),//设置位置
  //   point: {//点的信息
  //     pixelSize: 20,
  //     color: Cesium.Color.BLUE
  //   }
  // })
  // viewer.entities.add(point)//添加到物体中
  // viewer.zoomTo(point)//直接跳转到点位
  
  // 写法二推荐
  viewer.entities.add({
    id: 'point',
    position: Cesium.Cartesian3.fromDegrees(120, 30),
    point: {
      pixelSize: 20,
      color: Cesium.Color.BLUE
    }
  })

cesium中文文档

5.添加实体点位图片

const billboard = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116, 40, 10),
    billboard: {
      image: '/src/assets/image/1.jpg',//实体点位图片
      // width:20,
      // height:20,
      scale: 0.05,
      color: Cesium.Color.RED
    }
  })
  const label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(112, 30),
    label: { //文字信息
      text: 'Cesium',
      fillColor: Cesium.Color.YELLOW,
      showBackground: true,//背景模板
      backgroundColor:Cesium.Color.SKYBLUE,//背景颜色
    }
  })
  viewer.zoomTo(label)

6.添加多边形

//添加线
const polyline = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([120, 20, 121, 20, 121, 20.5]),
      width:10,
      material:Cesium.Color.RED
    }
  })
  //添加面
  const polygon = viewer.entities.add({
   polygon: {
      hierarchy: {
        positions: Cesium.Cartesian3.fromDegreesArray([120, 25, 121, 25, 121, 25.5]),
      },
      extrudedHeight: 100000,
      material: Cesium.Color.RED,
      outline:true,//是否显示外线
      outlineColor:Cesium.Color.WHITE,//外框颜色
      fill:false,//是否填充
    }
  })
  viewer.zoomTo(polygon)

在这里插入图片描述

7.添加立方体

 const box = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(119, 30, 3000),
    box: {
      dimensions: new Cesium.Cartesian3(2000, 1000, 3000),//长宽高
      material:Cesium.Color.BLUEVIOLET
    }
  })

8.添加椭圆，矩形

//添加椭圆
const ellipse = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(119, 30),
    ellipse: {
      semiMajorAxis: 500,//半长轴
      semiMinorAxis: 300,//半短轴
      material: Cesium.Color.RED,
      rotation: Math.PI / 2,//旋转角度
    }
  })
  //添加矩形
  const rectangle = viewer.entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(120, 40, 123, 45),
      extrudedHeight: 20000,//拉伸
      height: 1000,
      material:'/src/assets/image/1.jpg',//图片填充
    }
  })

常用点位标记

const viewer = new Cesium.Viewer('cesiumContain', {

  })
  // 生成点
  const billboard = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(120, 30, 100),
    billboard: {
      image: '/src/assets/image/1.jpg',
      scale: 0.05
    }
  })
  // 生成线
  const line = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([120, 30, 0, 120, 30, 100]),
      material: Cesium.Color.RED
    }
  })
  const label=viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(120, 30, 100),
    label:{
      text:'fjkh',
      font:'13px',
      fillColor:Cesium.Color.WHITE,
      pixelOffset:new Cesium.Cartesian2(0,-40),//文字偏移采用2d
    }
  })
  viewer.zoomTo(billboard)

以上的可以组合成一个实体
在这里插入图片描述

删除

viewer.entities.remove(point)//直接删除
viewer.entities.removeAll()//全部删除
viewer.entities.removeById('point')//通过id删除
const entitty=viewer.entities.getById('point')//先拿后删除
viewer.entities.remove(entitty)//

动态渲染路线

CallbackProperty 生成一个动态实体，第二个参数穿false不然懂不起来

 const line = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray[120, 30, 121, 31],
      positions: new Cesium.CallbackProperty(() => {
        console.log(1);
        num += 0.005
        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
    }
  })

  viewer.zoomTo(line)

借助truf.js的算法进行渲染

turf官网
我这里直接引用cdn，自己下载包去用，这里就不讲解

 viewer = new Cesium.Viewer('cesiumContain', {
  })
  //turf生成的geo格式的数据
  // var linestring = turf.lineString([[-24, 63], [-23, 60], [-25, 65], [-20, 69]], { name: 'line 1' });
  //这里返回的是promise对象
    // Cesium.GeoJsonDataSource.load(linestring).then(res => {
  //   console.log(res);
  //   const entity=res.entities.values[0]
  //   viewer.entities.add(entity)
  //    viewer.zoomTo(entity)
  // })
  var multiLine = turf.multiLineString([[[0, 0], [4, 6]], [[6, 8], [6, 10]]]);
  Cesium.GeoJsonDataSource.load(multiLine).then(res => {
    console.log(viewer.dataSources, viewer.entities);
    viewer.dataSources.add(res)
    data = res
  })

在这里插入图片描述
在这里插入图片描述

这里主要区分两点，
viewer.entities.add添加的格式是上图1
viewer.entities.remove(point)删除的是类型或者id
viewer.dataSources.add添加的是上图2
viewer.dataSources.remove(data)删除把数据删了就行了

地块的实现topojson

  viewer.dataSources.add(Cesium.GeoJsonDataSource.load('/src/assets/top.topojson'))

在这里插入图片描述
具体json位置在你下载的cesium包下面的
在这里插入图片描述

在这里插入图片描述

小菜鸟学代码··
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
Cesium（可直接用）
08-14
Cesium 是通过 Web 浏览器创建 3D 地球和 2D 地图的 JavaScript 库，无需任何插件。Cesium 使用 WebGL 来进行硬件加速图形化；跨平台、跨浏览器；并且针对动态数据进行可视化。
Cesium.js基础使用（vue）
Alone_Endeavor的博客
07-04 5104
之后就可以访问高清页面；通过以下官网地址申请。
【Cesium入门教程】第一课：Cesium简介与快速入门
GIS前端嘉欣的博客
04-22 1916
在上述代码中，我们首先设置了Cesium的访问令牌，然后创建了一个Viewer实例，并指定了容器的ID。通过本教程，你应该对Cesium有了一个基本的了解，并且能够开始创建自己的Cesium项目。在接下来的教程中，我们将深入探讨Cesium的更多高级特性和应用场景。安装开发工具：确保你的开发环境中安装了Node.js和npm（或pnpm），这些是JavaScript项目管理和打包的常用工具。获取Cesium资源：访问Cesium的官方网站和中文文档，了解如何获取Cesium的SDK和API文档。
Cesium：入门教程（一）之 Hello World
热门推荐
Puzzle的博客
08-09 1万+
简介 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。 下载 Cesium每个月月初更新一次版本，会在官网提供下载链接。........................
Cesium 简单使用
tx的博客
01-04 702
cesiumjs使用示例，包含创建地图，使用cesiumlab切片，标点、事件处理
如何获得cesium的token
qq_35452726的博客
01-05 801
如何获得cesium的token
cesium安装教程
qq_41003479的博客
12-04 1164
安装教程 新建一个index.html，代码如下 <!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <!-- Include the CesiumJS JavaScript and CSS files --> &nb
cesium使用webpack搭建react项目
10-08
cesium使用webpack搭建react项目
cesium简单使用的demo
01-08
cesium简单使用的demo
Cesium飞行漫游 Cesium飞行漫游
06-16
Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游...
cesium使用的测试建筑白模.rar
07-24
测试的建筑白模，直接放到项目里可以使用.
Cesium 添加必应地图无需申请key
04-26
大家都知道，Cesium通过本身的工具就提供了bing必应地图的加载，但是，需要自己申请key，如果不想那么麻烦申请key，就可以通过下面的代码实现，官方沙箱实例就可以运行啊，需要的下载，有问题联系我
申请cesium的token并使用
MYNAMEL的博客
10-09 2678
进行注册一个账号 网址：https://cesium.com/ion/signin/tokens 创建token 应用token Cesium.Ion.defaultAccessToken ="你的token"; 使用前后效果对比
学习【Cesium】第一篇，安装CesiumJS并初始化创建一个页面（学不会揍我）
New_Wang的博客
07-22 2028
安装CesiumJS并初始化创建一个页面并在浏览器中查看效果
cesium学习（下载，官方案例）
yunbabac的博客
06-14 2523
Sandcastle是沙盒，包含所有示例，点击查看，源码运行的项目多一个development选项。Documentation是api文档，不过需要先生成下才能看。项目一般在8080端口，打开浏览器查看。
学习路之Cesium--离线环境下使用 cesium
Green
06-08 3001
本质上，token 并不是用来限制我们使用 cesium 这个框架的，因为 cesium 代码是开源的，开源的代码，并没有必要在技术上作这个限制。这固然是一个可行的方式，但是，由于网络环境的原因，我们很难随时随地畅快的访问 cesium 的官网，更别说，每次都要下载一个几十兆的文件了。所以，到这里，我们大概就会明白了，为什么我们明明在官网下载的 cesium 包，过一段时间，示例就没法运行了。追根溯源，你会发现，这个请求，是在创建 baseLayerPicker 对象的时候，发生的。
cesium入门系列（一）
bulvyuanfang的博客
06-25 322
写在前面：近期开展cesium的入门学习，同时将学习的笔记记录下来，部分地方可能会很粗旷，后续会逐渐完善。vue打包出来后，源码是放置在Build文件夹下的。vscode上开启live server。二、html界面打开cesium的第一个界面（三位地球）一、登录cesium官网注册后获取token（很重要）cesium项目包准备（见附件链接）
Cesium教程(十四)：简易三维模型的可视化
WwLK123的博客
06-08 3244
3D Tiles是Cesium与2016年3月定义的一种三维模型瓦片数据结构。3D Tiles将海量三维数据以分块、分层的形式组织起来，这样就大大减轻了浏览器和图形处理单元（GPU）的负担。3D Tiles数据规范在glTF基础上提供了细节层次(LOD)能力，目标就是实现在web环境下海量三维模型数据的加载与展示。3D Tiles是一种开放式规范，用于跨桌面使用，Web端和移动应用程序共享，以及与大量异构三维地理空间要素交互。
同邦软件.txt
最新发布
06-30
同邦软件
cesium使用primitive
08-26
Cesium使用Primitive（图元）来进行绘制和渲染。Primitive是Cesium中的一个类，用于定义几何图形的创建和渲染方式。根据引用和引用的示例，可以看到几种使用Primitive的方法。 首先，通过创建一个GeometryInstance实例，并指定几何形状的类型和参数，可以创建一个Primitive对象。例如，在引用中使用WallGeometry创建了一个墙体几何图形的Primitive。 其次，可以使用PrimitiveCollection来创建一个图元集合，然后通过添加不同的图元实例来构建图形。例如，在引用中使用PointPrimitiveCollection添加了两个点图元，并设置了位置和颜色。 此外，Cesium还提供了两种绘制几何图形的方式：通过Entity和Primitive。通过Entity方式，可以使用viewer.entities.add方法创建一个Entity对象，并在其中定义几何图形的属性和材质。例如，在引用中使用RectangleGeometry和StripeMaterialProperty创建了一个矩形图形的Entity。 通过Primitive方式，可以创建一个GeometryInstance对象，并指定几何形状和外观属性，然后将其添加到scene.primitives中。例如，在引用中使用RectangleGeometry和EllipsoidSurfaceAppearance创建了一个矩形图形的Primitive。 综上所述，Cesium使用Primitive来定义和渲染几何图形，可以通过不同的方法和参数来创建和添加不同类型的图元实例。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [VUE3-Cesium（Primitive详解）](https://blog.csdn.net/damadashen/article/details/125291834)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Cesium开发高级篇 | 01空间数据可视化之Primitive](https://blog.csdn.net/ls870061011/article/details/122748411)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小菜鸟学代码··

给打赏的我会单独一对一讲解

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

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

打赏作者

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

抵扣说明：

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

余额充值