如何给OpenPlayer3 绘制图例 _制图

学向勤中得，萤窗万卷书。这篇文章主要讲述如何给OpenPlayer3 绘制图例相关的知识，希望能为你提供帮助。
问题：
使用到ol.style.Style时候，总是会使用到fillStyle,StrokeStyle,Image,Text等等
地图常规三要素：
?比例尺,图例,指向标
目前最难啃下来的就是图例，目前我们看到ol.color
解决：使用ol.colorLike
这个也可以直接赋值给fill属性的color

fill:new ol.style.Fill(
color: my_gradient
),

1.进一步挖掘，就可以发现，这个colorlike支持??HTML DOM CanvasRenderingContext2D 对象???的一个属性??CanvasPattern??
除了这一个属性之外，还支持常见#颜色值，还支持线性渐变
2.线性渐变的代码如下：

var MyCanvas = document.getElementById("cav2");

if(MyCanvas.getContext)

const ctx = MyCanvas.getContext(2d);

var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");

其中html代码简单如下：
< canvas id="cav2"> < /canvas>

【如何给OpenPlayer3 绘制图例】3.进一步发现这个对象CanvasPattern ，自身是没有任何方法和属性的。是由另一个方法创建返回
方法就是createPattern()
该方法接受两个参数
image,repaet
其中image就可以直接做成固定的图例区，然后通过id获取图里的图片即可
代码如下：

var img_lamp = document.getElementById("lamp");
var img_39 = document.getElementById("39");
var my_lamp=ctx.createPattern(img_lamp,"repeat")
var my_39=ctx.createPattern(img_39,"repeat")

设置图层fill:
vectorHDLayer.setStyle(new ol.style.Style(
fill:new ol.style.Fill(
color: my_lamp
),
stroke:new ol.style.Stroke(
color:"#24E38B",
width:2
)
));
vectorXTLayer.setStyle(new ol.style.Style(
fill:new ol.style.Fill(
color: my_39
),
stroke:new ol.style.Stroke(
color:"#24E38B",
width:2
)
));