Qt地圖自適應拉伸的實現示例

Posted on by

一、前言

用過echart的人都會遇到一個問題，就算是代碼中寫瞭window.onresize = echart.resize，也隻是橫向自適應拉伸填充頁面，垂直方向不會變化，除非指定高度才可以，這就比較鬱悶瞭，為何echart本身不會自適應呢？按道理不應該啊，莫非實現起來很困難？好吧先不管這個瞭，這個問題搜索出來一大堆解決方案，在Qt的瀏覽器控件中也有這個問題，為瞭解決這個問題想瞭兩個策略，一種是程序本身檢測尺寸變化，然後重新設置高度並載入網頁，一種是js函數設置對應的寬高，什麼時候執行呢，就是在程序界面尺寸變化的時候，兩種辦法對比下來，最終選用的後者，因為效果比較好，還是異步執行的，無需重新加載網頁，那個每次高度變化瞭就重新加載網頁的辦法在早期的作品中用過，看起來好傻逼比的。

二、功能特點

  • 同時支持閃爍點圖、遷徙圖、區域地圖、儀表盤等。
  • 可以設置標題、提示信息、背景顏色、文字顏色、線條顏色、區域顏色等各種顏色。
  • 可設置城市的名稱、值、經緯度 集合。
  • 可設置地圖的放大倍數、是否允許鼠標滾輪縮放。
  • 內置世界地圖、全國地圖、省份地圖、地區地圖，可以精確到縣，所有地圖全部離線使用。
  • 內置瞭各省市json數據文件轉js文件功能，如有數據更新自行轉換即可，支持單個文件轉換和一鍵轉換所有文件。
  • 內置瞭從json文件或者js文件獲取該區域的所有名稱和經緯度信息集合的功能，可以通過該方法獲取到信息用來顯示。
  • 依賴瀏覽器組件顯示地圖，提供的demo支持webkit、webengine、ie 三種方式加載網頁。
  • 拓展性極強，可以依葫蘆畫瓢自行增加各種精美的echarts組件，做出牛逼的效果。
  • 內置的儀表盤組件提供交互功能，demo演示中包含瞭對應的代碼。
  • 函數接口友好和統一，使用簡單方便，就一個類。
  • 支持任意Qt版本、任意系統、任意編譯器。

三、體驗地址

體驗地址：https://pan.baidu.com/s/1Ie1xGLv7tSL-9vfsv28w1Q 提取碼: wf4f   文件名：bin_map.zip
國內站點：https://gitee.com/feiyangqingyun
國際站點：https://github.com/feiyangqingyun

四、效果圖

在這裡插入圖片描述

五、相關代碼

//設置窗口大小變動echarts自動拉伸填充,此方法隻能橫向拉伸
list << QString("  window.onresize = echart.resize;");
//下面的方法用來設置畫佈的寬度高度
list << QString("  function resize(width, height) {");
list << QString("    var chart = document.getElementById('chart');");
list << QString("    chart.style.width = width + \"px\";");
list << QString("    chart.style.height = height + \"px\";");
list << QString("    echart.resize();");
list << QString("  }");

void frmEcharts::resizeMap()
{
    if (isLoad) {
#ifdef webkit
        QString js = QString("resize(%1, %2)").arg(webView->width()).arg(webView->height());
        webView->page()->mainFrame()->evaluateJavaScript(js);
#elif webengine
        QString js = QString("resize(%1, %2)").arg(webView->width()).arg(webView->height());
        webView->page()->runJavaScript(js);
#endif
    }
}

到此這篇關於Qt地圖自適應拉伸的實現示例的文章就介紹到這瞭,更多相關Qt地圖自適應拉伸的實現示例內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：