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: "3115312152303370249", //图表的ID，发布图表的地方可以找到2607404157748903944
chartSceneMain: sceneChartMain,
params:{//params是向后端接口或者SQL中定义了参数，进行参数传递，注意key的名称要和编辑器中对接数据时定义的参数名一样
}
},function(reData) {//函数回调
console.info(reData.props.id)
$("#reback_event").html(JSON.stringify(reData));
doSubmit(reData.props.id);
});
sceneChartMain.initChart("sovit3d_1", {
appType: 'sovit3d',//注意，当Sovit2D中使用了chart，这里使用SovitChart的API时必须加上这个参数
pageId: "3115312152303370249", //图表的ID，发布图表的地方可以找到2607404157748903944
},function(comId,eventType,reData) {
console.info(comId,eventType,reData)
$("#reback_event").html("组件ID："+comId+";事件类型"+eventType+";返回数据"+JSON.stringify(reData));
});
console.info(sceneMain)
});
function doSubmit(id) {
/**
* 当点击时需要刷新某个组件的数据调用此API
* 参数1：场景所在容器的ID
* 参数2：需要刷新的数据的接口标志名，这个在编辑器中的数据集管理中可以找到
* 参数3：数据集定义的数据接口的参数
*/
sceneChartMain.refreshDatas("sovit3d_1", "Rest30414827949507215360003", {
id: id
});
}
</script>
效果预览：
本例子用来说明如何通过模型的事件回调进行开发，下面点击模型后对区域的数据进行刷新操作.
点击后实现了左上角的数据刷新效果
本例子用来说明如何通过模型的事件回调进行开发，下面点击模型后对区域的数据进行刷新操作.
点击后实现了左上角的数据刷新效果
回调事件测试：
