使用 node.js 在 ol3 中绘制特征

Question

在选项卡 1 上绘制要素后尝试发出几何图形。然后尝试使用 socket.on 重绘要素以显示在选项卡 2 上。但是由于某种原因未绘制要素。

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);

  });
}

当脚本是运行时，消息包含一个坐标数组。控制台中没有显示任何内容。

我是 node.js 的初学者。谁知道我做错了什么

Answer 1

发现错误。在您的 socket.on 回调中，您正在调用

source.addFeatures(featurething);

什么时候应该

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

或

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

使用 node.js 在 ol3 中绘制特征

draw feature in ol3 using node.js

html

javascript

openlayers

node.js