javascript - 我如何在 PDF 传单中旋转自定义标记(在网站作品中)

Question

我致力于使用自定义图标从传单 map 创建 PDF，并将这些图标旋转到轨迹报告(汽车)的 Angular 。 我使用 leaflet-image 插件从 map 创建图像，然后使用 pdfmake 将图像添加到 PDF(PDF 包含 map 、表格和 canvas JS 图表)。 一切正常(标记在网站上旋转)，但是当我将 map 图像添加到 PDF 时，标记没有旋转。

I add the image with rotation with these code

var marker=[
  <?php foreach($track as $key => $value){ ?>L.marker([
  <?php echo $value['Y']; ?>,
  <?php echo $value['X']; ?>],{icon: icon
  <?php echo $value['Eng']; ?>, rotationAngle: 
  <?php echo $value['Angle']; ?> }).bindPopup("
  <?php echo date("Y-m-d H:i:s", $key); ?> / speed: 
  <?php echo $value['Speed']; ?> km/h." ),
  <?php } ?>
<?php ?>]

我正在寻找其他可以解决我的问题的库。

I get the image with these code

 var icon3 = L.icon({
    iconUrl: 'images/direction_green.png',
    iconSize:     [12, 12],
    iconAnchor:   [0, 0],
    popupAnchor:  [15, -8]
    });

    var icon2 = L.icon({
    iconUrl: 'images/stop_green.png',
    iconSize:     [12, 12],
    iconAnchor:   [0, 0],
    popupAnchor:  [15, -8]
    });

    var icon1 = L.icon({
    iconUrl: 'images/stop_blue.png',
    iconSize:     [12, 12], 
    iconAnchor:   [0, 0],
    popupAnchor:  [15, -8]
    });

    var icon0 = L.icon({
    iconUrl: 'images/stop_black.png',
    iconSize:     [12, 12],
    iconAnchor:   [0, 0],
    popupAnchor:  [15, -8]
    });

然后我使用汽车相应的状态标记(发动机打开、发动机关闭等...)

我发现问题是这个旋转是html旋转。 在添加到 map 之前我可以使用 js/jQuery 旋转图像吗？ 我得到的图像是:

iconUrl: 'images/stop_black.png

我还有一个问题: 我的 PDF 中没有圆圈和线条。 在网站中一切都恢复正常。

感谢您的帮助

Answer 1

这就是我的问题的答案。 我希望能帮助某人。 插件 leaflat-rotate-marker 使用 css 来旋转标记，当我使用插件 leaflat-image 从 map 创建图像时，PDF 中的标记没有旋转，因为 leaflat 图像不适用于 html 和 css。 我的完整代码是这样的:

processArray(js_tracks); //call processArray with my array

async function processArray(array) {
    shelterMarkers.eachLayer(function(layer){ //remove previous markers because i call this function onload and on map zoomed.  
        mymap.removeLayer(layer);
    });

    for (let item of array) {
        if(icontmp[item['Reakt']][item['Angle']] != -1){ //array icontmp is my cash for previous created markers.
            var iUrl = icontmp[item['Reakt']][item['Angle']];
        }
        else{ // if i don't have cashed markers with same angel await for delayedLog where i rotate the markers by angle and specific condition (item['Reakt'])
            icontmp[item['Reakt']][item['Angle']] = await delayedLog(item['Angle'], item['Reakt']);
            var iUrl = icontmp[item['Reakt']][item['Angle']];           
        }

        var ico = L.icon({ //create a object with marker
            iconUrl: iUrl,
            iconSize: [(4.5*(mymap.getZoom()))/2, (4.5*(mymap.getZoom()))/2], // resize by map zoom
            iconAnchor: [15, 15],
            popupAnchor: [-10, -10]
        });

        L.marker([item['Y'], item['X']], // add X and Y cordinats
        {icon: ico})
        .bindPopup("<p>Време: "+item['dateTime']+" </p><p> скорост: "+item['Speed']+" км/ч.</p><p> Реакция: "+item['Reaktion']+" </p><p> "+item['Engine']+" </p>" ).addTo(shelterMarkers); // add to shelterMarkers
    }
    shelterMarkers.addTo(mymap); // add to map when ready
}


function delayedLog(angles, reak){
     if(reak == 0){
         var imgs = '<?php echo base_url();?>/images/stop_blue.png';
     }
     else if(reak == 1){
         var imgs = '<?php echo base_url();?>/images/stop_green.png';
     }
     else if(reak == 2){
         var imgs = '<?php echo base_url();?>/images/direction_green.png';
     }
     else if(reak == 3){
         var imgs = '<?php echo base_url();?>/images/stop_red.png';
     } 
     else if(reak == 4){
         var imgs = '<?php echo base_url();?>/images/direction_red.png';
     }
     else{
         var imgs = '<?php echo base_url();?>/images/stop_black.png';
     }

    var image = loadImage(imgs).then(function (img) { //there i wait for load a image resource. Without it sometimes loading an empty blank instead of a finished image. loadImage is a function from plugin image-promise.min.js

        let canvass = document.createElement('canvas');
        let context = canvass.getContext('2d');
        canvass.width = 50;
        canvass.height = 50;
        context.translate(15, 15);
        context.rotate(angles*Math.PI/180); //rotate by angle
        context.translate(-15, -15);
        context.drawImage(img, 0, 0, img.width, img.height);
        return canvass.toDataURL(); // when ready return dataurl
    })
    return image; // return dataurl to processArray
}