2016-09-29 4 views
1

symfony 2.8のOpenlayers 3スクリプトを使用してtwigに画像を含めるには?symfony 2.8でOpenlayers 3スクリプトを使用して画像をtwigに含めるには?

アセットを参照したり、ルートから参照したり、現在のディレクトリから参照したりすることはできません。動作しない別の座標、との点、それはない - http://openlayers.org/en/v3.2.1/examples/drag-features.html

は、私はちょうど1つの特徴だけを使用し動作し、表示された別のマップを、使用している:

 src: "{{ asset('bundles/meeting/images/google-map-pointer-grey.svg') }}" // does not work 
     src: "{{ asset('/bundles/meeting/images/google-map-pointer-grey.svg') }}" // does not work 
     src: "/bundles/meeting/images/google-map-pointer-grey.svg" // from root directory also does no work 
     src: "../../../images/google-map-pointer-grey.svg" // referencing from the current directory also does no work 

コードの例からです地図上に表示されます。

//小枝テンプレート

<script> 

    window.onload = function() { 
    var lat = document.getElementById('edit_form.latitude').value; 
    var lon = document.getElementById('edit_form.longitude').value; 

var pointM = [ parseFloat(lon), parseFloat(lat) ]; 
var pointMWebMercator = ol.proj.fromLonLat(pointM, 'EPSG:3857'); 
console.log(' pointMWebMercator m= '+ pointMWebMercator); 

var pointFeature = new ol.Feature(new ol.geom.Point(pointMWebMercator)); 


var map = new ol.Map({ 
    interactions: ol.interaction.defaults().extend([new app.Drag()]), 
    target: 'Openmap', // The DOM element that will contains the map 
    renderer: 'canvas', // Force the renderer to be used 
    size: [200, 200], 
    layers: [ 
    new ol.layer.Tile({ source: new ol.source.OSM() }), 
    new ol.layer.Vector({ 
     source: new ol.source.Vector({ 
     features: [pointFeature] 
     }), 
     style: new ol.style.Style({ 
     image: new ol.style.Icon(({ 
      // @type {olx.style.IconOptions} 
      anchor: [0.5, 46], 
      anchorXUnits: 'fraction', 
      anchorYUnits: 'pixels', 
      opacity: 0.95, 
      src: "{{ asset('bundles/meeting/images/google-map-pointer-grey.svg') }}" // does not work 
     // src: "{{ asset('/bundles/meeting/images/google-map-pointer-grey.svg') }}" // does not work 
     // src: "/bundles/meeting/images/google-map-pointer-grey.svg" // from root directory also does no work 
     // src: "../../../images/google-map-pointer-grey.svg" // referencing from the current directory also does no work 

})), 

    // A leading slash tells the browser to start at the root directory. 
//// i can get the root directory from//print_r("SERVER[DOCUMENT_ROOT]".$_SERVER['DOCUMENT_ROOT']); 
//// for symfony it is project/web 
    // If you don't have the leading slash, you're referencing from the current directory. 
// If you add two dots before the leading slash, it means you're referencing the parent of the current directory. 



     stroke: new ol.style.Stroke({ 
      width: 3, 
      color: [255, 0, 0, 1] 
     }), 
     fill: new ol.style.Fill({ 
      color: [0, 0, 255, 0.6] 
     }) 
     }) 
    }) 
    ], 
    view: new ol.View({ 
    center: pointMWebMercator, 
    zoom: 14 
    }) 
}); 

答えて

0

小枝がopenlayersを埋め込むとは何の関係もありません。それはjavascriptライブラリです。

Twigはサーバ側でHTMLを実行して生成します。 OpenLayerスクリプトはクライアント側で実行されるはずです。

また、openlayers documentはかなり自明です。

+0

私は単純な独自のスクリプト(および単純なMVCを所有している)を使用するとイメージを含めることができます。私はOpenLayersでsrcを実装する方法を理解していますが、Symfonyではこれが動作しません。 Symfony 2.8でこれをどうやって作るのですか? – olga

+0

私は、OpenLayer 3のjavascriptを所有するSymfonyプロジェクトビューのtwigテンプレートの本体にイメージを含めることもできます。しかし、私はスクリプト自体でsrcに画像を割り当てることができません。 – olga

+0

私はOpenLayer 3に画像を含めることができます。これは、PHPスクリプトで作成した場合、または単純なMVCを所有している場合です。それにもかかわらず、私はSymfony 2プロジェクトでこれを行うことはできません。しかし、私はテンプレートのOpenLayer 3スクリプトにもかかわらず、Symfony 2のプロジェクトテンプレートでイメージを埋め込むことができます。 OpenLayerスクリプトを含む同じテンプレートに画像を含めることを試みました。画像は、3つの方法のいずれかを使用してテンプレートに含まれます。しかし、OpenLayerオブジェクトを使ってスクリプトを作成しようとすると、うまくいきません。 – olga

関連する問題