Appliquer le filtre openlayers et le laisser inchangé lorsque j'enregistre la carte en tant qu'image
P粉951914381
P粉951914381 2023-09-10 09:51:05
0
1
469

J'ai créé une carte openlayers avec diverses polylignes. J'utilise le calque openstreetmap par défaut, mais je souhaite l'assombrir pour faire ressortir mes polylignes. J'ai trouvé que je pouvais faire cela comme suit :

map.getLayers().getArray()[0].on('postcompose', function (evt) { evt.context.canvas.style.filter="invert(99%)"; });

Cependant, je souhaite également que mes utilisateurs puissent télécharger cette carte au format PNG. Pour cela j'utilise le code suivant, déclenché en cliquant sur un bouton :

map.once('postcompose', function(event) { var canvas = event.context.canvas; if (navigator.msSaveBlob) { navigator.msSaveBlob(canvas.msToBlob(), 'mymap.png'); } else { canvas.toBlob(function(blob) { saveAs(blob, 'mymap.png') }); } }); map.renderSync();

Malheureusement, cela ne conserve pas les modifications que j'ai apportées pour redimensionner la toile.

Quelqu’un peut-il m’aider s’il vous plaît ? Merci pour la lecture.

P粉951914381
P粉951914381

répondre à tous (1)
P粉252423906

La définition d'un filtre de style sur un élément n'affectera pas la sortie detoBlob()toDataURL(). Si vous souhaitez modifier le contexte du canevas plutôt que la façon dont le navigateur restitue le canevas, vous aurez besoin d'une globalCompositeOperation (à en juger par le code que vous utilisez, je suppose que vous utilisez OpenLayers 5) :

map.getLayers().getArray()[0].on('postcompose', function (evt) { evt.context.globalCompositeOperation = 'difference'; evt.context.fillStyle = 'white'; evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height); evt.context.globalCompositeOperation = 'source-over'; });
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!