如何在 symfony 2.8 中使用 Openlayers 3 脚本将图像包含到树枝中？

Question

如何在 symfony 2.8 中使用 Openlayers 3 脚本将图像包含到树枝中？

也不是资产，也不是从根目录引用，也不是从当前目录引用。

      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

代码来自示例： http://openlayers.org/en/v3.2.1/examples/drag-features.html

我只是使用了不同的地图，它工作并显示，只使用了一个特征 - 具有不同坐标的点，这不起作用，它没有显示在地图上。

//树枝模板

<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
  })
});

Answer 1

Twig 与嵌入 openlayers 无关。因为它是一个 javascript 库。

Twig 在服务器端执行并生成HTML。 OpenLayer 脚本应该在客户端执行。

另外，openlayers document 非常不言自明。