This commit is contained in:
Alexander NeonXP Kiryukhin 2019-06-09 19:04:34 +03:00
parent 6b8ef1ef1a
commit 2a5b10f500
3 changed files with 5894 additions and 15 deletions

5871
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -17,5 +17,10 @@
"osm" "osm"
], ],
"author": "Alexander NeonXP Kiryukhin", "author": "Alexander NeonXP Kiryukhin",
"license": "MIT" "license": "MIT",
"peerDependencies": {
"react": "^16.8.6",
"react-native": "^0.59.9",
"react-native-svg": "^9.5.0"
}
} }

View file

@ -80,7 +80,7 @@ export default class Map extends PureComponent {
width: props.width || props.defaultWidth, width: props.width || props.defaultWidth,
height: props.height || props.defaultHeight, height: props.height || props.defaultHeight,
zoomDelta: 0, zoomDelta: 0,
pixelDelta: null, pixelDelta: [0, 0],
oldTiles: [], oldTiles: [],
deltaX: 0, deltaX: 0,
deltaY: 0, deltaY: 0,
@ -317,7 +317,6 @@ export default class Map extends PureComponent {
const tileX = this.lng2tile(latLng[1], zoom) const tileX = this.lng2tile(latLng[1], zoom)
const tileY = this.lat2tile(latLng[0], zoom) const tileY = this.lat2tile(latLng[0], zoom)
return [ return [
(tileX - tileCenterX) * 256.0 + width / 2 + (pixelDelta ? pixelDelta[0] : 0), (tileX - tileCenterX) * 256.0 + width / 2 + (pixelDelta ? pixelDelta[0] : 0),
(tileY - tileCenterY) * 256.0 + height / 2 + (pixelDelta ? pixelDelta[1] : 0) (tileY - tileCenterY) * 256.0 + height / 2 + (pixelDelta ? pixelDelta[1] : 0)
@ -479,6 +478,9 @@ export default class Map extends PureComponent {
// Markers // Markers
renderMarkers = () => { renderMarkers = () => {
if (!this.state.width || !this.state.height || !this.state.pixelDelta) {
return null
}
const { center, zoom, pixelDelta, zoomDelta, width, height } = this.state const { center, zoom, pixelDelta, zoomDelta, width, height } = this.state
const roundedZoom = Math.round(zoom + (zoomDelta || 0)) const roundedZoom = Math.round(zoom + (zoomDelta || 0))
const zoomDiff = zoom + (zoomDelta || 0) - roundedZoom const zoomDiff = zoom + (zoomDelta || 0) - roundedZoom
@ -577,10 +579,10 @@ export default class Map extends PureComponent {
key: `${x}-${y}-${old.roundedZoom}`, key: `${x}-${y}-${old.roundedZoom}`,
url: mapUrl(x, y, old.roundedZoom), url: mapUrl(x, y, old.roundedZoom),
srcSet: this.srcSet(dprs, mapUrl, x, y, old.roundedZoom), srcSet: this.srcSet(dprs, mapUrl, x, y, old.roundedZoom),
left: xDiff + (x - old.tileMinX) * 256 * pow + left, left: (xDiff + (x - old.tileMinX) * 256 * pow + left) * scale,
top: yDiff + (y - old.tileMinY) * 256 * pow + top, top: (yDiff + (y - old.tileMinY) * 256 * pow + top) * scale,
width: 256 * pow, width: 256 * pow * scale,
height: 256 * pow, height: 256 * pow * scale,
active: false, active: false,
opacity: 1, opacity: 1,
}) })
@ -601,10 +603,10 @@ export default class Map extends PureComponent {
key, key,
url: mapUrl(x, y, roundedZoom), url: mapUrl(x, y, roundedZoom),
srcSet: this.srcSet(dprs, mapUrl, x, y, roundedZoom), srcSet: this.srcSet(dprs, mapUrl, x, y, roundedZoom),
left: (x - tileMinX) * 256 + left, left: ((x - tileMinX) * 256 + left) * scale,
top: (y - tileMinY) * 256 + top, top: ((y - tileMinY) * 256 + top) * scale,
width: 256, width: 256 * scale,
height: 256, height: 256 * scale,
active: true, active: true,
opacity: 1, opacity: 1,
}) })
@ -616,10 +618,10 @@ export default class Map extends PureComponent {
source={{ uri: tile.url, cache: 'force-cache' }} source={{ uri: tile.url, cache: 'force-cache' }}
resizeMethod={"scale"} resizeMethod={"scale"}
style={{ style={{
height: tile.height * scale, height: tile.height,
width: tile.width * scale, width: tile.width,
left: tile.left * scale, left: tile.left,
top: tile.top * scale, top: tile.top,
position: 'absolute', position: 'absolute',
opacity: tile.opacity opacity: tile.opacity
}} }}
@ -629,6 +631,7 @@ export default class Map extends PureComponent {
} }
render() { render() {
return (<View return (<View
onLayout={(event) => { onLayout={(event) => {
const { width, height } = event.nativeEvent.layout; const { width, height } = event.nativeEvent.layout;