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
|
import React, { Component } from "react";
import { withStyles } from '@material-ui/core/styles';
import {getX, getY} from './utilCoords'
import { Icon, Typography } from "@material-ui/core";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { mapaH, mapaW } from "odi-utils/constants"
const styles = ({
root: {
flexGrow: 1,
marginTop: 30,
}
});
class Simulacion7Dias extends Component {
almacenes = [
{
ubigeo: '150101',
provincia: 'LIMA',
latitud:-12.04591952,
longitud: -77.03049615,
region: 'Costa',
esPrincipal: 1
},{
ubigeo: '130101',
provincia: 'TRUJILLO',
latitud: -8.11176389,
longitud: -79.02868652,
region: 'Costa',
esPrincipal: 1
},{
ubigeo: '040101',
provincia: 'AREQUIPA',
latitud:-16.39881421,
longitud: -71.537019649,
region: 'Costa',
esPrincipal: 1
},{
ubigeo: '050301',
provincia: 'HUANCA SANCOS',
latitud:-13.91988366,
longitud: -74.33388289,
region: 'Costa',
esPrincipal: 0
}
]
render() {
return (
<>
<Typography variant="h4">
{`Resultado de simulación a 7 días`}
</Typography>
<TransformWrapper
defaultScale={1}
maxScale={1.8}
defaultPositionX={200}
defaultPositionY={100}
>
<TransformComponent>
<div>
<img src={require("../../../../public/images/mapaM.png")}/>
{this.almacenes.map((item,index) => {
console.log(index)
return <div style={{ position: 'absolute', left:`${getX(item.longitud)}px`, top: `${getY(item.latitud)}px`, color:"black"}}>
<Icon style={item.esPrincipal==1? {color:'blue', fontSize:18}:{color:'black', fontSize:15}}>house</Icon>
</div>
})}
</div>
<svg width={mapaW} height={mapaH} style={{position: 'absolute', left: '14px' , top: '34px'}}>
<path fill="none" stroke="red"
d="M 160 437, L 82 283, L 376 600" />
<circle r="5" fill="red">
<animateMotion dur="10s" repeatCount={1}
path="M 163 437, L 85 283, L 378 600"/>
</circle>
</svg>
</TransformComponent>
</TransformWrapper>
</>
);
}
}
export default withStyles(styles)(Simulacion7Dias);
|
