Openlayers - LayerRedraw()/Rotation de traits/Linestring coords

Question

TLDR: J'ai une carte Openlayers avec une couche appelée 'track' Je veux enlever la trace et y ajouter une trace. Ou trouver comment tracer un triangle basé d'un ensemble de coordonnées & un en-tête (voir ci-dessous).

---

I ont une image 'imageFeature' sur une couche qui tourne sur la charge à la direction étant fixée. Je veux mettre à jour cette rotation qui est définie dans 'styleMap' sur une couche appelée 'suivi'.

1. Je mis le var 'StyleMap' pour appliquer la rotation de l'image externe &.
2. 'imageFeature' est ajouté à la couche au niveau des coordonnées spécifiées.
3. 'imageFeature' est supprimé. 'ImageFeature' est ajouté à nouveau dans son nouvel emplacement
4. La rotation est pas appliquée ..

Comme le « styleMap » applique à la couche, je pense que je dois enlever la couche et l'ajouter à nouveau plutôt que le « imageFeature »

couche:

 var tracking = new OpenLayers.Layer.GML("Tracking", "coordinates.json", 
      { format: OpenLayers.Format.GeoJSON, 
      styleMap: styleMap 

    }); 

styleMap:

var styleMap = new OpenLayers.StyleMap({ 
    fillOpacity: 1, 
    pointRadius: 10, 
    rotation: heading, 
}); 

Maintenant Enveloppé dans une fonction chronométré le imageFeature:

map.layers[3].addFeatures(new OpenLayers.Feature.Vector(
     new OpenLayers.Geometry.Point(longitude, latitude), {rotation: heading, type: parseInt(Math.random() * 3)} 
     )); 

type fait référence à une recherche de 1 de 3 images.:

  styleMap.addUniqueValueRules("default", "type", lookup); 

      var lookup = { 
      0: {externalGraphic: "Image1.png", rotation: heading}, 
      1: {externalGraphic: "Image2.png", rotation: heading}, 
      2: {externalGraphic: "Image3.png", rotation: heading} 
      } 

J'ai essayé la fonction 'redessiner()': mais il retourne "le suivi est indéfini" ou "map.layers [2]" est non défini.

tracking.redraw(true); 
map.layers[2].redraw(true); 

-tête est une variable: partir d'une charge de JSON.

var heading = 13.542; 

Mais jusqu'à présent, rien ne fonctionne, cela ne fait que tourner l'image en charge. L'image se déplacera dans les coordonnées comme il se doit.

Alors qu'est-ce que je fais de mal avec la fonction de redessiner ou comment faire tourner cette image en direct?

Merci à l'avance

-Ozaki

Ajouter: Je réussi à obtenir

map.layers[2].redraw(true); 

pour redessiner la couche 2. Mais sucessfully cela ne fonctionne toujours pas mis à jour la rotation. Je pense parce que le stylemap est en train de se mettre à jour. Mais il parcourt la carte de style toutes les secondes, mais aucune mise à jour de la rotation et la variable pour l'en-tête ne se met à jour correctement si je mets une montre dessus dans firebug.

---

Si je devais dessiner un triangle avec un tableau de points & linestring. Comment pourrais-je faire face au triangle vers le cap. J'ai le Lon/lat d'un point et le titre.

   var points = new Array(
         new OpenLayers.Geometry.Point(lon1, lat1), 
         new OpenLayers.Geometry.Point(lon2, lat2), 
         new OpenLayers.Geometry.Point(lon3, lat3) 
        ); 

      var line = new OpenLayers.Geometry.LineString(points); 

Vous cherchez un moyen de résoudre ce problème Image ou toute ligne savoir comment faire soit ajouté un 100rep bounty Je suis vraiment coincé avec cela.

---

//From getJSON request// 
var heading = data.RawHeading; 

Ajout et suppression de la imageFeature

map.layers[3].destroyFeatures(); 
    map.layers[3].addFeatures(new OpenLayers.Feature.Vector(
     new OpenLayers.Geometry.Point(longitude, latitude), {rotation: heading, type: parseInt(Math.random() * 3)} 
    ), {rotation: heading}); 

Answer 1

résolu le problème comme suit:

  var styleMap = new OpenLayers.StyleMap({ 
       fillOpacity: 1, 
       pointRadius: 10, 
       rotation: "${angle}", 
      }); 

      var lookup = { 
       0: { externalGraphic: "Image1.png", rotation: "${angle}" }, 
       1: { externalGraphic: "Image2.png", rotation: "${angle}" }, 
       2: { externalGraphic: "Image3.png", rotation: "${angle}" } 
      } 
styleMap.addUniqueValueRules("default", "type", lookup); 

map.layers[3].addFeatures(new OpenLayers.Feature.Vector(
     new OpenLayers.Geometry.Point(lon, lat), {"angle": dir, type: parseInt(Math.random() * 3)} 
     ), {"angle": dir}); 

alors la demande:

var dir = (function() { 
       $.ajax({ 
        'async': false, 
        'global': true, 
        'url': urldefault, 
        'dataType': "json", 
        'success': function (data) { 
         dir = data.Heading 
        } 
       }); 
       return dir; 
      })(); 

Problème résolu. Fonctionne parfaitement.

Answer 2

conjecture Première:

Je suppose que votre couche a un seul objet point qui se déplace et tourne comme quand on suit une voiture avec le GPS?

Il vaudrait peut-être mieux détruire toutes les entités du calque (en supposant qu'il ne s'agisse que d'une seule entité) et redessiner la fonction avec le nouveau jeu de rubriques.

Deuxième estimation: Peut-être que vous avez besoin d'utiliser une fonction au lieu d'une variable pour maintenir la connexion en direct à la rotation.

Veuillez consulter la documentation ici: http://trac.openlayers.org/wiki/Styles sur les styles.

Espérons que cela aide un peu.

Answer 3

Vous pouvez également essayer de mettre cap sur l'objet comme un attribut:

{"mapFeatures": { 
     "type": "FeatureCollection", 
     "features": [ 
      { 
       "type": "Feature", 
       "id": "1579001", 
       "x": 51.0, 
       "y": 1.2, 
       "geometry": { 
        "type": "Point", 
        "coordinates": [ 
         51.0, 
         1.2 
        ], 
        "crs": { 
         "type": "OGC", 
         "properties": { 
          "urn": "urn:ogc:def:crs:OGC:1.3:CRS84" 
         } 
        } 
       }, 
       "properties": { 
        "heading": 45, 
        "label": "some_label_goes_here" 
       } 
      } 
     ] 
    } 
} 

Ensuite, vous devrez réécrire votre fonction de recherche comme celui-ci:

var lookup = { 
     0: {externalGraphic: "Image1.png", rotation: ${heading}}, 
     1: {externalGraphic: "Image2.png", rotation: ${heading}}, 
     2: {externalGraphic: "Image3.png", rotation: ${heading}} 
} 

Pourriez-vous essayer et voir si ça marche? Si vous ne savez pas si les attributs sont correctement définis, vous pouvez toujours déboguer avec firebug, c'est ce que je fais toujours. Il y a une chose délicate; lors de l'analyse geojson; Les "propriétés" sont traduites en "attributs" sur l'objet javascript final.