Raruto/leaflet-rotate

After rotating the map, clicking on the map to get WMS service information is incorrect.

Closed this issue · 4 comments

JerckyLY commented
  1. Set the map rotation to a degree other than 0
  2. Click on the map to query the WMS service information, click on the feature can not be found, click on other wrong locations to find it
  3. It should be a problem with picking up coordinates after rotation, how to get the corresponding coordinates before rotation according to the error after rotation ?

Thanks in a lot

get wms info code:

  
var point = this._map.latLngToContainerPoint();

var size = this._map.getSize();

var params = {
  request: "GetFeatureInfo",
  service: "WMS",
  srs: "EPSG:4326",
  styles: this.wmsParams.styles,
  transparent: this.wmsParams.transparent,
  version: this.wmsParams.version,
  format: this.wmsParams.format,
  bbox: this._map.getBounds().toBBoxString(),
  height: size.y,
  width: size.x,
  layers: layers,
  query_layers: layers,
  info_format: "application/json",
};

params[params.version === "1.3.0" ? "i" : "x"] = parseInt(point.x)
params[params.version === "1.3.0" ? "j" : "y"] = parseInt(point.y)
Raruto commented

Hi liuyang,

this value could also be incorrect (or at least for your use case):

var size = this._map.getSize();

I recommend you explore the L.Map class (both in the core repository and here) to find the function that might be right for you:

leaflet-rotate/src/map/Map.js

Lines 28 to 190 in 48e97a6

/**
* Given a pixel coordinate relative to the map container,
* returns the corresponding pixel coordinate relative to
* the [origin pixel](#map-getpixelorigin).
*
* @param {L.Point} point pixel screen coordinates
* @returns {L.Point} transformed pixel point
*/
containerPointToLayerPoint: function(point) {
if (!this._rotate) {
return mapProto.containerPointToLayerPoint.apply(this, arguments);
}
return L.point(point)
.subtract(this._getMapPanePos())
.rotateFrom(-this._bearing, this._getRotatePanePos())
.subtract(this._getRotatePanePos());
},
/**
* Given a pixel coordinate relative to the [origin pixel](#map-getpixelorigin),
* returns the corresponding pixel coordinate relative to the map container.
*
* @param {L.Point} point pixel screen coordinates
* @returns {L.Point} transformed pixel point
*/
layerPointToContainerPoint: function(point) {
if (!this._rotate) {
return mapProto.layerPointToContainerPoint.apply(this, arguments);
}
return L.point(point)
.add(this._getRotatePanePos())
.rotateFrom(this._bearing, this._getRotatePanePos())
.add(this._getMapPanePos());
},
/**
* Converts a coordinate from the rotated pane reference system
* to the reference system of the not rotated map pane.
*
* (rotatePane) --> (mapPane)
* (rotatePane) --> (norotatePane)
*
* @param {L.Point} point pixel screen coordinates
* @returns {L.Point}
*
* @since leaflet-rotate (v0.1)
*/
rotatedPointToMapPanePoint: function(point) {
return L.point(point)
.rotate(this._bearing)
._add(this._getRotatePanePos());
},
/**
* Converts a coordinate from the not rotated map pane reference system
* to the reference system of the rotated pane.
*
* (mapPane) --> (rotatePane)
* (norotatePane) --> (rotatePane)
*
* @param {L.Point} point pixel screen coordinates
*
* @since leaflet-rotate (v0.1)
*/
mapPanePointToRotatedPoint: function(point) {
return L.point(point)
._subtract(this._getRotatePanePos())
.rotate(-this._bearing);
},
// latLngToLayerPoint: function (latlng) {
// var projectedPoint = this.project(L.latLng(latlng))._round();
// return projectedPoint._subtract(this.getPixelOrigin());
// },
// latLngToContainerPoint: function (latlng) {
// return this.layerPointToContainerPoint(this.latLngToLayerPoint(toLatLng(latlng)));
// },
/**
* Given latlng bounds, returns the bounds in projected pixel
* relative to the map container.
*
* @see https://github.com/ronikar/Leaflet/blob/5c480ef959b947c3beed7065425a5a36c486262b/src/map/Map.js#L1114-L1135
*
* @param {L.LatLngBounds} bounds
* @returns {L.Bounds}
*
* @since leaflet-rotate (v0.2)
*/
mapBoundsToContainerBounds: function (bounds) {
if (!this._rotate && mapProto.mapBoundsToContainerBounds) {
return mapProto.mapBoundsToContainerBounds.apply(this, arguments);
}
// const nw = this.latLngToContainerPoint(bounds.getNorthWest()),
// ne = this.latLngToContainerPoint(bounds.getNorthEast()),
// sw = this.latLngToContainerPoint(bounds.getSouthWest()),
// se = this.latLngToContainerPoint(bounds.getSouthEast());
// same as `this.latLngToContainerPoint(latlng)` but with floating point precision
const origin = this.getPixelOrigin();
const nw = this.layerPointToContainerPoint(this.project(bounds.getNorthWest())._subtract(origin)),
ne = this.layerPointToContainerPoint(this.project(bounds.getNorthEast())._subtract(origin)),
sw = this.layerPointToContainerPoint(this.project(bounds.getSouthWest())._subtract(origin)),
se = this.layerPointToContainerPoint(this.project(bounds.getSouthEast())._subtract(origin));
return L.bounds([
L.point(Math.min(nw.x, ne.x, se.x, sw.x), Math.min(nw.y, ne.y, se.y, sw.y)), // [ minX, minY ]
L.point(Math.max(nw.x, ne.x, se.x, sw.x), Math.max(nw.y, ne.y, se.y, sw.y)) // [ maxX, maxY ]
]);
},
/**
* Returns geographical bounds visible in the current map view
*
* @TODO find out if map bounds calculated by `L.Map::getBounds()`
* function should match the `rotatePane` or `norotatePane` bounds
*
* @see https://github.com/fnicollet/Leaflet/issues/7
*
* @returns {L.LatLngBounds}
*/
getBounds: function() {
if (!this._rotate) {
return mapProto.getBounds.apply(this, arguments);
}
// SEE: https://github.com/fnicollet/Leaflet/pull/22
//
// var bounds = this.getPixelBounds(),
// sw = this.unproject(bounds.getBottomLeft()),
// ne = this.unproject(bounds.getTopRight());
// return new LatLngBounds(sw, ne);
//
// LatLngBounds' constructor automatically
// extends the bounds to fit the passed points
var size = this.getSize();
return new L.LatLngBounds([
this.containerPointToLatLng([0, 0]), // topleft
this.containerPointToLatLng([size.x, 0]), // topright
this.containerPointToLatLng([size.x, size.y]), // bottomright
this.containerPointToLatLng([0, size.y]), // bottomleft
]);
},
/**
* Returns the bounds of the current map view in projected pixel
* coordinates (sometimes useful in layer and overlay implementations).
*
* @TODO find out if map bounds calculated by `L.Map::getPixelBounds()`
* function should match the `rotatePane` or `norotatePane` bounds
*
* @see https://github.com/fnicollet/Leaflet/issues/7
*
* @returns {L.Bounds}
*/
// getPixelBounds(center, zoom) {
// // const topLeftPoint = map.containerPointToLayerPoint(this._getTopLeftPoint());
// const topLeftPoint = this._getTopLeftPoint(center, zoom);
// return new L.Bounds(topLeftPoint, topLeftPoint.add(this.getSize()));
// },

PS: if you need dev support, try asking on stackoverflow.com too..

👋 Raruto

JerckyLY commented

Hi @Raruto

  1. When I use map.setBearing(0) it will query wms normally, but when I setBeaing(angle > 0) it will not query normally, in both cases. The value of getSize() is the same.
  2. I also tried to calculate the point after rotation that corresponds to the point without rotation, but it doesn't work.
  3. I don't know what to do anymore, can you give me an idea？

Thanks in a lot

the code:

var containerPoint = this._map.latLngToContainerPoint(latlng);

// get unRotate point
var angle  = this._map.getBearing() * L.DomUtil.DEG_TO_RAD;  //
var center = this._map._getPixelCenter();
var point  = containerPoint.rotateFrom(-angle, center);

var size = this._map.getSize(),
  params = {
    request: "GetFeatureInfo",
    service: "WMS",
    srs: "EPSG:4326",
    styles: this.wmsParams.styles,
    transparent: this.wmsParams.transparent,
    version: this.wmsParams.version,
    format: this.wmsParams.format,
    bbox: this._map.getBounds().toBBoxString(),
    // bbox,
    height: size.y,
    width: size.x,
    layers: layers,
    query_layers: layers,
    info_format: "application/json",
  }

params[params.version === "1.3.0" ? "i" : "x"] = parseInt(point.x)
params[params.version === "1.3.0" ? "j" : "y"] = parseInt(point.y)
Raruto commented

I don't know what to do anymore, can you give me an idea？

Honestly?

  • spend some time getting into the code (it's open source, yours.. ?)
  • ask to a broader audience: stackoverflow.com
  • hire an external professional gis/developer

Your code also depends on:

 this._map.getBounds()

which could cause further problems, but really, it depends on your goal/context.

Frankly, this repo contains difficult notions (unless is your daily job..), I'm not going to get into the code just because you ask..

👋 Raruto

JerckyLY commented

@Raruto Thanks for the reply, I'll look into it myself again, thanks in a lot