피처 상호작용 (Interaction)

피처 선택

async function select() {
    const kgisTfLayers = gwsJS.getLayers().find(el => el.getProperties().title === 'kgisEditor_LOCAL.xml');
    const featureLayer = kgisTfLayers.getLayers().getArray().find(layer => layer.getProperties().layerName === 'fd_pole.loc');

    const featureSelect = gwsJS.edit.createSelectInteraction({ 
            layers: [featureLayer],
            hitTolerance: 10
    });

    gwsJS.getMap().addInteraction(featureSelect);
}

<button onclick="select()">피처 선택</button>

피처 이동

async function translate() {
    const kgisTfLayers = gwsJS.getLayers().find(el => el.getProperties().title === 'kgisEditor_LOCAL.xml');
    const featureLayer = kgisTfLayers.getLayers().getArray().find(layer => layer.getProperties().layerName === 'fd_pole.loc');
    const featureSelect = gwsJS.edit.createSelectInteraction({ 
            layers: [featureLayer],
            hitTolerance: 10
    });
    gwsJS.getMap().addInteraction(featureSelect);

    const translateInteraction = gwsJS.edit.createTranslateInteraction({
		  features: featureSelect.getFeatures(),
    });
    gwsJS.getMap().addInteraction(translateInteraction)
}

<button onclick="translate()">피처 이동</button>

피처 그리기

async function draw() {
    const newLayer = new ol.layer.Vector({
        source: new ol.source.Vector(), 
        style: new ol.style.Style({ 
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({ color: 'rgba(255,255,255,1)' }),
                stroke: new ol.style.Stroke({ color: 'rgba(0, 102, 255, 1)', width: 2 })
            })
        })
    });
    gwsJS.getMap().addLayer(newLayer);

    const poleDraw = gwsJS.edit.createDrawInteraction({
        source: newLayer.getSource(),
        type: 'Point'
    });
    gwsJS.getMap().addInteraction(poleDraw);
}

<button onclick="drawInteraction()">피처 그리기</button>

피처 스냅 / 피처 맞춤

async function snap() {
    const newLayer = new ol.layer.Vector({
        source: new ol.source.Vector(), 
        style: new ol.style.Style({ 
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({ color: 'rgba(255,255,255,1)' }),
                stroke: new ol.style.Stroke({ color: 'rgba(0, 102, 255, 1)', width: 2 })
            })
        })
    });
    gwsJS.getMap().addLayer(newLayer);

    const snap = gwsJS.edit.createSnapInteraction({
    source: newLayer.getSource(),
    edge: true,
    vertex: true,
        pixelTolerance: 30
    });
    gwsJS.getMap().addInteraction(snap);
}

<button onclick="snap()">피처 스냅</button>

실행해보기