Skyline Terra Explorer6.6彈出視窗實現複製功能

我打農村來發表於2018-11-08

前段時間繼續下來的基於Skyline的B/S專案，是基於Terra Explorer6.6實現的。專案中涉及到基於三維模型查詢裝置編碼等操作，從使用者友好角度來講，查詢到的裝置編碼應該要支援複製，方便使用者基於編碼的二次查詢和操作。

1. Terra Explorer彈出視窗限制

通常來說，在瀏覽器中複製頁面內容，是由瀏覽器右鍵支援的，雖然格式和內容我們不能定製，但是也能滿足要求。但是在TE彈出不支援右鍵複製，右鍵選單有，但是內容複製不出來。

2. clipboard.js輕量級實現剪下板js外掛

clipboard.js 是一個不需要flash，將文字複製到剪貼簿的js外掛。用法很簡單，這裡使用其中的一種方法：

    <!--html程式碼-->
    <button id="mapclipboard_btn" data-clipboard-action="copy" data-clipboard-text="">複製</button>
    //例項化剪下板物件
    var clip = new Clipboard(`#mapclipboard_btn`);

這種形式的使用思路是，觸發mapclipboard_btn按鈕的click事件後，clipboardJS外掛將data-clipboard-text屬性的內容複製到剪下板。這樣我們可以在觸發按鈕click事件前，設定好要複製到剪下板的內容。

3. 結合cliboard.js的Terra Explorer彈出視窗剪下板功能實現

這裡我們使用clipboardJS外掛，結合TE的訊息機制實現彈出視窗剪下板功能。

首先，在主頁面中加入2中程式碼，例項化剪下板物件；

其次，在TE彈出視窗，增加複製按鈕，並在觸發複製按鈕時，使用TE介面傳送複製文字訊息；

<!--彈出視窗複製按鈕-->
<input id="text" style="width: 55%; height: 20px;"/>
<button id="copy" style="width: 35%; height: 25px;">
        複製
</button>

//複製按鈕單擊事件
$("#copy").click(function () {
    var text = $("#text");
    sgworld.Window.ShowMessageBarText(text);
});

最後，在主頁面中新增訊息處理程式碼，新增剪下板內容

sgworld.AttachEvent("OnSGWorldMessage", function (messageId, sourceObjectId) {
        var clipboardText = messageId;
        $("#mapclipboard_btn").attr("data-clipboard-text", clipboardText);
        $("#mapclipboard_btn").trigger("click");
        return true;
    }

如果OnSGWorldMessage已經在使用，可以通過條件訊息型別的方式與其他訊息進行區分。至此，就實現了TE6.6中彈出視窗簡單的剪下板功能。

4. 7.0.1已經支援彈出視窗內容的複製

在寫這篇部落格時由於要使用TE7.0.1的新特性和功能，系統已經升級到TE7.0.1。順手一點右鍵複製，發現是有效的。看來老外也注意到了這個問題，已經解決了。雖然右鍵複製不是那麼友好，無法定製格式和內容，但是畢竟可以選什麼複製什麼，也算是很實用的。

寫在最後

最近早上上班總要把部落格園首頁感興趣的最多推薦、最多評論、新聞頭條、推薦新聞看一下。一方面是因為手頭專案越來越讓人頭疼，陷入了孤軍奮戰、推進困難的窘境。另一方面也在想轉眼自己已經工作將近五年了，也要邁入30歲了，有點焦慮。總覺得自己技術還可以，學習能力還不錯，但是第一次跳槽後，總感覺再也找不到適合自己的工作了。一年有大半年在外出差，現場開發、除錯，租的房子好像就是用來放行李的。每每回到自己base地，躺在床上，總不想再出差了。

出差與不出差的交織，也使本來就定力不好的我，變得懶惰，形不成好的習慣。每每是剛剛習慣了跑步，剛剛學個新東西到了一半，就會被出差或者回公司打斷。回頭看看在園子裡轉了5年，也沒有留下些什麼，自己也不知道自己沉澱了什麼，積累了什麼。於是，總想寫點什麼，不知道是擔心，還是想發洩。

真的不想一個人，很懷念剛工作的時候。6、7個人住在北京的兩室一廳，一起上下班，一起玩遊戲，一起學習，玩的快樂，工作有勁，相互學習，相互進步。

相關文章