Managing TiledLayer from Map.
This commit is contained in:
parent
7912d0bfe8
commit
963f6037ca
File diff suppressed because it is too large
Load Diff
|
@ -69,6 +69,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@capacitor/cli": "4.3.0",
|
||||
"@ionic/cli": "6.20.3",
|
||||
"@types/lodash": "^4.14.186"
|
||||
},
|
||||
"description": "An Ionic project"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
/**The handlers configuration */
|
||||
export const handlersConfig = {
|
||||
/**Controls the activity of the mouse mouse event */
|
||||
mouseMoveThrottleDelay: 100,
|
||||
mouseMoveThrottleDelay: 1000,
|
||||
}
|
Loading…
Reference in New Issue