214 lines
7.8 KiB
HTML
214 lines
7.8 KiB
HTML
<!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="folium/leaflet.js"></script>
|
||
<script src="folium/jquery-3.7.1.min.js"></script>
|
||
<script src="folium/bootstrap.bundle.min.js"></script>
|
||
<script src="folium/leaflet.awesome-markers.js"></script>
|
||
<link rel="stylesheet" href="folium/leaflet.css"/>
|
||
<link rel="stylesheet" href="folium/bootstrap.min.css"/>
|
||
<link rel="stylesheet" href="folium/bootstrap.min.css"/>
|
||
<link rel="stylesheet" href="folium/all.min.css"/>
|
||
<link rel="stylesheet" href="folium/leaflet.awesome-markers.css"/>
|
||
<link rel="stylesheet" href="folium/leaflet.awesome.rotate.min.css"/>
|
||
|
||
<meta name="viewport" content="width=device-width,
|
||
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||
<style>
|
||
#map_d9a6f3bd9607a246d24a7e01ec3b2d9a {
|
||
position: relative;
|
||
width: 100.0%;
|
||
height: 100.0%;
|
||
left: 0.0%;
|
||
top: 0.0%;
|
||
}
|
||
.leaflet-container { font-size: 1rem; }
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<div class="folium-map" id="map_d9a6f3bd9607a246d24a7e01ec3b2d9a" ></div>
|
||
|
||
</body>
|
||
<script>
|
||
|
||
|
||
var map_d9a6f3bd9607a246d24a7e01ec3b2d9a = L.map(
|
||
"map_d9a6f3bd9607a246d24a7e01ec3b2d9a",
|
||
{
|
||
center: [0.0, 0.0],
|
||
crs: L.CRS.EPSG3857,
|
||
zoom: 12,
|
||
zoomControl: true,
|
||
preferCanvas: false,
|
||
}
|
||
);
|
||
|
||
|
||
|
||
|
||
|
||
var tile_layer_ba507403276b817c230164897b95edfc = L.tileLayer(
|
||
"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}
|
||
);
|
||
|
||
|
||
tile_layer_ba507403276b817c230164897b95edfc.addTo(map_d9a6f3bd9607a246d24a7e01ec3b2d9a);
|
||
|
||
</script>
|
||
|
||
<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_d9a6f3bd9607a246d24a7e01ec3b2d9a);
|
||
|
||
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 src="folium/mqtt.min.js"></script>
|
||
<script src="folium/leaflet.rotatedMarker.js"></script>
|
||
<script>
|
||
let posicaoAtual = {
|
||
lat: 0,
|
||
long: 0
|
||
};
|
||
|
||
var customIcon = L.icon({
|
||
iconUrl: 'folium/images/position_marker.png',
|
||
iconSize: [32, 32],
|
||
iconAnchor: [16, 16],
|
||
popupAnchor: [0, -16]
|
||
});
|
||
|
||
var marcadorDinamico = L.marker([0, 0], {
|
||
icon: customIcon
|
||
}).addTo(map_d9a6f3bd9607a246d24a7e01ec3b2d9a);
|
||
|
||
// Conectar ao broker MQTT
|
||
const client = mqtt.connect('ws://localhost:9001'); // Use wss para conex<65>o segura
|
||
|
||
// Quando conectado, inscreva-se no t<>pico desejado
|
||
client.on('connect', function () {
|
||
console.log('Conectado ao broker MQTT');
|
||
|
||
// Inscrever-se no t<>pico
|
||
client.subscribe('coordenadas_gps', function (err) {
|
||
if (!err) {
|
||
console.log("Inscri<72><69>o bem-sucedida no t<>pico");
|
||
} else {
|
||
console.error("Falha na inscri<72><69>o do t<>pico", err);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Lidar com mensagens recebidas para o t<>pico inscrito
|
||
client.on('message', function (topic, message) {
|
||
// A mensagem <20> um Buffer, converta para string ou objeto conforme necess<73>rio
|
||
//console.log(`Mensagem recebida no t<>pico '${topic}': ${message.toString()}`);
|
||
var dados = JSON.parse(message);
|
||
var novaLatitude = dados.latitude;
|
||
var novaLongitude = dados.longitude;
|
||
var novaPosicao = [novaLatitude, novaLongitude];
|
||
marcadorDinamico.setLatLng(novaPosicao);
|
||
|
||
var angulo = dados.orientacao;
|
||
|
||
posicaoAtual.lat = novaPosicao[0];
|
||
posicaoAtual.long = novaPosicao[1];
|
||
|
||
// Rotacionar o marcador para o angulo calculado
|
||
marcadorDinamico.setRotationAngle(angulo);
|
||
|
||
adicionarCoordenada("Tj", [novaLongitude, novaLatitude]);
|
||
map_d9a6f3bd9607a246d24a7e01ec3b2d9a.setView(novaPosicao, map_d9a6f3bd9607a246d24a7e01ec3b2d9a.getZoom());
|
||
});
|
||
|
||
function calcularOrientacao(P1latitude, P1longitude, P2latitude, P2longitude) {
|
||
// Converter latitudes e longitudes de graus para radianos
|
||
const latA = P1latitude * (Math.PI / 180.0);
|
||
const lonA = P1longitude * (Math.PI / 180.0);
|
||
const latB = P2latitude * (Math.PI / 180.0);
|
||
const lonB = P2longitude * (Math.PI / 180.0);
|
||
|
||
// Calcular a diferen<65>a de longitude
|
||
const deltaLon = lonB - lonA;
|
||
|
||
// Calcular a dire<72><65>o
|
||
const y = Math.sin(deltaLon) * Math.cos(latB);
|
||
const x = Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(deltaLon);
|
||
const direcaoRadianos = Math.atan2(y, x);
|
||
|
||
// Converter a dire<72><65>o de radianos para graus
|
||
let direcaoGraus = direcaoRadianos * (180.0 / Math.PI);
|
||
|
||
// Normalizar a dire<72><65>o para que esteja no intervalo de 0 a 360 graus
|
||
direcaoGraus = (direcaoGraus + 360) % 360;
|
||
|
||
return direcaoGraus;
|
||
}
|
||
|
||
</script>
|
||
</html> |