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需替换为公有部署版的拜访地址和端口

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