Managing TiledLayer from Map.

This commit is contained in:
Eric van der Vlist 2022-10-18 13:57:46 +02:00
parent 7912d0bfe8
commit 963f6037ca
5 changed files with 2030 additions and 6 deletions

2008
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -69,6 +69,7 @@
},
"devDependencies": {
"@capacitor/cli": "4.3.0",
"@ionic/cli": "6.20.3",
"@types/lodash": "^4.14.186"
},
"description": "An Ionic project"

View File

@ -22,7 +22,6 @@ export interface HandlersProperties {
* * mouseLeave, mouseDown and mouseUp to track the mouse state
* * mouseMove to shift the map if the mouse is down
*
* TODO: Check that using clientX instead of pageX (to pass unit tests) works.
*/
export const Handlers: react.FC<HandlersProperties> = (
props: HandlersProperties

View File

@ -48,6 +48,25 @@ export const Map: react.FC<MapProperties> = (props: MapProperties) => {
setCoordinateSystem(newCoordinateSystem);
};
const viewPort = {
topLeft: {
x: Math.floor(-coordinateSystem.shift.x / coordinateSystem.zoom / 256),
y: Math.floor(-coordinateSystem.shift.y / coordinateSystem.zoom / 256),
},
bottomRight: {
x: Math.ceil(
(-coordinateSystem.shift.x + window.innerWidth) /
coordinateSystem.zoom /
256
),
y: Math.ceil(
(-coordinateSystem.shift.y + window.innerHeight) /
coordinateSystem.zoom /
256
),
},
};
return (
<>
<Handlers transformMap={transformMap} />
@ -58,10 +77,7 @@ export const Map: react.FC<MapProperties> = (props: MapProperties) => {
<g transform='scale(256)'>
<TiledLayer
keyObject={{ provider: 'osm', zoomLevel: 16, x: 33485, y: 23936 }}
viewPort={{
topLeft: { x: 0, y: 0 },
bottomRight: { x: 10, y: 10 },
}}
viewPort={viewPort}
tileFactory={simpleTileFactory}
/>
</g>

View File

@ -1,5 +1,5 @@
/**The handlers configuration */
export const handlersConfig = {
/**Controls the activity of the mouse mouse event */
mouseMoveThrottleDelay: 100,
mouseMoveThrottleDelay: 1000,
}