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) {

131
apps/web/public/styles.css
View File

@@ -1058,8 +1058,8 @@ button:hover {
position: relative;
display: grid;
place-items: center;
width: 86px;
min-width: 86px;
width: 104px;
min-width: 104px;
height: 68px;
min-height: 68px;
border: 0;
@@ -1176,32 +1176,11 @@ button:hover {
filter: drop-shadow(0 0 0 rgba(31, 111, 235, 0.22));
}
.truck-marker__type-code {
position: absolute;
top: 19px;
left: 50%;
z-index: 3;
display: grid;
place-items: center;
width: 25px;
height: 17px;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 5px;
background: rgba(15, 23, 42, 0.2);
color: #ffffff;
font-size: 9px;
font-weight: 950;
line-height: 1;
letter-spacing: 0;
transform: translateX(-50%);
pointer-events: none;
}
.truck-marker__status {
position: absolute;
top: 33px;
left: calc(50% + 16px);
z-index: 4;
z-index: 5;
width: 10px;
height: 10px;
border: 2px solid #ffffff;
@@ -1211,6 +1190,47 @@ button:hover {
pointer-events: none;
}
.truck-marker__body-icon {
position: absolute;
top: 15px;
left: 50%;
z-index: 4;
display: grid;
place-items: center;
width: 52px;
height: 27px;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
box-shadow:
0 6px 14px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
transform: translateX(-50%);
pointer-events: none;
}
.truck-marker__body-icon .truck-marker__vehicle-icon {
width: 47px;
height: 25px;
filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.24));
}
.truck-marker__body-icon .truck-marker__vehicle-icon .icon-load,
.truck-marker__body-icon .truck-marker__vehicle-icon .icon-cab,
.truck-marker__body-icon .truck-marker__vehicle-icon .icon-wing {
stroke-width: 1.55;
}
.truck-marker__body-icon .truck-marker__vehicle-icon .icon-line,
.truck-marker__body-icon .truck-marker__vehicle-icon .icon-snow {
stroke-width: 1.45;
}
.truck-marker__body-icon .truck-marker__vehicle-icon .icon-wheel {
stroke-width: 1.2;
}
.truck-marker__identity {
position: absolute;
left: 50%;
@@ -1218,10 +1238,10 @@ button:hover {
z-index: 3;
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 84px;
min-height: 20px;
padding: 2px 7px;
gap: 5px;
max-width: 102px;
min-height: 23px;
padding: 2px 7px 2px 4px;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 7px;
background: rgba(255, 255, 255, 0.96);
@@ -1234,6 +1254,61 @@ button:hover {
white-space: nowrap;
}
.truck-marker__label-icon {
display: grid;
flex: 0 0 28px;
place-items: center;
width: 28px;
height: 17px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 5px;
background: var(--marker-chip);
overflow: hidden;
}
.truck-marker__vehicle-icon {
display: block;
width: 26px;
height: 15px;
overflow: visible;
}
.truck-marker__vehicle-icon .icon-load,
.truck-marker__vehicle-icon .icon-cab,
.truck-marker__vehicle-icon .icon-wing {
fill: var(--marker-fill);
stroke: #ffffff;
stroke-linejoin: round;
stroke-width: 1.35;
}
.truck-marker__vehicle-icon .icon-cab {
fill: var(--marker-dark);
}
.truck-marker__vehicle-icon .icon-window {
fill: rgba(255, 255, 255, 0.75);
}
.truck-marker__vehicle-icon .icon-wheel {
fill: #111827;
stroke: #ffffff;
stroke-width: 1.1;
}
.truck-marker__vehicle-icon .icon-line,
.truck-marker__vehicle-icon .icon-snow {
fill: none;
stroke: rgba(255, 255, 255, 0.86);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.3;
}
.truck-marker__vehicle-icon .icon-snow {
stroke: #ffffff;
}
.truck-marker__plate {
display: inline-block;
min-width: 0;