SM_webGL三维开发note（二）

最新推荐文章于 2024-07-17 00:34:37 发布
最新推荐文章于 2024-07-17 00:34:37 发布
阅读量894 收藏 1
点赞数
分类专栏： GIS_开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44124800/article/details/104399539
版权
一、webGL三维开发

…\supermap-iserver-10.0.1-win64-zip\iClient\for3D\webgl\zh目录下

  • \examples --示例程序（源代码方便开发人员快速构建应用）
  • \Build\Cesium --开发脚本库
  • \index.html --首页，整合示范程序、类参考说明以及专题技术文档
  • iClient3D for webgl具有的能力：在这里插入图片描述
  • 示例、API:
    http://support.supermap.com.cn:8090/webgl/examples/examples.html#layer
    看cesium API文档
    http://support.supermap.com.cn:8090/webgl/Build/Documentation/index.html
            webGL 应用的倾斜摄影: 加载倾斜摄影模型–>对它进行单体化
  • http://www.supermapol.com/earth/
二、webGL–helloworld:
  • 1.引入脚本库
    在这里插入图片描述
    代码路径修改为： paths: {
    ‘Cesium’: ‘…/Build/Cesium/Cesium’ },
    新建index.html 文件，添加下面代码块代码
  • 2.添加三维场景的装载容器
  • 3.显示三维场景
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
		<title>helloWorldwebGL</title>
		<link href="css/widgets.css"rel="stylesheet">
		<script type="text/javascript"src="js/require.min.js"data-main="js/main"></script>
	</head>
	<body>
		<div id="cesiumContainer"style="width:100%;height:100%"></div> <!--div 命名的对象id用来承载整个三维场景-->
		<script type="text/javascript">
				var viewer;
				function onload(Cesium){
						viewer=new	Cesium.Viewer('cesiumContainer');<!--Viewer包含三维球和以外的东西(弹窗等)-->
						var scene=viewer.scene;<!--Viewer包含三维场景，(通过)显示其就可以显示三维场景；定义scene对象-->
				}
		</script>
	</body>
</html>
  • 4.发布工程
    在这里插入图片描述
      电脑开启服务：startup.bat ;使用浏览器访问： http://localhost:8090/helloWorld/index.html
三、Viewer中的数据组织

在这里插入图片描述
不完整例子编码诠释上图：scene.primitives.add(new Cesium.Primitive({
geometryInstances : instance,
appearance : new Cesium.EllipsoidSurfaceAppearance({
material : Cesium.Material.fromType(‘Checkerboard’)
})
}));//primitives是集合，可以使用add方法添加树形下面的实例

var collection = new Cesium.PrimitiveCollection();

collection.add(billboards);

new Cesium.S3MInstance(context, index, ownerGroup, options) S3M模型实例对象。

Name Type Description
context Context context对象。
index Number 该实例所在组的索引位置。
ownerGroup Object 该实例所在组。
options Object 对象具有以下属性：

//new S3MTilesLayer instance //通过该图层类实现加载缓存

var S3MTilesLayer = new S3MTilesLayer({
gl : gl,
servers : [“http://localhost:8090”],
urls : [“http://localhost:8090/data/tile_001.xml”,“http://localhost:8090/data/tile_002.xml”],
position : [10,20],
name : [“S3MTilesLayer”]
});
TerrainProvider添加到**图层中 再添加到scene中 从上图中看出（同一时间）地形只有（可以添加）1个，影像有多个
//camera帮助我们定位的

四、客户端加载数据–保存的场景

打开startup.bat；访问：localhost：8090/iserver/manager 主页->服务管理页面->三维服务下有数据(3D-CBD)-点击->进入rest服务根目录下（localhost：8090/iserver/services/3D-CBD/rest/realspace/scenes/CBD ） （支持浏览s3m缓存）

  • 1.初始化Viewer和Scene(场景类)
    加载保存在工作空间中的三维场景localhost：8090/iserver/services/3D-CBD/rest/realspace
  • 2.获取场景服务地址
  • 3.打开场景
    通过Scene.open(url)方法加载
  • 4.设置相机视角，转换坐标

以下编码 均未运行！

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<title>数据加载</title>
		<link href="css/widgets.css" rel="stylesheet">
		<script type="text/javascript" src="js/require.min.js" data-main="js/main"></script>
		<script type="text/javascript">
			var viewer,url;
			function onload(Cesium){
				viewer=new Cesium.Viewer('cesiumContainer');
				var scene= viewer.scene;
				
				var url="http://localhost:8090/iserver/services/3D-CBD/rest/realspace";
				var promise=scene.open(url);//
				Cesium.when(promise,function(layers){
				         scene.camera.setView({destination:new       Cesium.Cartesian3.fromDegrees(116.45438,39.910263,2000)});
						   });										
			}	
		</script>	
	</head>
	<body>
		<div id="cesiumContainer" style="width:100%;height:100%"></div>
	</body>
</html>
  • 访问 localhost:8090/helloWorld/addData-2.html
五、客户端加载数据–s3m（Spatial 3D Model）缓存图层
  • 加载三维切片缓存—*.s3m格式
  • 倾斜摄影模型、BIM模型、点云数据、精细模型、矢量数据等。
  • 通过Scene.addS3MTilesLayerByScp(url,options) 的方式

    • 1.获取S3M图层服务地址

    • 2.添加S3M图层服务

    • 3.设置相机视角，转换坐标

      找到发布的（数据服务 data-bim/rest），三维服务下的3D-bim/rest
      localhost:8090/iserver/services/3D-bim/rest/realspace/datas/bim/config 再点击获取配置文件 得到此 需要的地址

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<title>数据加载</title>
		<link href="css/widgets.css" rel="stylesheet">
		<script type="text/javascript" src="js/require.min.js" data-main="js/main"></script>
		<script type="text/javascript">
			var viewer,url;
			function onload(Cesium){
				viewer=new Cesium.Viewer('cesiumContainer');
				var scene= viewer.scene;
				// 博文中步骤五 添加BIM模型
				var url = 'http://localhost:8090/iserver/services/3D-bim/rest/realspace/datas/bim/config';
				var promise = scene.addS3MTilesLayerByScp(url,{name:'bim'});
				Cesium.when(promise,function(layer){
					//设置相机视角，将经度、纬度、高度的坐标转换为笛卡尔坐标
					scene.camera.setView({destination:Cesium.Cartesian3.fromDegrees(106.453557529491150,29.476442887855072,100)});		
				});
					*/										
			}	
		</script>	
	</head>
	<body>
		<div id="cesiumContainer" style="width:100%;height:100%"></div>
	</body>
</html>
六、客户端加载数据–影像、CesiumTerrainProvider
/加载  影像
				var imageryLayers=viewer.imageryLayers;
				地形可以加载一个，但影像可以加载多个
				var imageryProvider=new Cesium.SuperMapImageryProvider({
				url:'http://www.supermapol.com/realspace/services/3D-zf_tin_image_z/rest/realspace/datas/image'
				});
				var layer=imageryLayers.addImageryProvider(imageryProvider);
				viewer.flyTo(layer);

加载地形
				var viewer=new Cesium.Viewer('cesiumContainer',{
					terrainProvider:new Cesium.CesiumTerrainProvider({
					url:'http://www.supermapol.com/realspace/services/3D-zf_tin_image_z/rest/realspace/datas/info',
					requestWaterMask:true,
					requestVertexNormals:true,
					isSct:true//地形服务源自SuperMap iServer发布时需设置isSct为true		
				
					})
				});
七、客户端加载数据–影像
  • var imageryProvider=new Cesium.SuperMapImageryProvider
    imageryProvider支持加载的数据类型：
    在这里插入图片描述
八、客户端加载数据–KML
  • KML可包含点、线、面、地标、模型、动画模型等要素
<tilt>0</tilt>
<roll>0</roll>
</Orientation>
<Scale>
<x>1</x>
<y>1</y>
<z>1</z>
</Scale>
  <Link><href>../models/crane.gltf</href></Link>
  </Model>
  </Placemark>
  </kml>

//上面..中包含编码
viewer.dataSources.add(Cesium.KmlDataSource.load('kml/crane.kml',{
	camera:viewer.scene.camera,
	canvas:viewer.scene.canvas
}));
九、客户端加载数据–CZML

CZML是一种JSON格式的字符串，其包含点、线、地标、模型等元素
用于描述与时间有关的动画场景，加载方式如下

var dataSource=new Cesium.CzmlDataSource();
var czml=‘data/simple.czml’;
dataSource.load(czml);
viewer.dataSources.add(dataSource);

十、客户端加载数据–GeoJson

GeoJson是较为通用的一种网络矢量数据传输方案，加载方式如下：

viewer.dataSources.add(Cesium.GeoJsonDataSource.load('mydata.geojson',{
	stroke:Cesium.Color.BLUE.withAlpha(0.8),
	strokeWidth:2.3,
	fill:Cesium.Color.RED.withAlpha(0.3),
	clampToGround:true
}));
code_practice66
关注
专栏目录
基于WEBGL纯js无框架3D机房源码
11-20
基于WEBGL纯js无框架3D机房源码,没有使用任何框架,支持硬件加速,点击事件,拖拽
cloth:使用WebGL进行3D布模拟
05-05
布 网址：http： 使用3D WebGL库three.js（ ）实现的3D布料模拟
Unity实现三维地球 V1.0
最新发布
qq_26686865的博客
07-17 698
Unity实现三维地球版本更新。新增大气、云、URP管线、修复Vulkan。
SM_webGL三维开发笔记
Code66_3444124800的博客
02-14 471
今天使用的软件是SuperMap iServer和webGL开发包，推荐下载iServer的64位Zip包：http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id=1203 三维场景能与二维场景联动么，例如鹰眼图 14:57超图-宋翔 可以的，请下载http://support.supermap.com.cn/Uploa...
基于webgl的三维点云可视化研究
11-10
随着倾斜摄影测量和Lidar广泛应用，三维点云成为地理空间数据的重要数据种类。海量的三维点云数据一直是webgis可视化发布的难点。文章基于webgl框架，研究了三维点云数据切片分级等数据组织方法，并开发了相应软件。对利用倾斜摄影测量所建立的三维点云数据进行处理，在自主开发的webgl客户端上实现了数据三维点云的实时可视化浏览。
LIDAR 点云三维显示
06-02
基于OPENＬ的ＬＩＤＡＲ点云显示，Ｃ＋＋
webgl.zip_WebGL怎么下载_webgl_webgl开发工具_webgl示例
09-21
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中呈现交互式的三维图形。这个"webgl.zip"压缩包显然包含了多个WebGL的示例项目，可以帮助学习者理解并掌握WebGL的基本概念和应用。下面我们...
基于WEBGL的三维地形可视化研究.rar_webgl_三维地形_基于WEBGL的三维地形可视化研究
07-15
基于WEBGL的三维地形可视化研究，使用 WebGL 和 HTML5 实现了三维地形可视化
webgl.zip_webGl读取文件_webgl obj 例子_webgl obj_webgl 读取obj_webgl
09-23
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中实现交互式的三维图形。这个"webgl.zip"文件包含的是一个关于如何在WebGL中读取并显示OBJ模型的实例。OBJ是一种常见的3D模型文件格式，用于...
一种基于WebGL技术的网页端大量二维文字绘画技术_大量二维文字_webgl_three.js_
09-29
一种可以在基于WebGL技术的主流浏览器上显示巨量二维矢量文本文字而不会明显增加浏览内存消耗和明显增加前端网页转化文本矢量数据所需时间的技术。通过此技术可以在一些低配置的设备上展示WebGL时当展示内容含有巨量...
webgl_webGL帧缓存_webgl缓存_源码
10-01
代码说明如何实现webgl帧缓存。里面包含了HTML，JS， GLSL的代码。
Unity3D教程：实现谷歌地球旋转效果2
08-08
Unity3D教程：实现谷歌地球旋转效果2
unity三维地球demo
03-21
unity三维地球demo描述 https://blog.csdn.net/dxs1990/article/details/105111206
逼真地球 模型 转动有大气层流动效果
08-13
之前下载了一个地球模型，他是半边白天半边黑夜，这是在其基础上改为了全白天，云层流动，效果逼真！适用于数据可视化片头震撼展示
纯原生webgl制作地球模型
08-12
纯原生webgl制作地球模型,涉及着色器，纹理，矩阵变换，事件交互等webgl知识
Unity打安卓包 Android 所有错误解决方案大全(几乎囊括所有打包错误 )
热门推荐
ChinarCSDN的博客
03-17 6万+
Unity打安卓包 Android 所有错误解决方案大全(几乎囊括所有打包错误 ) Unity打包出错解决方案，本文提供全流程，中文翻译。 解决修复所有Unity报错教程 助力快速解决 Unity 打包中常见错误 1.未设置修改包名 / 公司名 / 项目名 2.Unity版本低，需要安卓工具版本也低些 3. Vuforia AR 发开中，打包安卓报错 4.脚本引用 UnityEditor,无法打包 5.Socket: bind failed, error:套接字绑定失败
SuperMap iClient for Leaflet创建GIS数据并用配置脚本库文件
1
04-27 344
最近学习了如何将创建的GIS数据发布到iServer服务并使用代码来将地图在Web端展现出来。下面是我的具体操作步骤： 首先我们要打开SuperMap iDesktop来制作一个GIS数据，这里就直接使用iDesktop自带的sample来说明，直接打开SuperMap的安装目录 好了，GIS数据准备到位之后就要创建iServer的服务。在创建之前我们需要先确定需要创建的服务类型...
unity三维地球实现方法
发布unity，三维模型的相关内容
06-23 7851
调用瓦片服务，在unity中生成三维地球。
九、瞰景Smart3D Viewer浏览器
soarscape的博客
03-11 5540
瞰景Smart3D Viewer是一个免费、轻量级的可视化软件，用于浏览Smart3D生产的三维模型数据并展示在场景中。 Smart3D Viewer支持直接拖拽文件夹打开，Viewer将自动识别文件夹下所有模型文件，也支持拖拽索引打开模型。 9.1 数据加载 打开Smart3D模型文件夹（其他建模软件生成的模型metedata.XML文件需要放入到与瓦片文件同一级 可同时导入打开多个区域模型或者单块模型（支持OSGB SDB OBJ FBX格式）导入， 同时也支持场景合并，同一地区可自动进行模型合并浏览
超图软件的WebGL三维数据加载与应用流程
"本资源是关于WebGL三维数据加载的介绍，主要涵盖了三维Web应用的实现流程、数据制作、服务发布以及客户端加载等关键步骤。其中，重点提到了多种三维数据格式，包括S3M、OSGB、GLTF/DAE，并介绍了如何将不同类型的三...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值