Как я могу вращать пользовательские маркеры в Leaflet для PDF (на веб-сайте работает) - PullRequest
Новая
       15

Как я могу вращать пользовательские маркеры в Leaflet для PDF (на веб-сайте работает)

0 голосов
/ 15 мая 2018

Я работаю над созданием PDF-файла из карты Leaflet с пользовательскими значками, и я поворачиваю эти значки на угол для отслеживания отчета (автомобили). Я использую плагин leaflet-image, чтобы создать изображение из карты, а затем я использую pdfmake, чтобы добавить изображение в PDF (PDF содержит JS карты, таблицы и холсты). Все работает нормально (маркеры вращаются на веб-сайте), но когда я добавляю изображение карты в свой PDF, маркеры не вращаются.

Я добавляю изображение с вращением с этим кодом 

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 ?>]

Я искал другие библиотеки, которые могут решить мою проблему.

Я получаю изображение с этим кодом 

 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. На сайте снова все в порядке.

Спасибо за вашу помощь

1 Ответ

0 голосов
/ 12 июня 2018

Это ответ на мой вопрос. Я надеюсь помочь кому-то. Плагин 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
}
...