[1.2.4] Can draw Textmarkers on the Map, use MGRS (UTM) on the Map
This commit is contained in:
parent
b82b071d4d
commit
ba3b56ee8d
@ -163,11 +163,15 @@
|
||||
<Content Include="resources\js\functions.js">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
<Content Include="resources\js\leaflet\images\layers-2x.png" />
|
||||
<Content Include="resources\js\leaflet\images\layers-2x.png">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
<Content Include="resources\js\leaflet\images\layers.png">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
<Content Include="resources\js\leaflet\images\marker-icon-2x.png" />
|
||||
<Content Include="resources\js\leaflet\images\marker-icon-2x.png">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
<Content Include="resources\js\leaflet\images\marker-icon.png">
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Content>
|
||||
|
||||
@ -5,18 +5,20 @@ using CoordinateSharp;
|
||||
namespace Fraunhofer.Fit.IoT.LoraMap.Model {
|
||||
public struct UTMData {
|
||||
public String MGRS;
|
||||
public Int32 FieldWidth;
|
||||
public Int32 FieldHeight;
|
||||
public Int32 Width;
|
||||
public Int32 Height;
|
||||
public String Base;
|
||||
public String FieldWidth;
|
||||
public String FieldHeight;
|
||||
public String Width;
|
||||
public String Height;
|
||||
|
||||
public UTMData(Double latitude, Double longitude) {
|
||||
this.MGRS = new Coordinate(latitude, longitude).MGRS.ToString();
|
||||
String[] d = Regex.Split(this.MGRS, "[0-9]+[A-Z] [A-Z]+ ([0-9]{3})([0-9]{2}) ([0-9]{3})([0-9]{2})");
|
||||
this.FieldWidth = Int32.Parse(d[1]);
|
||||
this.Width = Int32.Parse(d[2]);
|
||||
this.FieldHeight = Int32.Parse(d[3]);
|
||||
this.Height = Int32.Parse(d[4]);
|
||||
String[] d = Regex.Split(this.MGRS, "([0-9]+[A-Z] [A-Z]+) ([0-9]{3})([0-9]{2}) ([0-9]{3})([0-9]{2})");
|
||||
this.Base = d[1];
|
||||
this.FieldWidth = d[2];
|
||||
this.Width = d[3];
|
||||
this.FieldHeight = d[4];
|
||||
this.Height = d[5];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ using System.Runtime.InteropServices;
|
||||
[assembly: AssemblyConfiguration("")]
|
||||
[assembly: AssemblyCompany("Fraunhofer FIT")]
|
||||
[assembly: AssemblyProduct("Lora-Map")]
|
||||
[assembly: AssemblyCopyright("Copyright © 2018 - 24.04.2019")]
|
||||
[assembly: AssemblyCopyright("Copyright © 2018 - 28.04.2019")]
|
||||
[assembly: AssemblyTrademark("Fraunhofer FIT, BlubbFish")]
|
||||
[assembly: AssemblyCulture("")]
|
||||
[assembly: NeutralResourcesLanguage("de-DE")]
|
||||
@ -33,8 +33,8 @@ using System.Runtime.InteropServices;
|
||||
// Sie können alle Werte angeben oder Standardwerte für die Build- und Revisionsnummern verwenden,
|
||||
// übernehmen, indem Sie "*" eingeben:
|
||||
// [assembly: AssemblyVersion("1.0.*")]
|
||||
[assembly: AssemblyVersion("1.2.3")]
|
||||
[assembly: AssemblyFileVersion("1.2.3")]
|
||||
[assembly: AssemblyVersion("1.2.4")]
|
||||
[assembly: AssemblyFileVersion("1.2.4")]
|
||||
|
||||
/*
|
||||
* 1.1.1 Add Debian package config
|
||||
@ -48,4 +48,5 @@ using System.Runtime.InteropServices;
|
||||
* 1.2.1 #6 Load the map from the Device
|
||||
* 1.2.2 Bugfix, if only recieve panic packet with gps data, update the marker on the map also
|
||||
* 1.2.3 #9 display polygons and marker on the map
|
||||
* 1.2.4 Can draw Textmarkers on the Map, use MGRS (UTM) on the Map
|
||||
*/
|
||||
|
||||
@ -10,6 +10,16 @@
|
||||
border-radius: 5px;
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 10px 10px;
|
||||
}
|
||||
#bigmap .leaflet-map-pane .leaflet-marker-pane .snumber-icon {
|
||||
font-weight: bold;
|
||||
font-size: 9px;
|
||||
}
|
||||
#bigmap .leaflet-map-pane .leaflet-marker-pane .coord-icon {
|
||||
font-size: 13px;
|
||||
text-shadow: 3px 3px 3px #000000;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Optional: Makes the sample page fill the window. */
|
||||
html, body {
|
||||
|
||||
@ -49,6 +49,7 @@ function GetMapLayers() {
|
||||
layergetter.send();
|
||||
}
|
||||
|
||||
var SpecialMarkers = new Array();
|
||||
GetGeoLayer();
|
||||
function GetGeoLayer() {
|
||||
var geogetter = new XMLHttpRequest();
|
||||
@ -57,9 +58,6 @@ function GetGeoLayer() {
|
||||
var geo = JSON.parse(geogetter.responseText);
|
||||
L.geoJSON(geo, {
|
||||
style: function (features) {
|
||||
if (typeof features.properties["stroke-width"] === "undefined") {
|
||||
//alert("no!");
|
||||
}
|
||||
return {
|
||||
color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"],
|
||||
weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"],
|
||||
@ -69,13 +67,33 @@ function GetGeoLayer() {
|
||||
};
|
||||
},
|
||||
onEachFeature: function (feature, layer) {
|
||||
if (feature.geometry.type !== "LineString") {
|
||||
if (feature.geometry.type === "Polygon" || (feature.geometry.type === "Point" && feature.properties.hasOwnProperty("icon"))) {
|
||||
layer.bindPopup(feature.properties.name);
|
||||
}
|
||||
},
|
||||
pointToLayer: function (geoJsonPoint, latlng) {
|
||||
if (geoJsonPoint.properties.hasOwnProperty("description") && geoJsonPoint.properties["description"] === "snumber" && !geoJsonPoint.properties.hasOwnProperty("icon")) {
|
||||
var snumbericon = L.marker(latlng, {
|
||||
icon: new L.DivIcon({
|
||||
className: "snumber-icon",
|
||||
html: geoJsonPoint.properties["name"]
|
||||
})
|
||||
});
|
||||
SpecialMarkers.push(snumbericon);
|
||||
return snumbericon;
|
||||
} else if (geoJsonPoint.properties.hasOwnProperty("description") && geoJsonPoint.properties["description"] === "coord" && !geoJsonPoint.properties.hasOwnProperty("icon")) {
|
||||
var coordicon = L.marker(latlng, {
|
||||
icon: new L.DivIcon({
|
||||
className: "coord-icon",
|
||||
html: geoJsonPoint.properties["name"]
|
||||
})
|
||||
});
|
||||
SpecialMarkers.push(coordicon);
|
||||
return coordicon;
|
||||
} else if (geoJsonPoint.properties.hasOwnProperty("icon")) {
|
||||
return L.marker(latlng, { icon: L.icon({ iconUrl: "css/icons/cctv.png", iconSize: [32, 32] }) });
|
||||
}
|
||||
}
|
||||
}).addTo(mymap);
|
||||
}
|
||||
};
|
||||
@ -83,6 +101,53 @@ function GetGeoLayer() {
|
||||
geogetter.send();
|
||||
}
|
||||
|
||||
mymap.on('zoomend', function () {
|
||||
var currentZoom = mymap.getZoom();
|
||||
if (currentZoom < 16) {
|
||||
SpecialMarkers.forEach(function (elem, index) {
|
||||
if (elem.feature.properties["description"] === "snumber") {
|
||||
elem._icon.style.fontSize = "1px";
|
||||
}
|
||||
if (elem.feature.properties["description"] === "coord") {
|
||||
elem._icon.style.fontSize = "1px";
|
||||
}
|
||||
});
|
||||
} else if (currentZoom < 16) {
|
||||
SpecialMarkers.forEach(function (elem, index) {
|
||||
if (elem.feature.properties["description"] === "snumber") {
|
||||
elem._icon.style.fontSize = "5px";
|
||||
}
|
||||
if (elem.feature.properties["description"] === "coord") {
|
||||
elem._icon.style.fontSize = "8px";
|
||||
}
|
||||
});
|
||||
} else if (currentZoom < 17) {
|
||||
SpecialMarkers.forEach(function (elem, index) {
|
||||
if (elem.feature.properties["description"] === "snumber") {
|
||||
elem._icon.style.fontSize = "8px";
|
||||
}
|
||||
if (elem.feature.properties["description"] === "coord") {
|
||||
elem._icon.style.fontSize = "12px";
|
||||
}
|
||||
});
|
||||
} else if (currentZoom < 18) {
|
||||
SpecialMarkers.forEach(function (elem, index) {
|
||||
if (elem.feature.properties["description"] === "coord") {
|
||||
elem._icon.style.fontSize = "14px";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
SpecialMarkers.forEach(function (elem, index) {
|
||||
if (elem.feature.properties["description"] === "coord") {
|
||||
elem._icon.style.fontSize = "17px";
|
||||
}
|
||||
if (elem.feature.properties["description"] === "snumber") {
|
||||
elem._icon.style.fontSize = "12px";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
mymap.on("click", hidePanel);
|
||||
|
||||
function hidePanel(e) {
|
||||
|
||||
@ -50,9 +50,7 @@ function update_pannels_info() {
|
||||
} else {
|
||||
html += "<div class=\"gps\" style=\"color: red;\">kein GPS-Empfang</div>";
|
||||
}
|
||||
html += "<div class=\"coord\">" + positionItem["UTM"]["MGRS"] + "</div>";
|
||||
html += "<div class=\"planquad\"><span class=\"bold\">Planquadrat:</span> " + positionItem["UTM"]["FieldWidth"] + ", " + positionItem["UTM"]["FieldHeight"] + "</div>";
|
||||
html += "<div class=\"section\"><span class=\"bold\">Ausschnitt:</span> " + positionItem["UTM"]["Width"] + ", " + positionItem["UTM"]["Height"]+"</div>";
|
||||
html += "<div class=\"coord\">" + positionItem["UTM"]["Base"] + " <span style=\"color: #b1a831;\">" + positionItem["UTM"]["FieldWidth"] + "</span><span style=\"color: #218c00;\">" + positionItem["UTM"]["Width"] + "</span> <span style=\"color: #b1a831;\">" + positionItem["UTM"]["FieldHeight"] + "</span><span style=\"color: #218c00;\">" + positionItem["UTM"]["Height"] + "</span></div>";
|
||||
html += "<div class=\"height\"><span class=\"bold\">Höhe:</span> " + positionItem["Height"].toFixed(1) + " m</div>";
|
||||
html += "<div class=\"hdop\"><span class=\"bold\">HDOP:</span> " + positionItem["Hdop"].toFixed(1) + "</div>";
|
||||
html += "<div class=\"lanlot\"><span class=\"bold\">Dezimal:</span> " + positionItem["Latitude"].toFixed(5) + ", " + positionItem["Longitude"].toFixed(5) + "</div>";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user