关于前端:数维图编辑器APISovitJS编辑器开放API接入方法

SovitChart、Sovit2D、Sovit3D 曾经在泛滥行业畛域被应用，也受到了大家的统一好评，为了更好的二次开发，不少用户想把咱们的编辑器集成在本人的零碎中，强烈要求咱们凋谢 API 接口，通过技术团队的致力，大家千呼万唤的 API，它终于来了!

为了让大家更快的相熟数维图 SovitJS 编辑器 API，为此整顿了一份具体的教程。

数维图 API 能做什么?

有人可能会问，API 是什么? 数维图 API 又能做什么? 为什么这么多开发者急不可待要调用数维图 API? 简略的说，通过调用 API，能够将咱们的 2D、3D 和大屏编辑器无缝集成到你的业务零碎 / 产品中，实现无代码开发二维、三维可视化场景。

通过 API，能够在本人的零碎中获取产品我的项目、场景相干数据，与本人的业务数据进行关联，实现在业务零碎中对场景的治理与疾速编辑。集成数维图拖拽式编辑器后的业务零碎 / 产品，具备更强的市场上竞争力，对客户来说更具吸引力。

数维图 API 怎么调用?

调用凋谢 API 接入编辑器前，必须进行通过签名认证的形式获取会话 token。

签名认证办法

不论是云端还是公有部署版，登录零碎后都能够看到一个“开发者信息”，蕴含“开发者 Apikey”和“开发者 Secret”，通过这两个信息生成签名信息。

Apikey 和 Secret 生成签名规定：Apikey+Secret(密钥)+Timestamp(工夫戳) 组成的字符串 MD5 加明码生成。

留神：为平安起见，签名代码应由后端程序生成，Secret 不要裸露在前端代码中。Access_token 获取胜利后倡议存储在 SessionStorage 中，以便调用接口时应用。

获取 Token 办法

获取 Token：云端版获取办法

返回数据 {

"code": 200.// 返回代码 200 为胜利
"msg": "OK",// 返回音讯
"datas": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"// 返回 token 的值
}

获取 Token：公有部署版

获取办法 API 申请址： http://localhost:9188/Rest/ss…
申请 method： POST
参考申请办法如下：

$.ajax({
url: "http://localhost:9188/Rest/sso/free/getToken",
method: 'POST',
contentType: "application/json;charset=UTF-8",
data: JSON.stringify({
apikey: '3148080387327000581',
timestamp: '1234567890',
signature: '311f32ce3c9938006d296a844c3bc8d1',
userName: 'zhangs'
}),
success: function(data) {if(data.code=='200') {
access_token = data.datas;
sessionStorage.setItem("access_token",access_token);
}else{$("#re_datas").html(data.msg);
}
},
error: function(msg) {console.info(msg);
$("#re_datas").html(JSON.stringify(msg))
}
})

SSO 登录

对于公有部署版，在应用签名获取 token 会话的同时能够进行帐号登录 (注：公有部署版产品自身有本人的一套用户管理系统)，第三方零碎能够通过此办法将零碎中的帐号同步到 SovitJS 公有部署版中。

数维图编辑器怎么接入?

编辑器通过 iframe 接入到本人的零碎中。

Sovit2D 编辑器接入参考

公有版接入地址：

pageId： 要编辑的场景的 id
access_token： 会话 token
http://localhost:9188/#/sovit…
云端版接入地址：
https://admin.sovitjs.com/sov…

<iframe id="editFrame" src=""width="100%"height="850"frameBorder="0"border="none"></iframe>
<script>
let access_token = "";//token 获取获取请参考上一篇
$(document).ready(function() {
let bodyHeight = document.documentElement.clientHeight - 83;
$("#editFrame").css("height",bodyHeight);
access_token = sessionStorage.getItem("access_token");
if(access_token!=null) {$("#editFrame").attr("src","http://localhost:9188/#/sovit2dEmbed?pageId=3046607006338121987&access_token="+access_token);
}else{alert("token 不存在，请先获取 token");
}
</script>

Sovit3D 编辑器接入参考

公有版接入地址：

pageId： 要编辑的场景的 id
access_token： 会话 token
http://localhost:9188/#/sovit…
云端版接入地址：
https://admin.sovitjs.com/sov…

<iframe id="editFrame" src=""width="100%"height="850"frameBorder="0"border="none"></iframe>
<script>
let access_token = "";//token 获取获取请参考上一篇
$(document).ready(function() {
let bodyHeight = document.documentElement.clientHeight - 83;
$("#editFrame").css("height",bodyHeight);
access_token = sessionStorage.getItem("access_token");
if(access_token!=null) {$("#editFrame").attr("src","http://localhost:9188/#/sovit3dEmbed?pageId=30466070012121212121&access_token="+access_token);
}else{alert("token 不存在，请先获取 token");
}
</script>

SovitChart 编辑器接入参考

公有版接入地址：

pageId： 要编辑的场景的 id
access_token： 会话 token
http://localhost:9188/#/sovit…
云端版接入地址：
https://admin.sovitjs.com/sov…

<iframe id="editFrame" src=""width="100%"height="850"frameBorder="0"border="none"></iframe>
<script>
let access_token = "";//token 获取获取请参考上一篇
$(document).ready(function() {
let bodyHeight = document.documentElement.clientHeight - 83;
$("#editFrame").css("height",bodyHeight);
access_token = sessionStorage.getItem("access_token");
if(access_token!=null) {$("#editFrame").attr("src","http://localhost:9188/#/sovit3dEmbed?pageId=30466070012121212121&access_token="+access_token);
}else{alert("token 不存在，请先获取 token");
}
</script>

留神：localhost:9188 需替换为公有部署版的拜访地址和端口

看到这，是不是曾经急不可待想要体验一下了？