Khal786 Khal786 - 10 days ago 9
HTML Question

draw feature in ol3 using node.js

Attempting to emit a geometry after the feature is drawn on tab 1. Then trying to redraw the feature using socket.on to be displayed on tab 2. however for some reason the feature is not drawn.

window.onload = function init() {
var source = new ol.source.Vector({ wrapX: false });
//create a base vector layer to draw on
var vector = new ol.layer.Vector({
source: source,
});

var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});

//create map
map = new ol.Map({
layers: [raster, vector],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0,0],
zoom: 10
})
});

function drawShape(value) {

var value = value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (value)
});
map.addInteraction(draw);

draw.on('drawend', function (event) {

// Get the array of features
var feature = event.feature

try {
map.removeInteraction(draw);
socket.emit('new polygon', feature.getGeometry().getCoordinates());
socket.emit('chat message', feature.getGeometry().getCoordinates());
} catch (err) { }
});
}
}

var socket = io();
socket.on('new polygon', function (msg) {

var thing = new ol.geom.Polygon(msg);

var featurething = new ol.Feature({
name: "Thing",
geometry: thing
});

source.addFeature(featurething);

});
}


when the script is run the msg contains an array of coordinates. Nothing appears in the console.

msg value

I am a beginner at node.js. anyone know what i am doing wrong

Answer

Found the error. In your socket.on callback you are calling

source.addFeatures(featurething);

when it should be

source.addFeature(featurething); // single feature, no s

or

source.addFeatures([featurething]); // put it in an array
Comments