1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
import React, { PureComponent } from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { Polyline, Polygon, Marker, Region } from 'react-native-maps';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Link, Portal, Field } from '../Api/types';
import { connect } from 'react-redux';
import { COLORS, COLORS_LVL, DEFAULT_ZOOM_TO_LEVEL, DEFAULT_ZOOM_TO_LINK_LENGTH } from '../constants';
import { calcCrow } from '../helper';
const PORTALS = {
"N1": require('../../assets/N.png'),
"R1": require('../../assets/R1.png'),
"R2": require('../../assets/R2.png'),
"R3": require('../../assets/R3.png'),
"R4": require('../../assets/R4.png'),
"R5": require('../../assets/R5.png'),
"R6": require('../../assets/R6.png'),
"R7": require('../../assets/R7.png'),
"R8": require('../../assets/R8.png'),
"E1": require('../../assets/E1.png'),
"E2": require('../../assets/E2.png'),
"E3": require('../../assets/E3.png'),
"E4": require('../../assets/E4.png'),
"E5": require('../../assets/E5.png'),
"E6": require('../../assets/E6.png'),
"E7": require('../../assets/E7.png'),
"E8": require('../../assets/E8.png'),
}
const fillPortalColor = { "R": "rgba(2, 140, 227, 0.5)", "E": "rgba(38, 205, 30, 0.5)", "N": "rgba(139, 0, 255, 0.5)" }
// const fillPortalColor = { "R": COLORS[1], "E": COLORS[2], "N": COLORS[0] }
const fractColor = { "R": "#028ce3", "E": "#26cd1e", "N": "#8b00ff" }
// const fractColor = { "R": COLORS[1], "E": COLORS[2], "N": COLORS[0] }
const fieldColor = { "R": "rgba(2, 140, 227, 0.1)", "E": "rgba(38, 205, 30, 0.1)", "N": "rgba(139, 0, 255, 0.1)" }
type Props = {
portals: Portal[]
links: Link[]
fields: Field[]
region: Region
onPortalClick: Function
zoom: Number
}
class MapObjects extends PureComponent<Props> {
render() {
const portals = this.props.portals
const fields = this.props.fields
const links = this.props.links
const renderPortal = this.props.renderPortal.map(guid => guid && this.drawPortal(guid, portals[guid], this.props.onPortalClick))
const renderLink = this.props.renderLink.map(guid => this.drawLink(guid, links[guid]))
const renderField = this.props.renderField.map(guid => this.drawField(guid, fields[guid]))
return [...renderField, ...renderLink, ...renderPortal]
}
drawPortal = (guid: string, entity: Portal, onPortalClick: Function) => {
const selected = this.props.selectedPortal && this.props.selectedPortal.guid == guid
return (<Marker
key={guid}
coordinate={entity.coords}
onPress={() => onPortalClick(guid, entity.coords)}
style={[selected ? { borderColor: 'red', borderWidth: 4, borderRadius: 13 } : null, { height: 26, width: 26, flex: 1, justifyContent: "center", alignItems: 'center' }]}
zIndex={selected ? 10 : entity.level}
anchor={{ x: 0.5, y: 0.5 }}
>
<Image
source={PORTALS[entity.fraction + entity.level]}
style={{ height: 22, width: 22 }}
/>
</Marker>);
}
drawField = (guid: string, entity: Field) => {
return <Polygon
key={guid}
coordinates={entity.coords}
fillColor={fieldColor[entity.fraction]}
strokeColor={fieldColor[entity.fraction]}
strokeWidth={StyleSheet.hairlineWidth}
/>
}
drawLink = (guid: string, entity: Link) => {
return <Polyline
key={guid}
coordinates={entity.coords}
strokeColor={fractColor[entity.fraction]}
strokeWidth={1}
/>
}
}
const styles = StyleSheet.create({
});
export default connect((store, props: Props) => {
const region = props.region
const lat1 = region.latitude - region.latitudeDelta / 2
const lat2 = region.latitude + region.latitudeDelta / 2
const lng1 = region.longitude - region.longitudeDelta / 2
const lng2 = region.longitude + region.longitudeDelta / 2
const minlvl = DEFAULT_ZOOM_TO_LEVEL[Math.min(props.zoom - 1, DEFAULT_ZOOM_TO_LEVEL.length - 1)]
const minlen = DEFAULT_ZOOM_TO_LINK_LENGTH[Math.min(props.zoom - 1, DEFAULT_ZOOM_TO_LINK_LENGTH.length - 1)] / 1000
const renderPortal = props.zoom > 14
? Object
.keys(store.entities.portals)
.filter(guid => store.entities.portals[guid].level >= props.levels[0] && store.entities.portals[guid].level <= props.levels[1])
.filter(guid => store.entities.portals[guid].coords.latitude > lat1 && store.entities.portals[guid].coords.latitude < lat2 && store.entities.portals[guid].coords.longitude > lng1 && store.entities.portals[guid].coords.longitude < lng2)
: [props.selectedPortal ? props.selectedPortal.guid : null]
const renderLink = Object
.keys(store.entities.links)
.filter(guid => {
const l1 = store.entities.links[guid].coords[0].latitude
const l2 = store.entities.links[guid].coords[1].latitude
const n1 = store.entities.links[guid].coords[0].longitude
const n2 = store.entities.links[guid].coords[1].longitude
return !(l1 < lat1 && l2 < lat1 || l1 > lat2 && l2 > lat2 || n1 < lng1 && n2 < lng1 || n1 > lng2 && n2 > lng2) && calcCrow(l1, n1, l2, n2) >= minlen
})
//.map(guid => this.drawLink(guid, links[guid]))
const renderField = Object
.keys(store.entities.fields)
.filter(guid => {
const l1 = store.entities.fields[guid].coords[0].guid
const l2 = store.entities.fields[guid].coords[1].guid
const l3 = store.entities.fields[guid].coords[2].guid
return store.entities.portals[l1] && store.entities.portals[l1].level >= minlvl ||
store.entities.portals[l2] && store.entities.portals[l2].level >= minlvl ||
store.entities.portals[l3] && store.entities.portals[l3].level >= minlvl
})
return {
portals: store.entities.portals,
fields: store.entities.fields,
links: store.entities.links,
renderPortal,
renderField,
renderLink
}
}, {})(
MapObjects
);
|
