NeonXP/react-native-raster-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

initial

Browse source
This commit is contained in:
Alexander NeonXP Kiryukhin 2019-06-09 16:12:12 +03:00
commit 08c23bda73
5 changed files with 706 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
node_modules
npm-debug.log
lib

40
README.md Normal file
View file

@ -0,0 +1,40 @@
# React Native Raster Maps
Based on https://pigeon-maps.js.org/.
## Usage:
```
<Map
center={[55.796289, 49.108795]}
zoom={6}
provider={providers['osm']}
features={[
{ type: "multiline", coords: [[55.796289, 49.108795], [55.790289, 49.108095]] },
{ type: "polygon", coords: [[55.706289, 49.108795], [55.790289, 49.118095], [55.700289, 49.128095]] }
]}
onBoundsChanged={this.onBoundsChanged}
>
<Marker coords={[55.796289, 49.108795]} height={32} width={32} style={{ height: 32, width: 32, borderRadius: 16, backgroundColor: '#f00' }} />
<Marker coords={[55.790289, 49.108095]} height={32} width={32} style={{ height: 32, width: 32, borderRadius: 16, backgroundColor: '#f00' }} />
</Map>
```
## Providers:
* osm
* otm
* digiglobe
* wikimedia
* stamen
* sputnik
* wikimapia
* dark
Own provider:
```
<Map
provider={(x,y,z,dpr) => `http://map.example.ru/${x}/${y}/${z}.png`}
/>
```

8
src/debounce.js Normal file
View file

@ -0,0 +1,8 @@
export default function debounce (func, wait) {
let timeout
return function (...args) {
const context = this
clearTimeout(timeout)
timeout = setTimeout(() => func.apply(context, args), wait)
}
}

648
src/index.js Normal file
View file

@ -0,0 +1,648 @@
import React, { PureComponent } from 'react'
import { Image, View, PixelRatio, PanResponder } from 'react-native'
import Svg, { Polyline, Polygon } from 'react-native-svg'
import debounce from './debounce'
const DEBOUNCE_DELAY = 60
const CLICK_TOLERANCE = 2
const NOOP = () => { }
export const providers = {
osm: (x, y, z) => {
const s = String.fromCharCode(97 + (x + y + z) % 3)
return `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`
},
otm: (x, y, z) => {
const s = String.fromCharCode(97 + (x + y + z) % 3)
return `https://${s}.tile.opentopomap.org/${z}/${x}/${y}.png`
},
digiglobe: (x, y, z) => {
const s = String.fromCharCode(97 + (x + y + z) % 3)
return `https://${s}.tiles.mapbox.com/v4/digitalglobe.316c9a2e/${z}/${x}/${y}.png?access_token=pk.eyJ1IjoiZGlnaXRhbGdsb2JlIiwiYSI6ImNqZGFrZ2c2dzFlMWgyd2x0ZHdmMDB6NzYifQ.9Pl3XOO82ArX94fHV289Pg`
},
wikimedia: (x, y, z, dpr) => {
return `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${dpr >= 2 ? '@2x' : ''}.png`
},
stamen: (x, y, z, dpr) => {
return `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${dpr >= 2 ? '@2x' : ''}.jpg`
},
sputnik: (x, y, z, dpr) => {
return `http://tiles.maps.sputnik.ru/${z}/${x}/${y}.png?apikey=5032f91e8da6431d8605-f9c0c9a00357`
},
wikimapia: (x, y, z, dpr) => {
const num = x % 4 + (y % 4) * 4
return `http://i${num}.wikimapia.org/?x=${x}&y=${y}&zoom=${z}&lng=1`
},
dark: (x, y, z) => {
const s = String.fromCharCode(97 + (x + y + z) % 3)
return `https://cartodb-basemaps-${s}.global.ssl.fastly.net/dark_all/${z}/${x}/${y}.png`
},
}
export default class Map extends PureComponent {
panRef = React.createRef();
pinchRef = React.createRef();
static defaultProps = {
minZoom: 1,
maxZoom: 18,
markers: [],
geojson: [],
}
constructor(props) {
super(props)
this.syncToProps = debounce(this.syncToProps, DEBOUNCE_DELAY)
this.pixi = null
this._centerTarget = null
this._zoomTarget = null
// When users are using uncontrolled components we have to keep this
// so we can know if we should call onBoundsChanged
this._lastZoom = props.defaultZoom ? props.defaultZoom : props.zoom
this._lastCenter = props.defaultCenter ? props.defaultCenter : props.center
this._boundsSynced = false
this._minMaxCache = null
// minLat, maxLat, minLng, maxLng
this.absoluteMinMax = [
this.tile2lat(Math.pow(2, 10), 10),
this.tile2lat(0, 10),
this.tile2lng(0, 10),
this.tile2lng(Math.pow(2, 10), 10)
]
this.state = {
zoom: this._lastZoom,
center: this._lastCenter,
width: props.width || props.defaultWidth,
height: props.height || props.defaultHeight,
zoomDelta: 0,
pixelDelta: null,
oldTiles: [],
deltaX: 0,
deltaY: 0,
deltaScale: 0,
}
}
componentDidMount() {
this.syncToProps()
}
componentWillMount() {
this.pan = PanResponder.create({
onPanResponderGrant: this.onMoveStart,
onPanResponderMove: this.onMove,
onPanResponderEnd: this.onMoveEnd,
onResponderRelease: this.onTouchUp,
onPanResponderTerminate: () => true,
onShouldBlockNativeResponder: () => true,
onStartShouldSetPanResponder: () => true,
onPanResponderTerminationRequest: () => true,
onMoveShouldSetPanResponderCapture: (event, { dx, dy }) => (
dx !== 0 && dy !== 0
),
});
}
componentWillReceiveProps(nextProps) {
if (!nextProps.center && !nextProps.zoom) {
// if the user isn't controlling neither zoom nor center we don't have to update.
return
}
if (
(
!nextProps.center ||
(
nextProps.center[0] === this.props.center[0] &&
nextProps.center[1] === this.props.center[1]
)
) &&
nextProps.zoom === this.props.zoom
) {
// if the user is controlling either zoom or center but nothing changed
// we don't have to update aswell
return
}
const currentCenter = this._isAnimating ? this._centerTarget : this.state.center
const currentZoom = this._isAnimating ? this._zoomTarget : this.state.zoom
const nextCenter = nextProps.center || currentCenter // prevent the rare null errors
const nextZoom = nextProps.zoom || currentZoom
if (Math.abs(nextZoom - currentZoom) > 0.001 ||
Math.abs(nextCenter[0] - currentCenter[0]) > 0.0001 ||
Math.abs(nextCenter[1] - currentCenter[1]) > 0.0001) {
this.setCenterZoom(nextCenter, nextZoom, true)
}
}
distanceInScreens = (centerTarget, zoomTarget, center, zoom) => {
const { width, height } = this.props
// distance in pixels at the current zoom level
const l1 = this.latLngToPixel(center, center, zoom)
const l2 = this.latLngToPixel(centerTarget, center, zoom)
// distance in pixels at the target zoom level (could be the same)
const z1 = this.latLngToPixel(center, center, zoomTarget)
const z2 = this.latLngToPixel(centerTarget, center, zoomTarget)
// take the average between the two and divide by width or height to get the distance multiplier in screens
const w = (Math.abs(l1[0] - l2[0]) + Math.abs(z1[0] - z2[0])) / 2 / width
const h = (Math.abs(l1[1] - l2[1]) + Math.abs(z1[1] - z2[1])) / 2 / height
// return the distance
return Math.sqrt(w * w + h * h)
}
limitCenterAtZoom = (center, zoom) => {
// [minLat, maxLat, minLng, maxLng]
const minMax = this.getBoundsMinMax(zoom || this.state.zoom)
return [
Math.max(Math.min(isNaN(center[0]) ? this.state.center[0] : center[0], minMax[1]), minMax[0]),
Math.max(Math.min(isNaN(center[1]) ? this.state.center[1] : center[1], minMax[3]), minMax[2])
]
}
// main logic when changing coordinates
setCenterZoom = (center, zoom) => {
const limitedCenter = this.limitCenterAtZoom(center, zoom)
if (Math.round(this.state.zoom) !== Math.round(zoom)) {
const tileValues = this.tileValues(this.state)
const nextValues = this.tileValues({ center: limitedCenter, zoom, width: this.state.width, height: this.state.height })
const oldTiles = this.state.oldTiles
this.setState({
oldTiles: oldTiles.filter(o => o.roundedZoom !== tileValues.roundedZoom).concat(tileValues)
}, NOOP)
let loadTracker = {}
for (let x = nextValues.tileMinX; x <= nextValues.tileMaxX; x++) {
for (let y = nextValues.tileMinY; y <= nextValues.tileMaxY; y++) {
let key = `${x}-${y}-${nextValues.roundedZoom}`
loadTracker[key] = false
}
}
this._loadTracker = loadTracker
}
this.setState({ center: limitedCenter, zoom }, NOOP)
const maybeZoom = this.props.zoom ? this.props.zoom : this._lastZoom
const maybeCenter = this.props.center ? this.props.center : this._lastCenter
if (Math.abs(maybeZoom - zoom) > 0.001 ||
Math.abs(maybeCenter[0] - limitedCenter[0]) > 0.00001 ||
Math.abs(maybeCenter[1] - limitedCenter[1]) > 0.00001) {
this._lastZoom = zoom
this._lastCenter = [...limitedCenter]
this.syncToProps(limitedCenter, zoom)
}
}
getBoundsMinMax = (zoom) => {
if (this.props.limitBounds === 'center') {
return this.absoluteMinMax
}
const { width, height } = this.state
if (this._minMaxCache &&
this._minMaxCache[0] === zoom &&
this._minMaxCache[1] === width &&
this._minMaxCache[2] === height) {
return this._minMaxCache[3]
}
const pixelsAtZoom = Math.pow(2, zoom) * 256
const minLng = width > pixelsAtZoom ? 0 : this.tile2lng(width / 512, zoom) // x
const minLat = height > pixelsAtZoom ? 0 : this.tile2lat(Math.pow(2, zoom) - height / 512, zoom) // y
const maxLng = width > pixelsAtZoom ? 0 : this.tile2lng(Math.pow(2, zoom) - width / 512, zoom) // x
const maxLat = height > pixelsAtZoom ? 0 : this.tile2lat(height / 512, zoom) // y
const minMax = [minLat, maxLat, minLng, maxLng]
this._minMaxCache = [zoom, width, height, minMax]
return minMax
}
srcSet = (dprs, url, x, y, z) => {
if (!dprs || dprs.length === 0) {
return ''
}
return dprs.map(dpr => url(x, y, z, dpr) + (dpr === 1 ? '' : ` ${dpr}x`)).join(', ')
}
imageLoaded = (key) => {
if (this._loadTracker && key in this._loadTracker) {
this._loadTracker[key] = true
const unloadedCount = Object.keys(this._loadTracker).filter(k => !this._loadTracker[k]).length
if (unloadedCount === 0) {
this.setState({ oldTiles: [] }, NOOP)
}
}
}
getBounds = (center = this.state.center, zoom = this.zoomPlusDelta()) => {
const { width, height } = this.state
return {
ne: this.pixelToLatLng([width - 1, 0], center, zoom),
sw: this.pixelToLatLng([0, height - 1], center, zoom)
}
}
syncToProps = (center = this.state.center, zoom = this.state.zoom) => {
const { onBoundsChanged } = this.props
if (onBoundsChanged) {
const bounds = this.getBounds(center, zoom)
onBoundsChanged({ center, zoom, bounds, initial: !this._boundsSynced })
this._boundsSynced = true
}
}
// tools
lng2tile = (lon, zoom) => (lon + 180) / 360 * Math.pow(2, zoom)
lat2tile = (lat, zoom) => (1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)
tile2lng = (x, z) => (x / Math.pow(2, z) * 360 - 180)
tile2lat = (y, z) => {
var n = Math.PI - 2 * Math.PI * y / Math.pow(2, z)
return (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))))
}
zoomPlusDelta = () => {
return this.state.zoom + this.state.zoomDelta
}
pixelToLatLng = (pixel, center = this.state.center, zoom = this.zoomPlusDelta()) => {
const { width, height, pixelDelta } = this.state
const pointDiff = [
(pixel[0] - width / 2 - (pixelDelta ? pixelDelta[0] : 0)) / 256.0,
(pixel[1] - height / 2 - (pixelDelta ? pixelDelta[1] : 0)) / 256.0
]
const tileX = this.lng2tile(center[1], zoom) + pointDiff[0]
const tileY = this.lat2tile(center[0], zoom) + pointDiff[1]
return [
Math.max(this.absoluteMinMax[0], Math.min(this.absoluteMinMax[1], this.tile2lat(tileY, zoom))),
Math.max(this.absoluteMinMax[2], Math.min(this.absoluteMinMax[3], this.tile2lng(tileX, zoom)))
]
}
latLngToPixel = (latLng, center = this.state.center, zoom = this.zoomPlusDelta()) => {
const { width, height, pixelDelta } = this.state
const tileCenterX = this.lng2tile(center[1], zoom)
const tileCenterY = this.lat2tile(center[0], zoom)
const tileX = this.lng2tile(latLng[1], zoom)
const tileY = this.lat2tile(latLng[0], zoom)
return [
(tileX - tileCenterX) * 256.0 + width / 2 + (pixelDelta ? pixelDelta[0] : 0),
(tileY - tileCenterY) * 256.0 + height / 2 + (pixelDelta ? pixelDelta[1] : 0)
]
}
calculateZoomCenter = (center, coords, oldZoom, newZoom) => {
const { width, height } = this.state
const pixelBefore = this.latLngToPixel(coords, center, oldZoom)
const pixelAfter = this.latLngToPixel(coords, center, newZoom)
const newCenter = this.pixelToLatLng([
width / 2 + pixelAfter[0] - pixelBefore[0],
height / 2 + pixelAfter[1] - pixelBefore[1]
], center, newZoom)
return this.limitCenterAtZoom(newCenter, newZoom)
}
// data to display the tiles
tileValues(state) {
const { center, zoom, pixelDelta, zoomDelta, width, height } = state
const roundedZoom = Math.round(zoom + (zoomDelta || 0))
const zoomDiff = zoom + (zoomDelta || 0) - roundedZoom
const scale = Math.pow(2, zoomDiff)
const scaleWidth = width / scale
const scaleHeight = height / scale
const tileCenterX = this.lng2tile(center[1], roundedZoom) - (pixelDelta ? pixelDelta[0] / 256.0 / scale : 0)
const tileCenterY = this.lat2tile(center[0], roundedZoom) - (pixelDelta ? pixelDelta[1] / 256.0 / scale : 0)
const halfWidth = scaleWidth / 2 / 256.0
const halfHeight = scaleHeight / 2 / 256.0
const tileMinX = Math.floor(tileCenterX - halfWidth)
const tileMaxX = Math.floor(tileCenterX + halfWidth)
const tileMinY = Math.floor(tileCenterY - halfHeight)
const tileMaxY = Math.floor(tileCenterY + halfHeight)
return {
tileMinX,
tileMaxX,
tileMinY,
tileMaxY,
tileCenterX,
tileCenterY,
roundedZoom,
zoomDelta: zoomDelta || 0,
scaleWidth,
scaleHeight,
scale
}
}
onMoveStart = ({ nativeEvent }) => {
const touches = nativeEvent.touches.filter(x => !!x)
const touch = touches[0]
const t1 = [touch.pageX, touch.pageY]
this._touchStartPixel = [t1]
}
onMove = ({ nativeEvent }, gestureState) => {
const touches = nativeEvent.touches.filter(x => !!x)
if (touches.length === 1 && this._touchStartPixel) {
const touch = touches[0]
const pixel = [touch.pageX, touch.pageY]
if (!this._touchStartPixel) {
this._touchStartPixel = [pixel]
}
this.setState({
pixelDelta: [
pixel[0] - this._touchStartPixel[0][0],
pixel[1] - this._touchStartPixel[0][1]
]
}, NOOP)
} else if (touches.length === 2 && this._touchStartPixel) {
const { width, height, zoom } = this.state
const t1 = [touches[0].pageX, touches[0].pageY]
const t2 = [touches[1].pageX, touches[1].pageY]
if (!this._touchStartMidPoint || !this._touchStartDistance) {
this._touchStartPixel = [t1, t2]
this._touchStartMidPoint = [
(t1[0] + t2[0]) / 2,
(t1[1] + t2[1]) / 2
]
this._touchStartDistance = Math.sqrt(
Math.pow(t1[0] - t2[0], 2) +
Math.pow(t1[1] - t2[1], 2)
)
}
const midPoint = [(t1[0] + t2[0]) / 2, (t1[1] + t2[1]) / 2]
const midPointDiff = [midPoint[0] - this._touchStartMidPoint[0], midPoint[1] - this._touchStartMidPoint[1]]
const distance = Math.sqrt(Math.pow(t1[0] - t2[0], 2) + Math.pow(t1[1] - t2[1], 2))
const zoomDelta = Math.max(this.props.minZoom, Math.min(this.props.maxZoom, zoom + Math.log2(distance / this._touchStartDistance))) - zoom
const scale = Math.pow(2, zoomDelta)
const centerDiffDiff = [
(width / 2 - midPoint[0]) * (scale - 1),
(height / 2 - midPoint[1]) * (scale - 1)
]
this.setState({
zoomDelta: zoomDelta,
pixelDelta: [
centerDiffDiff[0] + midPointDiff[0] * scale,
centerDiffDiff[1] + midPointDiff[1] * scale
]
}, NOOP)
}
}
onMoveEnd = ({ nativeEvent }) => {
const { center, zoom } = this.sendDeltaChange()
if (this._touchStartPixel == null) {
return
}
const oldTouchPixel = this._touchStartPixel[0]
const newTouchPixel = [nativeEvent.changedTouches[0].pageX, nativeEvent.changedTouches[0].pageY]
if (
Math.abs(oldTouchPixel[0] - newTouchPixel[0]) > CLICK_TOLERANCE ||
Math.abs(oldTouchPixel[1] - newTouchPixel[1]) > CLICK_TOLERANCE
) {
this.setCenterZoom(center, zoom)
}
this._touchStartPixel = null
this._touchStartMidPoint = null
this._touchStartDistance = null
}
sendDeltaChange = () => {
const { center, zoom, pixelDelta, zoomDelta } = this.state
let lat = center[0]
let lng = center[1]
if (pixelDelta || zoomDelta !== 0) {
lng = this.tile2lng(this.lng2tile(center[1], zoom + zoomDelta) - (pixelDelta ? pixelDelta[0] / 256.0 : 0), zoom + zoomDelta)
lat = this.tile2lat(this.lat2tile(center[0], zoom + zoomDelta) - (pixelDelta ? pixelDelta[1] / 256.0 : 0), zoom + zoomDelta)
this.setCenterZoom([lat, lng], zoom + zoomDelta)
}
this.setState({
pixelDelta: null,
zoomDelta: 0
}, NOOP)
return {
center: this.limitCenterAtZoom([lat, lng], zoom + zoomDelta),
zoom: zoom + zoomDelta
}
}
// Markers
renderMarkers = () => {
const { center, zoom, pixelDelta, zoomDelta, width, height } = this.state
const roundedZoom = Math.round(zoom + (zoomDelta || 0))
const zoomDiff = zoom + (zoomDelta || 0) - roundedZoom
const scale = Math.pow(2, zoomDiff)
const bounds = this.getBounds()
const dx = - (pixelDelta ? pixelDelta[0] / 256.0 / scale : 0)
const dy = - (pixelDelta ? pixelDelta[1] / 256.0 / scale : 0)
const childrenWithProps = React.Children.map(this.props.children, child => {
const coords = child.props.coords
if (coords[0] > bounds.ne[0] || coords[0] < bounds.sw[0] || coords[1] > bounds.ne[1] || coords[1] < bounds.sw[1]) {
return null
}
const xy = this.latLngToPixel(coords, center, zoom + zoomDelta)
return <View style={[{
left: xy[0] + dx - (child.props.width || 32) / 2, top: xy[1] + dy - (child.props.height || 32) / 2, position: 'absolute'
}, child.props.style]}>{React.cloneElement(child, {})}</View>
});
return childrenWithProps
}
renderFeatures = () => {
const { center, zoom, pixelDelta, zoomDelta, width, height } = this.state
const roundedZoom = Math.round(zoom + (zoomDelta || 0))
const zoomDiff = zoom + (zoomDelta || 0) - roundedZoom
const scale = Math.pow(2, zoomDiff)
const bounds = this.getBounds()
const dx = - (pixelDelta ? pixelDelta[0] / 256.0 / scale : 0)
const dy = - (pixelDelta ? pixelDelta[1] / 256.0 / scale : 0)
//const xy = this.latLngToPixel(coords, center, zoom + zoomDelta)
return this.props.features.map((feature, idx) => {
switch (feature.type.toLowerCase()) {
case 'multiline':
return <Polyline
key={idx}
points={feature.coords.map(coords => this.latLngToPixel(coords, center, zoom + zoomDelta).join(',')).join(' ')}
fill="none"
stroke={feature.stroke || 'rgba(0,0,255, 0.9)'}
strokeWidth={feature.strokeWidth || 3}
/>
case 'polygon':
return <Polygon
key={idx}
points={feature.coords.map(coords => this.latLngToPixel(coords, center, zoom + zoomDelta).join(',')).join(' ')}
fill={feature.fill || 'rgba(0,0,255, 0.3)'}
stroke={feature.stroke || 'rgba(0,0,255, 0.9)'}
strokeWidth={feature.strokeWidth || 3}
/>
}
})
}
// display the tiles
renderTiles = () => {
const { oldTiles } = this.state
const dprs = [1, PixelRatio.get()]
const mapUrl = this.props.provider || providers['wikimedia']
const {
tileMinX,
tileMaxX,
tileMinY,
tileMaxY,
tileCenterX,
tileCenterY,
roundedZoom,
scaleWidth,
scaleHeight,
scale
} = this.tileValues(this.state)
let tiles = []
const left = -((tileCenterX - tileMinX) * 256 - scaleWidth / 2)
const top = -((tileCenterY - tileMinY) * 256 - scaleHeight / 2)
for (let i = 0; i < oldTiles.length; i++) {
let old = oldTiles[i]
let zoomDiff = old.roundedZoom - roundedZoom
if (Math.abs(zoomDiff) > 4 || zoomDiff === 0) {
continue
}
let pow = 1 / Math.pow(2, zoomDiff)
let xDiff = -(tileMinX - old.tileMinX * pow) * 256
let yDiff = -(tileMinY - old.tileMinY * pow) * 256
let xMin = Math.max(old.tileMinX, 0)
let yMin = Math.max(old.tileMinY, 0)
let xMax = Math.min(old.tileMaxX, Math.pow(2, old.roundedZoom) - 1)
let yMax = Math.min(old.tileMaxY, Math.pow(2, old.roundedZoom) - 1)
for (let x = xMin; x <= xMax; x++) {
for (let y = yMin; y <= yMax; y++) {
tiles.push({
key: `${x}-${y}-${old.roundedZoom}`,
url: mapUrl(x, y, old.roundedZoom),
srcSet: this.srcSet(dprs, mapUrl, x, y, old.roundedZoom),
left: xDiff + (x - old.tileMinX) * 256 * pow + left,
top: yDiff + (y - old.tileMinY) * 256 * pow + top,
width: 256 * pow,
height: 256 * pow,
active: false,
opacity: 1,
})
}
}
}
let xMin = Math.max(tileMinX, 0)
let yMin = Math.max(tileMinY, 0)
let xMax = Math.min(tileMaxX, Math.pow(2, roundedZoom) - 1)
let yMax = Math.min(tileMaxY, Math.pow(2, roundedZoom) - 1)
for (let x = xMin; x <= xMax; x++) {
for (let y = yMin; y <= yMax; y++) {
const key = `${x}-${y}-${roundedZoom}`
tiles.push({
key,
url: mapUrl(x, y, roundedZoom),
srcSet: this.srcSet(dprs, mapUrl, x, y, roundedZoom),
left: (x - tileMinX) * 256 + left,
top: (y - tileMinY) * 256 + top,
width: 256,
height: 256,
active: true,
opacity: 1,
})
}
}
return tiles.map(tile => (<Image
key={tile.key}
source={{ uri: tile.url, cache: 'force-cache' }}
resizeMethod={"scale"}
style={{
height: tile.height * scale,
width: tile.width * scale,
left: tile.left * scale,
top: tile.top * scale,
position: 'absolute',
opacity: tile.opacity
}}
onLoad={() => this.imageLoaded(tile.key)}
/>
))
}
render() {
return (<View
onLayout={(event) => {
const { width, height } = event.nativeEvent.layout;
this.setState({ width, height })
}}
{...this.pan.panHandlers}
style={[{ flex: 1, overflow: 'hidden' }, this.props.style]}
>
{this.renderTiles()}
<Svg style={{ flex: 1 }}>
{this.renderFeatures()}
</Svg>
{this.renderMarkers()}
</View>)
}
}

7
src/marker.js Normal file
View file

@ -0,0 +1,7 @@
import React from 'react';
export default class Marker extends React.PureComponent {
render() {
return this.props.children || null
}
}