SovitChart、Sovit2D、Sovit3D已經在眾多行業領域被使用，也受到了大家的一致好評，為了更好的二次開發，不少使用者想把我們的編輯器整合在自己的系統中，強烈要求我們開放API介面，經過技術團隊的努力，大家千呼萬喚的API，它終於來了!

為了讓大家更快的熟悉數維圖SovitJS編輯器API，為此整理了一份詳細的教程。

#1、數維圖API能做什麼?

有人可能會問，API是什麼?數維圖API又能做什麼?為什麼這麼多開發者迫不及待要呼叫數維圖API?

簡單的說，透過呼叫API，可以將我們的2D、3D和大屏編輯器無縫整合到你的業務系統/產品中，實現無程式碼開發二維、三維視覺化場景。

透過API，可以在自己的系統中獲取產品專案、場景相關資料，與自己的業務資料進行關聯，實現在業務系統中對場景的管理與快速編輯。

整合數維圖拖拽式編輯器後的業務系統/產品，具有更強的市場上競爭力，對客戶來說更具吸引力。

#2、數維圖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請求址：

請求method：POST

參考請求方法如下：

$.ajax({
url: "",
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私有部署版中。

#3、數維圖編輯器怎麼接入?

編輯器透過iframe接入到自己的系統中。

Sovit2D編輯器接入參考

私有版接入地址：

pageId：要編輯的場景的id

access_token：會話token



雲端版接入地址：

<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",");
}else{
alert("token不存在，請先獲取token");
}
</script>

Sovit3D編輯器接入參考

私有版接入地址：

pageId：要編輯的場景的id

access_token：會話token



雲端版接入地址：

<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",");
}else{
alert("token不存在，請先獲取token");
}
</script>

SovitChart編輯器接入參考

私有版接入地址：

pageId：要編輯的場景的id

access_token：會話token



雲端版接入地址：

<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",");
}else{
alert("token不存在，請先獲取token");
}
</script>

注意：localhost:9188需替換為私有部署版的訪問地址和埠

看到這，是不是已經迫不及待想要體驗一下了？