如何在openlayers 3的SVG中创建距离刻度环？

// 创建SVG元素
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");

// 获取地理坐标
var lonlat = [10, 20]; // 示例地理坐标
var screenCoord = ol.proj.transform(lonlat, 'EPSG:4326', 'EPSG:3857');

// 创建刻度线
var numTicks = 10; // 刻度数量
var radius = 80; // 刻度环半径
var angleStep = 2 * Math.PI / numTicks; // 刻度间隔角度

for (var i = 0; i < numTicks; i++) {
  var angle = i * angleStep;
  var startX = screenCoord[0] + radius * Math.cos(angle);
  var startY = screenCoord[1] + radius * Math.sin(angle);
  var endX = screenCoord[0] + (radius + 10) * Math.cos(angle); // 刻度线长度为10
  var endY = screenCoord[1] + (radius + 10) * Math.sin(angle);

  var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
  line.setAttribute("x1", startX);
  line.setAttribute("y1", startY);
  line.setAttribute("x2", endX);
  line.setAttribute("y2", endY);
  line.setAttribute("stroke", "black");

  svg.appendChild(line);
}

// 添加刻度值
for (var i = 0; i < numTicks; i++) {
  var angle = i * angleStep;
  var textX = screenCoord[0] + (radius + 20) * Math.cos(angle); // 刻度值距离刻度线的距离为20
  var textY = screenCoord[1] + (radius + 20) * Math.sin(angle);

  var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
  text.setAttribute("x", textX);
  text.setAttribute("y", textY);
  text.setAttribute("text-anchor", "middle");
  text.setAttribute("alignment-baseline", "middle");
  text.textContent = i + 1; // 刻度值

  svg.appendChild(text);
}

// 将SVG元素添加到OpenLayers地图中
var svgElement = new ol.dom.SVGImage({
  href: 'data:image/svg+xml;utf8,' + new XMLSerializer().serializeToString(svg),
  imageExtent: ol.extent.boundingExtent([screenCoord])
});

var layer = new ol.layer.Image({
  source: new ol.source.ImageStatic({
    url: 'data:image/svg+xml;utf8,' + new XMLSerializer().serializeToString(svgElement),
    imageExtent: ol.extent.boundingExtent([screenCoord])
  })
});

map.addLayer(layer);