cesium的使用

news2025/3/13 19:18:45

cesium的使用

  • cesium的使用
    • 创建一个vue项目 vue+vite+cesium
      • 参数的使用
      • 常用点位标记
      • 删除
      • 动态渲染路线
      • 借助truf.js的算法进行渲染
      • 地块的实现topojson

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包下面的
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/761693.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

前端学习记录~2023.7.10~CSS杂记 Day5

前端学习记录~2023.7.10~CSS杂记 Day5

前言一、样式化表格1、一个典型的 HTML 表格2、进行样式化&#xff08;1&#xff09;间距和布局&#xff08;2&#xff09;简单地排版&#xff08;3&#xff09;图形和颜色&#xff08;4&#xff09;图案&#xff08;5&#xff09;样式化标题 最终效果如下 ![在这里插入图片描述…
阅读更多...
【Spring Cloud Alibaba】Nacos的服务注册和发现（discovery）的使用

【Spring Cloud Alibaba】Nacos的服务注册和发现（discovery）的使用

【Spring Cloud Alibaba】系列文章 标题链接【Spring Cloud Alibaba】Nacos的安装与介绍以及Nacos集群的安装https://masiyi.blog.csdn.net/article/details/129530053【Spring Cloud Alibaba】Nacos config的使用和高阶用法https://masiyi.blog.csdn.net/article/details/129…
阅读更多...
LabVIEW通过嘴唇图像识别为残疾人士开发文本输入系统

LabVIEW通过嘴唇图像识别为残疾人士开发文本输入系统

LabVIEW通过嘴唇图像识别为残疾人士开发文本输入系统 近年来&#xff0c;计算机已经成为现代人日常生活中的一种信息器具。人们可以使用计算机来处理复杂的文件&#xff0c;获取新信息并在线购物等。但是&#xff0c;上面讲的使用电脑的所有好处对普通人来说都很方便&#xff…
阅读更多...
React05-样式隔离

React05-样式隔离

一、样式隔离方案 css 的样式是全局样式&#xff0c;在书写react组件时&#xff0c;如果写了相同的样式类名&#xff0c;很容易造成样式污染。 在 vue 中&#xff0c;vue 官方提供了样式隔离方法&#xff0c;在组件代码中的 style 标签中加入 scoped&#xff0c;可以让这部分…
阅读更多...
Python案例分析｜使用Python图像处理库Pillow处理图像文件

Python案例分析｜使用Python图像处理库Pillow处理图像文件

本案例通过使用Python图像处理库Pillow&#xff0c;帮助大家进一步了解Python的基本概念&#xff1a;模块、对象、方法和函数的使用 使用Python语言解决实际问题时&#xff0c;往往需要使用由第三方开发的开源Python软件库。 本案例使用图像处理库Pillow中的模块、对象来处理…
阅读更多...
Java中的JDBC编程（数据库系列6）

Java中的JDBC编程（数据库系列6）

目录 前言&#xff1a; 1.什么是Java的JDBC编程 2.JDBC的数据库驱动包的导入过程 3.JDBC代码的编写 3.1创建并初始化一个数据源 3.2和数据库服务器建立连接 3.3构造SQL语句 3.4执行SQL语句 3.5释放必要的资源 3.6整体代码的展示及演示 3.7代码的优化 3.8 查询操作的…
阅读更多...
「深度学习之优化算法」（十四）麻雀搜索算法

「深度学习之优化算法」（十四）麻雀搜索算法

1. 麻雀搜索算法简介 （以下描述，均不是学术用语，仅供大家快乐的阅读） 　　麻雀搜索算法（sparrow search algorithm）是根据麻雀觅食并逃避捕食者的行为而提出的群智能优化算法。提出时间是2020年，相关的论文和研究还比较少，有可能还有一些正在发表中，受疫情影响需要论…
阅读更多...
关于学习过程中的小点

关于学习过程中的小点

nfev : 函数求值次数njev : Jacobian 评估的数量nit :算法的迭代次数 permute(dims)#维度转换 torch.split #[按块大小拆分张量] Pytorch.view Pytorch中使用view()函数对张量进行重构维度&#xff0c;类似于resize()、reshape()。用法如下&#xff1a;view(参数a,参数b,...)&a…
阅读更多...
Nacos1.4.2单机与集群的安装部署

Nacos1.4.2单机与集群的安装部署

CentOS 部署Nacos1.4.2 下载 nacos 下载链接&#xff1a;https://github.com/alibaba/nacos/tags 如何选择我们下载的 nocas 版本&#xff1f; 查看 Spring Cloud Alibaba 与 nacos 版本对应关系&#xff1a;SpringCloudAlibaba 组件对应关系说明 本项目使用 nacos 1.4.2 …
阅读更多...
Python（十七）数据类型转换——str()函数和int()函数

Python（十七）数据类型转换——str()函数和int()函数

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…
阅读更多...
2023年上半年：C#、Python和一些实用语言

2023年上半年：C#、Python和一些实用语言

文章目录 C#Pythonerlang和exilirfortranR语言 最近半年的开发任务主要集中在C#和Python上&#xff0c;所以博客内容也几乎围绕这两个部分&#xff0c;偶尔会穿插一些其他语言。下面就对2023年上半年的博客做一个总结。 C# 主要用C#写了一个文本阅读器&#xff0c;提供生成目…
阅读更多...
学C的第二十八天【字符串函数和内存函数的介绍（一）】

学C的第二十八天【字符串函数和内存函数的介绍（一）】

相关代码gitee自取&#xff1a;C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 学C的第二十七天【指针的进阶&#xff08;三&#xff09;】_高高的胖子的博客-CSDN博客 前言&#xff1a; &#xff08;1&#xff09;. C语言中对于字符和字符串的处理很是频繁&…
阅读更多...
linux驱动开发：驱动开发框架,linux内核字符设备驱动开发过程

linux驱动开发：驱动开发框架,linux内核字符设备驱动开发过程

一、驱动框架 1.Linux内核模块和字符驱动的关系 模块是Linux进行组建管理的一种方式， 结构体：对设备的管理内核需要抽象出来一个结构体来描述设备所有的共性信息写驱动需要申请一个结构体并赋值（初始化），然后注册给内核让内核统一管理 驱动：由内核统一管理，所以驱动…
阅读更多...
NUXT3学习笔记2

NUXT3学习笔记2

1、配置Ant design Vue (两个安装方式随便选一种&#xff0c;yarn会安装的更快) npm i ant-design-vue --save yarn add ant-design-vue 2、使⽤的 Vite&#xff0c;你可以使⽤ unplugin-vue-components 来进⾏按需加载。 yarn add unplugin-vue-components --save 在nuxt.…
阅读更多...
设计模式——享元模式

设计模式——享元模式

享元模式 定义 享元模式&#xff08;Flyweight Pattern&#xff09;是池技术的重要实现方式。 使用共享对象可以有效地支持大量的细粒度对象。 优缺点、应用场景 优点 可以大大减少应用程序创建对象的数量&#xff0c;降低程序内存占用。 缺点 提高了系统的复杂度&…
阅读更多...
5分钟上手IP代理服务

5分钟上手IP代理服务

一 IP代理服务 在网上找了一个性价比高的IP代理服务&#xff0c;一个IP地址1分钱。 二 API协议 调用方式为http协议&#xff0c;响应数据格式支持JSON和txt&#xff0c;都是比较常用的方式。 三 源码范例 包括一些主流的编程语言&#xff0c;一分钟上手。 我用的python比较…
阅读更多...
【Redis应用】查看附近(五)

【Redis应用】查看附近(五)

&#x1f697;Redis应用学习第五站~ &#x1f6a9;本文已收录至专栏&#xff1a;Redis技术学习 查看附近的XXX在我们的实际应用中非常广泛&#xff0c;能支持该功能的技术有很多&#xff0c;而在我们的Redis中主要依靠GEO数据结构来实现该功能&#xff01; 一.GEO用法引入 GE…
阅读更多...
问题解决:win10连接手机热点总是频繁自动断开

问题解决:win10连接手机热点总是频繁自动断开

问题描述:尝试解决 问题解决:win10连接手机热点总是频繁自动断开 问题描述: 在使用win10笔记本电脑连接手机热点上网时,是不是的网络自动就断掉了,而且重新连上后,用着用着又断了, 这就让人有点恼火了, 尝试解决 重启电脑与手机 以前没出现过而现在有这种情况,可能是电脑或手机…
阅读更多...
Spark复习笔记

Spark复习笔记

文章目录 Spark在Hadoop高可用模式下读写HDFS运行流程构成组件作业参数RDD机制的理解算子map与mapPartition区别Repartition和Coalesce区别reduceBykey 与 groupByKeyreduceByKey、foldByKey、aggregateByKey、combineByKey区别cogroup rdd 实现原理宽窄依赖为什么要划分stage如…
阅读更多...
Elasticsearch：语义搜索、知识图和向量数据库概述

Elasticsearch：语义搜索、知识图和向量数据库概述

结合对你自己的私有数据执行语义搜索的概述 什么是语义搜索&#xff1f; 语义搜索是一种使用自然语言处理算法来理解单词和短语的含义和上下文以提供更准确的搜索结果的搜索技术。 这种方法基于这样的想法&#xff1a;搜索引擎不仅应该匹配查询中的关键字&#xff0c;还应该尝…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023