著作権情報テキストをOpenLayersキャンバスに直接印刷

Question

著作権情報テキストを私のopenlayersマップに追加する必要があります。このサイトでは、http://openlayers.org/en/latest/examples/export-map.htmlと同様の方法でマップをPNGにエクスポートするボタンが用意されています。したがって、エクスポートされたPNGマップには著作権テキストが表示されている必要があります。

著作権のテキストにhtmlオーバーレイを使用することはできませんが、キャンバス内にあるものだけをエクスポートするため、「PNGマップをエクスポートしました」が動作するため、キャンバスに直接テキストを印刷する必要がありますhtmlオーバーレイ）。

私は2つのアプローチを試しました。 ol.source.ImageCanvasこのjsfiddleに示すようを使用）

1. ;の両方が動作しません。問題はズームインまたはズームアウト時にテキストがであり、ジャンプがであることです。しかし、テキストは静的でなければなりません。 OpenLayersをした後、OpenLayersをキャンバスを取得することにより、

2. は、このキャンバスに直接を使用して初期化してからました。

は、ここでそのinitilisationを行っている後OpenLayersを実行される第二のアプローチのためのコードです：すべての

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
context.fillText('© My Copyright Text'), 500, 600); 

このプリントだけで何も、私はなぜ見当もつかない。 Openlayersキャンバスに「書く」ときには特別なことはありますか？

マップキャンバスにシンプルなテキストを追加するにはどうすればよいでしょうか？

Answer 1

あなたは、マップのpostrenderイベントを使用するマップキャンバスを取得し、それを変更することができますあなたが気にしていることは何でも。 export-map.html exampleには、postrenderリスナーが登録されているため、簡単に変更して帰属テキストを追加することができます。

map.once('postcompose', function(event) { 
    var canvas = event.context.canvas; 
    // Add attribution text 
    event.context.textAlign = 'right'; 
    event.context.fillText('© My Copyright Text', canvas.width - 5, canvas.height - 5); 
    // Now export the map 
    canvas.toBlob(function(blob) { 
    saveAs(blob, 'map.png'); 
    }); 
}); 

私はこのコードでの作業JSFiddleを作成しました：https://jsfiddle.net/ahocevar/8c4knpu6/

Answer 2

あなたはこのためにol.Overlayを使用することができます。

https://jsfiddle.net/x66v59wt/2/

var map = new ol.Map({ 
    layers: [ 
    new ol.layer.Tile({ 
     title: 'basemap', 
     source: new ol.source.Stamen({ layer: 'toner' }) 
    }) 
    ], 
    target: 'map', 
    view: new ol.View({ 
    center: ol.proj.fromLonLat([-97, 38]), 
    zoom: 4 
    }), 
    overlays: [ 
    new ol.Overlay({ 
     id: 'copyright', 
     element: document.getElementById('copyright'), 
     position: ol.proj.fromLonLat([-97, 38]) 
    }) 
    ] 
}); 

// If you want to text to be "pinned" to the map center, for example 
map.getView().on('change:center', function (e) { 
    map.getOverlayById('copyright').setPosition(this.getCenter()); 
}); 

...

<div id="map"></div> 
<div style="display: none;"> 
    <div id="copyright"> 
    © My Copyright text 
    <br> 
    Should be statically positioned even when zooming 
    </div> 
</div>