401 lines
21 KiB
HTML
401 lines
21 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_7ee7923d27dce2e7992c20e470258a95 {
|
||
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_7ee7923d27dce2e7992c20e470258a95" ></div>
|
||
|
||
</body>
|
||
<script>
|
||
|
||
|
||
var map_7ee7923d27dce2e7992c20e470258a95 = L.map(
|
||
"map_7ee7923d27dce2e7992c20e470258a95",
|
||
{
|
||
center: [-22.21311375, -47.38142916666666],
|
||
crs: L.CRS.EPSG3857,
|
||
zoom: 12,
|
||
zoomControl: true,
|
||
preferCanvas: false,
|
||
}
|
||
);
|
||
|
||
|
||
|
||
|
||
|
||
var tile_layer_15ae0175f7515b3ca73f110e01980cf0 = 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_15ae0175f7515b3ca73f110e01980cf0.addTo(map_7ee7923d27dce2e7992c20e470258a95);
|
||
|
||
|
||
|
||
|
||
var trajetosSelecionados = {};
|
||
var RuasSelecionadas = [];
|
||
function enviarSelecaoParaServidor() {
|
||
client.publish("selecao_ruas_mapa", JSON.stringify(RuasSelecionadas), function (err) {
|
||
/*if (!err) {
|
||
console.log("Mensagem publicada com sucesso");
|
||
} else {
|
||
console.error("Falha ao publicar mensagem", err);
|
||
}*/
|
||
});
|
||
}
|
||
function geo_json_b7fe0dcee4afc896a61b909dbb3d55d8_onEachFeature(feature, layer) {
|
||
layer.on({
|
||
|
||
click: function(e) {
|
||
// Verificar se o trajeto j<> est<73> selecionado
|
||
if (trajetosSelecionados[feature.id]) {
|
||
// Se j<> est<73> selecionado, reverta para a cor original e remova da sele<6C><65>o
|
||
e.target.setStyle({
|
||
color: '#3388ff' // Cor original
|
||
});
|
||
delete trajetosSelecionados[feature.id];
|
||
RuasSelecionadas.splice(RuasSelecionadas.indexOf(feature.id), 1);
|
||
} else {
|
||
// Se n<>o est<73> selecionado, mude a cor para indicar sele<6C><65>o e adicione ao objeto de sele<6C><65>o
|
||
e.target.setStyle({
|
||
color: 'blue' // Cor de sele<6C><65>o
|
||
});
|
||
trajetosSelecionados[feature.id] = true;
|
||
RuasSelecionadas.push(feature.id);
|
||
}
|
||
enviarSelecaoParaServidor();
|
||
}/*, mouseover: function(e) {
|
||
// Mostrar tooltip com o ID da geometria quando o mouse passar sobre a linha
|
||
var tooltip = L.tooltip({
|
||
direction: 'auto', // Leaflet determina a melhor posi<73><69>o
|
||
sticky: true // Faz com que o tooltip siga o cursor do mouse
|
||
})
|
||
.setContent('Rua ' + feature.id); // Define o conte<74>do do tooltip
|
||
|
||
// Abre o tooltip na posi<73><69>o atual do mouse
|
||
var latLng = e.latlng;
|
||
tooltip.setLatLng(latLng);
|
||
layer.bindTooltip(tooltip).openTooltip(latLng);
|
||
}*/
|
||
});
|
||
};
|
||
var geo_json_b7fe0dcee4afc896a61b909dbb3d55d8 = L.geoJson(null, {
|
||
onEachFeature: geo_json_b7fe0dcee4afc896a61b909dbb3d55d8_onEachFeature,
|
||
|
||
});
|
||
|
||
function geo_json_b7fe0dcee4afc896a61b909dbb3d55d8_add (data) {
|
||
geo_json_b7fe0dcee4afc896a61b909dbb3d55d8
|
||
.addData(data);
|
||
}
|
||
geo_json_b7fe0dcee4afc896a61b909dbb3d55d8_add({"features": [{"geometry": {"coordinates": [[-47.38153883333333, -22.2130535], [-47.381537333333334, -22.213054333333332], [-47.3815365, -22.213054833333334], [-47.38153483333333, -22.213056], [-47.38153416666667, -22.2130565], [-47.38153283333333, -22.213057], [-47.3815315, -22.2130575], [-47.3815305, -22.213057833333334], [-47.38153, -22.213058], [-47.381529, -22.213057833333334], [-47.381528333333335, -22.213057666666668], [-47.3815275, -22.2130575], [-47.381527, -22.213057166666665], [-47.3815265, -22.213057166666665], [-47.38152616666667, -22.213056666666667], [-47.38152633333333, -22.2130565], [-47.38152516666667, -22.21305733333333], [-47.38152433333333, -22.213062], [-47.381523666666666, -22.2130645], [-47.38152083333333, -22.21306866666667], [-47.3815185, -22.213071], [-47.381515666666665, -22.213074666666667], [-47.381513, -22.213079], [-47.38151116666667, -22.213080833333333], [-47.3815075, -22.21308416666667], [-47.38150516666666, -22.213085666666668], [-47.381500833333334, -22.213089166666666], [-47.381496, -22.213092166666666], [-47.381493, -22.2130935], [-47.3814875, -22.213096666666665], [-47.381485, -22.2130985], [-47.38147816666667, -22.213101833333333], [-47.38147133333333, -22.213105166666665], [-47.3814685, -22.213107], [-47.38146316666667, -22.213110333333333], [-47.381461, -22.213111333333334], [-47.381458333333335, -22.213113], [-47.38145183333334, -22.213117666666665], [-47.38144966666667, -22.213119333333335], [-47.3814455, -22.213122666666667], [-47.38144366666667, -22.213124666666666], [-47.38144366666667, -22.21312483333333], [-47.38144283333333, -22.213126166666665], [-47.381441333333335, -22.213128166666667], [-47.381437, -22.213131], [-47.3814325, -22.213133833333334], [-47.381431166666665, -22.213136166666665], [-47.381428166666666, -22.21314033333333], [-47.381426833333336, -22.2131425], [-47.38142366666667, -22.213147166666666], [-47.381420166666665, -22.213150833333334], [-47.38141733333333, -22.21315583333333], [-47.3814155, -22.213157833333334], [-47.38141133333333, -22.213161], [-47.381408666666665, -22.213163], [-47.38140283333333, -22.213167], [-47.381398, -22.213170666666667], [-47.38139566666667, -22.213172333333333], [-47.38138983333333, -22.213176333333333], [-47.381385333333334, -22.213179666666665], [-47.3813835, -22.213181333333335], [-47.38137916666667, -22.2131845], [-47.38137733333333, -22.213186333333333], [-47.38137366666667, -22.2131905], [-47.381372, -22.213192666666668], [-47.381369, -22.213196666666665], [-47.3813655, -22.213201], [-47.38136433333333, -22.213203333333333], [-47.381362, -22.213208], [-47.38136016666667, -22.213212333333335], [-47.381359333333336, -22.213214666666666], [-47.3813575, -22.213219333333335], [-47.38135583333333, -22.213220833333335], [-47.381351, -22.21322333333333], [-47.3813465, -22.213224833333335], [-47.381344166666665, -22.213224666666665], [-47.38133833333333, -22.213223666666668], [-47.3813355, -22.213222833333333], [-47.3813305, -22.2132205], [-47.38132616666667, -22.213217166666666], [-47.381324, -22.213214666666666], [-47.3813205, -22.213209], [-47.381319833333336, -22.213207], [-47.3813195, -22.213202666666668], [-47.381321666666665, -22.213196833333335], [-47.38132366666667, -22.213194166666668], [-47.3813295, -22.213189333333332], [-47.381336, -22.21318683333333], [-47.3813395, -22.2131865], [-47.38134433333333, -22.213186666666665], [-47.38134616666667, -22.21318683333333], [-47.3813525, -22.213186333333333], [-47.3813595, -22.213185], [-47.381362333333335, -22.213184666666667], [-47.38136733333333, -22.2131825], [-47.38137, -22.213181333333335], [-47.38137566666666, -22.213178833333334], [-47.381379833333334, -22.2131755], [-47.381382, -22.213174], [-47.381386666666664, -22.2131705], [-47.38138933333333, -22.213166333333334], [-47.38139066666667, -22.213164333333335], [-47.38139283333334, -22.213159833333332], [-47.38139366666667, -22.213157833333334], [-47.38139433333333, -22.213152166666667], [-47.3813935, -22.2131465], [-47.38139316666667, -22.213143833333334], [-47.38139416666667, -22.2131385], [-47.38139566666667, -22.213136666666667], [-47.381400666666664, -22.213132166666668], [-47.38140333333333, -22.2131305], [-47.381409833333336, -22.213127166666666], [-47.38141366666667, -22.213124666666666], [-47.38141616666667, -22.213123166666666], [-47.38142166666667, -22.213119833333334], [-47.38142666666667, -22.213116166666666], [-47.381429, -22.213115], [-47.38143316666667, -22.2131125], [-47.38143933333333, -22.213111166666668], [-47.381442, -22.213109833333334], [-47.381446, -22.213108166666668], [-47.381446833333335, -22.213108], [-47.3814475, -22.2131075], [-47.38145166666666, -22.2131055], [-47.3814535, -22.213104], [-47.38145766666667, -22.213100833333332], [-47.38145983333333, -22.213099333333332], [-47.381463833333335, -22.2130955], [-47.38146583333333, -22.213093666666666], [-47.38146916666667, -22.2130895], [-47.3814705, -22.213087333333334], [-47.38147266666667, -22.213082833333335], [-47.381473166666666, -22.2130775], [-47.3814735, -22.213074833333334], [-47.3814725, -22.213069166666667], [-47.381470666666665, -22.213064], [-47.3814705, -22.213061333333332], [-47.3814725, -22.213056666666667], [-47.38147416666666, -22.213054333333332], [-47.381478333333334, -22.213050333333335], [-47.38148266666666, -22.213048], [-47.38148566666667, -22.213047333333332], [-47.3814925, -22.2130465], [-47.3814955, -22.2130455], [-47.381501666666665, -22.213043666666668], [-47.381507, -22.21304183333333], [-47.38150983333333, -22.213040833333334], [-47.381515, -22.2130385], [-47.381519833333336, -22.213035666666666], [-47.381519833333336, -22.213035666666666], [-47.3815265, -22.213031166666667], [-47.3815305, -22.213027666666665], [-47.381531833333334, -22.213025333333334], [-47.381535666666664, -22.213020833333335], [-47.381537, -22.213019], [-47.381538166666665, -22.213014], [-47.3815375, -22.2130085], [-47.38153666666667, -22.2130055], [-47.38153533333333, -22.213002666666668]], "id": null, "type": "LineString"}, "id": 0, "properties": {"Dist1": 0.0, "Dist2": 0.0, "Id": "1", "Length": 68.27180653763796, "Name": "13_12_2024_14_50_11"}, "type": "Feature"}], "type": "FeatureCollection"});
|
||
|
||
|
||
|
||
geo_json_b7fe0dcee4afc896a61b909dbb3d55d8.addTo(map_7ee7923d27dce2e7992c20e470258a95);
|
||
|
||
</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_7ee7923d27dce2e7992c20e470258a95);
|
||
|
||
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>
|
||
function trajeto_dinamico_json_onEachFeature(feature, layer) {
|
||
layer.on({
|
||
});
|
||
};
|
||
var trajeto_dinamico_json = L.geoJson(null, {
|
||
onEachFeature: trajeto_dinamico_json_onEachFeature,
|
||
style: function(feature) {
|
||
return {color: 'green'};
|
||
}
|
||
}
|
||
);
|
||
function trajeto_dinamico_json_add (data) {
|
||
trajeto_dinamico_json.addData(data);
|
||
}
|
||
trajeto_dinamico_json_add({"features": []});
|
||
|
||
trajeto_dinamico_json.addTo(map_7ee7923d27dce2e7992c20e470258a95);
|
||
|
||
function adicionarGeometriaDinamica(novaGeometria) {
|
||
trajeto_dinamico_json.addData(novaGeometria);
|
||
}
|
||
|
||
function adicionarCoordenadaDinamica(idGeometria, coordenadas) {
|
||
var feature = trajeto_dinamico_json.toGeoJSON().features.find(f => f.id === idGeometria);
|
||
if (feature) {
|
||
feature.geometry.coordinates = [];
|
||
coordenadas.forEach(x => feature.geometry.coordinates.push([x.longitude, x.latitude]));
|
||
var ft = feature;
|
||
trajeto_dinamico_json.clearLayers();
|
||
trajeto_dinamico_json.addData(ft);
|
||
} else {
|
||
console.log("Feature com ID " + idGeometria + " nao encontrada.");
|
||
}
|
||
}
|
||
|
||
adicionarGeometriaDinamica({
|
||
"type": "Feature",
|
||
"geometry": {
|
||
"type": "LineString",
|
||
"coordinates": []
|
||
},
|
||
"properties": {"Dist1": 0.0, "Dist2": 0.0, "Id": 1517, "Length": 21.724783283, "Name": "Projeto"},
|
||
"id": "TjD"
|
||
});
|
||
|
||
</script>
|
||
|
||
<script src="folium/mqtt.min.js"></script>
|
||
<script src="folium/leaflet.rotatedMarker.js"></script>
|
||
<script>
|
||
let posicaoAtualEquipamento = {
|
||
lat: 0,
|
||
long: 0
|
||
};
|
||
|
||
let posicaoAtualBase = {
|
||
lat: 0,
|
||
long: 0
|
||
};
|
||
|
||
var customIcon = L.icon({
|
||
iconUrl: 'folium/images/position_marker.png',
|
||
iconSize: [32, 32],
|
||
iconAnchor: [16, 16],
|
||
popupAnchor: [0, -16]
|
||
});
|
||
|
||
var marcadorEquipamento = L.marker([0, 0], {
|
||
icon: customIcon
|
||
}).addTo(map_7ee7923d27dce2e7992c20e470258a95);
|
||
|
||
var marcadorBase = L.marker([0, 0], {}).addTo(map_7ee7923d27dce2e7992c20e470258a95);
|
||
var icon = L.AwesomeMarkers.icon(
|
||
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
|
||
);
|
||
marcadorBase.setIcon(icon);
|
||
|
||
// 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("Inscricao bem-sucedida no topico");
|
||
} else {
|
||
console.error("Falha na inscricao do topico", err);
|
||
}
|
||
});
|
||
client.subscribe('trajetoria_dinamica', function (err) {
|
||
if (!err) {
|
||
console.log("Inscricao bem-sucedida no topico");
|
||
} else {
|
||
console.error("Falha na inscricao do topico", err);
|
||
}
|
||
});
|
||
client.subscribe('selecao_ruas_mapa', function (err) {
|
||
if (!err) {
|
||
console.log("Inscricao bem-sucedida no topico");
|
||
} else {
|
||
console.error("Falha na inscricao do topico", err);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Lidar com mensagens recebidas para o topico inscrito
|
||
client.on('message', function (topic, message) {
|
||
var dados = JSON.parse(message);
|
||
if (topic === "trajetoria_dinamica") {
|
||
adicionarCoordenadaDinamica("TjD", dados); // "Tj" <20> o ID da feature no GeoJSON
|
||
}
|
||
else if (topic === "coordenadas_gps") {
|
||
// A mensagem e um Buffer, converta para string ou objeto conforme necessario
|
||
//console.log(`Mensagem recebida no topico '${topic}': ${message.toString()}`);
|
||
|
||
var id = dados.id;
|
||
var novaLatitude = dados.latitude;
|
||
var novaLongitude = dados.longitude;
|
||
var novaPosicao = [novaLatitude, novaLongitude];
|
||
var orientacao = dados.orientacao;
|
||
var foco = dados.foco;
|
||
|
||
if (id == 1) {
|
||
marcadorBase.setLatLng(novaPosicao);
|
||
|
||
// Calcular angulo de rotacao
|
||
var angulo = dados.orientacao;
|
||
|
||
posicaoAtualBase.lat = novaPosicao[0];
|
||
posicaoAtualBase.long = novaPosicao[1];
|
||
|
||
// Rotacionar o marcador para o angulo calculado
|
||
marcadorBase.setRotationAngle(angulo);
|
||
}
|
||
else {
|
||
marcadorEquipamento.setLatLng(novaPosicao);
|
||
|
||
// Calcular angulo de rotacao
|
||
var angulo = dados.orientacao;
|
||
|
||
posicaoAtualEquipamento.lat = novaPosicao[0];
|
||
posicaoAtualEquipamento.long = novaPosicao[1];
|
||
|
||
// Rotacionar o marcador para o angulo calculado
|
||
marcadorEquipamento.setRotationAngle(angulo);
|
||
|
||
adicionarCoordenada("Tj", [novaLongitude, novaLatitude]);
|
||
}
|
||
|
||
if (foco) {
|
||
map_7ee7923d27dce2e7992c20e470258a95.setView(novaPosicao, map_7ee7923d27dce2e7992c20e470258a95.getZoom());
|
||
}
|
||
|
||
}
|
||
else if (topic === 'selecao_ruas_mapa') {
|
||
var selecionadas = dados;
|
||
if (selecionadas.length != RuasSelecionadas.length) {
|
||
atualizarSelecaoRuas(selecionadas);
|
||
}
|
||
}
|
||
|
||
});
|
||
|
||
// Fun<75><6E>o para atualizar a sele<6C><65>o das ruas e mudar a cor no mapa
|
||
function atualizarSelecaoRuas(selecionadas) {
|
||
selecionadas = JSON.parse(selecionadas);
|
||
RuasSelecionadas = Array.isArray(selecionadas) ? [...selecionadas] : [];
|
||
geo_json_b7fe0dcee4afc896a61b909dbb3d55d8.eachLayer(function (layer) {
|
||
if (RuasSelecionadas.includes(parseInt(layer.feature.id))) {
|
||
layer.setStyle({ color: 'blue' });
|
||
} else {
|
||
layer.setStyle({ color: '#3388ff' }); // Cor original
|
||
}
|
||
});
|
||
}
|
||
|
||
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> |