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-06 22:47:19 +09:00
parent e488075e36
commit dcef3ad427
2 changed files with 232 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -926,9 +926,9 @@ function updateLeafletMarker(location) {
const icon = L.divIcon({
className: `leaflet-truck-marker truck-marker ${status.key} ${vehicleType.className} ${selectedClass}`,
html: createTruckMarkerHtml(location, vehicleType, markerHeading),
iconSize: [106, 82],
iconAnchor: [53, 78],
popupAnchor: [0, -66]
iconSize: [96, 78],
iconAnchor: [48, 74],
popupAnchor: [0, -58]
});
let marker = existingMarker;
@@ -970,10 +970,13 @@ function createTruckMarkerHtml(location, vehicleType = getVehicleType(location),
const label = location.vehicleNo ? location.vehicleNo.slice(-4) : location.driverId.slice(0, 4);
const rotation = normalizeMarkerRotation(heading);
return `
<span class="truck-marker__halo" aria-hidden="true"></span>
<span class="truck-marker__vehicle" style="--truck-heading: ${rotation}deg">
<span class="truck-marker__body"></span>
<span class="truck-marker__cab"></span>
<span class="truck-marker__direction" style="--truck-heading: ${rotation}deg" aria-hidden="true">
<svg class="truck-marker__direction-icon" viewBox="0 0 28 28" focusable="false" aria-hidden="true">
<path d="M14 2 23 24 14 19 5 24z"></path>
</svg>
</span>
<span class="truck-marker__vehicle" aria-hidden="true">
${createVehicleMarkerSvg(vehicleType.className)}
</span>
<span class="truck-marker__label">
<span class="truck-marker__type">${escapeHtml(vehicleType.shortLabel)}</span>
@@ -982,6 +985,99 @@ function createTruckMarkerHtml(location, vehicleType = getVehicleType(location),
`;
}
function createVehicleMarkerSvg(typeClass) {
if (typeClass === "type-trailer") {
return `
<svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
<rect class="vehicle-trailer" x="8" y="18" width="54" height="18" rx="4"></rect>
<path class="vehicle-cab" d="M64 24h12l8 8v10H64z"></path>
<path class="vehicle-window" d="M74 26l5 6h-8v-6z"></path>
<path class="vehicle-hitch" d="M61 34h6"></path>
<circle class="vehicle-wheel" cx="21" cy="42" r="5"></circle>
<circle class="vehicle-wheel" cx="52" cy="42" r="5"></circle>
<circle class="vehicle-wheel" cx="76" cy="42" r="5"></circle>
</svg>
`;
}
if (typeClass === "type-container") {
return `
<svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
<rect class="vehicle-body" x="10" y="16" width="54" height="22" rx="3"></rect>
<path class="vehicle-cab" d="M65 24h12l8 8v10H65z"></path>
<path class="vehicle-window" d="M75 26l5 6h-8v-6z"></path>
<path class="vehicle-container-lines" d="M19 18v19M28 18v19M37 18v19M46 18v19M55 18v19"></path>
<circle class="vehicle-wheel" cx="22" cy="43" r="5"></circle>
<circle class="vehicle-wheel" cx="53" cy="43" r="5"></circle>
<circle class="vehicle-wheel" cx="77" cy="43" r="5"></circle>
</svg>
`;
}
if (typeClass === "type-box") {
return `
<svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
<rect class="vehicle-body" x="17" y="12" width="43" height="29" rx="4"></rect>
<path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
<path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
<path class="vehicle-detail" d="M25 20h26M25 28h20"></path>
<circle class="vehicle-wheel" cx="28" cy="44" r="5"></circle>
<circle class="vehicle-wheel" cx="71" cy="44" r="5"></circle>
</svg>
`;
}
if (typeClass === "type-van") {
return `
<svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
<path class="vehicle-body" d="M17 34c0-10 6-18 16-18h24c9 0 17 8 18 18l5 2v7H15v-7z"></path>
<path class="vehicle-window" d="M33 20h14v11H27c1-5 3-8 6-11zM50 20h9c4 2 7 6 9 11H50z"></path>
<path class="vehicle-detail" d="M25 35h44"></path>
<circle class="vehicle-wheel" cx="30" cy="44" r="5"></circle>
<circle class="vehicle-wheel" cx="66" cy="44" r="5"></circle>
</svg>
`;
}
if (typeClass === "type-cold") {
return `
<svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
<rect class="vehicle-body" x="15" y="14" width="45" height="27" rx="4"></rect>
<path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
<path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
<path class="vehicle-snow" d="M37 19v16M29 23l16 8M45 23l-16 8"></path>
<circle class="vehicle-wheel" cx="28" cy="44" r="5"></circle>
<circle class="vehicle-wheel" cx="71" cy="44" r="5"></circle>
</svg>
`;
}
if (typeClass === "type-wing") {
return `
<svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
<path class="vehicle-wing" d="M18 18h46l-10 16H8z"></path>
<rect class="vehicle-body" x="18" y="22" width="42" height="19" rx="4"></rect>
<path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
<path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
<path class="vehicle-detail" d="M24 30h28"></path>
<circle class="vehicle-wheel" cx="28" cy="44" r="5"></circle>
<circle class="vehicle-wheel" cx="71" cy="44" r="5"></circle>
</svg>
`;
}
return `
<svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
<rect class="vehicle-body" x="15" y="17" width="45" height="23" rx="4"></rect>
<path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
<path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
<path class="vehicle-detail" d="M23 24h31M23 31h26"></path>
<circle class="vehicle-wheel" cx="28" cy="43" r="5"></circle>
<circle class="vehicle-wheel" cx="71" cy="43" r="5"></circle>
</svg>
`;
}
function resolveMarkerHeading(location, fromPosition, targetPosition) {
const routeHeading = getRouteStartHeading(location);
if (routeHeading !== null) return routeHeading;