我如何在 PDF 的 Leaflet 中旋转自定义标记（在网站作品中）

Question

我致力于使用自定义图标从 Leaflet 地图创建 PDF，并将这些图标旋转到跟踪报告（汽车）的角度。我使用 leaflet-image 插件从地图创建图像，然后使用 pdfmake 将图像添加到 PDF（PDF 包含地图、table 和 canvas JS 图表）。一切正常（标记在网站上旋转）但是当我将地图图像添加到我的 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 旋转。在添加到我的地图之前，我可以用 js/jQuery 旋转图像吗？我得到的图像是：

iconUrl: 'images/stop_black.png

我还有一个问题：我的 PDF 中没有圆圈和线条。在网站上一切正常。

感谢您的帮助

Answer 1

这是我的问题的答案。我希望能帮助别人。插件 leaflat-rotate-marker 使用 css 旋转标记，当我使用插件 leaflat-image 从地图创建图像时，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
}

我如何在 PDF 的 Leaflet 中旋转自定义标记（在网站作品中）

How i can rotate a custom markers in Leaflet for PDF (in website works)

javascript

php

promise

leaflet

pdfmake