Openlayers用图片填充面

概述

我们知道openlayers通常设置feature要素的方式主要是通过ol.style.stroke描边和ol.style.fill填充,这对比较简单的样式设置十分有效。如果要设置feature的图标，还可以通过ol.style.Icon加载外部图片资源，但是如果要设置面的填充，就需要稍微复杂的设置。

效果

解决方案

colorlike

openlayers中定义了colorlike类型, 通过ol.colorlike可以加载图片资源，返回的是一个CanvasPattern,而ol.style.fill的color属性可以接收这个值，从而实现图片的填充。
colorlike提供一个方法asColorLike，参数可以是一个图片，返回一个 color,其类型为Color|ColorLike|Patttern

CanvasPattern

但是在开发中，用到比较多的是CanvasPattern,它是canvas中的类型，在 MDN 中的描述如下

CanvasPattern接口表示一个不透明对象，描述了一个基于图像、画布或视频的模板，该模板通过CanvasRenderContext2D.createPattern方法创建。
它们可用作fillStyle或strokeStyle

CanvasRenderContext2D就是通过canvas.getContext("2d")获取的canvas 2d 的上下文环境

但是如果我们需要动态改变填充图片的透明度，单纯依靠CanvasPattern是无法实现，因为如上的定义中已经提及它是表示一个不透明对象，如果外部资源图片是一个透明图片呢，那样也只能保证初始是透明，而无法动态修改。这时就需要用到canvas中的 API 了。

canvas的魔力

先看看如下示例

export const getImagePattern = (imgUrl, opacity = 1) => {
   
  return new Promise((resolve, reject) => {
   
    v