From 2f3cb0e770fdaf979640f7140fa8c3102126340b Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Wed, 28 Nov 2018 09:38:39 +0700
Subject: [PATCH] render: map composing (working with proper shifts)
---
src/components/renderer/Renderer.jsx | 6 ++++--
src/modules/Editor.js | 2 ++
src/utils/renderer.js | 22 ++++++++++++++++------
3 files changed, 22 insertions(+), 8 deletions(-)
diff --git a/src/components/renderer/Renderer.jsx b/src/components/renderer/Renderer.jsx
index 88f24ab..7cbf074 100644
--- a/src/components/renderer/Renderer.jsx
+++ b/src/components/renderer/Renderer.jsx
@@ -49,12 +49,14 @@ export class Renderer extends React.Component {
composeImages = ({ images, geometry, ctx }) => {
const {
- minX, minY, shiftX, shiftY, size
+ minX, minY, maxY, shiftX, shiftY, size
} = geometry;
images.map(({ x, y, image }) => {
+ const verticalShift = (maxY - minY) * size;
+
const posX = ((x - minX) * size) + shiftX;
- const posY = ((y - minY) * size) + (window.innerHeight - shiftY - size);
+ const posY = ((y - minY) * size) - (verticalShift - shiftY);
return ctx.drawImage(image, posX, posY, 256, 256);
});
diff --git a/src/modules/Editor.js b/src/modules/Editor.js
index ad27e12..31a0029 100644
--- a/src/modules/Editor.js
+++ b/src/modules/Editor.js
@@ -327,3 +327,5 @@ export class Editor {
}
export const editor = new Editor({});
+
+window.editor = editor;
diff --git a/src/utils/renderer.js b/src/utils/renderer.js
index f44a888..d923446 100644
--- a/src/utils/renderer.js
+++ b/src/utils/renderer.js
@@ -13,13 +13,15 @@ const latLngToTile = latlng => {
const tileToLatLng = point => {
const z = map.getZoom();
- const lon = (point.x / Math.pow(2, z) * 360 - 180);
+ const lng = (point.x / Math.pow(2, z) * 360 - 180);
const n = Math.PI - 2 * Math.PI * point.y / Math.pow(2, z);
const lat = (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))));
- return { lat, lng: lon };
+ return { lat, lng };
};
+window.tileToLatLng = tileToLatLng;
+
export const getTilePlacement = () => {
const width = window.innerWidth;
const height = window.innerHeight;
@@ -39,12 +41,15 @@ export const getTilePlacement = () => {
const southWestTileCoords = tileToLatLng(southWestTile);
const northEastTileCoords = tileToLatLng(northEastTile);
- console.log({ southWestTileCoords, northEastTileCoords });
+ // console.log({ southWestTileCoords, northEastTileCoords });
const rsw = map.latLngToContainerPoint(southWestTileCoords);
const msw = map.latLngToContainerPoint(southWest);
- console.log({ southWest, northEast });
+ const tileTransformTranslate = map.latLngToLayerPoint(southWestTileCoords);
+ const msw2 = map.latLngToLayerPoint(southWest);
+
+ console.log({ rsw, msw, tileTransformTranslate, msw2, });
// console.log({x: rsw.x-msw.x, y: h+rsw.y-msw.y, orig_x: sw.x, orig_y: sw.y})
// console.log('going from '+sw.x+','+sw.y+' to '+ne.x+','+ne.y+' shift '+(rsw.x-msw.x)+','+(h+rsw.y-msw.y));
// console.log('original shift: '+map.latLngToContainerPoint(original_shift))
@@ -54,8 +59,13 @@ export const getTilePlacement = () => {
minY,
maxY,
- shiftX: (rsw.x - msw.x),
- shiftY: (height + (rsw.y - msw.y)) + 3,
+ // shiftX: (rsw.x - msw.x),
+ // shiftY: (height + (rsw.y - msw.y)),
+
+ shiftX: tileTransformTranslate.x - msw2.x,
+ shiftY: window.innerHeight + (tileTransformTranslate.y - msw2.y),
+ // shiftY: 815,
+
size: 256,
width,