화면에 객체 입력하기

<!-- index.html -->
<!-- 
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css">
-->
<script src="https://cdn.jsdelivr.net/npm/ol-ext@4.0.13/dist/ol-ext.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/ol-ext@4.0.13/dist/ol-ext.min.css" rel="stylesheet">

원점 객체 입력

function drawShapePoint(){
    let stroke_in = { color: 'rgb(55, 55, 255)', width: 3 };
    let stroke_out = { color: 'rgb(255, 55, 55)', width: 3, lineDash: [3, 2, 3] };
    let options = {
        style: [
            {
                image: {
                    fill: { color: 'rgba(255,50,50,0.5)' },
                    stroke: stroke_out, radius: 30
                }
            }, {
                image: {
                    fill: { color: 'rgba(255,255,255,0)' },
                    stroke: stroke_in, radius: 20
                }
            }, {
                image: {
                    fill: { color: 'rgb(255,0,0)' },
                    stroke: { color: 'rgb(255,255,255)', width: 2 }, radius: 7
                }
            }],
        onlyEditMode: true,
        clearPrevious: true,
        drawend_callback: drawEndCallback,
        modifyend_callback: modifyEndCallback,
        stopdraw_callback: stopDrawCallback
    };
    gwsJS.startDrawShapes("Point", options);
}

라인 객체 입력

function drawShapesLine() {
    let options = {
        clearPrevious: true,
        drawend_callback: drawEndCallback,
        stopdraw_callback: stopDrawCallback
    };
    gwsJS.startDrawShapes("LineString", options);
}

다각형 객체 입력

function drawShapesPolygon() {
    let options = {
        drawOnlyOnce: true,
        clearPrevious: true,
        style: {
            image: {
                fill: { color: '#ff0000' + '20' },
                stroke: { color: '#ff0000', width: 2 },
            },
            fill: { color: '#ff0000' + '20' },
            stroke: { color: '#ff0000', width: 2 },
        },
        drawend_callback: drawEndCallback,
        stopdraw_callback: stopDrawCallback,
    };
    gwsJS.startDrawShapes("Polygon", options);
}

원형 객체 입력

function drawShapesCircle() {
    let options = {
        clearPrevious: true,
        drawend_callback: drawEndCallback,
        stopdraw_callback: stopDrawCallback
    };
    gwsJS.startDrawShapes("Circle", options);
}

마름모 객체 입력

function drawShapesBox() {
    let options = {
        drawOnlyOnce: true,
        clearPrevious: true,
        drawend_callback: drawEndCallback,
        stopdraw_callback: stopDrawCallback
    };
    gwsJS.startDrawShapes("Box", options);
}

정사각형 객체 입력

function drawShapesSquare() {
    let options = {
        clearPrevious: true,
        drawend_callback: drawEndCallback,
        stopdraw_callback: stopDrawCallback
    };
    gwsJS.startDrawShapes("Square", options);
}

실행해보기