openlayers中，画线的时候，可以用图片来代替纯色画线吗？

Question

openlayers中，画线的时候，可以用图片来代替纯色画线吗？
以往做的时候都是画的纯色的线，设置颜色，如果用图片的话，可以实现吗？

Answer 1

import Feature from 'ol/Feature'
import { LineString } from 'ol/geom'
import { Style, Stroke } from 'ol/style.js'

// 创建线
var feature = new Feature({
    geometry: new LineString(coordinates)
});

// 创建自定义样式
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let image = new Image();
let patternWidth = 10;
let patternHeight = 10;
// 图片地址
image.src = imageSrc;

// 支持canvas跨域访问图片
image.crossOrigin = 'Anonymous'

let style = new Style({
  stroke: new Stroke({
    color: "#F90",
    width: 10
  })
});
// 图片加载完成后再设置样式，否则图片无法渲染
image.onload = () => {
  canvas.width = patternWidth * window.devicePixelRatio;
  canvas.height = patternHeight * window.devicePixelRatio;
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  style.getStroke().setColor(context.createPattern(canvas, 'repeat'));
  // 设置最终样式
  feature.setStyle(style);
}