cesium加载倾斜摄影，添加billboard并注册点击事件
完整示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天地图</title>
<!-- 引用cesium的js和css，天地图的扩展js -->
<script src="js/cesium1.97/Cesium.js"></script>
<link rel="stylesheet" href="js/cesium1.97//Widgets/widgets.css"/>
<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" style="">
</div>
<script>
var cesiumAsset='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NjE1MDIwOC1jOGYxLTQzZWItYjNhOC1iNjZlMWM1OGYxMDIiLCJpZCI6MTAyODY5LCJpYXQiOjE2NTkwMDA3ODN9.Vy4hW4jpjbZs6ee4BcRl3-cCl-oRGn42e2_Hjbo5nas';
Cesium.Ion.defaultAccessToken = cesiumAsset; const poinArr = [{
id: '12321321',
name: "颍红测试点",
type: "固定枪机",
state: "在线",
position: {
x: 111.11974175706595,
y: 36.8798251193496
},
text: '1'
}, {
id: '43244324',
name: "解放修理厂门口",
type: "固定枪机",
state: "在线",
position: {
x: 111.11837977115736,
y: 36.88012118794686
},
text: '2'
}, {
id: '43764324',
name: "新华路加油站",
type: "固定枪机",
state: "在线",
position: {
x: 111.12272473055148,
y: 36.87860860195417
},
text: '3'
} ] 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, //是否显示指示器组件
contextOptions: {
webgl: {
alpha: true,
}
},
});
//默认的Cesium会加载一个bingMap底图，网络不太好，一般要先去掉这个默认的
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// 隐藏cesium ion
viewer._cesiumWidget._creditContainer.style.display = "none";
//地形遮挡效果开关，打开后地形会遮挡看不到的区域
viewer.scene.globe.depthTestAgainstTerrain = true;
//关闭天空盒，否则会显示天空颜色
viewer.scene.skyBox.show = false
//背景透明
viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0); //关闭大气
viewer.scene.skyAtmosphere.show = false
//抗锯齿
viewer.scene.fxaa = true;
viewer.scene.postProcessStages.fxaa.enabled = true;
//清除月亮太阳
viewer.scene.moon.show = false
viewer.scene.sun.show = false //加载模型
addSlope("*************",30); //加载点位标记
addEntity(poinArr); //注册点击事件
leftDownAction();
} //加载广告牌和文字
function addEntity(pointArr) {
let pinBuilder = new Cesium.PinBuilder()
pointArr.map(res => {
let poin = viewer.entities.add({
id: res.id,
name: res.name,
position: Cesium.Cartesian3.fromDegrees(res.position.x, res.position.y,50),
label: {
text: '测试点位',
font: '16px sans-serif', // 字体大小
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 字体样式
fillColor: new Cesium.Color.fromCssColorString("#ffffff"), // 字体填充色
outlineWidth: 1, // 字体外圈线宽度（同样也有颜色可设置）
outlineColor: new Cesium.Color.fromCssColorString("#000000"),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
pixelOffset: new Cesium.Cartesian2(0, 15), // 中心位置
disableDepthTestDistance: Number.POSITIVE_INFINITY
},
billboard: {
image: pinBuilder.fromText(res.text, Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
monitoItems: {
data: res
},
})
//添加线-地面0到50米高度的线
viewer.entities.add({
name: "line", // 线的name属性
polyline: { // 线
positions: [Cesium.Cartesian3.fromDegrees(res.position.x, res.position.y, 0), Cesium.Cartesian3.fromDegrees(res.position.x, res.position.y, 50)], // 由点构线
width: 1.0, // 线的宽度
material: new Cesium.PolylineGlowMaterialProperty({
color: new Cesium.Color.fromCssColorString("#ff0000"),
}), // 线的材质、样式
}
});
})
} //加载三维倾斜模型
function addSlope(url,height) {
var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url:url,
maximumScreenSpaceError: 16,//默认16,最大屏幕空间错误
maximumNumberOfLoadedTiles: 1000,
maximumMemoryUsage:1024//默认512,内存MB的最大数量
}));
tileset.readyPromise.then((tileset) => {
tileSet(tileset,height) //viewer.zoomTo(tileset);//视野定位到模型处
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(155), Cesium.Math.toRadians(-30),tileset.boundingSphere.radius * 1.3));
});
} //处理切片的高度信息
function tileSet(tileset, height)
{
//3dtile模型的边界球体
var boundingSphere = tileset.boundingSphere;
//迪卡尔空间直角坐标=>地理坐标（弧度制）
var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center);
//地理坐标（弧度制）=>迪卡尔空间直角坐标
var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height);
var Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, height);
//获得地面和offset的转换
var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());
//修改模型矩阵
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}
//点击事件处理
function leftDownAction() {
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
var picked = viewer.scene.pick(movement.position)
if (Cesium.defined(picked) && picked.id.id) {
console.log('点击标记：',picked.id._id,picked.id._name); } else {
return
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
</script>
</body>
</html>
cesium加载倾斜摄影，添加billboard并注册点击事件的更多相关文章
- Cesium加载倾斜摄影数据
(1)倾斜摄影数据仅支持 smart3d 格式的 osgb 组织方式, 数据目录必须有一个 “Data” 目录的总入口, “Data” 目录同级放置一个 metadata.xml 文件用来记录模型的位 ...
- cesium 加载倾斜摄影模型（这里有一坑）
代码如下: // Construct the default list of terrain sources. var terrainModels = Cesium.createDefaultTerr ...
- Cesium加载三维倾斜摄影数据
具体技术来源自论文 基于Cesium的倾斜摄影三维模型Web加载与应用研究. 技术架构图 应用实例 利用一个实际实例来详细说明如何利用Cesium加载倾斜摄影数据,并进行可视化和交互操作. 首先,利用 ...
- ceisum_加载倾斜摄影模型
osgb转换为3Dtiles格式(使用工具转换) 然后加载到cesium中(加载代码见下,可以控制模型高度) var offset = function(height,tileset) { conso ...
- cesium加载gltf模型
cesium加载gltf模型 一.采用vue-cesium:在项目里加载依赖包.命令如下: npm i --save vue-cesium 在main.js中加入如下代码: https://www.n ...
- Cesium加载地形数据只显示半个地球
Cesium第0级地形包括两个瓦片:0/0/0.terrain,0/1/0.terrain,分别为左半球和右半球(具体参考:https://blog.csdn.net/u013929284/artic ...
- cesium加载gltf模型点击以及列表点击定位弹窗
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 之 ...
- WebView加载本地Html文件并实现点击效果
Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行j ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- javascript总结35:DOM之给a注册点击事件, 阻止a标签的默认行为
给a注册点击事件时,有默认行为,阻止默认行为的方式: retrun false <!DOCTYPE html> <html lang="zh-CN"> &l ...
随机推荐
- MySQL之pt-query-digest分析慢查询日志的详情介绍
一.简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcpdu ...
- 2_Git
一. 引言 在单人开发过程中, 需要进行版本管理, 以利于开发进度的控制 在多人开发过程中, 不仅需要版本管理, 还需要进行多人协同控制 二. 介绍 Git是一个开源的分布式版本控制系统, 用于敏捷高 ...
- HDU3507 print article （斜率优化DP）
状态表示:dp[i]表示打印前i个单词的最小成本:s[i]维护前缀和. 状态转移:dp[i]=min(dp[j]+(s[i]-s[j])2)+m , 0<=j<i. 换成y=kx+b的形式 ...
- mysql 判断 字段为空 的一个小误区（又忘了）
今天判断mysql是否为空 直接写某字段 例 image_url !=null 结果数据库不报错误 并且没有返回相对数据. 又忘了这个事.今天特地记录一下. 因为null 表示什么也不是, 不能= ...
- NOIP2017总结 & 题解
day1t1的结论貌似在哪见过,自己稍微验证了一下貌似没记错就没有管了.t2一道很好(keng)的模拟题啊t3自己做题好慢啊,想出来dp打上去最后几分钟才过了大样例,我写的是记忆化搜索,判-1很好判, ...
- FJOI2007轮状病毒 行列式递推详细证明
题目链接 题目给了你一个奇怪的图,让你求它的生成树个数. 开始写了一个矩阵树: #include<cstdio> #include<cstdlib> #include<c ...
- Vue学习之--------消息订阅和发布、基础知识和实战应用（2022/8/24）
文章目录 1.基础知识 2.代码实例 2.1 main.js 2.2 School.vue 2.3 Student.vue 2.4 App.vue 3.全局事件总线通信改为消息的订阅和发布 3.1 核 ...
- 数据结构中的哈希表（java实现）利用哈希表实现学生信息的存储
哈希表 解释 哈希表是一种根据关键码去寻找值的数据映射结构,该结构通过把关键码映射的位置去寻找存放值的地方 内存结构分析图 1.定义一个类为结点,存储的信息 2.定义链表的相关操作 3.定义一个数组存 ...
- 说说 Redis pipeline
更多技术文章,请关注我的个人博客 www.immaxfang.com 和小公众号 Max的学习札记. Redis 客户端和服务端之间是采用 TCP 协议进行通信的,是基于 Request/Respon ...
- 8.DRF请求响应和api_view
一.请求对象(Request objects) DRF引入了一个扩展Django常规HttpRequest对象的Request对象,并提供了更灵活的请求解析能力 Request对象的核心功能是re ...