muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 19:16:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

render: map composing (working with proper shifts)

Browse source
This commit is contained in:
muerwre 2018-11-28 09:38:39 +07:00
parent 4747c918e2
commit 2f3cb0e770
3 changed files with 22 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/renderer/Renderer.jsx
View file

@ -49,12 +49,14 @@ export class Renderer extends React.Component {
composeImages = ({ images, geometry, ctx }) => { composeImages = ({ images, geometry, ctx }) => {
const { const {
minX, minY, shiftX, shiftY, size minX, minY, maxY, shiftX, shiftY, size
} = geometry; } = geometry;
images.map(({ x, y, image }) => { images.map(({ x, y, image }) => {
const verticalShift = (maxY - minY) * size;
const posX = ((x - minX) * size) + shiftX; 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); return ctx.drawImage(image, posX, posY, 256, 256);
}); });

2
src/modules/Editor.js
View file

@ -327,3 +327,5 @@ export class Editor {
} }
export const editor = new Editor({}); export const editor = new Editor({});
window.editor = editor;

22
src/utils/renderer.js
View file

@ -13,13 +13,15 @@ const latLngToTile = latlng => {
const tileToLatLng = point => { const tileToLatLng = point => {
const z = map.getZoom(); 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 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)))); 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 = () => { export const getTilePlacement = () => {
const width = window.innerWidth; const width = window.innerWidth;
const height = window.innerHeight; const height = window.innerHeight;
@ -39,12 +41,15 @@ export const getTilePlacement = () => {
const southWestTileCoords = tileToLatLng(southWestTile); const southWestTileCoords = tileToLatLng(southWestTile);
const northEastTileCoords = tileToLatLng(northEastTile); const northEastTileCoords = tileToLatLng(northEastTile);
console.log({ southWestTileCoords, northEastTileCoords }); // console.log({ southWestTileCoords, northEastTileCoords });
const rsw = map.latLngToContainerPoint(southWestTileCoords); const rsw = map.latLngToContainerPoint(southWestTileCoords);
const msw = map.latLngToContainerPoint(southWest); 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({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('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)) // console.log('original shift: '+map.latLngToContainerPoint(original_shift))
@ -54,8 +59,13 @@ export const getTilePlacement = () => {
minY, minY,
maxY, maxY,
shiftX: (rsw.x - msw.x), // shiftX: (rsw.x - msw.x),
shiftY: (height + (rsw.y - msw.y)) + 3, // shiftY: (height + (rsw.y - msw.y)),
shiftX: tileTransformTranslate.x - msw2.x,
shiftY: window.innerHeight + (tileTransformTranslate.y - msw2.y),
// shiftY: 815,
size: 256, size: 256,
width, width,