Openlayers - LayerRedraw () / Rotating Functions / Ladder Coordinates

Question

TL; DR : I have an Openlayers map with a track layer. I want to delete the track and add the track back. Or figure out how to build a triangle based on one set of coordinates and a title (see below).

---

I have an imageFeature image on a layer that rotates when loaded in a given direction. I want him to update this rotation, which is set to 'styleMap' on a layer called tracking .

• I set var 'stylemap' to apply external image and rotation.
• 'imageFeature' is added to the layer at the specified coordinates.
• 'imageFeature' is deleted.
• 'imageFeature' is added again in a new location. Rotation does not apply ..

Since 'styleMap' is applied to the layer, I think I need to remove the layer and add it again, not just the 'imageFeature'

Layer :

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

Now wrapped in a temporary imageFeature function :

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

Type refers to the search for 1 out of 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} } 

I tried the redraw (): function , but it returns "tracking undefined" or "map.layers [2]" is undefined.

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

The header is a variable: from a JSON feed.

 var heading = 13.542; 

But so far it has not been possible to work something, it only rotates the loading of the image. The image will move in coordinates as it should.

So what am I doing wrong with the redraw function, or how can I make this image rotate in real time?

Thanks in advance

-Ozaki

Add: I managed to get

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

to successfully redraw layer 2. But it still doesn't update the rotation. I think because the style layout is being updated. But it goes through the stylesheet every n seconds, but no updates to rotate and the variable for the title is not updated correctly if I put the clock on it in firebug.

---

If I were to draw a triangle with an array of dots and linestring. How would I go to the triangle towards the heading. I have a Lon / lat single point and a caption.

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

Looking for any way to solve this Image or Line problem, does anyone know how to make either the added 100rep reward. I am really stuck with this.

---

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

Adding and removing 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

Solved the problem as follows:

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

then request:

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

The problem is resolved. It works great.

Answer 2

First, suppose:

I assume that there is one point feature on your layer that moves and rotates when you follow a car with GPS?

Perhaps it would be better if you just destroyed all the functions on this layer (assuming that it is only one function) and redraw this function with a new set of headers.

Second assumption: Perhaps you need to use a function instead of a variable to maintain a direct connection to the rotation.

Please check the documentation here: http://trac.openlayers.org/wiki/Styles for styles.

Hope this helps a bit.

Answer 3

You can also try to put the title in the object as an attribute:

 {"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" } } ] } } 

Then you will have to rewrite your search function as follows:

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

Could you try and see if this works? If you don't know if the attributes are set correctly, you can always debug with firebug, this is what I always do. There is one difficult thing; when parsing geojson; "properties" translate to "attributes" on the last javascript object.