2023-12-06 13:04:54 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
L_NO_TOUCH = false;
|
|
|
|
|
|
L_DISABLE_3D = false;
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
|
|
|
|
|
|
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
|
|
|
|
|
|
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
|
|
|
|
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width,
|
|
|
|
|
|
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
|
|
|
|
<style>
|
2024-02-23 17:52:42 +00:00
|
|
|
|
#map_d88a6539df6e3600f06d25fac5813c66 {
|
2023-12-06 13:04:54 +00:00
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 100.0%;
|
|
|
|
|
|
height: 100.0%;
|
|
|
|
|
|
left: 0.0%;
|
|
|
|
|
|
top: 0.0%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.leaflet-container { font-size: 1rem; }
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-02-23 17:52:42 +00:00
|
|
|
|
<div class="folium-map" id="map_d88a6539df6e3600f06d25fac5813c66" ></div>
|
2023-12-06 13:04:54 +00:00
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-02-23 17:52:42 +00:00
|
|
|
|
var map_d88a6539df6e3600f06d25fac5813c66 = L.map(
|
|
|
|
|
|
"map_d88a6539df6e3600f06d25fac5813c66",
|
2023-12-06 13:04:54 +00:00
|
|
|
|
{
|
2024-02-21 19:40:38 +00:00
|
|
|
|
center: [-22.340241451000697, -47.26020211631194],
|
2023-12-06 13:04:54 +00:00
|
|
|
|
crs: L.CRS.EPSG3857,
|
|
|
|
|
|
zoom: 12,
|
|
|
|
|
|
zoomControl: true,
|
|
|
|
|
|
preferCanvas: false,
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-02-23 17:52:42 +00:00
|
|
|
|
var tile_layer_89a5eef875c22861d4ac8ca6c1c205ad = L.tileLayer(
|
2023-12-06 13:04:54 +00:00
|
|
|
|
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
|
|
|
|
{"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 19, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-02-23 17:52:42 +00:00
|
|
|
|
tile_layer_89a5eef875c22861d4ac8ca6c1c205ad.addTo(map_d88a6539df6e3600f06d25fac5813c66);
|
2023-12-06 13:04:54 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-02-23 17:52:42 +00:00
|
|
|
|
function geo_json_068b4990ac1e224950e8cda7f505035c_onEachFeature(feature, layer) {
|
2023-12-06 13:04:54 +00:00
|
|
|
|
layer.on({
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
2024-02-23 17:52:42 +00:00
|
|
|
|
var geo_json_068b4990ac1e224950e8cda7f505035c = L.geoJson(null, {
|
|
|
|
|
|
onEachFeature: geo_json_068b4990ac1e224950e8cda7f505035c_onEachFeature,
|
2023-12-06 13:04:54 +00:00
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
2024-02-23 17:52:42 +00:00
|
|
|
|
function geo_json_068b4990ac1e224950e8cda7f505035c_add (data) {
|
|
|
|
|
|
geo_json_068b4990ac1e224950e8cda7f505035c
|
2023-12-06 13:04:54 +00:00
|
|
|
|
.addData(data);
|
|
|
|
|
|
}
|
2024-02-23 17:52:42 +00:00
|
|
|
|
geo_json_068b4990ac1e224950e8cda7f505035c_add({"features": [{"geometry": {"coordinates": [[-47.264037338109766, -22.339524535994332], [-47.26401766184665, -22.339560540751183], [-47.26400872414079, -22.339576970425245], [-47.26399979993972, -22.339593449992105], [-47.263990889109174, -22.339609979349202], [-47.26398199151551, -22.33962655838882], [-47.26397310702327, -22.33964318700223], [-47.26396423549601, -22.33965986507852], [-47.26394301077209, -22.339699942622605]], "type": "LineString"}, "id": "0", "properties": {"Dist1": 0.0, "Dist2": 0.0, "Id": 1517, "Length": 21.724783283, "Name": "Projeto"}, "type": "Feature"}, {"geometry": {"coordinates": [[-47.26401505555521, -22.339505666408137], [-47.26400067261975, -22.339531864331477], [-47.26399169682811, -22.339548288742588], [-47.26398273497559, -22.339564762798126], [-47.26397378692751, -22.339581286395244], [-47.263964852547424, -22.339597859430143], [-47.263955931699435, -22.339614481793877], [-47.2639470242459, -22.339631153376615], [-47.263938130048174, -22.339647874066152], [-47.26392924896685, -22.339664643747486], [-47.26392038086145, -22.33968146230347], [-47.263911525590025, -22.339698329615363], [-47.263902683009505, -22.339715245562264], [-47.26389385297623, -22.339732210019946], [-47.26388503534517, -22.33974922286274], [-47.26387622996941, -22.339766283963925], [-47.263867436701474, -22.33978339319349], [-47.26385865539275, -22.339800550419387], [-47.26384988589236, -22.339817755509237], [-47.26384112804865, -22.339835008327928], [-47.26383238170916, -22.339852308737367], [-47.26382364672, -22.339869656597674], [-47.263814922781556, -22.33988705205511], [-47.263806203316406, -22.33990450781026], [-47.26379747315636, -22.339922053442546], [-47.2637887225622, -22.339939707172757], [-47.26377244144222, -22.339972674804095]], "type": "LineString"}, "id": "1", "properties": {"Dist1": 0.0, "Dist2": 0.0, "Id": 1517, "Length": 57.457315127, "Name": "Projeto"}, "type": "Feature"}, {"geometry": {"coordinates": [[-47.26399273250813, -22.339486780512566], [-47.26397473205404, -22.3395195675868], [-47.263965731813826, -22.339536036729378], [-47.26395674581463, -22.339552555166417], [-47.26394777391955, -22.33956912279381], [-47.263938815989896, -22.339585739506486], [-47.263929871887576, -22.339602405194356], [-47.26392094147274, -22.33961911974636], [-47.26391202460452, -22.339635883049215], [-47.26390312114139, -22.33965269498672], [-47.26389423094067, -22.339669555440707], [-47.263885353858264, -22.339686464291287], [-47.26387648974896, -22.339703421416548], [-47.26386763846704, -22.339720426691283], [-47.263858799865226, -22.339737479988795], [-47.26384997379459, -22.33975458118134], [-47.263841160105585, -22.339771730138086], [-47.26383235864748, -22.33978892672588], [-47.26382356926737, -22.339806170811546], [-47.26381479181156, -22.339823462259098], [-47.26380602612555, -22.339840800929505], [-47.263797272053445, -22.339858186682097], [-47.263788529295276, -22.33987561965904], [-47.263779791344525, -22.33989311241416], [-47.26377104319843, -22.339910694187278], [-47.263762275217445, -22.339928382987218], [-47.26375348622338, -22.339946179811562], [-47.26374467563728, -22.33996408441948], [-47.26373584286757, -22.339982096561368], [-47.26372698731078, -22.340000215977238], [-47.26371810834943, -22.340018442401146], [-47.26370920535378, -22.34003677555744], [-47.263700277681515, -22.340055215161392], [-47.26369132467555, -22.340073760923875], [-47.26368183569953, -22.34009347187321], [-47.26367284885811, -22.340112192618236], [-47.26366384001703, -22.340131007045898], [-47.263654802943414, -22.3401499263258], [-47.263645736917645, -22.340168950139933], [-47.263636641211335, -22.340188078153293], [-47.26362751507855, -22.340207310032113], [-47.26361835776083, -22.34022664543335], [-47.26360916848614, -22.340246084006974], [-47.26359994646731, -22.340265625399184], [-47.26359069090416, -22.340285269247953], [-47.263581400981245, -22.340305015187877], [-47.26357207586976, -22.340324862845815], [-47.2635627147274, -22.340344811841895], [-47.263553316694
|
2023-12-06 13:04:54 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-02-23 17:52:42 +00:00
|
|
|
|
geo_json_068b4990ac1e224950e8cda7f505035c.addTo(map_d88a6539df6e3600f06d25fac5813c66);
|
2023-12-06 13:04:54 +00:00
|
|
|
|
|
|
|
|
|
|
</script>
|
2024-02-23 17:52:42 +00:00
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function trajeto_json_onEachFeature(feature, layer) {
|
|
|
|
|
|
layer.on({
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
var trajeto_json = L.geoJson(null, {
|
|
|
|
|
|
onEachFeature: trajeto_json_onEachFeature,
|
|
|
|
|
|
style: function(feature) {
|
|
|
|
|
|
return {color: 'red'};
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
function trajeto_json_add (data) {
|
|
|
|
|
|
trajeto_json.addData(data);
|
|
|
|
|
|
}
|
|
|
|
|
|
trajeto_json_add({"features": []});
|
|
|
|
|
|
|
|
|
|
|
|
trajeto_json.addTo(map_d88a6539df6e3600f06d25fac5813c66);
|
|
|
|
|
|
|
|
|
|
|
|
function adicionarGeometria(novaGeometria) {
|
|
|
|
|
|
trajeto_json.addData(novaGeometria);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function saoCoordenadasIguais(coord1, coord2, tolerancia) {
|
|
|
|
|
|
return Math.abs(coord1[0] - coord2[0]) < tolerancia && Math.abs(coord1[1] - coord2[1]) < tolerancia;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function adicionarCoordenada(idGeometria, novaCoordenada) {
|
|
|
|
|
|
var feature = trajeto_json.toGeoJSON().features.find(f => f.id === idGeometria);
|
|
|
|
|
|
if (feature) {
|
|
|
|
|
|
var ultima = [0.0,0.0];
|
|
|
|
|
|
if (feature.geometry.coordinates.length > 0) {
|
|
|
|
|
|
ultima = feature.geometry.coordinates[feature.geometry.coordinates.length - 1];
|
|
|
|
|
|
}
|
|
|
|
|
|
if (!saoCoordenadasIguais(ultima, novaCoordenada, 0.000001)) {
|
|
|
|
|
|
feature.geometry.coordinates.push(novaCoordenada);
|
|
|
|
|
|
var ft = feature;
|
|
|
|
|
|
trajeto_json.clearLayers();
|
|
|
|
|
|
trajeto_json.addData(ft);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.log("Feature com ID " + idGeometria + " n<>o encontrada.");
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
adicionarGeometria({
|
|
|
|
|
|
"type": "Feature",
|
|
|
|
|
|
"geometry": {
|
|
|
|
|
|
"type": "LineString",
|
|
|
|
|
|
"coordinates": []
|
|
|
|
|
|
},
|
|
|
|
|
|
"properties": {"Dist1": 0.0, "Dist2": 0.0, "Id": 1517, "Length": 21.724783283, "Name": "Projeto"},
|
|
|
|
|
|
"id": "Tj"
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var marcadorDinamico = L.marker([0, 0], {
|
|
|
|
|
|
icon: L.AwesomeMarkers.icon({
|
|
|
|
|
|
icon: 'info-sign',
|
|
|
|
|
|
markerColor: 'red',
|
|
|
|
|
|
prefix: 'glyphicon'
|
|
|
|
|
|
})
|
|
|
|
|
|
}).addTo(map_d88a6539df6e3600f06d25fac5813c66);
|
|
|
|
|
|
|
|
|
|
|
|
function atualizarMarcador() {
|
|
|
|
|
|
fetch('http://localhost:5001/servir-coordenadas/1')
|
|
|
|
|
|
.then(function(response) {
|
|
|
|
|
|
return response.json();
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(function(dados) {
|
|
|
|
|
|
var novaLatitude = dados.latitude;
|
|
|
|
|
|
var novaLongitude = dados.longitude;
|
|
|
|
|
|
var novaPosicao = [novaLatitude, novaLongitude];
|
|
|
|
|
|
marcadorDinamico.setLatLng(novaPosicao);
|
|
|
|
|
|
adicionarCoordenada("Tj", [novaLongitude, novaLatitude]);
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(function(error) {
|
|
|
|
|
|
console.error('Erro ao atualizar o marcador:', error);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Atualiza o marcador a cada 2 segundos
|
|
|
|
|
|
setInterval(atualizarMarcador, 2000);
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</html>
|
