SovitChart示例

Sovit2D示例

Sovit3D示例


<!DOCTYPE html>
<html lang="en">
	<head>
		<title id="page_title"></title>
		<meta name="referrer" content="strict-origin-when-cross-origin">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
		
		<link rel="stylesheet" href="https://admin.sovitjs.com/static/sovitjs/jquery-ui.css">
		<script src="https://admin.sovitjs.com/static/sovitjs/Sovit3DPaser.min.js"></script>
		<script src="https://admin.sovitjs.com/static/sovitjs/SovitChartPaser.min.js"></script>
		<!--
        	如果私有化部署时引入的是私有化系统的地址:如
        	<link rel="stylesheet" href="http://localhost:9188/static/sovitjs/jquery-ui.css">
        	<script src="http://localhost:9188/static/sovitjs/Sovit3DPaser.min.js"></script>
        	<script src="http://localhost:9188/static/sovitjs/SovitChartPaser.min.js"></script>
        -->
	</head>
	<body style="background-color: #e5e7ea;">
		<div class="main-case" style="min-height: 500px;padding-top: 30px;">
			<div class="sovitjs_body">
				<div id="main_div" style="display: flex;width: 80%;">
					<div id="theLeftDiv" style="width:100%;background-color: #FFFFFF;box-shadow: 0 1px 7px 4px #c0c5cb;padding-top: 2px;height: 796px;margin-left: 10px;overflow-y: auto;">
						<div style="padding: 20px;">
							<div>回调事件测试:</div>
							<div id="reback_event" style="height: 80px;overflow: auto;"></div>
						</div>
						<div id="sovit3d_1" style="width:1160px;height: 578px;margin-top: 0px;position: relative;">
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script>
	let sceneMain = null;
	let sceneChartMain = null;
	$(document).ready(function() {
		sceneMain = new Sovit3DPaser.SceneMain({
			/**
			 * 说明:apiurl用来定义后端接口地址。当部署方式不一样时接口地址的写法不一样。
			 * 具体写法:
			 * 数维图云端部署:https://admin.sovitjs.com/restapi
			 * 私有版部署:http://192.168.0.10:9188
			 * 私有版部署时需要写对应部署的服务器的IP及服务端口
			 * 注意:Sovit3D目前不支持离线下载文件进行引用,请使用在线引用场景(云端或者私有部署均可)
			 */
			apiurl: 'https://admin.sovitjs.com/restapi',
			publishType: 1 //1为在线引用组件 
		});
		//初始化图表参数,如果场景中没有加入图表,则不用创建
		sceneChartMain = new SovitChartPaser.SceneMain({
			apiurl: 'https://admin.sovitjs.com/restapi',
			publishType: 1 //1为在线引用组件 
		});
		sceneMain.init3d("sovit3d_1", {
			pageId: "3044205730723790849", //图表的ID,发布图表的地方可以找到2607404157748903944
			chartSceneMain: sceneChartMain, //图表解析器对象传入到3D解析器中
			params:{//params是向后端接口或者SQL中定义了参数,进行参数传递,注意key的名称要和编辑器中对接数据时定义的参数名一样
				
			}
		},function(reData) {
			console.info(reData)
			$("#reback_event").html(JSON.stringify(reData));
		});
		sceneChartMain.initChart("sovit3d_1", {
			appType: 'sovit3d',//注意,当Sovit2D中使用了chart,这里使用SovitChart的API时必须加上这个参数
			pageId: "3044205730723790849", //图表的ID,发布图表的地方可以找到2607404157748903944
		},function(comId,eventType,reData) {
			console.info(comId,eventType,reData)
			$("#reback_event").html("组件ID:"+comId+";事件类型"+eventType+";返回数据"+JSON.stringify(reData));
		});
		console.info(sceneMain)
	});
	
</script>
效果预览:
本例子用来展示了Sovit3D+SovitChart合并的场景,目前版本Sovit3D中可以直接集成chart图表。
对于Sovit3D场景中添加了Chart的场景在集成(DIV方式集成)的时候需要在js中同时调用3D解析器API和Chart解析器API 需要在模型发布时下载JS库文件和模型数据文件(svt格式)

回调事件测试:

通过数维图软件平台,实现零代码可视化开发!

免费开发我的场景