OpenLayers學習筆記(二)— QML與HTML通信之畫圖


作者: 狐狸家的魚

Github: 八至

本文鏈接:QML與 HTML通信—實現QML中點擊功能按鈕在地圖上畫圖

 一、HTML-map 

        var drarGraphic;
        var drawType;function addDrawInteraction(){
            var geometryFunction;
            console.log(drawType);
            if(drawType !== ''){
                if (drawType === 'RecTangle') {
                    drawType = 'Circle';
                    geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
                } 
                drarGraphic = new ol.interaction.Draw({
                type:drawType,
                source:vectorSource,//數據源
                geometryFunction: geometryFunction
            });
            map.addInteraction(drarGraphic);//添加畫圖功能在地圖中
            }
        };        

二、QML

1.創建WebChannel

WebControl.qml,此qml頁面為創建webchannel

import QtQuick 2.7
import QtWebChannel 1.0
QtObject {
//一個具有屬性、信號和方法的對象——就像任何普通的Qt對象一樣
    id: mapController
    WebChannel.id: "content"//ID將作為在WebEngineView端的已知對象
  //信號
    signal drawGraphic(string type)         //畫圖
}
 

2.將ID分配給WebEngineView,並在該通道注冊QtObject的ID。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.3
import QtWebEngine 1.3
import QtWebChannel 1.0
WebControl {//WebControl.qml作為組件
        id: map;
    }
WebEngineView {
        id: mapView_1;
        anchors.fill: parent;
        url: "./Map.html";//html的url地址
        webChannel: WebChannel {
               registeredObjects: [map];//注冊ID
         }
}

3.QML與HTML交互

(1)在HTML端引入WebChannel的JavaScript庫

<script type="text/javascript" src="qwebchannel.js"></script>

(2)在windows.onload()事件上創建QWebChannel,並獲取后端對象

window.onload =() =>{
       new QWebChannel(qt.webChannelTransport, (channel)=> {
           var content = channel.objects.content;//自定義
}

(3)html調用QWebChannel的方法,連接到它的信號並訪問它的屬性

window.onload =() =>{
       new QWebChannel(qt.webChannelTransport, (channel)=> {
           var content = channel.objects.content;//自定義
           //畫圖
           content.drawGraphic.connect((type)=>{//連接WebControl.qml中的drawGraphic(string type)信號
                 drawType = type;
                 map.removeInteraction(drarGraphic);
                 addDrawInteraction();
           });
    
}        

(4)qml中畫圖按鈕調用信號

//畫線段 這里只貼了畫直線的代碼 其他畫圖按鈕調用信號方法一樣的
BorderButton{
       width: right.width/9;
       height: btnHeight;
       borderbtnText:"Line";
       onClicked: {
            var type = 'LineString';
            console.log('clicked drawLine');
            map.drawGraphic(type);
       }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM