CODEWITHSUNDEEP
coordinatesopenlayers-3coordinate-transformation
Chris
Chris

Reputation: 14260

Convert coordinates between two rotated systems

I have a map with coordinates in meters and an overlaying building plan with pixel coordinates:

Sample map with plan overlay

I already know the scale factor and I am able to convert coordinates between the two systems if they are aligned (i.e. the overlay image is exactly horizontal with no rotation)--> conversionfactor (= number of overlay pixels in one meter on the map)

MAPx(ImageX) = centerpointX + ImageX * conversionfactor
MAPy(ImageY) = centerpointY + ImageY * conversionfactor

How can I convert between the coordinates if the overlay is rotated assuming that I have above formulas and I want to include a rotation angle?

EDIT (@tsauerwein):

Here is the marker style that you have requested:

  planStyle = function(feature, resolution){
        var style = new ol.style.Style({
            image: new ol.style.Icon({
                src: feature.dataURL,
                scale: feature.resolution / resolution,
                rotateWithView: true,
                rotation: feature.rotation * (Math.PI / 180),
                anchor: [.5, .5],
                anchorXUnits: 'fraction',
                anchorYUnits: 'fraction',
                opacity: feature.opacity
            })
        })
        return [style];
    };

Upvotes: 1

Views: 522

Answers (1)

tsauerwein
tsauerwein

Reputation: 6051

Assuming that you are using ol.source.ImageStatic: When you configure your layer, you have the size of the image in pixels(e.g. width=500, height=200) and also the extent that this image covers in coordinates.

Now, if you have a coordinate, you can easily check if the coordinate is inside the image extent (ol.extent.containsXY(extent, x, y)). Then you can also translate the real-world coordinate to a pixel coordinate:

// image size
var width = 500;
var height = 250;

// image extent
var extent = [2000, 0, 4000, 1000];

// coordinates
var x = 3000;
var y = 500;

if (ol.extent.containsXY(extent, x, y)) {
  var pixelX = width * (x - extent[0]) / ol.extent.getWidth(extent);
  var pixelY = height * (y - extent[1]) / ol.extent.getHeight(extent);
}

Doing it like this, it doesn't matter if the map is rotated or not.

Upvotes: 1

Related Questions