汉景源的博客

    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);
            }
        };


    });
    ```