添加二级地名

src/genshin-map/area-names-layer.tsx

@@ -1,48 +1,104 @@
 import { TextLayer } from "@canvaskit-map/react";
+import { memo } from "react";
 import { useSnapshot } from "valtio";
 import { zIndex } from ".";
 import { store } from "../store";
 import { state } from "./state";
 
-const areaNames = [
-  { name: "枫丹", x: -5539, y: -5395, children: [] },
-  { name: "须弥", x: -4781, y: 829, children: [] },
-  { name: "璃月", x: -875, y: -1094, children: [] },
-  { name: "蒙德", x: 1476, y: -3067, children: [] },
-  { name: "稻妻", x: 4746, y: 4685, children: [] },
+type AreaName = [string, number, number];
+
+const areaNames: AreaName[] = [
+  ["枫丹", -5539, -5395],
+  ["须弥", -4781, 829],
+  ["璃月", -875, -1094],
+  ["蒙德", 1476, -3067],
+  ["稻妻", 4746, 4685],
+];
+
+const areaNames2: AreaName[] = [
+  ["枫丹动能工程科学研究院区", -4819, -6997],
+  ["枫丹廷区", -5070, -5511],
+  ["苍晶区", -6038, -4210],
+  ["白露区", -5140, -4120],
+  ["浮罗囿", -7078, -1800],
+  ["荒石苍漠", -8130, -1423],
+  ["千壑沙地", -6494, 135],
+  ["列柱沙原", -6855, 2373],
+  ["下风蚀地", -5286, 1540],
+  ["上风蚀地", -5518, 3230],
+  ["善见地", -3864, 896],
+  ["二净甸", -3819, -229],
+  ["道成林", -2959, 61],
+  ["阿陀河谷", -2902, 1285],
+  ["护世森", -2648, -1083],
+  ["层岩巨渊", -1847, 132],
+  ["珉林", -1484, -1428],
+  ["璃沙郊", -851, 11],
+  ["碧水原", -177, -2509],
+  ["琼玑野", 441, -1543],
+  ["云来海", 764, -208],
+  ["名冠山脉", 958, -4360],
+  ["坠星山谷", 2282, -4086],
+  ["苍风高地", 1240, -3548],
+  ["风啸山坡", 2315, -2897],
+  ["龙脊雪山", 1511, -2487],
+  ["鸣神岛", 5910, 2679],
+  ["神无冢", 4670, 3574],
+  ["八酝岛", 3119, 4303],
+  ["海祇岛", 1634, 3919],
+  ["清籁岛", 5791, 5325],
+  ["鹤观", 4347, 7546],
 ];
 
 export function AreaNamesLayer() {
   const { zoomLevel } = useSnapshot(state);
-  const { activeSubArea, activeTopArea, canvaskit } = useSnapshot(store);
+  const { activeSubArea, activeTopArea } = useSnapshot(store);
 
   // 只在提瓦特大陆显示地名
   if (activeSubArea && activeSubArea.getMapId() != activeTopArea.getMapId()) {
     return null;
   }
 
+  return (
+    <>
+      <NamesLayer fontSize={30} areaNames={areaNames} hidden={zoomLevel > -4} />
+      <NamesLayer
+        fontSize={20}
+        areaNames={areaNames2}
+        hidden={zoomLevel != -3}
+      />
+    </>
+  );
+}
+
+interface Props {
+  hidden: boolean;
+  areaNames: AreaName[];
+  fontSize: number;
+}
+
+const NamesLayer = memo((props: Props) => {
   const style = {
     textStyle: {
-      color: canvaskit.WHITE,
-      fontSize: 30,
-      shadows: [{ color: canvaskit.BLACK, blurRadius: 2 }],
+      color: store.canvaskit.WHITE,
+      fontSize: props.fontSize,
+      shadows: [{ color: store.canvaskit.BLACK, blurRadius: 1 }],
     },
   };
-  const areaNames1 = areaNames;
   return (
     <>
-      {areaNames1.map((i) => (
+      {props.areaNames.map(([name, x, y]) => (
         <TextLayer
-          key={i.name}
-          x={i.x}
-          y={i.y}
-          text={i.name}
+          key={name}
+          x={x}
+          y={y}
+          text={name}
           fontUrl={require("../../images/font.otf")}
-          hidden={zoomLevel > -4}
+          hidden={props.hidden}
           style={style}
-          zIndex={zIndex.underground + 2}
+          zIndex={zIndex.marker + 2}
         />
       ))}
     </>
   );
-}
+});

src/genshin-map/shadow-layer.tsx

@@ -16,8 +16,12 @@ class _ShadowLayer extends Layer {
       this.canvaskit!.Shader.MakeRadialGradient(
         [this.map!.size[0] / 2, this.map!.size[1] / 2],
         Math.max(...this.map!.size),
-        [this.canvaskit!.TRANSPARENT, this.canvaskit!.BLACK],
-        [0.1, 1],
+        [
+          this.canvaskit!.TRANSPARENT,
+          this.canvaskit!.TRANSPARENT,
+          this.canvaskit!.BLACK,
+        ],
+        [0, 0.3, 1],
         this.canvaskit!.TileMode.Clamp
       )
     );

src/genshin-map/teleport-layer.tsx

@@ -27,7 +27,7 @@ export function TeleportLayer() {
           <AreaItemLayer key={i.getId()} areaItem={i} hidden={zoomLevel < -4} />
         ))}
         {teleports.map((i) => (
-          <AreaItemLayer key={i.getId()} areaItem={i} hidden={zoomLevel < -3} />
+          <AreaItemLayer key={i.getId()} areaItem={i} hidden={zoomLevel < -2} />
         ))}
       </>
     );