taDuc
478 lines
13 KiB
TypeScript
478 lines
13 KiB
TypeScript
import maplibregl, { LayerSpecification } from "maplibre-gl";
|
|
import { MAP_EMPHASIS_TEXT_FONT_STACK } from "./textFonts";
|
|
|
|
export const POINT_GEOTYPE_IDS = [
|
|
"person_event",
|
|
"temple",
|
|
"capital",
|
|
"city",
|
|
"fortification",
|
|
"ruin",
|
|
"port",
|
|
] as const;
|
|
|
|
export type PointGeotypeId = (typeof POINT_GEOTYPE_IDS)[number];
|
|
|
|
export const POINT_GEOTYPE_ICON_PATHS: Partial<Record<PointGeotypeId, string>> = {
|
|
person_event: "/images/mapIcon/point/flag.png",
|
|
temple: "/images/mapIcon/point/temple.png",
|
|
capital: "/images/mapIcon/point/capital.png",
|
|
city: "/images/mapIcon/point/city.png",
|
|
fortification: "/images/mapIcon/point/castle.png",
|
|
ruin: "/images/mapIcon/point/ruin.png",
|
|
port: "/images/mapIcon/point/port.png",
|
|
};
|
|
|
|
|
|
type PointLayerOptions = {
|
|
iconScale?: number;
|
|
haloRadius?: number;
|
|
};
|
|
|
|
type PointStyleConfig = {
|
|
fill: string;
|
|
rim: string;
|
|
iconScale: number;
|
|
haloRadius: number;
|
|
drawGlyph: (ctx: CanvasRenderingContext2D) => void;
|
|
};
|
|
|
|
const TYPE_MATCH_EXPR: maplibregl.ExpressionSpecification = ["coalesce", ["get", "type"], ["get", "entity_type_id"], ""];
|
|
const SELECTED_EXPR: maplibregl.ExpressionSpecification = ["boolean", ["feature-state", "selected"], false];
|
|
|
|
const ICON_CANVAS_SIZE = 48;
|
|
const POINT_GEOMETRY_FILTER: maplibregl.ExpressionSpecification = [
|
|
"any",
|
|
["==", ["geometry-type"], "Point"],
|
|
["==", ["geometry-type"], "MultiPoint"],
|
|
];
|
|
|
|
const POINT_STYLE_CONFIG: Record<PointGeotypeId, PointStyleConfig> = {
|
|
person_event: {
|
|
fill: "#f97316",
|
|
rim: "#9a3412",
|
|
iconScale: 0.98,
|
|
haloRadius: 14,
|
|
drawGlyph: drawFlagGlyph,
|
|
},
|
|
temple: {
|
|
fill: "#d97706",
|
|
rim: "#78350f",
|
|
iconScale: 1.02,
|
|
haloRadius: 15,
|
|
drawGlyph: drawTempleGlyph,
|
|
},
|
|
capital: {
|
|
fill: "#eab308",
|
|
rim: "#854d0e",
|
|
iconScale: 1.08,
|
|
haloRadius: 17,
|
|
drawGlyph: drawCrownGlyph,
|
|
},
|
|
city: {
|
|
fill: "#2563eb",
|
|
rim: "#1e3a8a",
|
|
iconScale: 1.02,
|
|
haloRadius: 15,
|
|
drawGlyph: drawCityGlyph,
|
|
},
|
|
fortification: {
|
|
fill: "#7c3aed",
|
|
rim: "#4c1d95",
|
|
iconScale: 1.04,
|
|
haloRadius: 16,
|
|
drawGlyph: drawCastleGlyph,
|
|
},
|
|
ruin: {
|
|
fill: "#78716c",
|
|
rim: "#44403c",
|
|
iconScale: 0.98,
|
|
haloRadius: 14,
|
|
drawGlyph: drawRuinGlyph,
|
|
},
|
|
port: {
|
|
fill: "#0284c7",
|
|
rim: "#075985",
|
|
iconScale: 1.02,
|
|
haloRadius: 15,
|
|
drawGlyph: drawAnchorGlyph,
|
|
},
|
|
};
|
|
|
|
export function buildPointGeotypeLayers(
|
|
typeId: PointGeotypeId,
|
|
pointSourceId: string,
|
|
options: PointLayerOptions = {}
|
|
): LayerSpecification[] {
|
|
const config = POINT_STYLE_CONFIG[typeId];
|
|
const haloRadius = (options.haloRadius ?? config.haloRadius) * 2;
|
|
const iconScale = options.iconScale ?? config.iconScale;
|
|
|
|
return [
|
|
{
|
|
id: `${typeId}-selected-halo`,
|
|
type: "circle",
|
|
source: pointSourceId,
|
|
filter: pointFilter(typeId),
|
|
paint: {
|
|
"circle-color": config.fill,
|
|
"circle-radius": ["case", SELECTED_EXPR, haloRadius, 0],
|
|
"circle-opacity": ["case", SELECTED_EXPR, 0.24, 0],
|
|
"circle-blur": ["case", SELECTED_EXPR, 0.8, 0],
|
|
"circle-stroke-color": config.rim,
|
|
"circle-stroke-width": ["case", SELECTED_EXPR, 1.6, 0],
|
|
"circle-stroke-opacity": ["case", SELECTED_EXPR, 0.48, 0],
|
|
},
|
|
},
|
|
{
|
|
id: `${typeId}-circle`,
|
|
type: "symbol",
|
|
source: pointSourceId,
|
|
filter: pointFilter(typeId),
|
|
layout: {
|
|
"icon-image": getPointIconId(typeId),
|
|
"icon-size": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
1, 0.96 * iconScale,
|
|
4, 1.24 * iconScale,
|
|
6, 1.52 * iconScale,
|
|
],
|
|
"icon-anchor": "center",
|
|
"icon-allow-overlap": true,
|
|
"icon-ignore-placement": true,
|
|
"symbol-placement": "point",
|
|
"text-font": [...MAP_EMPHASIS_TEXT_FONT_STACK],
|
|
"text-field": ["coalesce", ["get", "point_label"], ""],
|
|
"text-size": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
1, 0,
|
|
5, 0,
|
|
5.01, 13,
|
|
6, 15,
|
|
],
|
|
"text-anchor": "bottom",
|
|
"text-offset": [0, -1.25],
|
|
"text-allow-overlap": true,
|
|
"text-ignore-placement": true,
|
|
"text-optional": true,
|
|
"text-max-width": 12,
|
|
},
|
|
paint: {
|
|
"icon-opacity": 0.98,
|
|
"text-color": "#f8fafc",
|
|
"text-halo-color": "#0f172a",
|
|
"text-halo-width": 1.4,
|
|
"text-halo-blur": 0.3,
|
|
},
|
|
},
|
|
];
|
|
}
|
|
|
|
const preloadedImages: Record<string, HTMLImageElement> = {};
|
|
const loadedImageKeys = new Set<string>();
|
|
const mapsToUpdate = new Set<maplibregl.Map>();
|
|
|
|
export function unregisterMapFromIconUpdates(map: maplibregl.Map) {
|
|
mapsToUpdate.delete(map);
|
|
}
|
|
|
|
function preloadPointIcons() {
|
|
if (typeof window === "undefined" || typeof document === "undefined") return;
|
|
for (const [typeId, path] of Object.entries(POINT_GEOTYPE_ICON_PATHS)) {
|
|
if (!preloadedImages[typeId]) {
|
|
const img = new Image();
|
|
img.src = path;
|
|
img.onload = () => {
|
|
loadedImageKeys.add(typeId);
|
|
for (const map of mapsToUpdate) {
|
|
updateIconsOnMap(map, typeId as PointGeotypeId);
|
|
}
|
|
};
|
|
preloadedImages[typeId] = img;
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateIconsOnMap(map: maplibregl.Map, typeId: PointGeotypeId) {
|
|
if (!map || !map.getStyle()) return;
|
|
try {
|
|
const iconId = getPointIconId(typeId);
|
|
const imageData = createPointIconImageData(typeId);
|
|
if (imageData) {
|
|
if (map.hasImage(iconId)) {
|
|
map.updateImage(iconId, imageData);
|
|
} else {
|
|
map.addImage(iconId, imageData, { pixelRatio: 2 });
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.warn(`Failed to update icon ${typeId} on map:`, err);
|
|
}
|
|
}
|
|
|
|
export function ensurePointGeotypeIcons(map: maplibregl.Map): boolean {
|
|
if (typeof document === "undefined") return false;
|
|
|
|
preloadPointIcons();
|
|
|
|
const missingAny = Object.keys(POINT_GEOTYPE_ICON_PATHS).some(
|
|
(key) => !loadedImageKeys.has(key)
|
|
);
|
|
if (missingAny) {
|
|
mapsToUpdate.add(map);
|
|
}
|
|
|
|
for (const typeId of POINT_GEOTYPE_IDS) {
|
|
const iconId = getPointIconId(typeId);
|
|
if (map.hasImage(iconId)) continue;
|
|
const imageData = createPointIconImageData(typeId);
|
|
if (!imageData) return false;
|
|
map.addImage(iconId, imageData, { pixelRatio: 2 });
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function pointFilter(typeId: PointGeotypeId): maplibregl.ExpressionSpecification {
|
|
return ["all", POINT_GEOMETRY_FILTER, ["==", TYPE_MATCH_EXPR, typeId]];
|
|
}
|
|
|
|
function getPointIconId(typeId: PointGeotypeId): string {
|
|
return `point-${typeId}`;
|
|
}
|
|
|
|
function createPointIconImageData(typeId: PointGeotypeId): ImageData | null {
|
|
const config = POINT_STYLE_CONFIG[typeId];
|
|
const palette = { fill: config.fill, rim: config.rim };
|
|
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = ICON_CANVAS_SIZE;
|
|
canvas.height = ICON_CANVAS_SIZE;
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
if (!ctx) return null;
|
|
|
|
ctx.clearRect(0, 0, ICON_CANVAS_SIZE, ICON_CANVAS_SIZE);
|
|
drawGlyphWithOutline(ctx, palette.fill, palette.rim, () => config.drawGlyph(ctx));
|
|
|
|
return ctx.getImageData(0, 0, ICON_CANVAS_SIZE, ICON_CANVAS_SIZE);
|
|
}
|
|
|
|
function drawGlyphWithOutline(
|
|
ctx: CanvasRenderingContext2D,
|
|
fill: string,
|
|
rim: string,
|
|
draw: () => void
|
|
) {
|
|
ctx.save();
|
|
ctx.shadowColor = "rgba(15, 23, 42, 0.35)";
|
|
ctx.shadowBlur = 6;
|
|
ctx.shadowOffsetY = 2;
|
|
ctx.strokeStyle = rim;
|
|
ctx.fillStyle = rim;
|
|
ctx.lineCap = "round";
|
|
ctx.lineJoin = "round";
|
|
draw();
|
|
ctx.restore();
|
|
|
|
ctx.save();
|
|
ctx.strokeStyle = fill;
|
|
ctx.fillStyle = fill;
|
|
ctx.lineCap = "round";
|
|
ctx.lineJoin = "round";
|
|
draw();
|
|
ctx.restore();
|
|
}
|
|
|
|
function drawFlagGlyph(ctx: CanvasRenderingContext2D) {
|
|
const img = preloadedImages["person_event"];
|
|
if (img && loadedImageKeys.has("person_event")) {
|
|
ctx.drawImage(img, 0, 0, ICON_CANVAS_SIZE, ICON_CANVAS_SIZE);
|
|
} else {
|
|
ctx.lineWidth = 3.2;
|
|
ctx.beginPath();
|
|
ctx.moveTo(26, 22);
|
|
ctx.lineTo(26, 43);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(28, 23);
|
|
ctx.lineTo(40, 27);
|
|
ctx.lineTo(28, 31);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
ctx.lineWidth = 2.4;
|
|
ctx.beginPath();
|
|
ctx.moveTo(22.5, 44.5);
|
|
ctx.lineTo(31, 44.5);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function drawTempleGlyph(ctx: CanvasRenderingContext2D) {
|
|
const img = preloadedImages["temple"];
|
|
if (img && loadedImageKeys.has("temple")) {
|
|
ctx.drawImage(img, 0, 0, ICON_CANVAS_SIZE, ICON_CANVAS_SIZE);
|
|
} else {
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.moveTo(22, 30);
|
|
ctx.lineTo(32, 22);
|
|
ctx.lineTo(42, 30);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(21, 31);
|
|
ctx.lineTo(43, 31);
|
|
ctx.moveTo(23, 42);
|
|
ctx.lineTo(41, 42);
|
|
ctx.stroke();
|
|
|
|
ctx.lineWidth = 2.8;
|
|
for (const x of [26, 32, 38]) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, 31);
|
|
ctx.lineTo(x, 42);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
function drawCrownGlyph(ctx: CanvasRenderingContext2D) {
|
|
const img = preloadedImages["capital"];
|
|
if (img && loadedImageKeys.has("capital")) {
|
|
ctx.drawImage(img, 0, 0, ICON_CANVAS_SIZE, ICON_CANVAS_SIZE);
|
|
} else {
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.moveTo(22, 41);
|
|
ctx.lineTo(24.5, 28);
|
|
ctx.lineTo(30, 34);
|
|
ctx.lineTo(32, 23);
|
|
ctx.lineTo(34, 34);
|
|
ctx.lineTo(39.5, 28);
|
|
ctx.lineTo(42, 41);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
|
|
ctx.lineWidth = 2.6;
|
|
ctx.beginPath();
|
|
ctx.moveTo(23.5, 41.5);
|
|
ctx.lineTo(40.5, 41.5);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function drawCityGlyph(ctx: CanvasRenderingContext2D) {
|
|
const img = preloadedImages["city"];
|
|
if (img && loadedImageKeys.has("city")) {
|
|
ctx.drawImage(img, 0, 0, ICON_CANVAS_SIZE, ICON_CANVAS_SIZE);
|
|
} else {
|
|
ctx.fillRect(23, 33, 7, 10);
|
|
ctx.fillRect(30, 27, 6, 16);
|
|
ctx.fillRect(36, 30, 6, 13);
|
|
|
|
ctx.clearRect(25, 36, 1.5, 1.5);
|
|
ctx.clearRect(25, 39, 1.5, 1.5);
|
|
ctx.clearRect(32, 31, 1.5, 1.5);
|
|
ctx.clearRect(32, 35, 1.5, 1.5);
|
|
ctx.clearRect(38, 33, 1.5, 1.5);
|
|
ctx.clearRect(38, 37, 1.5, 1.5);
|
|
}
|
|
}
|
|
|
|
function drawCastleGlyph(ctx: CanvasRenderingContext2D) {
|
|
const img = preloadedImages["fortification"];
|
|
if (img && loadedImageKeys.has("fortification")) {
|
|
ctx.drawImage(img, 0, 0, ICON_CANVAS_SIZE, ICON_CANVAS_SIZE);
|
|
} else {
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.rect(24, 31, 16, 11);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(24, 31);
|
|
ctx.lineTo(24, 26);
|
|
ctx.lineTo(28, 26);
|
|
ctx.lineTo(28, 29);
|
|
ctx.lineTo(32, 29);
|
|
ctx.lineTo(32, 24);
|
|
ctx.lineTo(36, 24);
|
|
ctx.lineTo(36, 29);
|
|
ctx.lineTo(40, 29);
|
|
ctx.lineTo(40, 26);
|
|
ctx.lineTo(44, 26);
|
|
ctx.lineTo(44, 31);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(32, 42);
|
|
ctx.lineTo(32, 34);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function drawRuinGlyph(ctx: CanvasRenderingContext2D) {
|
|
const img = preloadedImages["ruin"];
|
|
if (img && loadedImageKeys.has("ruin")) {
|
|
ctx.drawImage(img, 0, 0, ICON_CANVAS_SIZE, ICON_CANVAS_SIZE);
|
|
} else {
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.rect(26, 24, 12, 18);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(24, 24);
|
|
ctx.lineTo(40, 24);
|
|
ctx.moveTo(24, 42);
|
|
ctx.lineTo(40, 42);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(34, 24);
|
|
ctx.lineTo(31, 29);
|
|
ctx.lineTo(35, 33);
|
|
ctx.lineTo(30, 39);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function drawAnchorGlyph(ctx: CanvasRenderingContext2D) {
|
|
const img = preloadedImages["port"];
|
|
if (img && loadedImageKeys.has("port")) {
|
|
ctx.drawImage(img, 0, 0, ICON_CANVAS_SIZE, ICON_CANVAS_SIZE);
|
|
} else {
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.arc(32, 22.5, 3.5, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(32, 26.5);
|
|
ctx.lineTo(32, 41);
|
|
ctx.moveTo(24, 31.5);
|
|
ctx.lineTo(40, 31.5);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(32, 35.5, 9, 0.2 * Math.PI, 0.8 * Math.PI);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(24.5, 38);
|
|
ctx.lineTo(21.5, 34);
|
|
ctx.moveTo(39.5, 38);
|
|
ctx.lineTo(42.5, 34);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
|