實現在地圖隨意點擊，彈出文本輸入框，輸入任意文字，完成自由文本添加的功能

作者： 狐貍家的魚

Github： 八至

本文鏈接：地圖上點擊添加自由文本

關於如何QML與HTML通信已經在上一篇文章 QML與HTML通信之畫圖 詳細講述了。

1.html

//添加文本
        var addTextBoxContent;//添加文本彈出框的內容
        var addTextBoxCloser;//添加文本彈出框的關閉
        var addTextBoxTitle;
        var inputText;
        var confirmBtn;//
 
確定按鈕
        var clickCoordinate;//鼠標點擊坐標
        var addCoordinate;//鼠標點擊坐標轉換為投影坐標
        var textLabelElement;//文本元素
        var textOverlayer;//文本疊加層
        var addTextOverlay;
        //創建彈出框疊加層
        var createTextPopup = () =>{
            addTextBox = document.createElement(‘div‘);
            addTextBox.className 
 
= ‘add-text-popup‘;
            addTextBoxCloser = document.createElement(‘a‘);
            addTextBoxCloser.className = ‘ol-popup-closer‘;
            addTextBox.appendChild(addTextBoxCloser);
            addTextBoxContent = document.createElement(‘div‘);
            addTextBoxContent.className 
 
= ‘popup-content‘;
            addTextBox.appendChild(addTextBoxContent);
            addTextBoxTitle = document.createElement(‘p‘);
            addTextBoxTitle.className = ‘content-title‘;
            inputText = document.createElement(‘input‘);
            inputText.className = ‘inputText‘;
            confirmBtn = document.createElement(‘input‘);
            confirmBtn.className = ‘btn btn-primary confirmBtn‘;
            confirmBtn.type = ‘button‘;
            confirmBtn.value = ‘Confirm‘;
            addTextBoxContent.appendChild(addTextBoxTitle);
            addTextBoxContent.appendChild(inputText);
            addTextBoxContent.appendChild(confirmBtn);
            addTextBoxCloser.onclick = function(){//添加一個單擊處理程序來隱藏彈出窗口
                addTextOverlay.setPosition(undefined);
                addTextBoxCloser.blur();
                return false;
            };
            confirmBtn.onclick = ()=>{//彈出框的確定按鈕來添加文本
                createTextLabel();//調用創建文本疊加層的函數
                textLabelElement.innerHTML = $(‘.inputText‘).val();
                textOverlayer.setPosition(clickCoordinate);//文本疊加層的位置
                addTextOverlay.setPosition(undefined);//彈出框關閉
            };
            inputText.addEventListener(‘keypress‘,()=>{//給輸入框添加回車鍵監聽事件
                if(event.keyCode == 13){
                    createTextLabel();//調用創建文本疊加層的函數
                textLabelElement.innerHTML = $(‘.inputText‘).val();
                textOverlayer.setPosition(clickCoordinate);//文本疊加層的位置
                addTextOverlay.setPosition(undefined);//彈出框關閉
                }
            });
            addTextOverlay = new ol.Overlay({//彈出框的疊加層
                element:addTextBox,
                autoPan:true,
                autoPanAnimation:{
                    duration:250
                }
            });
            map.addOverlay(addTextOverlay);
        }
        //創建文本元素疊加層
        var createTextLabel = () =>{
            textLabelElement = document.createElement(‘div‘);
            textLabelElement.className = ‘text-label‘;//設置p標簽的樣式
            textOverlayer = new ol.Overlay({
                element:textLabelElement,
                stopEvent: false
            });
            map.addOverlay(textOverlayer);
        };

2.QML

在WebChannel添加信號

signal addFreeText()                    //添加自由文本

添加文本按鈕調用信號

CLButton{
        id:txaBtn;
        anchors.fill: parent;
        btnText: "TXA";
        onClicked: {
            map.addFreeText();//信號
            console.log("clicked addTextBtn");
        }
    }

html中連接信號

//添加自由文本
content.addFreeText.connect(()=>{
     createTextPopup();//添加到地圖中
     map.on(‘singleclick‘,(evt) => {//地圖響應鼠標左鍵點擊數事件
            clickCoordinate = evt.coordinate;//鼠標左鍵獲取點擊坐標
            addCoordinate = ol.proj.transform(clickCoordinate, ‘EPSG:3857‘, ‘EPSG:4326‘);//轉換鼠標左鍵獲取的坐標
            addTextOverlay.setPosition(clickCoordinate);
            console.log("before：",clickCoordinate,"\n","after:",addCoordinate);//打印坐標
     });
});

OpenLayers學習筆記（三）— QML與HTML通信之 地圖上點擊添加自由文本