Openlayers实现星形绘制功能时报Uncaught TypeError问题求助

开发者阿泽

2026-10-2

问题原因

你代码里的geometryFunction执行顺序错误，在newCoordinates变量还未定义、计算的前提下，提前调用new ol.geom.Polygon([newCoordinates])和geometry.setCoordinates([newCoordinates])，给geometry传入了未定义的坐标值，导致OpenLayers内部判断坐标长度时读取undefined的length属性，触发你遇到的报错。

修复方案

删除开头多余的错误初始化逻辑，同时增加坐标长度校验，避免拖拽过程中坐标点数不足的报错，修复后的代码如下：

var starInteraction = new ol.interaction.Draw({
  source: vectorLayer.getSource(),
  type: 'Polygon',
  geometryFunction: function (coordinates, geometry) {
    // 先校验坐标点数是否足够：至少要有中心点和拖拽终点两个点
    if (coordinates.length < 2) return geometry;
    var center = coordinates[0];
    var last = coordinates[1];
    var dx = center[0] - last[0];
    var dy = center[1] - last[1];
    var radius = Math.sqrt(dx * dx + dy * dy);
    var rotation = Math.atan2(dy, dx);
    var newCoordinates = [];
    var numPoints = 12;
    for (var i = 0; i < numPoints; ++i) {
      var angle = rotation + i * 2 * Math.PI / numPoints;
      var fraction = i % 2 === 0 ? 1 : 0.5;
      var offsetX = radius * fraction * Math.cos(angle);
      var offsetY = radius * fraction * Math.sin(angle);
      newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
    }
    newCoordinates.push(newCoordinates[0].slice());
    // 统一处理geometry初始化和坐标赋值
    if (!geometry) {
      geometry = new ol.geom.Polygon([newCoordinates]);
    } else {
      geometry.setCoordinates([newCoordinates]);
    }
    return geometry;
  }
}); 
starInteraction.setActive(false);
starInteraction.on('drawend', onDrawend);