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個人住在北京的兩室一廳,一起上下班,一起玩遊戲,一起學習,玩的快樂,工作有勁,相互學習,相互進步。

相關文章