2016-06-25 7 views
0

Ich habe seit einiger Zeit daran gearbeitet und finde nicht die Informationen in der Dokumentation für die neuesten openlayers (Version 3 zum Zeitpunkt der Erstellung dieses Dokuments) zu finden ...Einstellung eines Features in openlayers

Ich ziehe meine Haare tatsächlich aus!

Was ich wissen muss, ist, wie Sie eine Funktion (ol.feature) an einer bestimmten Stelle auf der Karte platzieren.

Ich habe die Längen- und Breitengrade mit einer Funktionsserverseite abstrahiert und über die Template-Tags in den js-Code übergeben.

Im Moment ist es es vor der Küste von Afrika in der Mitte des Ozeans ...

Mein Code so weit ist platzieren; wissen

<html lang="en"> 
    <head> 
    <link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css"> 
    <style> 
     .map { 
     height: 500px; 
     width: 100%; 
     } 
    </style> 
    <script src="http://openlayers.org/en/v3.16.0/build/ol.js" type="text/javascript"></script> 
    <title>pickup point selection</title> 
    </head> 
    <body> 
    <h2>Choose your pickup point</h2> 
    <div id="map" class="map"></div> 
    <script type="text/javascript"> 
     var customerCoordinates = new ol.geom.Point([ {{longitude}}, {{latitude}} ]); 
     var iconFeature = new ol.Feature({ 
     geometry: customerCoordinates, 
     name: '{{postcode}}' 
     }); 

     iconFeature. 

     var iconStyle = new ol.style.Style({ 
     text: new ol.style.Text({ 
      text: '\uf015', 
      font: 'normal 50px FontAwesome', 
      textBaseline: 'Bottom', 
      fill: new ol.style.Fill({ 
      color: 'black', 
      }) 
     }) 
     }); 

     iconFeature.setStyle(iconStyle); 
     iconFeature.setG 

     var vectorSource = new ol.source.Vector({ 
     features: [iconFeature] 
     }); 

     var vectorLayer = new ol.layer.Vector({ 
     source: vectorSource}); 

     var rasterLayer = new ol.layer.Tile({ 
     source: new ol.source.OSM()}); 

     var map = new ol.Map({ 
      layers: [rasterLayer, vectorLayer], 
      target: document.getElementById('map'), 
      view: new ol.View({ 
       center: ol.proj.fromLonLat([ {{longitude}}, {{latitude}} ]), 
       zoom: 17 
       }) 
      }); 

    </script> 
    </body> 
</html> 

Jede Hilfe wäre sehr

geschätzt, wenn Sie weitere Informationen lassen Sie mich brauchen!

+0

, die die Küste von Afrika zeigen off ist wahrscheinlich die Koordinaten [0, 0] –

Antwort

1

Änderung dieser: var customerCoordinates = new ol.geom.Point([ {{longitude}}, {{latitude}} ])

dieser var customerCoordinates = new ol.geom.Point([ ol.proj.fromLonLat([ {{longitude}}, {{latitude}} ]) ])

+0

Hallo pavlos, danke für die Antwort! es scheint, dass du viel über openlayers weißt, könntest du mir helfen, einige Kontrollen für eine Karte zu bauen ... –

+0

froh, amigo zu helfen. Gehen Sie auf Ihre Kontrollen und wenn Sie damit fortfahren, stellen Sie eine neue Frage und natürlich kann ich Ihnen helfen. Es ist nicht nur ich, hier sind mehrere Leute, die sich darauf freuen, ihr Wissen zu teilen. – pavlos

+0

http://stackoverflow.com/questions/34247884/how-do-i-create-a-transparent-circle-with-adjustable-radius-on-a-map-in-openlaye –