views:

458

answers:

3

TLDR: I have an Openlayers map with a layer called 'track' I want to remove track and add track back in. Or figure out how to plot a triangle based off one set of coords & a heading(see below).


I have an image 'imageFeature' on a layer that rotates on load to the direction being set. I want it to update this rotation that is set in 'styleMap' on a layer called 'tracking'.

  1. I set the var 'stylemap' to apply the external image & rotation.
  2. The 'imageFeature' is added to the layer at the coords specified.
  3. 'imageFeature' is removed.
  4. 'imageFeature' is added again in its new location. Rotation is not applied..

As the 'styleMap' applies to the layer I think that I have to remove the layer and add it again rather than 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 timed function the imageFeature:

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

Type refers to a lookup of 1 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 have tried the 'redraw()' function: but it returns "tracking is undefined" or "map.layers[2]" is undefined.

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

Heading is a variable: from a JSON feed.

var heading = 13.542;

But so far can't get anything to work it will only rotate the image onload. The image will move in coordinates as it should though.

So what am I doing wrong with the redraw function or how can I get this image to rotate live?

Thanks in advance

-Ozaki

Add: I managed to get

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

to sucessfully redraw layer 2. But it still does not update the rotation. I am thinking because the stylemap is updating. But it runs through the style map every n sec, but no updates to rotation and the variable for heading is updating correctly if i put a watch on it in firebug.


If I were to draw a triangle with an array of points & linestring. How would I go about facing the triangle towards the heading. I have the Lon/lat of one point and the heading.

              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 problem Image or Line anyone know how to do either added a 100rep bounty I am really stuck with this.


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

Adding and removing the 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});
+1  A: 

First guess:

I assume your layer has a single point object that moves and rotates as when following a car with GPS?

It might be better if you would simply destroy all features on the layer (assuming it is only one feature) and redraw the feature with the new heading set.

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

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

Hope this helps a bit.

milovanderlinden
Am currently destroying all features (even tho is only one) and redrawing it but iut is not setting the rotation see above. I would say because the stylemap applies to the layer so it has no reason to go and re-set the stylemap or update it.So I am probably looking for a way to Destroy and Create the Layer so it forces the stylemap to update.
Thqr
+1  A: 

You can also try to put heading on 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 would have to rewrite your lookup function like this:

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

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

milovanderlinden
In your case; since you are using a vector feature; you should set the heading directly in the attributes property: http://dev.openlayers.org/docs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.attributes
milovanderlinden
I have tried : new OpenLayers.Geometry.Point(longitude, latitude), { type: parseInt(Math.random() * 3), rotation: heading} which will stil not set the heading.
Thqr
Feature = (new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(longitude, latitude), {rotation: heading, type: parseInt(Math.random() * 3)} ), {rotation: heading});
Thqr
Thqr
Why would heading be coming from a different request? Sounds a bit strange to me. Anyway, your layer will never be able to respond to the changing of your heading var since it has no reference to it.
milovanderlinden
the "rotation" is set to "heading" which = 21.543 etc. and updates.It works perfectly fine to rotate it the first time. But will not rotate it when the image is destroyed and re added.
Thqr
it refers to the heading in a: styleMap, b: the imageFeature itself. c: the vector layer the image is going on.
Thqr
+1  A: 

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 the request:

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

Problem solved. Works perfectly.

Thqr
Excelent! Nice to know you worked it out. Am I correct when I say the ${something} was an important gesture for your solution?(I am fishing at the 100 rep. points bounty :D)Anyway, good to see you found a solution!
milovanderlinden
Yes but it needed to be "$()" So it would reference correctly to a variable which was set to a seperate variable which was being called as a getjson $getjson request.
Thqr