Lora-Map/Lora-Map/resources/js/map.js
2019-11-21 14:36:06 +01:00

270 lines
12 KiB
JavaScript

var MapObject = {
Map: {},
GeoJson: {},
_FightDedection: {},
_DensityAreas: {},
_SpecialMarkers: new Array(),
Start: function () {
this.Map = L.map('bigmap').setView([0, 0], 16);
this._SetupMapZoomFontsize();
this._SetupClickHandler();
return this;
},
_ParseAJAXSettings: function (settings) {
this.Map.panTo([settings.Startloclat, settings.Startloclon]);
this._GenerateGrid(settings.Grid);
this._GenerateFightBoxes(settings.FightDedection);
this._GenerateDensityBoxes(settings.DensityArea);
},
_ParseAJAXLayers: function (maps) {
var i = 0;
for (var key in maps) {
i++;
}
if (i === 1) {
L.tileLayer(maps["online"]["url"], {
attribution: maps["online"]["attribution"],
minZoom: maps["online"]["minZoom"],
maxZoom: maps["online"]["maxZoom"]
}).addTo(this.Map);
} else {
var baseMaps = {};
for (key in maps) {
if (key !== "online") {
var basemap = L.tileLayer(maps[key]["url"], {
attribution: maps[key]["attribution"],
minZoom: maps[key]["minZoom"],
maxZoom: maps[key]["maxZoom"],
errorTileUrl: "css/icons/failtile.png"
});
basemap.addTo(this.Map);
baseMaps[maps[key]["title"]] = basemap;
break;
}
}
for (key in maps) {
if (!baseMaps.hasOwnProperty(maps[key]["title"])) {
baseMaps[maps[key]["title"]] = L.tileLayer(maps[key]["url"], {
attribution: maps[key]["attribution"],
minZoom: maps[key]["minZoom"],
maxZoom: maps[key]["maxZoom"],
errorTileUrl: "css/icons/failtile.png"
});
}
}
L.control.layers(baseMaps).addTo(this.Map);
}
},
_GenerateGrid: function (grid) {
for (var i = 0; i < grid.Major.length; i++) {
var linemajor = grid.Major[i];
L.polyline([[linemajor.from[0], linemajor.from[1]], [linemajor.to[0], linemajor.to[1]]], { color: "red", weight: 1, interactive: false }).addTo(this.Map);
}
for (var j = 0; j < grid.Minor.length; j++) {
var lineminor = grid.Minor[j];
L.polyline([[lineminor.from[0], lineminor.from[1]], [lineminor.to[0], lineminor.to[1]]], { color: "red", weight: 0.7, opacity: 0.5, interactive: false }).addTo(this.Map);
}
},
_GenerateFightBoxes: function (fightdedection) {
for (var cameraid in fightdedection) {
this._FightDedection[cameraid] = {};
this._FightDedection[cameraid].Box = L.polygon(fightdedection[cameraid].Polygon, { color: 'black', weight: 1 }).addTo(this.Map);
this._FightDedection[cameraid].Box.bindPopup("Fightdedection " + fightdedection[cameraid].Alias);
this._FightDedection[cameraid].Level = fightdedection[cameraid].Level;
}
},
_ParseAJAXFightDedection: function (json) {
for (var cameraid in json) {
if (this._FightDedection.hasOwnProperty(cameraid)) {
var fight = json[cameraid];
var box = this._FightDedection[cameraid].Box;
var diff = FunctionsObject.TimeCalculation(fight["LastUpdate"], "diffraw");
if (fight["FightProbability"] > this._FightDedection[cameraid].Level) {
if (diff <= 10 && box.options.color === "black") {
box.setStyle({ color: 'rgb(' + fight["FightProbability"] * 255 + ',0,0)' });
} else if (diff <= 10 && box.options.color !== "black") {
if (diff % 2 === 0) {
box.setStyle({ color: 'rgb(' + fight["FightProbability"] * 255 + ',0,0)' });
} else {
box.setStyle({ color: 'green' });
}
} else if (diff > 10 && box.options.color !== "black") {
box.setStyle({ color: 'black' });
}
}
}
}
},
_GenerateDensityBoxes: function (densityareas) {
for (var cameraid in densityareas) {
this._DensityAreas[cameraid] = { 'Poly': L.polygon(densityareas[cameraid].Polygon, { color: 'hsl(120,100%,50%)', weight: 1 }).addTo(this.Map), 'Maximum': densityareas[cameraid].Maximum };
this._DensityAreas[cameraid].Poly.bindPopup("<strong>Besuchermenge:</strong><br>" +
"Besucher <strong>(0/" + this._DensityAreas[cameraid].Maximum + ")</strong> Personen<br>" +
"<progress value='0' max='" + this._DensityAreas[cameraid].Maximum + "'></progress>");
}
},
_ParseAJAXDensity: function (json) {
for (var cameraid in json) {
if (this._DensityAreas.hasOwnProperty(cameraid)) {
var crowd = json[cameraid];
var box = this._DensityAreas[cameraid].Poly;
var max = this._DensityAreas[cameraid].Maximum;
var cur = crowd.DensityCount;
if (cur > max) {
cur = max;
}
box.setStyle({ color: this._createRGB(cur, max) });
var p = box.getPopup().setContent("<strong>Besuchermenge:</strong><br>" +
"Besucher <strong>(" + crowd.DensityCount + "/" + max + ")</strong> Personen<br>" +
"<progress value='" + cur + "' max='" + max + "'></progress>").update();
}
}
},
_createRGB: function (current, max) {
return "hsl(" + 120 * (1 - current / max) + ",100%,50%)";
},
_ParseAJAXGeo: function (geo) {
if (!(Object.keys(geo).length === 0 && geo.constructor === Object)) {
this.GeoJson = geo;
L.geoJSON(geo, {
style: function (features) {
return {
color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"],
weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"],
opacity: typeof features.properties["stroke-opacity"] === "undefined" ? 1 : features.properties["stroke-opacity"],
fillColor: typeof features.properties["fill"] === "undefined" ? '#ffffff' : features.properties["fill"],
fillOpacity: typeof features.properties["fill-opacity"] === "undefined" ? 1 : features.properties["fill-opacity"]
};
},
onEachFeature: function (feature, layer) {
if (feature.geometry.type === "Polygon" || feature.geometry.type === "Point" && feature.properties.hasOwnProperty("icon")) {
var text = "<b>" + feature.properties.name + "</b>";
if (feature.properties.hasOwnProperty("description")) {
text = text + "<br>" + feature.properties.description;
}
layer.bindPopup(text, { maxWidth: 485 });
}
},
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"],
iconSize: [8, 8]
}),
interactive: false
});
MapObject._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"]
}),
interactive: false
});
MapObject._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(this.Map);
}
},
_SetupMapZoomFontsize: function () {
this.Map.on('zoomend', function () {
var currentZoom = MapObject.Map.getZoom();
if (currentZoom < 14) {
MapObject._SpecialMarkers.forEach(function (elem, index) {
if (elem.feature.properties["description"] === "snumber") {
elem._icon.style.fontSize = "0px";
elem._icon.style.marginLeft = "0px";
elem._icon.style.marginTop = "0px";
}
if (elem.feature.properties["description"] === "coord") {
elem._icon.style.fontSize = "0px";
}
});
} else if (currentZoom === 14) {
MapObject._SpecialMarkers.forEach(function (elem, index) {
if (elem.feature.properties["description"] === "snumber") {
elem._icon.style.fontSize = "0px";
elem._icon.style.marginLeft = "0px";
elem._icon.style.marginTop = "0px";
}
if (elem.feature.properties["description"] === "coord") {
elem._icon.style.fontSize = "6px";
}
});
} else if (currentZoom === 15) {
MapObject._SpecialMarkers.forEach(function (elem, index) {
if (elem.feature.properties["description"] === "snumber") {
elem._icon.style.fontSize = "0px";
elem._icon.style.marginLeft = "0px";
elem._icon.style.marginTop = "0px";
}
if (elem.feature.properties["description"] === "coord") {
elem._icon.style.fontSize = "9px";
}
});
} else if (currentZoom === 16) {
MapObject._SpecialMarkers.forEach(function (elem, index) {
if (elem.feature.properties["description"] === "snumber") {
elem._icon.style.fontSize = "5px";
elem._icon.style.marginLeft = "-4px";
elem._icon.style.marginTop = "-4px";
}
if (elem.feature.properties["description"] === "coord") {
elem._icon.style.fontSize = "13px";
}
});
} else if (currentZoom === 17) {
MapObject._SpecialMarkers.forEach(function (elem, index) {
if (elem.feature.properties["description"] === "snumber") {
elem._icon.style.fontSize = "5px";
elem._icon.style.marginLeft = "-4px";
elem._icon.style.marginTop = "-4px";
}
if (elem.feature.properties["description"] === "coord") {
elem._icon.style.fontSize = "16px";
}
});
} else if (currentZoom === 18) {
MapObject._SpecialMarkers.forEach(function (elem, index) {
if (elem.feature.properties["description"] === "snumber") {
elem._icon.style.fontSize = "8px";
elem._icon.style.marginLeft = "-5px";
elem._icon.style.marginTop = "-6px";
}
if (elem.feature.properties["description"] === "coord") {
elem._icon.style.fontSize = "25px";
}
});
} else if (currentZoom === 19) {
MapObject._SpecialMarkers.forEach(function (elem, index) {
if (elem.feature.properties["description"] === "snumber") {
elem._icon.style.fontSize = "14px";
elem._icon.style.marginLeft = "-8px";
elem._icon.style.marginTop = "-11px";
}
if (elem.feature.properties["description"] === "coord") {
elem._icon.style.fontSize = "45px";
}
});
}
MarkerObject.ScaleSensors("zoom");
});
},
_SetupClickHandler: function () {
this.Map.on("click", this._HidePanel);
},
_HidePanel: function (e) {
MenuObject.ShowHidePanel(null);
},
JumpTo: function (lat, lon) {
this.Map.flyTo([lat, lon], 19);
}
}.Start();