Giter VIP home page Giter VIP logo

xbsjearthui's Introduction

XbsjEarthUI

🌏

我愿与你同行,因你势不可挡!

简介

XbsjEarthUI是基于Cesium和EarthSDK的三维GIS/BIM的UI模板,可以基于此定制自己的三维App。
官网地址: earthsdk.com





使用步骤

注意

git下载时,请下载1.7.x分支使用,不要下载master分支。

开发模式

  1. npm install
  2. npm run dev
  3. 浏览器地址栏输入 localhost:9530

使用模式

  1. npm install
  2. npm run build
  3. cd dist // 这一步很重要!!!务必在dist目录下启动hs,很多人反馈打不开页面,都是因为少了这一步!
  4. hs -p 81 启动服务
  5. 浏览器地址栏输入 localhost:81/index.html

注意:hs 是 http-server 的缩写,如果没有此命令,可以提前安装:npm install -g http-server

问题反馈

欢迎进行问题反馈和相关技术交流! 有以下两种途径:

1 QQ 群:830157717

2 提 issue:
https://github.com/cesiumlab/XbsjEarthUI/issues

xbsjearthui's People

Contributors

2841902102 avatar dependabot[bot] avatar elfc2000 avatar hannesanwang avatar lforrrrawx avatar momobeizi avatar mr-ms-zhang avatar vtxf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

xbsjearthui's Issues

视景器的节点信息获取的快捷方式

鼠标选中某个节点,此时XE.csn就会指向该节点,可以在控制台获取相关信息:

image

另外还有一个全局属性 XE.cso,等同于 XE.csn.czmObject,获取该节点所对应的czmObject对象。

有没有什么只用一个eventlistener来进行拾取的方法

再问个问题,我看拾取的例子里,都是给模型或者3dtile加eventlistener,这样加得多了会不会拖慢性能?有没有什么只用一个eventlistener来进行拾取的方法?

比如原生cesium的
handler.setInputAction(function(movement) {
var pickedObject = earth.czm.viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {

console.log(pickedObject)

}

有没有类似这种的接口,但可以取到czmObject?


@skywalkershe
直接用scene.pick就可以拾取到3dtiles的,我们内部有一个属性来标识czmObject的对象;
不过不建议这样做,earthsdk的部分元素有类似网页元素onclick属性。使用才更方便。

如何对3dtiles数据进行平移旋转缩放,再获取modelMatrix

  1. EarthSDK中对模型进行旋转平移缩放操作

场景树上鼠标右键弹出菜单,点击“属性”按钮
image

编辑相关参数。
image

当然平移和旋转是也可以进行可视化互动编辑的。
image

  1. 编辑完成以后,再右键弹出菜单,选择“查看Cesium代码”
    image

  2. 在代码中获取需要的信息,比如modelMatrix
    image

屏幕坐标,弧度,世界坐标

何事秋风悲画扇 14:27:00
Cesium.Cartesian3.fromDegrees(-103.0, 40.0),你好我想问一下这个方法的参数是我们平时谷歌地图的经纬度还是弧度

何事秋风悲画扇 14:27:49
还不是很理解gis里面屏幕坐标,弧度,世界坐标,求大神带带

王佳莹 14:55:16
@何事秋风悲画扇 大致有四种坐标,可以相互转换

王佳莹 14:55:22
image

王佳莹 14:55:28
你一开始说的Cesium.Cartesian3.fromDegrees(-103.0, 40.0)里面用的是经纬度(角度)坐标,就是GPS坐标

王佳莹 14:55:31
你后来说的Cartographic是经纬度(弧度)坐标,转成Cesium的空间坐标可以这样用Cesium.Cartesian3.fromRadians(-2.007, 0.645)

请问下,请问earthsdk的path怎么去掉自动做的圆滑轨迹啊?

请问下,请问earthsdk的path怎么去掉自动做的圆滑轨迹啊?

比如里我就定了4个点,希望可以按连接四点的直线轨迹运行,试过了改slice,但改完转折点的位置不对,还请哪位帮忙看下。多谢了

改slice只会改显示出来的path轨迹,但实际的运行轨迹不变。希望运行轨迹是几点间没有圆滑过的直线,不知哪位可以帮忙看下,多谢了。

另外,如果加载的gltf模型本身带动画,请问怎样能开启动画效果呢?原生cesium我看是在生成viewer时传入shouldAnimate : true的参数,但在earthsdk没有效果。


earthsdk中的path的生成有一个技巧:

image

earthsdk中的path不受cesium的shouldAnimate影响,不受cesium中的time影响;
这是有意为之。目的是为了开发时可以任意时间进行任意路径操作。

对啊,每个path可以自驱动,通过playing=true,并需要适当修改一个currentSpeed。
也可以手动控制,通过currentD属性来确定运行到哪一个位置,currentD表示从起点到目标点的长度,可以通过p.length来查看路径总长。

image

路径相关的示例代码:

image

单体化问题

image

王佳莹
我昨天问的单体化问题,在“矢量楼块切片”转换时勾选“构造底面”,就不会有额外的可挪动的面。用ArcGIS制作的shp转换3dtiles,默认勾选“强制双面”就能正常显示;用Geojson通过mapshaper转换而来的shp转换3dtiles,除了默认勾选“强制双面”,还要勾选“构造底面”才能正常显示。

color.xeColor是怎么来的

请问下,
image

这里的color.xeColor是怎么来的啊?我试着打印并typeof color了,它就是个hex code string,这个.xeColor是从哪里来的啊?


xeColor 是把一个字符串,转成 [1, 1, 1, 1]这种形式的颜色供EarthSDK使用,扩展了String的属性。。

xbsjCreateTransmitPolyline创建弧线说明

            Cesium.xbsjCreateTransmitPolyline 根据 首末端点生成弧线,
           参数有:
           startPosition, 端点1
           endPosition, 端点2
           minDistance, 计算出的线段的最小间隔距离
           heightRatio=1.0 弧线高度抬升程度,值越大,抬高得越明显
           返回值是cartesian类型的坐标数组

使用示例:

            var positionsCollection = p.map(e => {
                const toDegree = 180.0 / Math.PI;
                const cartesians = Cesium.xbsjCreateTransmitPolyline(e[0], e[1], 50.0, 5.0);
                const poss = cartesians.map(ee => {
                    const carto = Cesium.Cartographic.fromCartesian(ee);
                    return [carto.longitude, carto.latitude, carto.height];
                });

                return poss;
            });

这个czmObject下的xbsjPosition,用的是什么坐标?

这个czmObject下的xbsjPosition,用的是什么坐标?在你们的文档里查不到这些,我如果想查下边配置项的属性,这个要怎么去查呢

image


地理坐标,弧度单位
可以认为对应Cesium中的Cartographic类,只不过我们用数组表示了
怎么计算,参照Cartographic来计算就好

自定义图元 的高和宽超过一定大小后就会变的很卡 怎么破

@vtxf 老哥 自定义图元 的高和宽超过一定大小后就会变的很卡 怎么破..
@辛未年宅 是width、height还是canvasWidth和canvasHeight?
@vtxf 是canvasWidth和canvasHeight
我这里设置6144 还正常的 设置成 7144 就很卡了


这两个参数决定纹理创建的大小,
如果设置比较大,会消耗很多资源,
另外建议设置成2的幂次,即 比如128、256、512等

npm run build error

there are some errors in the running 'npm run build'.there are some Screenshots
image

XbsjEarthUI api

XbsjEarthUI api文档在正常打包情况下没有打出来api文档
image

中科院自动化所招聘Cesium开发

岗位职责:
1.基于Cesium实现三维相关功能
2.完成项目中的三维部分功能

任职要求:
1.1年以上前端开发经验,熟练掌握JavaScript;
2.2年以上三维开发经验,熟悉ThreeJS、OSG、Cesium其中任何一个三维渲染引擎。
3.熟练使用JQuery、Vue等框架;
4.了解NodeJS、Webpack;
5、根据项目情况,接受短期出差【以北京市内为主】;

薪资:面议

福利:五险一金等

就职单位:中科院自动化所某国家重点实验室【劳务派遣】或产业化公司

补充

薪资 15-30K
工作地点在 北京海淀中关村东路,如果住在北京南边,可以去丰台总部基地上班

加班情况:根据项目情况,一般不多

有需要的请联系
QQ: 15017528
email: [email protected]

请问earthsdk的双击旋转功能可以自定义一下吗?

请问earthsdk的双击旋转功能可以自定义一下吗?
请问双击旋转可以写死中心点和半径吗


flyAround

可以使用earth.camera.flyAround来操作。
image
比如这样:
earth.camera.flyAround([2.1206125026580582,0.545178729438238,15], 3000, [0, -Math.PI / 5, 0], 0, 3.14/50);

示例

效果参见数字城市示例:http://earthsdk.com/v/last/Apps/Examples/earth-digitalCity.html

取消操作

如果需要取消默认的双击旋转事件,可以使用这个方法
earth.czm.viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

左键双击自定义

添加新方法可以这样:

        earth.czm.viewer.screenSpaceEventHandler.setInputAction(event => {
            // 以下代码根据需要自行修改
            const pp = Cesium.xbsjPickPosition(viewer.scene, event.position, scratchCartesian);
            if (pp) {
                Cesium.xbsjFlyAround(viewer.camera, pp);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

可否在用XE.earth生成viewer时传入Cesium.viewer的参数呢?

想问个问题:可否在用XE.earth生成viewer时传入Cesium.viewer的参数呢?有些参数比如shouldAnimate,homeButton一类在viewer生成后无法或不方便设置。

可以设置的,效果如下:

image

代码在这里:

            // earth = new XE.Earth('earthContainer');
            earth = new XE.Earth('earthContainer', {
                // 这里设置Viewer的配置,和new Viewer(container, options)中的options一致
                homeButton: true,
                timeline: true,
            });

shp转geojson

image

系统重启 9:44:37
把shp 和 dbf等所有同名文件拖拽到这里

系统重启 9:44:42
然后export

系统重启 9:44:45
选geojson

cesiumlab 2.1.0转换max模型很暗

问题:cesiumlab 2.1.0转换max模型很暗

操作过程:max导出FBX,然后使用cesiumlab中的海量模型处理工具,处理完成后加载到场景中。

效果如下:
image

而在原始max中的效果
image

另外转成超图的s3m效果跟max也是比较接近
image

问题可能原因:
1)max导出fbx设置问题 2)cesimlab工具原因


你lab里设置下 材质

image

image
材质底色还是有效果的,这是什么原理呢?

cesium里效果和 cesium的太阳位置有很大关系;
earthsdk中可以强制修改太阳光方向。
你可以在“效果” 工具栏里 设置下强制光照看看。

实验室的 那个可视域是怎么实现的?

实验室的 那个可视域是怎么实现的?


可视域分析的原理其实就是shadowmap,图形学中的;
Cesium中的阴影其实就是用shadowmap实现的,
我们则是在Cesium已实现的阴影中进行改造,修改shader加入颜色来实现的

如果我的es6 module里有用Cesium的地方怎么处理比较好呢?

@vtxf 如果我的es6 module里有用Cesium的地方怎么处理比较好呢?module里cesium的解析是在XE.ready()之前的,那时候Cesium还是undefined。

image

如图所示,assets.js里用了Cesium,EarthComp.vue import了它。
main.js是在XE.ready()的resolve里打印的,这会Cesium才准备好。

我现在是把module都加了个init函数包起来,把cesium作为arg传进去的,但是感觉还是麻烦。请问有没有什么更好的解决方法?多谢


@skywalkershe
可以试试提前引入Cesium.js

image

<script src="../../XbsjCesium/Cesium.js"></script>
<link rel="stylesheet" href="../../XbsjCesium/Widgets/Widgets.css">

skywalkershe 16:58:51
这样的话岂不是得加载两遍cesium

skywalkershe 16:59:13
earth里会加载一遍Cesium啊

vtxf 16:59:30
不会的,earth检测已加载Cesium,就不会再次加载

场景保存是保存在本地的哪个位置

大家好,我想问一下这个场景保存是保存在本地的那个位置,我没有设置过保存地址点击保存不知道场景在哪里

image


保存到cesiumlab中,假如cesiumlab打开了的话,如果没打开,就不保存不了

保存后的场景在这里:
image

gltf轴向问题

Leven
请问导出的gltf 为啥在cesium中轴向不同,图1是在threejs中的效果

image

image

Leven
就是2.0的模型,做模型时 X与Z要调换下么


gltf分1.0版和2.0版,
Cesium默认会把2.0版的glft的z轴转到x轴来显示

看你想怎么摆放这个模型,
1 现在默认都要导出gltf2.0,尽量不要使用1.0的了;
2 gltf2.0模型的+z相当于前向,导入到Cesium中去,默认会指向正东方向。
3 做模型时可以看下模型的前向是朝哪个轴,如果不朝z轴,也可以在导出时转换,如果转换工具提供这个选项的话。
4 以上都做不好,还可以调整Cesium的Model的forwardAxis等属性,来强制修改正向。

image

倾斜、点云模型加载崩溃

@王佳莹
问题:倾斜、点云模型加载崩溃
复现操作:一段时间内频繁快速缩放浏览模型
配置/数据:
1)电脑内存是32G的;
2)点云数据原始las近135G,转换3dtiles后近101G;
3)倾斜数据原始osgb近1T,转换3dtiles后近200G;
现象:
1)浏览模型时,谷歌浏览器在任务管理器中的内存占用一直增长,长到4300MB左右,浏
览器崩溃
2)浏览点云模型时内存占用的增长速度比浏览倾斜模型时的快,点云5分钟左右崩溃,倾
斜35分钟左右崩溃
备注:
1)前端框架用的Vue, 已将Cesium相关变量放到data外或加前缀_ ;
2)原生Cesium和EarthSDK均试过,使用EarthSDK效果好一些(加载更快,崩的时间点
更后)
3)想问一下,Cesium加载模型时,浏览器占用的内存是不是不会释放,只会-直增加? ?
针对点云模型加载短时间就崩溃的情况,有什么解决办法么? ? |

想问一下,Cesium加载模型时,浏览器占用的内存是不是不会释放,只会一直增加??针对点云模型加载短时间就崩溃的情况,有什么解决办法么??


加载崩溃是因为点云和倾斜的顶层没有做LOD处理

cesium加载时需要一个一个小块去加载,此时如果小块数量过多,必然会导致内存不够

所以不管是点云还是倾斜,最重要的是处理好顶层块,让顶层块只有一个小块,就不会崩溃了

@王佳莹 因为点云的密度实际很大,越精细占用资源越大,其实如果参考potree,你会发现都会设置pointsize,这样实际点云不需要如此密集。处理的时候可以把抽稀阈值改大

我试了两种加obj的方法,想问下有什么区别

再问下,我试了两种加obj的方法,想问下有什么区别。

1.用XE.Obj.Type(earth, config)生成出来的东西并没有加入sceneTree

var config = {
"czmObject": {
xbsjType: "Cylinder", // 类型不可更改!
startPosition, // 起点
endPosition, // 终点
radius: 20, // 圆柱体的实际半径
fixScreenSize, // 固定的屏幕像素,如果为0的话,表示用实际尺寸,即radius;大于0时radius不起作用
maxSceneScale, // 使用固定的屏幕像素时,模型实际的最大缩放比例,如果设置为Number.POSITIVE_INFINITY表示没有限制
// maxSceneScale: Number.POSITIVE_INFINITY, // 无限大
},
ref: name
};
console.log(config)

                    const cylinder = new XE.Obj.Cylinder(this._earth, config);
				  console.log(earth.sceneTree.$refs[name])

我这样可以把cylinder加到地图上,但无法通过earth.sceneTree.$refs[name]索引。

  1. 通过这种方法把obj加进去:
    earth.sceneTree.root.children.push(config)
    var cylinder = earth.sceneTree.$refs[name].czmObject
    这样在scenetree里可以索引加进去的cylinder。
    我想问下,这两种方法除了第二种把obj加进了scenetree外还有什么区别呢?第二种有没有什么其他副作用呢?谢谢

第二种方式,相当于对象受sceneTree管理;直接清空数组,就会自动销毁;
第一种方式,需要手动调用destroy方法来销毁对象;
第一种方式创建的对象,也可以加到sceneTree当中,通过 scene.root.children.push(new XE.SceneTree.Leaf(obj))加入即可,加入之后,就不能手动destroy了。

材质底色

image
有没有哪位知道除了第一个参数,其它三个参数分别是什么参数?

材质底色 相当于修改模型本身的颜色
散射强度 则修改的是散射光线的照射强度
镜面强度 同上,
如果不太理解 散射强度 和 镜面强度,可能得看下图形学的书籍。。

cesium有方法获取指定范围内的实体么

image

cesium没有框选,earthsdk有一个扩展的方法,叫xbsjBoxPick,可以获取指定范围内的对象。
参数pos1和pos2, 窗口坐标,形式 {x: 123, y: 456}
返回值是结果
这个函数还没有对外开放,api文档中找不到,也没有示例,只能您自行试试了

image

xbsjBoxPickMixinh函数,在加载时调用;
需要框选的地方调用 xbsjBoxPick方法。

开启鼠标拾取后卡死

cesiumlab和浏览器中打开均存在这个问题,cesiumlab中拾取一次就卡死了,浏览器中多操作几次同样会卡死

image

CustomPrimitive移动后偶尔会消失不见的问题

http://earthsdk.com/v/last/Apps/Examples/?menu=false&url=./earth-customPrimitive-circle.html
在148行后插入 下面代码也能复现问题。

      		let viewer = earth._viewer;
			let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
			handler.setInputAction(event => {
			  var cartographic = earth.pickPosition(event.endPosition);
			  p.position = cartographic;
			  console.log(p.show);
			  console.log(p.position);
			}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

			let startTime;
			handler.setInputAction(event => {
			  console.log('left_down')
			  console.log(event)
			  startTime = new Date();
			}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

			let endTime;
			handler.setInputAction(event => {
			  console.log('left_up')
			  console.log(event)
			  endTime = new Date();
			  console.log(startTime);
			  console.log(endTime);
			  console.log(endTime - startTime);
			  if(endTime - startTime < 200){
				handler.removeInputAction( Cesium.ScreenSpaceEventType.MOUSE_MOVE)
				handler.removeInputAction( Cesium.ScreenSpaceEventType.LEFT_DOWN)
				handler.removeInputAction( Cesium.ScreenSpaceEventType.LEFT_UP)
			  }
			}, Cesium.ScreenSpaceEventType.LEFT_UP);

camera.positionWC和camera.position有啥区别

camera.positionWC和camera.position有啥区别

image


positionWC是世界坐标
position是本地坐标系的坐标

camera.positionWC = camera.transform * camera.position
当transform为单位矩阵是,二者相等

导出图片

奋斗的小鸟
@vtxf
image
请问一下,我想设置这个参数,是不是没法设置啊
奋斗的小鸟 2019/11/4 18:13:29
没这个属性,导出图片没法导出

vtxf 2019/11/4 18:14:31
可以设置,
不过,earthsdk中有现成的导出图片的接口
18:15:27
奋斗的小鸟 2019/11/4 18:15:27
好的,demo中有的吗?好像没找到

vtxf 2019/11/4 18:16:48
还没有示例。。
18:17:05
vtxf 2019/11/4 18:17:05
var img;
earth.capture(128, 128).then(image => img = image);

vtxf 2019/11/4 18:17:15
这样使用就好,128是宽度
奋斗的小鸟 2019/11/4 18:17:32
好的,我试试,谢谢
奋斗的小鸟 2019/11/4 18:18:57
[图片],那要是设置这个属性,怎么设置呢?
18:25:52
vtxf 2019/11/4 18:25:52
new Earth(container, { ... });

vtxf 2019/11/4 18:26:05
第二个参数,和Cesium的Viewer一样
奋斗的小鸟 2019/11/4 18:26:28
/强
18:33:59
acound 2019/11/4 18:33:59
Cesium场景截屏 https://www.jianshu.com/p/4317e3bbfb62

我想在XbsjEarthUI中加一个自定义的标绘

辛未年宅 9:04:33
请问各位大佬, 我想在XbsjEarthUI中加一个自定义的标绘
要怎么写一个自己的XE.Obj.Scanline啊....
image


vtxf 9:09:46
自定义标绘 可以基于 XE.Obj.CustomPrimitive 来写,两种写法,
1 自定义自己的类,new一个XE.Obj.CustomPrimitive作为变量来用,然后再做各种设置,参照数字城市的示例;
2 继承自XE.Obj.CustomPrimitive来创建一个新类,只是目前还没给出这方面的示例。。

这是移动到自己想要显示的位置之后,瓦片就会跟着鼠标动

何事秋风悲画扇 11:50:21
可是我现在初始化的瓦片,是不会跟着我鼠标移动的

何事秋风悲画扇 11:50:48
但是如果我把这个瓦片调到了我合适的位置,他会跟着我鼠标移动而移动

image


Demo 11:55:50
一个在地底下了

vtxf 11:57:53
@何事秋风悲画扇 模型飘,是因为模型在地底下,造成的错觉,可以把 地形的深度检测 开启以后再调整位置,就不会飘了

image

EarthSDK 是否开源

请问EarthSDK 是否开源,就是Cesium的扩展JS库,这里开源的是UI库吧

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.