Cesium学习笔记（二）：添加实体对象

最新推荐文章于 2024-04-19 04:32:00 发布
最新推荐文章于 2024-04-19 04:32:00 发布
阅读量1.6w 收藏 27
点赞数 5
分类专栏： javascript cesium webgis 文章标签： cesium javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UmGsoil/article/details/74296368
版权
cesium 同时被 3 个专栏收录
10 篇文章 16 订阅
订阅专栏
javascript
9 篇文章 3 订阅
订阅专栏
webgis
9 篇文章 0 订阅
订阅专栏

1. 首先，你需要选择一款代码编辑器，可以选择eclipse，webstorm，visual studio code这种比较大型的带有代码提示的，你也可以选择sublime，nodepad++，atom这种没有提示的，但是不能使用word这种自带格式的，这样出来的代码其实是有很大问题的。

以上这些你都可以自行选择，Cesium官方也给我们提供了一个很好用的东西Sandcastle，它可以很方便的把效果显示出来，不用来回切换，而且它还自带了很多例子，你可以直接通过例子来学习，它就在你本地的服务器中，输入localhost:8080/Apps/Sandcastle就可以找到。

但是我还是建议你至少找一款编译器，至少都有最基本的代码提示不是？毕竟官方这个只是个网页，一点代码提示都没有

2. 下面进入正题

首先在我们的编译器中打开HelloWorld.html，可以看到内容，我稍微注释一下
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <!-- 这里引用的是Cesium的库，你以后所有的东西都从这个库中调用 -->
  <script src="../Build/Cesium/Cesium.js"></script>
  <!-- 这里是Cesium的viewer需要的css文件 -->
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>

</head>
<body>
  <!-- 这就是我们显示出来的东西了 -->
  <div id="cesiumContainer"></div>
  <!-- 这里我把js代码提出来写了 -->
  <script src="../Apps/JS/hello.js"></script>
</body>
</html>

3. 第一个例子

首先我们在地图上添加一个多边形实体
var viewer = new Cesium.Viewer('cesiumContainer');
//创建一个多边形实体对象
var wyoming = viewer.entities.add({
  name : 'Wyoming',
  polygon : {
    //给出位置
    hierarchy : Cesium.Cartesian3.fromDegreesArray([
                              -109.080842,45.002073,
                              -105.91517,45.002073,
                              -104.058488,44.996596,
                              -104.053011,43.002989,
                              -104.053011,41.003906,
                              -105.728954,40.998429,
                              -107.919731,41.003906,
                              -109.04798,40.998429,
                              -111.047063,40.998429,
                              -111.047063,42.000709,
                              -111.047063,44.476286,
                              -111.05254,45.002073]),
    //离地高度
    height : 0,
    //材质（相当于填充色，但是可以填充的可不止颜色，可以看到这里是红色半透明）
    material : Cesium.Color.RED.withAlpha(0.5),
    //外边线
    outline : true,
    outlineColor : Cesium.Color.BLACK
  }
});
//这是一个动画效果，进入后镜头就会自动转到这个实体处
viewer.zoomTo(wyoming);

这里写图片描述

还可以让它拥有体积
//离地高度
wyoming.polygon.height = 300000;
//两个高度差组成了它的体积
wyoming.polygon.extrudedHeight : 250000;

这里写图片描述

我们还可以给他配上一个介绍
wyoming.description = '\
<img\
  width="50%"\
  style="float:left; margin: 0 1em 1em 0;"\
  src="//imgsrc.baidu.com/baike/abpic/item/d35a10f45f26d158dcc4740e.jpg"/>\
<p>\
  一大块果冻，想不想吃？\
</p>\
<p>\
  介绍: \
  <a style="color: WHITE"\
    target="_blank"\
    href="http://imgsrc.baidu.com/baike/abpic/item/d35a10f45f26d158dcc4740e.jpg">点击查看</a>\
</p>';

这里写图片描述

当然我们可以照着这个例子画点其他的，比如一个白色的椭圆
var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse : {
    //长短半轴（椭圆嘛）
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.WHITE.withAlpha(0.5)
  }
});
viewer.zoomTo(viewer.entities);

这里写图片描述

形状有很多，这里列举一些
  • 盒 entity.box
  • 圈和椭圆 entity.ellipse
  • 走廊 entity.corridor
  • 气缸和锥体 entity.cylinder
  • 多边形 entity.polygon
  • 折线 entity.polyline
  • 折线卷 entity.polylineVolume
  • 矩形 entity.rectangle
  • 球体和椭球体 entity.ellipsoid
  • 墙壁 entity.wall
大家可以自己搞几个玩玩，具体属性可以查一查API
然后我们继续玩，我们甚至可以在里面填充一些图片
ellipse.material = '//cesiumjs.org/images/2015/02-02/cats.jpg';

这里写图片描述

再比如把它做成斑马条纹的
var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse : {
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    //条形材质
    material : new Cesium.StripeMaterialProperty({
      evenColor : Cesium.Color.WHITE,
      oddColor : Cesium.Color.BLACK,
      repeat : 16
    })
  }
});
viewer.zoomTo(viewer.entities);

这里写图片描述

一条蓝色的发光线（怎么感觉发的是白光）
var entity = viewer.entities.add({
  polyline : {
    positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                    -77.1, 35]),
    width : 5,
    material : new Cesium.PolylineGlowMaterialProperty({
         glowPower : 0.3,
         color : Cesium.Color.BLUE
})
  }
});
viewer.zoomTo(viewer.entities);

这里写图片描述

4. 点，广告牌和标签（Points, Billboards, and Labels）

这东西可以用来做标记的，比如说，我把南京的玄武湖标记一下
var xuanwuhu = viewer.entities.add({
  name : 'xuanwuhu',
  position : Cesium.Cartesian3.fromDegrees(118.793091, 32.074570),
  point : {
    pixelSize : 5,
    color : Cesium.Color.RED,
    outlineColor : Cesium.Color.WHITE,
    outlineWidth : 2
  },
  label : {
    text : '玄武湖',
    font : '14pt monospace',
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth : 2,
    //垂直位置
    verticalOrigin : Cesium.VerticalOrigin.BUTTON,
    //中心位置
    pixelOffset : new Cesium.Cartesian2(0, 20)
  }
});
viewer.zoomTo(xuanwuhu);

这里写图片描述
这里写图片描述

广告牌可以显示一个图片
var citizensBankPark = viewer.entities.add({
  position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
  //广告牌
  billboard : {
      image : 'http://imgsrc.baidu.com/baike/abpic/item/d35a10f45f26d158dcc4740e.jpg',
      width : 64,
      height : 64
  },
  label : {
    text : 'Citizens Bank Park',
    font : '14pt monospace',
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth : 2,
    verticalOrigin : Cesium.VerticalOrigin.TOP,
    pixelOffset : new Cesium.Cartesian2(0, 32)
  }
});
viewer.zoomTo(citizensBankPark);

这里写图片描述

5. 添加3D模型

这个比较多，也比较重点，后面会有单独一篇写这个，先看个例子吧
var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    model : {
        uri : '../Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf'
    }
});
//这个是镜头追踪，将镜头固定在小车上
viewer.trackedEntity = entity;
很简单，直接加载一个实体模型，模型都是从外面导入的，这个是Cesium自带的一个小车（还是动态的呢）

这里写图片描述

参考资料：Cesium官方文档
simple-soul
关注
专栏目录
Cesium 展示——在指定点添加 label
虎康的博客
08-08 269
Cesium 展示——在指定点添加 label。
cesium 学习笔记
最爱松露巧克力
06-30 2230
Cesium简介 Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。 Cesium支持多种数据可视化方式，可以绘制各种几何图形、导入图片，甚至3D模型。同时，Cesium还支持基于时间轴的动态数据展示，例如，我们可以用它绘制卫星运行轨迹。 Cesium HelloWorld 下面的例子在浏览器中显示一个太空背景、具有地图覆盖的3D地球： index.html X
cesium 隐藏entity_cesium中随entity动态变化的弹出框
weixin_35924166的博客
02-15 1074
原理介绍：1.监听鼠标单击事件，获取点击屏幕位置e.position，综合弹出框宽高，动态设置弹出框位置。bubble.style.left = e.position.x-70+"px";var divheight = bubble.offsetHeight;var divy = e.position.y - divheight -50;2.添加entity的描述时，绑定弹出框table3.监听帧...
Cesium（二）通过Entities添加可控制模型
weixin_49608678的博客
11-07 3051
上一篇文章结尾说到能通过entities类来创建小车模型并实现键盘控制，这篇就来演示一下。关于上一篇文章 Cesium开发实践（一）控制小车并视角跟随 大家也可以看看。 效果图 区别 上一篇创建模型的方法： let carPrimitive = scene.primitives.add(Cesium.Model.fromGltf({ id:'mycar', url:"你的URL地址", modelMatri
cesium 添加实体
m0_57715356的博客
02-18 705
在这个示例中，使用了Cesium.Rectangle.fromDegrees方法来创建了一个矩形的边界，并使用Cesium.ImageMaterialProperty为矩形实体设置了图片材质。在Cesium中使用矩形实体，并为其设置图片材质。创建了一个名为pic的对象，并使用viewer.entities.add方法添加了一个矩形实体，并为其设置了图片材质。
Cesium学习笔记（一）添加实体
Royal
07-06 9061
可以选实体对象： 名称 类型 备注 box BoxGraphics 盒子实体 corridor CorridorGraphics 走廊实体 cylinder CylinderGraphics 椎体实体 ellipse EllipseGraphics 圆和椭圆实体 ellipsoid EllipsoidGraphics 球体和椭圆体
cesium常见操作：添加entity
happy81997的博客
02-08 3193
2、复杂的描述信息，带HTML设置样式的。在实体上添加一个label属性即可。
Cesium加载entities实体，包括文字标注,图标(动态缩放效果),线(尾迹线效果)，面(动态闪烁效果)，背景图，围栏(立体分层效果)，渐变色圆柱，扇形图等
weixin_39150852的博客
04-12 9405
cesium加载entities实体，包括文字标注,图标(扩撒动画效果),线，面(闪烁动画效果)，图片，围栏，立体区域，渐变色圆柱，扇形图
cesium绘制等高线，html,三维开发实例 前端开发
05-21
Cesium的核心是`Cesium.Viewer`对象，它初始化一个完整的3D视图。在HTML中，你需要引入Cesium的JavaScript和CSS库，通常通过CDN链接。例如： ```html <link rel="stylesheet" href="https://unpkg....
cesium学习笔记（问题记录）——（二）
CheryW的博客
10-12 565
cesium学习记录
初学cesium时的一些笔记，过于潦草看看就好
qq_45344953的博客
02-13 881
Cesium ion（假如要用自己的数据则需要上传数据） Cesium依赖： 基于HTML5标准，无插件，跨平台； 无法单独运行，依赖于浏览器（Cesium Lab基于Electron架构） 浏览器基于HTTP协议，所以必须有HTTP Server Cesium功能介绍： 定义影像矢量模型： { 1使用3d tiles格式模式加载各种不同的3d数据，包含倾斜摄影模型，三位建筑物，CAD和BIM的外...
Ceisum实时获取后台数据 实时更新实体位置信息
最新发布
2401_84097658的博客
04-19 586
return _;})();}, {”,},}];// 动态赋值var a = 20;a+= 10;//图标：更新czml坐标//线：更新entities坐标if (!}else{//只展示5条坐标数据//}}, 1000);Sandcastle.addToolbarButton(‘清除计时器’, function() {});二维展示三维展示多个实体运动：实时加载数据 更新位置信息});width : 1,
【超图+CESIUM】【基础API使用示例】19、超图｜CESIUM - 绘制点位：通过Cesium.entities.add添加实体的方式绘制
汪同学丶的博客
02-28 849
超图｜CESIUM - 绘制点位：通过Cesium.entities.add添加实体的方式绘制
【超图+CESIUM】【基础API使用示例】25、超图｜CESIUM - 绘制盒子：通过Cesium.entities.add添加实体的方式绘制，根据已存在坐标绘制
汪同学丶的博客
03-01 549
超图｜CESIUM - 绘制盒子：通过Cesium.entities.add添加实体的方式绘制，根据已存在坐标绘制
cesium 实体创建、添加、删除、获取
热门推荐
HopperZheng的博客
06-27 2万+
//创建viewer var viewer = new Cesium.Viewer('cesiumContainer'); //添加实体 var redBox = viewer.entities.add({ id:'Box', position : Cesium.Cartesian3.fromDegrees(108, 34,0), box...
VUE3-Cesium（使用entities创建盒子、圆、走廊、圆柱实体）
damadashen的博客
06-12 2605
Cesium使用entities创建盒子、圆、走廊、圆柱实体
Cesium
m0_49788155的博客
09-21 3995
Cesium
Cesium快速上手10-Viewer/Entities组合
是微风，是晚霞，是无可替代
08-24 267
【代码】Cesium快速上手10-Viewer/Entities组合。
cesium点聚合
qq_38620325的博客
09-09 1399
//点聚合 mapComManager.js内容 addClusterDataSource(params,myDataSource){ let entity ={ id: params.id, name: '点', show: true, position: Cesium.Cartesian3.fromDegrees(params.lon, params.lat, 100), billboard: { image: pa
cesium添加实体
08-12
要在Cesium中添加实体，你可以按照以下步骤进行操作： 1. 创建一个Cesium Viewer对象： ``` var viewer = new Cesium.Viewer('cesiumContainer'); ``` 2. 创建一个实体对象： ``` var entity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height), point: { pixelSize: 10, color: Cesium.Color.RED } }); ``` 在上面的代码中，`position`属性指定了实体的位置，使用经度、纬度和高度来定义。`point`属性用于指定实体的外观，例如像素大小和颜色。 3. 可以根据需要设置其他实体属性，例如名称、描述、模型、标签等。 4. 在完成添加实体后，可以使用`viewer.zoomTo(entity)`方法将地图视图聚焦到新添加的实体上。 这只是一个简单示例，你可以根据自己的需求对实体进行更复杂的配置和定制。请确保在运行代码之前已经正确加载了Cesium库。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值