2017-02-07 11 views
0

現在、ユーザーが青写真をアップロードして地図上に配置できる実装を書いています。アイコン機能のサイズが正しく計算されていません

問題は、アイコン機能が実際の画像エクステントのサブ範囲として登録されていることです。

フル画像が表示されたら、すべてが良いです:
https://s24.postimg.org/lj3xmgsj9/image.png

私は左にマップを移動すると、画像とすぐタイの戦闘機は、ビューを残して起動すると消える:
https://s23.postimg.org/4p2tu0c5n/image.png

アップロードした青写真の隅でユーザーが拡大できる必要があるため、これは問題です。

以下のURLは、作業実装がOL2で示しています
http://gis.ibbeck.de/ginfo/apps/OLExamples/OL27/examples/ExternalGraphicOverlay/ExternalGraphicOverlay.asp
ここではすべてが素晴らしい作品。

これはOL3のバグですか、何か間違っていますか?
すでにOL3コードが多いため、OL2への切り替えはオプションではありません。

次のコードを使用した:
(ドラッグ、回転、スケールは最小作業例を作るために削除された)

var map = new ol.Map({ 
 
     layers: [ 
 
      new ol.layer.Tile({ 
 
       source: new ol.source.OSM() 
 
      }), 
 
      new ol.layer.Vector({ 
 
       source: new ol.source.Vector({ 
 
        features: [ 
 
         new ol.Feature(new ol.geom.Point([1389519.3624186157, 7496787.364362017])) 
 
        ] 
 
       }), 
 
       style: new ol.style.Style({ 
 
        image: new ol.style.Icon({ 
 
         src: 'https://lumiere-a.akamaihd.net/v1/images/millennium-falcon-4_9c006047.jpeg', 
 
         scale: 0.75 
 
        }) 
 
       }) 
 
      }) 
 
     ], 
 
     target: 'map', 
 
     view: new ol.View({ 
 
      center: [1389519.3624186157, 7496787.364362017], 
 
      zoom: 18 
 
     }) 
 
    });
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>test</title> 
 
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script> 
 
</head> 
 
<body> 
 
<div id="map" class="map"></div> 
 
</body> 
 
</html>

答えて

0

あなたは大きなアイコンを使用している場合、あなたはrenderBufferを設定する必要がありますプロパティーがol.layer.Vector(デフォルト:100px)であるため、実際のジオメトリがビュー範囲外であっても、OpenLayersにその機能が含まれます。

new ol.layer.Vector({ 
    renderBuffer: 600, 
    ... 
}) 

https://jsfiddle.net/nptq3hjy/

関連する問題