Javascript 如何在PDF传单中旋转自定义标记（在网站中）
我正在使用自定义图标从传单地图创建PDF，并将这些图标旋转到轨道报告（汽车）的角度。 我使用传单图像插件从地图创建图像，然后使用pdfmake将图像添加到PDF（PDF包含地图、表格和画布JS图表）。 一切正常（标记在网站上旋转），但当我将地图图像添加到PDF时，标记没有旋转 我用这些代码添加带有旋转的图像 然后我为汽车使用相应的状态标记（发动机打开、发动机关闭等） 我发现问题是这个循环就是html循环。 在添加到地图之前，我可以用js/jQuery旋转图像吗？ 我通过以下方式获得图像：Javascript 如何在PDF传单中旋转自定义标记（在网站中）,javascript,php,promise,leaflet,pdfmake,Javascript,Php,Promise,Leaflet,Pdfmake,我正在使用自定义图标从传单地图创建PDF，并将这些图标旋转到轨道报告（汽车）的角度。 我使用传单图像插件从地图创建图像，然后使用pdfmake将图像添加到PDF（PDF包含地图、表格和画布JS图表）。 一切正常（标记在网站上旋转），但当我将地图图像添加到PDF时，标记没有旋转 我用这些代码添加带有旋转的图像 然后我为汽车使用相应的状态标记（发动机打开、发动机关闭等） 我发现问题是这个循环就是html循环。 在添加到地图之前，我可以用js/jQuery旋转图像吗？ 我通过以下方式获得图像： ico
iconUrl: 'images/stop_black.png
谢谢你的帮助这是我问题的答案。 我希望能帮助别人。 plugin Leavlat rotate marker使用css旋转标记，当我使用plugin Leavlat image从地图创建图像时，PDF中的标记没有旋转，因为Leavlat image不使用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
}
processArray（js_轨迹）//使用我的数组调用processArray
异步函数processArray（数组）{
eachLayer（函数（层）{//删除以前的标记，因为我调用这个函数onload和onmap zomed。
mymap.removeLayer（层）；
});
for（数组的let项）{
如果（icontmp[item['Reakt']][item['Angle']]！=-1）{//array icontmp是我以前创建的标记的现金。
变量iUrl=icontmp[项目['Reakt']][项目['Angle']]；
}
否则{//如果我没有相同角度的兑现标记，请等待delayedLog，在这里我按角度和特定条件旋转标记（项目['Reakt']）
icontmp[item['Reakt'][item['Angle']]=Wait delayedLog（item['Angle']，item['Reakt']）；
变量iUrl=icontmp[项目['Reakt']][项目['Angle']]；
}
var ico=L.icon（{//创建带有标记的对象
iconUrl:iUrl，
iconSize:[（4.5*（mymap.getZoom（））/2，（4.5*（mymap.getZoom（））/2]，//按贴图缩放调整大小
iconAnchor:[15,15]，
popupAnchor:[-10，-10]
});
L.标记（[项目['Y']，项目['X']]，//添加X和Y坐标
{图标：ico}）
.bindpoppopup（“Сааач:”+item['dateTime']+”“+item['Engine']+””）：“+item['Reaktion']+”“+item['Engine']+””）。添加到（Sheltermakers）；//添加到Sheltermakers
}
sheltermakers.addTo（mymap）；//准备好后添加到映射
}
功能延迟日志（角度、收割）{
如果（reak==0）{
var imgs='/images/stop_blue.png'；
}
否则如果（reak==1）{
var imgs='/images/stop_green.png'；
}
否则如果（reak==2）{
var imgs='/images/direction_green.png'；
}
否则如果（reak==3）{
var imgs='/images/stop_red.png'；
}
否则如果（reak==4）{
var imgs='/images/direction_red.png'；
}
否则{
var imgs='/images/stop_black.png'；
}
var image=loadImage（imgs）。然后（function（img）{//在那里我等待加载一个图像资源。如果没有它，有时会加载一个空的空白图像而不是一个完成的图像。loadImage是插件image-promise.min.js中的一个函数
让canvass=document.createElement（'canvas'）；
让context=canvass.getContext（'2d'）；
画布宽度=50；
画布高度=50；
语境。翻译（15，15）；
context.rotate（angles*Math.PI/180）；//按角度旋转
翻译（-15，-15）；
绘图图像（img，0，0，img.width，img.height）；
return canvas.toDataURL（）；//准备就绪时返回dataurl
})
return image；//将dataurl返回到processArray
}
传单.rotatedMarker.jsiconUrl: 'images/stop_black.png
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
}