Openlayers 5 Typescript-交互式绘制形状

Question

如何在Openlayers 5 / Typescript中做到这一点？

是否还有一种方法可以识别绘制的矩形？向量层上可能还有其他功能。

解决方案：

<script>
function RefreshPage() {
        window.location.reload(true);
    }
    function ClearFields(field) {
        switch (field) {
            case 'I':
                $("#txtItemNumber").val("");
                break;
            case 'A':
                $("#txtItemNumber, #txtCategoryNumber").val("");
                break;
            case 'C':
                $("#txtCategoryNumber").val("");
                break;
        }
    }
</script>

 <td>
            <input placeholder="ItemNumber" type="text" id="txtItemNumber"
                   style="font-size:large;text-align: center; height: 44px;" />
        </td>
        <td style="padding-left:20px;">
            <div>
                <button onclick="RefreshPage(); return false;" type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-refresh"></span>Refresh</button>
            </div>
        </td>
        <td style="padding-left: 20px;">
            <div>
                <button onclick="ClearFields('I'); return false;" type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-clear"></span>Clear</button>
            </div>
        </td>
        <td style="padding-left: 20px;">
            <div>
                <button onclick="ClearFields('A'); return false;" type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-clear"></span>ClearAll</button>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <label style="font-size:large;">
                Enter Category Number:&nbsp;
            </label>
        </td>
        <td>
            <input placeholder="Category Number" type="text" id="txtCategoryNumber"
                   style="font-size:large; text-align: center; height: 44px;" />
        </td>
        <td style="padding-left: 22px;">
            <div>
                <button onclick="ClearFields('C'); return false;" type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon=clear"></span> Clear</button>
            </div>
        </td>
    </tr>

Answer 1

获取特征的一种方法

this.draw.on('drawend',(event)=>{
  this.myLatestNewFeature = event.feature;
});