可根据分辨率偏移几何

var style = function(feature, resolution) {
var colors = ['green', 'yellow', 'red'];
var width = 4;
var styles = [];
for (var line = 0; line < colors.length; line++) {
    var dist = width * resolution * (line - (colors.length-1)/2);
    var geom = feature.getGeometry();
    var coords = [];
    var counter = 0;
    geom.forEachSegment(function(from, to) {
        var angle = Math.atan2(to[1] - from[1], to[0] - from[0]);
        var newFrom = [
            Math.sin(angle) * dist + from[0],
            -Math.cos(angle) * dist + from[1]
        ];
        var newTo = [
            Math.sin(angle) * dist + to[0],
            -Math.cos(angle) * dist + to[1]
        ];
        coords.push(newFrom);
        coords.push(newTo);
        if (coords.length > 2) {
            var intersection = math.intersect(coords[counter], coords[counter+1], coords[counter+2], coords[counter+3]);
            coords[counter+1] = (intersection) ? intersection : coords[counter+1];
            coords[counter+2] = (intersection) ? intersection : coords[counter+2];
            counter += 2;
        }
    });
    styles.push(
        new ol.style.Style({
            geometry: new ol.geom.LineString(coords),
            stroke: new ol.style.Stroke({
                color: colors[line],
                width: width
            })
        })
    );
}
return styles;
};


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

var source = new ol.source.Vector();

var vector = new ol.layer.Vector({
  source: source,
  style: style
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
  })
});

map.addInteraction(new ol.interaction.Draw({
  source: source,
  type: 'LineString'
}));

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.1/math.min.js"></script>
<div id="map" class="map"></div>

相交测试可防止在锐角上出现此类效果

对于要素几何的每个线段，样式函数将计算设置为4个像素间隔的平行线段，而不考虑分辨率（在这种情况下，线宽和间距相同），用于以原始线段为中心的样式几何（例如如果三种颜色则中心样式线将跟随原始样式线并且外部样式线偏移+/-4，如果两种颜色，则每条线将偏移+/-2）最初，平行线段与原始线段长度相同，但需要在外角处增加或在内角处减小，因此使用math.intersect来找到它们应当结合以形成连续线的点。最后，对于每种颜色，完成的线串用作颜色样式的几何图形，并返回包含每种样式的数组。
这是第二个例子，每个偏移线都有自己的宽度和笔划图案，而不是简单的颜色和固定的宽度。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

我有一个版本的这个工作-但不是当我缩放图表。
Lines separates on zoom
我在图表上绘制线条（来自数据库），并使用我们的函数绘制线条。
我试着在这里插入代码，但是我在javascript中的函数没有运行。我如何在代码片段中使用函数？

function print_my_string( my_string )
{

   console.log( my_string );

}

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.1/math.min.js"></script>
<div id="map" class="map"></div>

//  How do I use the java-script (Include before called...

<script>print_my_string( "Hello" );</script>