cesium教程6-用entity绘制点线面label和billboard广告牌
注意：billboard显示的图片是立体的，会跟随角度而变化的。
pinBuilder.fromText()用于创建自定义地图图钉
完整示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cesium示例</title>
<!-- 引用cesium的js和css，天地图的扩展js -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
<style type="text/css">
html, body, #tiandituContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style> </head>
<body onload="loadData()">
<div id="tiandituContainer">
</div>
<script> //Cesium官网注册后的授权token，没有token不能使用cesium在线的地形服务，这里需要改成自己的token
Cesium.Ion.defaultAccessToken = ""; var viewer;
function loadData()
{
//默认会调用微软virtualearth地图
viewer = new Cesium.Viewer('tiandituContainer',{
animation:false, //是否显示动画控件
homeButton:true, //是否显示home键
geocoder:true, //是否显示地名查找控件，如果设置为true，则无法查询
baseLayerPicker:true, //是否显示图层选择控件
timeline:false, //是否显示时间线控件
fullscreenButton:true, //是否全屏显示
infoBox:true, //是否显示点击要素之后显示的信息
sceneModePicker:true, //是否显示投影方式控件 三维/二维
navigationInstructionsInitiallyVisible:false, //导航指令
navigationHelpButton:false, //是否显示帮助信息控件
selectionIndicator:false, //是否显示指示器组件
});
//隐藏cesium的logo
viewer._cesiumWidget._creditContainer.style.display = "none";
//默认的Cesium会加载一个bingMap底图，这个地图网络不太好，一般要先去掉这个默认的
viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); //arcgis在线影像地图
viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
name:"img_arcgis",
url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
})); viewer.scene.globe.depthTestAgainstTerrain = false;//地形遮挡效果开关，打开后地形会遮挡看不到的区域
viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效果
let pinBuilder = new Cesium.PinBuilder() //加载点1
var point1 = viewer.entities.add({
id: 'point1', // id属性
position: Cesium.Cartesian3.fromDegrees(103, 30, 100), // 位置
point: { // 点
color: new Cesium.Color.fromCssColorString("#3388ff"), // 点颜色
pixelSize: 10, // 点大小
outlineColor: new Cesium.Color.fromCssColorString("#ffffff"), // 点的外圈线颜色
outlineWidth: 2, // 点的外圈线宽度
disableDepthTestDistance: Number.POSITIVE_INFINITY // 被遮挡是否可见（也就是将这个Entity在场景中置顶）
},
billboard: {
image: pinBuilder.fromText('first', Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
//加载点2,并绘制label文字和billboard广告牌
var point2 = viewer.entities.add({
id: 'point2', // id属性
position: Cesium.Cartesian3.fromDegrees(104, 30, 100), // 位置
point: { // 点
color: new Cesium.Color.fromCssColorString("#ff88ff"), // 点颜色
pixelSize: 10, // 点大小
outlineColor: new Cesium.Color.fromCssColorString("#ffffff"), // 点的外圈线颜色
outlineWidth: 2, // 点的外圈线宽度
disableDepthTestDistance: Number.POSITIVE_INFINITY // 被遮挡是否可见（也就是将这个Entity在场景中置顶）
},
label: {
text: '紫色点的label标签',
font: '16px sans-serif', // 字体大小
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 字体样式
fillColor: new Cesium.Color.fromCssColorString("#ff88ff"), // 字体填充色
outlineWidth: 1, // 字体外圈线宽度（同样也有颜色可设置）
outlineColor: new Cesium.Color.fromCssColorString("#ffffff"),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
pixelOffset: new Cesium.Cartesian2(0, 15), // 中心位置
disableDepthTestDistance: Number.POSITIVE_INFINITY
},
billboard : {
image : 'https://leafletjs.com/docs/images/logo-ua.png',//billboard广告牌
show: true, // default
pixelOffset: new Cesium.Cartesian2(0, -10), // default: (0, 0)设置图片的偏移，是按屏幕坐标来偏移的
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
scale: 2.0, // default: 1.0
color: new Cesium.Color.fromCssColorString("#ffffff"), // default: WHITE
rotation: 0, // default: 0.0
alignedAxis: Cesium.Cartesian3.ZERO, // default
width: 200, // default: undefined
height: 50, // default: undefined
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 1000000, 0.0), // 按距离缩放，距离大于10000米时，图标不显示
}
});
//加载点3
var point3 = viewer.entities.add({
id: 'point3', // id属性
position: Cesium.Cartesian3.fromDegrees(103.5, 30.5, 100), // 位置
point: { // 点
color: new Cesium.Color.fromCssColorString("#00ffff"), // 点颜色
pixelSize: 10, // 点大小
outlineColor: new Cesium.Color.fromCssColorString("#ffffff"), // 点的外圈线颜色
outlineWidth: 2, // 点的外圈线宽度
disableDepthTestDistance: Number.POSITIVE_INFINITY // 被遮挡是否可见（也就是将这个Entity在场景中置顶）
}
});
//加载线条
var line = viewer.entities.add({
name: "line", // 线的name属性
polyline: { // 线
positions: [Cesium.Cartesian3.fromDegrees(103, 30, 100), Cesium.Cartesian3.fromDegrees(104, 30, 100)], // 由点构线
width: 5.0, // 线的宽度
material: new Cesium.PolylineGlowMaterialProperty({
color: new Cesium.Color.fromCssColorString("#ff0000"),
}), // 线的材质、样式
}
});
//加载面图形
var polygon = viewer.entities.add({
polygon: {
height: 0.1,
hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([103, 30, 100, 103.5, 30.5, 100, 104, 30, 100])), // 面的顶点坐标集合
material: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.5), // 颜色和透明度
perPositionHeight: true, // 是否支持坐标高度
}
}); // 将三维球定位到模型
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.5, 30, 200000),
orientation: {
heading : Cesium.Math.toRadians(348.4202942851978),
pitch : Cesium.Math.toRadians(-89.74026687972041),
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回调函数
}
});
} </script>
</body>
</html>
cesium教程6-用entity绘制点线面label和billboard广告牌的更多相关文章
- Cesium 动态绘制点线面(附源码下载)
我写的这个点线面绘制融入了增删改的功能.其中可以通过手动点击地图进行动态绘制线面,也支持通过给定坐标数组来进行线面的增加.绘制好的线面,可以点击进行修改:以上介绍了我的大概的要给操作,下面以面的构建来 ...
- Markdown教程<2> mermaid图形绘制（1）
Markdown教程<2> mermaid图形绘制(1) 博客园中的markdown编辑器同时支持mermaid图表引擎与tex公式引擎,可以使用mermaid直接画出流程图,时序图,甘特 ...
- Cesium点击改变entity/primitives颜色与恢复原色(三)
2023-01-08 建筑物是primitives,两个娃娃是entity 加载娃娃代码: //粉色 var entity6 = viewer.entities.add({ id:6, positio ...
- Cesium教程系列汇总
Cesium系列目录: 应用篇 入门 Cesium应用篇:1快速搭建 影像 Cesium应用篇:2影像服务(上) Cesium应用篇:2影像服务(下) 控件 Cesium应用篇:3控件(1)Clock ...
- (转）Cesium教程系列汇总
https://www.cnblogs.com/fuckgiser/p/5706842.html Cesium系列目录: 演示实例 ExamplesforCesium 最近老实有一些人问我,下载后在本 ...
- Entity Framework入门教程（1)---Entity Framework简介
什么是Entity Framework 学习EF的前提:熟练使用Linq和Ado.net,因为在使用EF框架进行开发时,我们大多数情况使用Linq进行查询和操作,而EF的底层实现用的是Ado.net. ...
- Cesium教程系列汇总【转】
Cesium系列目录: 演示实例 ExamplesforCesium 最近老实有一些人问我,下载后在本地无法运行,我也不能保证每次都搭个环境看是否可行,或许Cesium升级版本后真有问题呢,索性在gi ...
- Cesium给3dtileset中的每个瓦片添加一个billboard/label(六)
2023-01-14 改了下思路,直接根据点击的位置转换为世界坐标系再添加label console.log(`鼠标点击位置为:${click.position}`); var cartesian = ...
- Entity Framework 教程——什么是Entity Framework
什么是Entity Framework 编写和管理ADO.NET是一个繁琐而又无聊的工作.微软为你的应用提供了一个名为"Entity Framework"的ORM框架来自动化管理你 ...
- [js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格
在canvas中,要画出1px的线条,默认情况下是不行的 context.beginPath(); context.moveTo( 100, 100 ); context.lineTo( 400, 1 ...
随机推荐
- 4 PyExecJS模块
PyExecJS模块 pyexecjs是一个可以帮助我们运行js代码的一个第三方模块. 其使用是非常容易上手的. 但是它的运行是要依赖能运行js的第三方环境的. 这里我们选择用node作为我们运行js ...
- #差分约束系统，Spfa，SLF优化#HDU 3666 THE MATRIX PROBLEM
题目 多组询问,给定一个\(n*m\)的矩阵\(C\)和一个区间\([L,R]\), 问是否存在一个长度为\(n\)的序列\(A\)和一个长度为\(m\)的序列\(B\), 使得所有 \[\frac{ ...
- OpenHarmony兼容性平台更新上线
一.前言 OpenAtom OpenHarmony(以下简称"OpenHarmony")兼容性测评平台已经运行了一年,随着 OpenHarmony 开源项目的不断向前演进和兼容性测 ...
- OpenHarmony 3.2 Beta Audio——音频渲染
一.简介 Audio是多媒体子系统中的一个重要模块,其涉及的内容比较多,有音频的渲染.音频的采集.音频的策略管理等.本文主要针对音频渲染功能进行详细地分析,并通过源码中提供的例子,对音频渲染进行流程的 ...
- 如何使用DevEco Studio创建Native C++应用
简介 本篇主要介绍如何使用DevEco Studio for OpenAtom OpenHarmony (以下简称"OpenHarmony")创建一个Native C++应用.应用 ...
- C++调用Python-4：调用Python函数，传参数字
# mytest.py def myadd(a, b): print("this is test python print add function") return a+b #i ...
- HDD杭州站•ArkUI让开发更灵活
原文:https://mp.weixin.qq.com/s/cX48CPs61daKOC2J5znyJw,点击链接查看更多技术内容. 7月15日的HUAWEI Developer Day(简称HDD) ...
- k8s之基于metallb实现LoadBalancer型Service
一.实验说明 1.介绍 MetalLB 是裸机 Kubernetes 集群的负载均衡器实现,使用标准路由协议,主要用于暴露 K8s 集群的服务到集群外部访问,MetalLB 可以让我们在 K8s 集群 ...
- redis 简单整理——持久化之RDB[十九]
前言 简单介绍一下redis的持久化.先来整理一下RDB. 正文 redis 支持RDB 和 AOF两种持久化机制,他们能达到的效果不一致. 那么先来看一下RDB吧. RDB 是把当前进程数据生成快照 ...
- Unity性能优化——资源优化（一）
实际项目中发现的许多问题都是源自无心之过:临时的"测试"更改和疲惫不堪的开发人员的误点击可能会暗地里添加性能不良的资源或更改现有资源的导入设置. 对于任何大规模的项目,最好是将防止 ...