zfServiceApi.transCoors2000ToCST(coors[0],coors[1]).then(resp=>{
let data = resp;
var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 40;
var context = canvas.getContext("2d");
context.rect(0 , 0 , canvas.width , canvas.height);
var myImage = new Image();
myImage.src = "./assets/images/base.png"; //背景图片 你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous';
myImage.onload = function(){
context.drawImage(myImage , 0 , 0 , 36 , 40);
var myImage2 = new Image();
myImage2.src = item.Image; //你自己本地的图片或者在线图片
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function(){
context.drawImage(myImage2 , 7 , 7 , 22 , 22);
let x = data[1];
let y = data[2];
x = x.split(":")[1];
y = y.split(":")[1];
let feature = new ol.Feature({
geometry:new ol.geom.Point([x,y])
});
let style = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
img: canvas,
src:undefined,
imgSize: canvas ? [canvas.width, canvas.height] : undefined
})),
text: new ol.style.Text({
text: item.CreateName,
font: 'bold 16px PingFang SC',
overflow: true,
fill: new ol.style.Fill({
color: 'rgba(66, 133, 244,1)'
}),
backgroundStroke: ol.style.Stroke({
color: '#ffffff',
width: 1
}),
backgroundFill: ol.style.Fill({
color: "#ffffff"
}),
placement: "point",
offsetX: 5,
offsetY: -25,
stroke: new ol.style.Stroke({
color: '#ffffff',
width: 3
})
})
});
feature.setStyle(style);
}
};
});
```
openlayers中icon融合加文字白边
2020-06-09