Wickedness/Comtropy_CargoRadar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

차종별 마커 픽토그램 추가

Browse Source
This commit is contained in:
y2keui
2026-06-07 00:09:07 +09:00
parent f7cd6ccae3
commit eecdb35541
2 changed files with 191 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
apps/web/public/app.js
View File

@@ -926,8 +926,8 @@ function updateLeafletMarker(location) {
const icon = L.divIcon({
className: `leaflet-truck-marker truck-marker ${status.key} ${vehicleType.className} ${selectedClass}`,
html: createTruckMarkerHtml(location, vehicleType, markerHeading),
iconSize: [86, 68],
iconAnchor: [43, 64],
iconSize: [104, 68],
iconAnchor: [52, 64],
popupAnchor: [0, -50]
});
@@ -969,7 +969,7 @@ function createTruckMarkerElement(location, status, heading) {
function createTruckMarkerHtml(location, vehicleType = getVehicleType(location), heading = getLocationHeading(location)) {
const label = location.vehicleNo ? location.vehicleNo.slice(-4) : location.driverId.slice(0, 4);
const rotation = normalizeMarkerRotation(heading);
const markerCode = getVehicleMarkerCode(vehicleType.className);
const vehiclePictogram = createVehiclePictogramSvg(vehicleType.className);
return `
<span class="truck-marker__beacon" style="--truck-heading: ${rotation}deg" aria-hidden="true">
<svg class="truck-marker__beacon-icon" viewBox="0 0 44 52" focusable="false" aria-hidden="true">
@@ -978,26 +978,99 @@ function createTruckMarkerHtml(location, vehicleType = getVehicleType(location),
<path class="beacon-spine" d="M22 13v25"></path>
</svg>
</span>
<span class="truck-marker__type-code" aria-hidden="true">${escapeHtml(markerCode)}</span>
<span class="truck-marker__body-icon" aria-hidden="true">${vehiclePictogram}</span>
<span class="truck-marker__status" aria-hidden="true"></span>
<span class="truck-marker__identity">
<span class="truck-marker__label-icon" aria-hidden="true">${vehiclePictogram}</span>
<span class="truck-marker__plate">${escapeHtml(label)}</span>
<span class="truck-marker__type">${escapeHtml(vehicleType.shortLabel)}</span>
</span>
`;
}
function getVehicleMarkerCode(typeClass) {
const markerCodes = {
"type-cargo": "CT",
"type-trailer": "TR",
"type-container": "CN",
"type-box": "BX",
"type-van": "V",
"type-cold": "RF",
"type-wing": "WB"
};
return markerCodes[typeClass] || "CT";
function createVehiclePictogramSvg(typeClass) {
if (typeClass === "type-trailer") {
return `
<svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
<rect class="icon-load" x="3" y="7" width="23" height="7" rx="2"></rect>
<path class="icon-cab" d="M28 9h5l4 4v4h-9z"></path>
<path class="icon-line" d="M26 13h3"></path>
<circle class="icon-wheel" cx="9" cy="17" r="2.2"></circle>
<circle class="icon-wheel" cx="23" cy="17" r="2.2"></circle>
<circle class="icon-wheel" cx="34" cy="17" r="2.2"></circle>
</svg>
`;
}
if (typeClass === "type-container") {
return `
<svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
<rect class="icon-load" x="3" y="6" width="24" height="9" rx="1.5"></rect>
<path class="icon-cab" d="M29 9h5l4 4v4h-9z"></path>
<path class="icon-line" d="M8 7v7M13 7v7M18 7v7M23 7v7"></path>
<circle class="icon-wheel" cx="10" cy="17" r="2.2"></circle>
<circle class="icon-wheel" cx="24" cy="17" r="2.2"></circle>
<circle class="icon-wheel" cx="35" cy="17" r="2.2"></circle>
</svg>
`;
}
if (typeClass === "type-box") {
return `
<svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
<rect class="icon-load" x="6" y="4" width="20" height="12" rx="2"></rect>
<path class="icon-cab" d="M28 9h5l4 4v4h-9z"></path>
<path class="icon-line" d="M11 8h10M11 12h8"></path>
<circle class="icon-wheel" cx="12" cy="17" r="2.2"></circle>
<circle class="icon-wheel" cx="34" cy="17" r="2.2"></circle>
</svg>
`;
}
if (typeClass === "type-van") {
return `
<svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
<path class="icon-load" d="M6 16v-4c1-5 5-8 10-8h9c5 0 8 4 9 9l3 2v2H6z"></path>
<path class="icon-window" d="M15 6h7v6H11c1-3 2-5 4-6zM24 6h3c3 1 5 3 6 6h-9z"></path>
<circle class="icon-wheel" cx="14" cy="17" r="2.2"></circle>
<circle class="icon-wheel" cx="30" cy="17" r="2.2"></circle>
</svg>
`;
}
if (typeClass === "type-cold") {
return `
<svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
<rect class="icon-load" x="6" y="5" width="20" height="11" rx="2"></rect>
<path class="icon-cab" d="M28 9h5l4 4v4h-9z"></path>
<path class="icon-snow" d="M16 7v7M12 9l8 4M20 9l-8 4"></path>
<circle class="icon-wheel" cx="12" cy="17" r="2.2"></circle>
<circle class="icon-wheel" cx="34" cy="17" r="2.2"></circle>
</svg>
`;
}
if (typeClass === "type-wing") {
return `
<svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
<path class="icon-wing" d="M8 6h21l-6 8H4z"></path>
<rect class="icon-load" x="8" y="10" width="18" height="6" rx="2"></rect>
<path class="icon-cab" d="M28 9h5l4 4v4h-9z"></path>
<circle class="icon-wheel" cx="13" cy="17" r="2.2"></circle>
<circle class="icon-wheel" cx="34" cy="17" r="2.2"></circle>
</svg>
`;
}
return `
<svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
<rect class="icon-load" x="6" y="7" width="20" height="9" rx="2"></rect>
<path class="icon-cab" d="M28 9h5l4 4v4h-9z"></path>
<path class="icon-line" d="M11 10h10M11 13h8"></path>
<circle class="icon-wheel" cx="12" cy="17" r="2.2"></circle>
<circle class="icon-wheel" cx="34" cy="17" r="2.2"></circle>
</svg>
`;
}
function resolveMarkerHeading(location, fromPosition, targetPosition) {