OpenLayers学习笔记（三）— QML与HTML通信之 地图上点击添加自由文本

实现在地图随意点击，弹出文本输入框，输入任意文字，完成自由文本添加的功能

作者： 狐狸家的鱼

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,"
","after:",addCoordinate);//打印坐标
     });
});