- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在 cesium.js 中显示地下的多段线。但我对此一无所知。
最佳答案
貌似cesium还没有提供官方的地下功能,原因是cesium cameral can not be placed undergroud ,但是地下效果可以通过另一种方式获得--translucent terrain
。
根据How to display underground entity?在Cesium-dev google group,我实现了勉强令人满意的方法来显示地下的实体(包括gltf模型)。显示效果与GIF文件显示的一样。这个方法主要包含3个步骤。
对于 gif,请参阅 here .
1.只更改cesium源码中的一行代码;获取cesium源码,然后找到名为GlobeSurfaceTileProvider.js的文件,更改
command.pass = Pass.GLOBE;
到
command.pass = Pass.TRANSLUCENT;
2.使用gulp工具生成cesium发布代码;使用你的CLI执行gulp release
。 PS:您可能需要设置您的节点环境并安装依赖节点模块和安装gulp工具。
3.实现代码。PS:请注意,以下代码片段只有在您更改了第一步中说明的 cesium 源代码后才能运行。
<!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>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.tools {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div id="cesiumContainer">
</div>
<div class="tools">
Opacity: <input id="btnImageryAlpha" type="range" min="0" max="10" value="10" oninput="change()" />
</div>
</div>
<script>
function change() {
var value = document.getElementById("btnImageryAlpha").value;
if (viewer.imageryLayers) {
for (var i = 0; i < viewer.imageryLayers.length; i++) {
viewer.imageryLayers.get(i).alpha = value / 10;
}
}
console.log(value);
}
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestVertexNormals: true
});
var viewer = new Cesium.Viewer('cesiumContainer', {
//skyAtmosphere: false,
//orderIndependentTranslucency: false,
baseLayerPicker: false,
terrainProvider: terrainProvider
});
//viewer.scene.globe.depthTestAgainstTerrain = false;
//change the ugly blue color to black
viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);
//default is 1
//viewer.scene.globe.imageryLayers.get(0).alpha = 0.5;
var blueBox = viewer.entities.add({
name: 'Blue box',
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 5),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE
}
});
viewer.zoomTo(blueBox);
</script>
</body>
</html>
关于javascript - cesium.js如何在地下显示数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41541223/
我使用 Cesium 的 gltf 分支,我想显示飞机的 3d 模型。为此,我创建了加载并添加到数据源的 czmlDataSource。 问题是我无法弄清楚如何计算方向四元数以使平面在给定的经纬度处平
我在我的应用程序中使用铯。我的应用程序根据收到的位置在 map 上显示广告牌。 我想知道Cesium.Viewer和Cesium.CesiumWidget之间的区别。是否可以使用Cesium Widg
我以这样的方式创建 Cesium.Primitive: _createPrimitive: function (linesNumber) { var instances = [
我已经使用带有 webpack 模板的官方 cesium 设置了一个项目,可在此处找到:https://github.com/AnalyticalGraphicsInc/cesium-webpack-
我在 Google Groups 上看到了一些示例,它们演示了如何修改信息框的 css。在此特定示例中,使用 javascript 将 css 链接附加到文档的头部: https://groups.g
我完全是 Cesium 的菜鸟,所以请原谅我的愚蠢行为。我正在尝试编写一个应用程序,将位置和方向数据流式传输到 Cesium,实时绘制它以及显示它所在位置的路径。我遇到了实体视觉卡顿的问题,这几乎可以
有没有办法获得 CesiumJS 中给定位置的地面高度?我试过scene.globe.getHeight func 但它返回未定义。 //marker is a point on map. v
我正在使用铯,并试图检测折线与地球地形相交的位置。我有一条多段线,它从空中的某个点开始,以一定的角度向地球延伸。 现在我正在使用设定的距离计算终点,所以我有一个起点和终点。我想检测这条折线首先撞击地球
我正在使用从数据库提供的位置数据来绘制实体。 我目前正在使用 viewer.entities.removeAll(); 每次从数据库中获取结果时删除所有实体。 由于实体当前是 3D 模型,因此这会导致
之前好像有人问过这个问题,但我一直找不到合适的例子。我熟悉 PHP,但不熟悉 Javascript,无法弄清楚如何流式传输 CZML。 我想在 map 上显示大约 6.500 个 Assets 。为了
我想在 cesium.js 中显示地下的多段线。但我对此一无所知。 最佳答案 貌似cesium还没有提供官方的地下功能,原因是cesium cameral can not be placed unde
我创建了缩放至特定国家/地区的按钮。然而,当我单击新加坡按钮时,它会导航到新加坡,但我看不到确切的新加坡国家。 所以我想要一个更好的图像。 下面是我的代码...
假设我在铯 map 上显示一个点:( https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Point.html&labe
我要从单击的点绘制一组圆形的线。我的代码工作正常,但它绘制的圆远离单击的点。有人可以帮助我找出我的错误在哪里吗? var viewer = new Cesium.Viewer('cesiumC
我想使用flyTo()并提供纬度长坐标,但保持相机与当前表面的高度/变焦/距离相同。 我尝试在调用flyTo时使用camera.position.z,但这似乎在每次调用flyTo()时都会放大得越来越
大家好,我正在尝试在我的铯地球仪上获取 WMS 图层。下面是我正在使用的代码。当我查看网络选项卡时,我确实看到请求在 200 处全部通过,并且当我使用请求上的链接时,它们确实起作用;但是,它说它们的文
我想使用 OL3-Cesium 在我的 WPF 应用程序中使用 WebBrowser 控件显示地球 View 。示例 html 文件在我的 IE 11 浏览器中运行良好,但如果我通过 WebBrows
我使用 Cesium Earth 库开发了一个应用程序。 问题是,绘制的线(实体路径)质量很差,不平滑。如何让它变得更好? viewer = new Cesium.Viewer('cesiumCo
我有多个 GeoJsonDataSource 对象,我想将它们放在 Cesium 地球仪上。问题是,如果它们重叠,我会遇到一些 z-fighting 问题,我无法调整它们的顺序。 有没有一种方法可以指
目录 前言 1、数据准备 2、效果实现 Cesium-01:Vue 中基础使用 Cesium-02:飞机模型简
我是一名优秀的程序员,十分优秀!