Ver código fonte

fix: 添加道路结构

bill 1 ano atrás
pai
commit
58efeae3c4

Diferenças do arquivo suprimidas por serem muito extensas
+ 1161 - 235
src/graphic/CanvasStyle/ImageLabels/SVGIcons.js


+ 920 - 0
src/graphic/CanvasStyle/ImageLabels/test.js

@@ -0,0 +1,920 @@
+var SVGIcons = {
+  "jg_lmak.svg": {
+    draw: function (ctx, fillStyle, strokeStyle) {
+      ctx.save();
+      ctx.strokeStyle = "rgba(0,0,0,0)";
+      ctx.miterLimit = 4;
+      // ctx.font = "15px ''";
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font = "   15px ''";
+      ctx.save();
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(64, 0);
+      ctx.bezierCurveTo(64, 0, 64, 0, 64, 0);
+      ctx.lineTo(64, 64);
+      ctx.bezierCurveTo(64, 64, 64, 64, 64, 64);
+      ctx.lineTo(0, 64);
+      ctx.bezierCurveTo(0, 64, 0, 64, 0, 64);
+      ctx.lineTo(0, 0);
+      ctx.bezierCurveTo(0, 0, 0, 0, 0, 0);
+      ctx.closePath();
+      ctx.clip();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(51.1044, 14.556);
+      ctx.bezierCurveTo(51.3497, 14.8898, 51.2779, 15.3592, 50.9441, 15.6045);
+      ctx.lineTo(43.0763, 21.3849);
+      ctx.bezierCurveTo(43.0575, 21.5286, 43.0569, 21.6245, 43.0748, 21.7105);
+      ctx.bezierCurveTo(43.0957, 21.8105, 43.1532, 21.9461, 43.3535, 22.1463);
+      ctx.lineTo(43.3524, 22.145);
+      ctx.bezierCurveTo(43.3523, 22.1448, 43.3535, 22.1454, 43.3561, 22.1468);
+      ctx.bezierCurveTo(43.3727, 22.1559, 43.4478, 22.1971, 43.6411, 22.2393);
+      ctx.bezierCurveTo(43.8568, 22.2863, 44.1485, 22.3202, 44.512, 22.342);
+      ctx.bezierCurveTo(45.2376, 22.3854, 46.1782, 22.3768, 47.2255, 22.3586);
+      ctx.bezierCurveTo(47.41, 22.3553, 47.5979, 22.3518, 47.7883, 22.3482);
+      ctx.lineTo(47.7902, 22.3482);
+      ctx.bezierCurveTo(49.7309, 22.3117, 51.9323, 22.2702, 53.5711, 22.5045);
+      ctx.lineTo(53.6172, 22.511);
+      ctx.lineTo(53.6613, 22.526);
+      ctx.bezierCurveTo(56.367, 23.4457, 58.5484, 26.3681, 57.4854, 30.6205);
+      ctx.bezierCurveTo(56.9814, 32.6362, 56.8594, 34.7078, 56.9855, 36.4549);
+      ctx.bezierCurveTo(57.1134, 38.2264, 57.4903, 39.5828, 57.9164, 40.222);
+      ctx.bezierCurveTo(58.9414, 41.7595, 60.0295, 43.9019, 59.4906, 46.5972);
+      ctx.bezierCurveTo(59.4617, 46.7419, 59.4343, 46.8994, 59.4054, 47.0657);
+      ctx.bezierCurveTo(59.2939, 47.7078, 59.1598, 48.48, 58.8262, 49.1405);
+      ctx.bezierCurveTo(58.3717, 50.0405, 57.5597, 50.7471, 56.0821, 50.9931);
+      ctx.bezierCurveTo(54.5359, 51.2506, 52.1309, 51.3288, 49.8188, 51.3059);
+      ctx.bezierCurveTo(47.5013, 51.283, 45.2299, 51.1577, 43.9379, 50.9961);
+      ctx.bezierCurveTo(43.34, 50.9212, 42.9614, 50.8532, 42.6348, 50.7946);
+      ctx.lineTo(42.5555, 50.7803);
+      ctx.bezierCurveTo(42.2175, 50.7199, 41.9226, 50.6701, 41.446, 50.6291);
+      ctx.bezierCurveTo(40.475, 50.5457, 38.7547, 50.4994, 34.5, 50.4994);
+      ctx.bezierCurveTo(30.2674, 50.4994, 28.6859, 50.7488, 27.6772, 50.9861);
+      ctx.bezierCurveTo(27.4868, 51.031, 27.3123, 51.0765, 27.1418, 51.121);
+      ctx.bezierCurveTo(26.378, 51.3205, 25.6929, 51.4994, 24.0004, 51.4994);
+      ctx.lineTo(23.9966, 51.4994);
+      ctx.bezierCurveTo(22.9968, 51.4994, 21.3569, 51.4994, 19.6509, 51.3731);
+      ctx.bezierCurveTo(17.9552, 51.2475, 16.1402, 50.9939, 14.8147, 50.4637);
+      ctx.bezierCurveTo(13.7418, 50.0345, 10.1549, 48.4608, 8.10457, 45.805);
+      ctx.bezierCurveTo(6.35786, 43.5424, 5.00052, 41.1523, 5.00035, 37.4999);
+      ctx.lineTo(5.00023, 35.3116);
+      ctx.bezierCurveTo(5.00002, 32.1131, 4.99979, 28.3184, 5.00035, 25.4991);
+      ctx.bezierCurveTo(5.00108, 21.8456, 7.10593, 18.3222, 10.9593, 18.001);
+      ctx.bezierCurveTo(13.9208, 17.7542, 16.1408, 17.2613, 18.3135, 16.7026);
+      ctx.bezierCurveTo(18.7756, 16.5837, 19.2369, 16.4615, 19.7036, 16.3379);
+      ctx.bezierCurveTo(21.429, 15.8808, 23.2279, 15.4042, 25.4108, 15.0072);
+      ctx.bezierCurveTo(28.2559, 14.4898, 32.4803, 14.88, 36.0277, 15.6351);
+      ctx.bezierCurveTo(37.808, 16.014, 39.4461, 16.4907, 40.6809, 17.0067);
+      ctx.bezierCurveTo(41.2967, 17.2641, 41.8301, 17.5386, 42.2344, 17.8265);
+      ctx.bezierCurveTo(42.6188, 18.1004, 42.9742, 18.4474, 43.0818, 18.8784);
+      ctx.bezierCurveTo(43.1316, 19.0776, 43.167, 19.2642, 43.1911, 19.4392);
+      ctx.lineTo(50.0559, 14.3956);
+      ctx.bezierCurveTo(50.3897, 14.1504, 50.8592, 14.2222, 51.1044, 14.556);
+      ctx.closePath();
+      ctx.moveTo(42.2336, 20.1427);
+      ctx.bezierCurveTo(42.2409, 19.8555, 42.2126, 19.5251, 42.1116, 19.1207);
+      ctx.bezierCurveTo(42.0944, 19.0516, 41.9937, 18.8829, 41.6542, 18.641);
+      ctx.bezierCurveTo(41.3344, 18.4132, 40.876, 18.1721, 40.2953, 17.9294);
+      ctx.bezierCurveTo(39.137, 17.4453, 37.5635, 16.9843, 35.8196, 16.6132);
+      ctx.bezierCurveTo(32.3187, 15.868, 28.2447, 15.5082, 25.5897, 15.9911);
+      ctx.bezierCurveTo(23.4495, 16.3803, 21.6976, 16.8443, 19.9771, 17.3);
+      ctx.bezierCurveTo(19.5057, 17.4249, 19.0366, 17.5491, 18.5626, 17.671);
+      ctx.bezierCurveTo(16.3605, 18.2373, 14.0808, 18.7443, 11.0423, 18.9976);
+      ctx.bezierCurveTo(7.89407, 19.26, 6.00102, 22.1543, 6.00035, 25.4993);
+      ctx.bezierCurveTo(5.99979, 28.3175, 6.00002, 32.1104, 6.00023, 35.3082);
+      ctx.lineTo(6.00035, 37.4999);
+      ctx.bezierCurveTo(6.00051, 40.8468, 7.22185, 43.0252, 8.89613, 45.1939);
+      ctx.bezierCurveTo(10.7669, 47.6172, 14.1226, 49.1098, 15.186, 49.5352);
+      ctx.bezierCurveTo(16.3605, 50.005, 18.0455, 50.2514, 19.7248, 50.3758);
+      ctx.bezierCurveTo(21.3917, 50.4993, 22.9998, 50.4994, 24.0004, 50.4994);
+      ctx.bezierCurveTo(25.563, 50.4994, 26.1468, 50.3471, 26.8866, 50.154);
+      ctx.bezierCurveTo(27.0603, 50.1087, 27.2427, 50.0611, 27.4482, 50.0127);
+      ctx.bezierCurveTo(28.5643, 49.7501, 30.2327, 49.4994, 34.5, 49.4994);
+      ctx.bezierCurveTo(38.7454, 49.4994, 40.5101, 49.5451, 41.5316, 49.6328);
+      ctx.bezierCurveTo(42.0512, 49.6774, 42.3795, 49.733, 42.7317, 49.796);
+      ctx.lineTo(42.8109, 49.8102);
+      ctx.bezierCurveTo(43.1339, 49.8682, 43.4909, 49.9323, 44.0621, 50.0038);
+      ctx.bezierCurveTo(45.3, 50.1587, 47.5286, 50.2832, 49.8287, 50.306);
+      ctx.bezierCurveTo(52.134, 50.3288, 54.4641, 50.2488, 55.9179, 50.0067);
+      ctx.bezierCurveTo(57.0963, 49.8105, 57.6294, 49.292, 57.9336, 48.6897);
+      ctx.bezierCurveTo(58.1932, 48.1756, 58.294, 47.6026, 58.4032, 46.9814);
+      ctx.lineTo(58.4035, 46.9799);
+      ctx.bezierCurveTo(58.4366, 46.7913, 58.4706, 46.5983, 58.51, 46.4012);
+      ctx.bezierCurveTo(58.9705, 44.098, 58.0593, 42.2391, 57.0843, 40.7767);
+      ctx.bezierCurveTo(56.5104, 39.9158, 56.1193, 38.3444, 55.9881, 36.5269);
+      ctx.bezierCurveTo(55.8551, 34.6851, 55.9831, 32.5066, 56.5152, 30.3779);
+      ctx.bezierCurveTo(57.4459, 26.6548, 55.5774, 24.2567, 53.3829, 23.4878);
+      ctx.bezierCurveTo(51.8339, 23.2732, 49.7389, 23.3122, 47.7943, 23.3483);
+      ctx.lineTo(47.7841, 23.3485);
+      ctx.bezierCurveTo(47.6022, 23.3519, 47.4216, 23.3553, 47.2429, 23.3584);
+      ctx.bezierCurveTo(46.2014, 23.3766, 45.2226, 23.3863, 44.4522, 23.3402);
+      ctx.bezierCurveTo(44.0676, 23.3171, 43.7172, 23.2793, 43.4282, 23.2163);
+      ctx.bezierCurveTo(43.1634, 23.1586, 42.8544, 23.0613, 42.6465, 22.8536);
+      ctx.bezierCurveTo(42.3947, 22.6019, 42.2271, 22.3487, 42.1382, 22.0741);
+      ctx.lineTo(36.3286, 26.3423);
+      ctx.bezierCurveTo(37.1868, 26.5283, 38.0618, 26.7308, 38.9047, 26.9468);
+      ctx.bezierCurveTo(40.0955, 27.252, 41.233, 27.587, 42.1733, 27.9439);
+      ctx.bezierCurveTo(43.0918, 28.2927, 43.8963, 28.6888, 44.3536, 29.146);
+      ctx.bezierCurveTo(45.1417, 29.9341, 45.5509, 30.9626, 45.8998, 31.8396);
+      ctx.lineTo(45.9642, 32.0014);
+      ctx.bezierCurveTo(46.3498, 32.9652, 46.6773, 33.6835, 47.2774, 34.0835);
+      ctx.bezierCurveTo(47.5905, 34.2923, 48.1063, 34.5554, 48.7518, 34.8848);
+      ctx.lineTo(48.9462, 34.984);
+      ctx.bezierCurveTo(49.6648, 35.3511, 50.4947, 35.7817, 51.265, 36.2631);
+      ctx.bezierCurveTo(52.0303, 36.7414, 52.7695, 37.2896, 53.2881, 37.9034);
+      ctx.bezierCurveTo(53.8082, 38.5188, 54.157, 39.2639, 53.9903, 40.0976);
+      ctx.bezierCurveTo(53.7157, 41.4707, 53.0194, 42.4597, 52.0971, 43.0982);
+      ctx.bezierCurveTo(51.1841, 43.7303, 50.079, 43.9996, 49, 43.9996);
+      ctx.bezierCurveTo(48.5631, 43.9996, 48.0431, 43.9772, 47.4429, 43.9514);
+      ctx.bezierCurveTo(45.2129, 43.8555, 41.8765, 43.712, 37.5894, 44.4915);
+      ctx.bezierCurveTo(36.2519, 44.7347, 34.3473, 45.3172, 32.1582, 46.0077);
+      ctx.bezierCurveTo(31.9075, 46.0867, 31.6533, 46.1671, 31.3962, 46.2485);
+      ctx.bezierCurveTo(29.4234, 46.8725, 27.2768, 47.5516, 25.1913, 48.1077);
+      ctx.bezierCurveTo(22.8386, 48.7351, 20.5284, 49.2161, 18.6027, 49.2805);
+      ctx.bezierCurveTo(16.7127, 49.3438, 15.0095, 49.0122, 14.1, 47.7996);
+      ctx.bezierCurveTo(11.6714, 44.5614, 12.0463, 41.8239, 12.3379, 39.6956);
+      ctx.bezierCurveTo(12.4224, 39.0781, 12.5, 38.5118, 12.5, 37.9995);
+      ctx.bezierCurveTo(12.5, 36.8952, 12.2964, 35.5792, 12.0671, 34.0972);
+      ctx.lineTo(12.0058, 33.7006);
+      ctx.bezierCurveTo(11.7559, 32.0763, 11.5, 30.2921, 11.5, 28.4996);
+      ctx.bezierCurveTo(11.5, 24.8358, 13.609, 21.0446, 17.938, 20.5034);
+      ctx.bezierCurveTo(19.0412, 20.3655, 20.1536, 20.5755, 21.2638, 20.9564);
+      ctx.bezierCurveTo(22.372, 21.3366, 23.5103, 21.899, 24.6659, 22.4925);
+      ctx.bezierCurveTo(24.8551, 22.5896, 25.045, 22.6877, 25.2354, 22.7861);
+      ctx.bezierCurveTo(27.3974, 23.9027, 29.6444, 25.0633, 32.0894, 25.5076);
+      ctx.bezierCurveTo(32.7472, 25.6272, 33.5191, 25.7705, 34.3505, 25.9343);
+      ctx.lineTo(42.2336, 20.1427);
+      ctx.closePath();
+      ctx.moveTo(33.253, 26.7406);
+      ctx.bezierCurveTo(32.7713, 26.6491, 32.3195, 26.5658, 31.9106, 26.4915);
+      ctx.bezierCurveTo(29.3103, 26.0189, 26.9323, 24.7894, 24.7932, 23.6833);
+      ctx.bezierCurveTo(24.5964, 23.5816, 24.4017, 23.481, 24.2091, 23.382);
+      ctx.bezierCurveTo(23.0522, 22.7879, 21.9717, 22.2565, 20.9393, 21.9023);
+      ctx.bezierCurveTo(19.9089, 21.5487, 18.9588, 21.3836, 18.062, 21.4957);
+      ctx.bezierCurveTo(14.391, 21.9546, 12.5, 25.1634, 12.5, 28.4996);
+      ctx.bezierCurveTo(12.5, 30.2071, 12.7441, 31.9228, 12.9942, 33.5485);
+      ctx.bezierCurveTo(13.0154, 33.6864, 13.0367, 33.8239, 13.0579, 33.9609);
+      ctx.lineTo(13.0583, 33.9631);
+      ctx.bezierCurveTo(13.284, 35.4195, 13.5, 36.8136, 13.5, 37.9995);
+      ctx.bezierCurveTo(13.5, 38.6729, 13.4103, 39.3422, 13.3186, 40.0261);
+      ctx.bezierCurveTo(13.0396, 42.1069, 12.7424, 44.3228, 14.9, 47.1996);
+      ctx.bezierCurveTo(15.4905, 47.9869, 16.7248, 48.3428, 18.5692, 48.2811);
+      ctx.bezierCurveTo(20.3779, 48.2206, 22.5989, 47.7641, 24.9337, 47.1415);
+      ctx.bezierCurveTo(26.9954, 46.5917, 29.1185, 45.9201, 31.0938, 45.2953);
+      ctx.bezierCurveTo(31.351, 45.2139, 31.6057, 45.1334, 31.8574, 45.054);
+      ctx.bezierCurveTo(34.0277, 44.3694, 35.9981, 43.7644, 37.4106, 43.5076);
+      ctx.bezierCurveTo(41.8244, 42.7051, 45.3124, 42.8567, 47.5332, 42.9532);
+      ctx.bezierCurveTo(48.1094, 42.9782, 48.6004, 42.9996, 49, 42.9996);
+      ctx.bezierCurveTo(49.921, 42.9996, 50.8159, 42.7689, 51.5279, 42.276);
+      ctx.bezierCurveTo(52.2306, 41.7895, 52.7843, 41.0284, 53.0097, 39.9015);
+      ctx.bezierCurveTo(53.093, 39.4853, 52.9418, 39.0429, 52.5244, 38.5489);
+      ctx.bezierCurveTo(52.1055, 38.0533, 51.4697, 37.5702, 50.735, 37.1111);
+      ctx.bezierCurveTo(50.0053, 36.655, 49.2102, 36.2418, 48.4913, 35.8745);
+      ctx.lineTo(48.2812, 35.7674);
+      ctx.bezierCurveTo(47.6598, 35.4506, 47.0879, 35.1591, 46.7226, 34.9156);
+      ctx.bezierCurveTo(45.8227, 34.3156, 45.4002, 33.284, 45.0358, 32.3728);
+      ctx.lineTo(44.992, 32.2631);
+      ctx.bezierCurveTo(44.6234, 31.3403, 44.2842, 30.4908, 43.6464, 29.8531);
+      ctx.bezierCurveTo(43.3537, 29.5603, 42.7308, 29.2253, 41.8184, 28.8788);
+      ctx.bezierCurveTo(40.9276, 28.5407, 39.8303, 28.2164, 38.6564, 27.9155);
+      ctx.bezierCurveTo(37.5412, 27.6297, 36.3665, 27.3673, 35.2486, 27.1358);
+      ctx.lineTo(31.628, 29.7959);
+      ctx.bezierCurveTo(33.7723, 30.2115, 35.7347, 30.6753, 37.2069, 31.3588);
+      ctx.bezierCurveTo(38.1216, 31.7835, 38.8936, 32.3131, 39.4007, 33.0104);
+      ctx.bezierCurveTo(39.9196, 33.7239, 40.1335, 34.5753, 39.9913, 35.5705);
+      ctx.bezierCurveTo(39.6991, 37.6163, 38.0742, 38.5843, 36.342, 39.1617);
+      ctx.bezierCurveTo(35.4685, 39.4529, 34.5204, 39.6612, 33.626, 39.8556);
+      ctx.lineTo(33.5612, 39.8697);
+      ctx.bezierCurveTo(32.6788, 40.0615, 31.8562, 40.2403, 31.1545, 40.4742);
+      ctx.bezierCurveTo(30.4859, 40.6971, 29.8318, 40.9507, 29.1651, 41.2093);
+      ctx.bezierCurveTo(26.9277, 42.077, 24.5478, 43, 20.9977, 43);
+      ctx.bezierCurveTo(20.3195, 43, 19.1887, 42.9398, 18.1261, 42.6428);
+      ctx.bezierCurveTo(17.0889, 42.3529, 15.962, 41.793, 15.5327, 40.6799);
+      ctx.lineTo(15.5063, 40.6114);
+      ctx.lineTo(15.5006, 40.5383);
+      ctx.bezierCurveTo(15.2484, 37.2543, 15.4135, 34.0368, 16.0123, 31.5769);
+      ctx.bezierCurveTo(16.3112, 30.3489, 16.7252, 29.2799, 17.2723, 28.4833);
+      ctx.bezierCurveTo(17.8211, 27.6843, 18.5367, 27.1158, 19.4344, 27.0037);
+      ctx.bezierCurveTo(21.5516, 26.7392, 23.1655, 27.1946, 24.7718, 27.7939);
+      ctx.bezierCurveTo(25.0972, 27.9153, 25.4207, 28.0417, 25.7473, 28.1694);
+      ctx.bezierCurveTo(26.9156, 28.6261, 28.1247, 29.0988, 29.6132, 29.4148);
+      ctx.lineTo(33.253, 26.7406);
+      ctx.closePath();
+      ctx.moveTo(28.5575, 30.1904);
+      ctx.bezierCurveTo(27.3478, 29.8703, 26.3076, 29.4632, 25.3491, 29.088);
+      ctx.bezierCurveTo(25.0325, 28.9641, 24.7243, 28.8435, 24.4223, 28.7308);
+      ctx.bezierCurveTo(22.879, 28.155, 21.4429, 27.7605, 19.5583, 27.996);
+      ctx.bezierCurveTo(19.0394, 28.0608, 18.5472, 28.3934, 18.0966, 29.0494);
+      ctx.bezierCurveTo(17.6443, 29.708, 17.2675, 30.6482, 16.9839, 31.8134);
+      ctx.bezierCurveTo(16.4221, 34.1211, 16.2534, 37.1951, 16.4917, 40.3831);
+      ctx.bezierCurveTo(16.7635, 40.999, 17.4632, 41.4192, 18.3952, 41.6797);
+      ctx.bezierCurveTo(19.3332, 41.9419, 20.3617, 42, 20.9977, 42);
+      ctx.bezierCurveTo(24.3441, 42, 26.5111, 41.1611, 28.7189, 40.3064);
+      ctx.bezierCurveTo(29.4089, 40.0393, 30.103, 39.7706, 30.8382, 39.5255);
+      ctx.bezierCurveTo(31.5923, 39.2742, 32.4615, 39.0853, 33.3215, 38.8985);
+      ctx.lineTo(33.4136, 38.8785);
+      ctx.bezierCurveTo(34.316, 38.6823, 35.2117, 38.4844, 36.0257, 38.213);
+      ctx.bezierCurveTo(37.6685, 37.6654, 38.7936, 36.8834, 39.0014, 35.4291);
+      ctx.bezierCurveTo(39.1092, 34.6744, 38.9481, 34.0882, 38.592, 33.5986);
+      ctx.bezierCurveTo(38.2241, 33.0928, 37.6211, 32.6536, 36.7858, 32.2658);
+      ctx.bezierCurveTo(35.2316, 31.5442, 33.0347, 31.0702, 30.5262, 30.6054);
+      ctx.lineTo(27.754, 32.6421);
+      ctx.lineTo(29.5, 34);
+      ctx.lineTo(18, 39);
+      ctx.lineTo(25, 30.5);
+      ctx.lineTo(26.5234, 31.6849);
+      ctx.lineTo(28.5575, 30.1904);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.restore();
+      ctx.restore();
+    },
+  },
+  "jg_lmtcbf.svg": {
+    draw: function (ctx, fillStyle, strokeStyle) {
+      ctx.save();
+      ctx.strokeStyle = "rgba(0,0,0,0)";
+      ctx.miterLimit = 4;
+      // ctx.font = "15px ''";
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font = "   15px ''";
+      ctx.save();
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(64, 0);
+      ctx.bezierCurveTo(64, 0, 64, 0, 64, 0);
+      ctx.lineTo(64, 64);
+      ctx.bezierCurveTo(64, 64, 64, 64, 64, 64);
+      ctx.lineTo(0, 64);
+      ctx.bezierCurveTo(0, 64, 0, 64, 0, 64);
+      ctx.lineTo(0, 0);
+      ctx.bezierCurveTo(0, 0, 0, 0, 0, 0);
+      ctx.closePath();
+      ctx.clip();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(62.5018, 13.5);
+      ctx.lineTo(51.5004, 16.9998);
+      ctx.lineTo(53.0471, 18.7402);
+      ctx.lineTo(43.5992, 25.1513);
+      ctx.bezierCurveTo(43.5864, 25.0909, 43.5704, 25.0308, 43.5501, 24.9729);
+      ctx.bezierCurveTo(43.5167, 24.8772, 43.4593, 24.7516, 43.3534, 24.6458);
+      ctx.bezierCurveTo(43.2436, 24.5362, 43.1096, 24.4784, 43.0158, 24.4454);
+      ctx.bezierCurveTo(42.9123, 24.4091, 42.7979, 24.3831, 42.6835, 24.3634);
+      ctx.bezierCurveTo(42.4541, 24.3238, 42.1735, 24.3013, 41.8715, 24.2892);
+      ctx.bezierCurveTo(41.2647, 24.2649, 40.514, 24.2813, 39.7908, 24.3127);
+      ctx.bezierCurveTo(39.0651, 24.3442, 38.3565, 24.3914, 37.83, 24.4307);
+      ctx.bezierCurveTo(37.71, 24.4396, 37.5993, 24.448, 37.5, 24.4558);
+      ctx.lineTo(37.5, 21.4995);
+      ctx.bezierCurveTo(37.5, 21.1899, 37.3856, 20.8975, 37.234, 20.6414);
+      ctx.bezierCurveTo(37.0806, 20.3821, 36.8697, 20.1273, 36.6301, 19.8834);
+      ctx.bezierCurveTo(36.1508, 19.3958, 35.5099, 18.9052, 34.8399, 18.4585);
+      ctx.bezierCurveTo(33.5047, 17.5684, 31.9639, 16.7938, 31.1581, 16.5252);
+      ctx.bezierCurveTo(30.2491, 16.2222, 28.9929, 16.3894, 27.8188, 16.846);
+      ctx.bezierCurveTo(26.6274, 17.3093, 25.4179, 18.109, 24.6, 19.1995);
+      ctx.bezierCurveTo(24.3421, 19.5434, 24.0803, 19.9218, 23.8201, 20.2979);
+      ctx.bezierCurveTo(23.6964, 20.4766, 23.5729, 20.6551, 23.4506, 20.8287);
+      ctx.bezierCurveTo(23.0628, 21.3793, 22.6726, 21.903, 22.2595, 22.3456);
+      ctx.bezierCurveTo(21.4287, 23.2356, 20.5937, 23.7079, 19.5981, 23.5088);
+      ctx.bezierCurveTo(19.1052, 23.4102, 18.4084, 22.9855, 17.5637, 22.3051);
+      ctx.bezierCurveTo(16.7396, 21.6413, 15.8482, 20.7966, 14.9721, 19.9519);
+      ctx.bezierCurveTo(14.8517, 19.8358, 14.7314, 19.7196, 14.6117, 19.6039);
+      ctx.lineTo(14.6105, 19.6027);
+      ctx.bezierCurveTo(13.8677, 18.8847, 13.1441, 18.1852, 12.5132, 17.6435);
+      ctx.bezierCurveTo(12.1466, 17.3287, 11.7966, 17.0543, 11.4804, 16.8561);
+      ctx.bezierCurveTo(11.1843, 16.6706, 10.8385, 16.4995, 10.5, 16.4995);
+      ctx.bezierCurveTo(9.83324, 16.4995, 9.00475, 16.8945, 8.18562, 17.5049);
+      ctx.bezierCurveTo(7.3434, 18.1325, 6.43349, 19.0455, 5.59466, 20.207);
+      ctx.bezierCurveTo(3.91563, 22.5318, 2.5, 25.8825, 2.5, 29.9995);
+      ctx.bezierCurveTo(2.5, 32.1152, 3.32119, 34.6684, 4.73181, 37.2836);
+      ctx.bezierCurveTo(6.14725, 39.9077, 8.17736, 42.6338, 10.6464, 45.1029);
+      ctx.bezierCurveTo(15.5748, 50.0313, 22.3194, 53.9995, 29.5, 53.9995);
+      ctx.bezierCurveTo(35.1, 53.9995, 37.725, 53.9994, 39.1375, 53.9993);
+      ctx.lineTo(41.5, 53.9991);
+      ctx.bezierCurveTo(42.0077, 53.9991, 42.639, 53.7513, 43.2535, 53.4162);
+      ctx.bezierCurveTo(43.8893, 53.0694, 44.5831, 52.5865, 45.2366, 52.03);
+      ctx.bezierCurveTo(45.8901, 51.4737, 46.5152, 50.8338, 47.0068, 50.1685);
+      ctx.bezierCurveTo(47.4938, 49.5093, 47.8749, 48.7914, 47.9932, 48.0817);
+      ctx.bezierCurveTo(48.3768, 45.7804, 48.333, 44.2303, 48.2158, 42.6997);
+      ctx.bezierCurveTo(48.1949, 42.4267, 48.1718, 42.1556, 48.1486, 41.8818);
+      ctx.bezierCurveTo(48.0421, 40.6301, 47.9308, 39.3216, 47.9996, 37.5182);
+      ctx.bezierCurveTo(48.0421, 36.4075, 48.1567, 35.3223, 48.2634, 34.3121);
+      ctx.bezierCurveTo(48.3243, 33.7353, 48.3827, 33.1828, 48.4236, 32.664);
+      ctx.bezierCurveTo(48.478, 31.9729, 48.5009, 31.3353, 48.4367, 30.8276);
+      ctx.bezierCurveTo(48.3772, 30.3572, 48.2196, 29.8006, 47.7238, 29.5524);
+      ctx.bezierCurveTo(47.3902, 29.3855, 47.0035, 29.3152, 46.6278, 29.2896);
+      ctx.bezierCurveTo(46.2477, 29.2636, 45.8443, 29.2814, 45.4584, 29.3136);
+      ctx.bezierCurveTo(45.1536, 29.339, 44.8472, 29.3747, 44.5658, 29.4074);
+      ctx.bezierCurveTo(44.4919, 29.416, 44.4197, 29.4244, 44.3497, 29.4324);
+      ctx.bezierCurveTo(44.0818, 29.4628, 43.8505, 29.4863, 43.6588, 29.4954);
+      ctx.bezierCurveTo(43.6424, 29.4357, 43.6253, 29.3495, 43.6115, 29.231);
+      ctx.bezierCurveTo(43.567, 28.8459, 43.5768, 28.3055, 43.6017, 27.7076);
+      ctx.bezierCurveTo(43.6079, 27.5565, 43.6152, 27.4017, 43.6224, 27.2465);
+      ctx.bezierCurveTo(43.6272, 27.1438, 43.632, 27.0409, 43.6366, 26.9387);
+      ctx.lineTo(54.052, 19.871);
+      ctx.lineTo(55.4992, 21.4995);
+      ctx.lineTo(62.5018, 13.5);
+      ctx.closePath();
+      ctx.moveTo(42.6605, 25.7883);
+      ctx.lineTo(35.1822, 30.8628);
+      ctx.bezierCurveTo(34.5645, 30.7863, 34.0366, 30.7703, 33.5897, 30.8014);
+      ctx.bezierCurveTo(33.129, 30.8335, 32.724, 30.919, 32.3924, 31.0578);
+      ctx.bezierCurveTo(32.2335, 30.3479, 31.8742, 29.5428, 31.1655, 28.834);
+      ctx.bezierCurveTo(30.1081, 27.7767, 28.3399, 27.0001, 25.4995, 27.0001);
+      ctx.bezierCurveTo(22.5941, 27.0001, 20.4491, 27.2555, 18.8176, 27.4497);
+      ctx.bezierCurveTo(18.4593, 27.4924, 18.1258, 27.5321, 17.8144, 27.5655);
+      ctx.bezierCurveTo(16.0597, 27.7537, 15.1267, 27.7207, 14.2993, 27.1001);
+      ctx.bezierCurveTo(13.9305, 26.8235, 13.5655, 26.5358, 13.2125, 26.2576);
+      ctx.bezierCurveTo(12.6502, 25.8145, 12.1186, 25.3955, 11.6513, 25.0841);
+      ctx.bezierCurveTo(11.2618, 24.8245, 10.8692, 24.6049, 10.4857, 24.49);
+      ctx.bezierCurveTo(10.0938, 24.3727, 9.67269, 24.3541, 9.27391, 24.5533);
+      ctx.bezierCurveTo(9.07642, 24.652, 8.9443, 24.8151, 8.85555, 24.9683);
+      ctx.bezierCurveTo(8.7654, 25.124, 8.69966, 25.3043, 8.64962, 25.4905);
+      ctx.bezierCurveTo(8.54957, 25.8628, 8.49347, 26.3312, 8.46736, 26.8469);
+      ctx.bezierCurveTo(8.41488, 27.8834, 8.47972, 29.2011, 8.61716, 30.5271);
+      ctx.bezierCurveTo(8.75485, 31.8553, 8.96735, 33.2103, 9.2163, 34.3252);
+      ctx.bezierCurveTo(9.34067, 34.8822, 9.47585, 35.3869, 9.61803, 35.8019);
+      ctx.bezierCurveTo(9.75502, 36.2018, 9.91527, 36.57, 10.1092, 36.8124);
+      ctx.bezierCurveTo(11.145, 38.1067, 13.8053, 40.6349, 16.6969, 42.8352);
+      ctx.bezierCurveTo(18.1465, 43.9382, 19.6698, 44.9708, 21.0922, 45.7301);
+      ctx.bezierCurveTo(22.4976, 46.4802, 23.8704, 47, 24.9995, 47);
+      ctx.bezierCurveTo(27.0025, 47, 29.1103, 46.975, 30.9202, 46.8997);
+      ctx.bezierCurveTo(32.7125, 46.8251, 34.2632, 46.6997, 35.1206, 46.4853);
+      ctx.bezierCurveTo(36.1958, 46.2165, 37.8795, 45.4333, 39.3591, 44.3397);
+      ctx.bezierCurveTo(40.8231, 43.2576, 42.2094, 41.7816, 42.4925, 40.0824);
+      ctx.bezierCurveTo(42.7357, 38.6232, 43.0139, 36.8809, 42.5379, 35.3082);
+      ctx.bezierCurveTo(42.043, 33.6731, 40.7688, 32.309, 38.1431, 31.5213);
+      ctx.bezierCurveTo(37.8332, 31.4283, 37.536, 31.3453, 37.2513, 31.2715);
+      ctx.lineTo(42.6036, 27.6396);
+      ctx.bezierCurveTo(42.6033, 27.6484, 42.6029, 27.6573, 42.6025, 27.6661);
+      ctx.bezierCurveTo(42.578, 28.2558, 42.5633, 28.8717, 42.6182, 29.346);
+      ctx.bezierCurveTo(42.645, 29.5781, 42.6933, 29.8258, 42.7952, 30.0291);
+      ctx.bezierCurveTo(42.9018, 30.2419, 43.1232, 30.4995, 43.5, 30.4995);
+      ctx.bezierCurveTo(43.7825, 30.4995, 44.122, 30.4647, 44.4628, 30.426);
+      ctx.bezierCurveTo(44.538, 30.4174, 44.6138, 30.4086, 44.69, 30.3997);
+      ctx.bezierCurveTo(44.9693, 30.3672, 45.2548, 30.334, 45.5416, 30.3101);
+      ctx.bezierCurveTo(45.9057, 30.2798, 46.2523, 30.2663, 46.5597, 30.2872);
+      ctx.bezierCurveTo(46.8715, 30.3085, 47.1098, 30.3634, 47.2762, 30.4467);
+      ctx.bezierCurveTo(47.2804, 30.4487, 47.3895, 30.5172, 47.4446, 30.9531);
+      ctx.bezierCurveTo(47.495, 31.3517, 47.4805, 31.9016, 47.4267, 32.5855);
+      ctx.bezierCurveTo(47.3899, 33.0519, 47.3344, 33.5799, 47.275, 34.145);
+      ctx.bezierCurveTo(47.1659, 35.1822, 47.0437, 36.3444, 47.0004, 37.48);
+      ctx.bezierCurveTo(46.9289, 39.3499, 47.046, 40.723, 47.1531, 41.979);
+      ctx.bezierCurveTo(47.1761, 42.2488, 47.1986, 42.5132, 47.2187, 42.776);
+      ctx.bezierCurveTo(47.3318, 44.253, 47.3733, 45.7182, 47.0068, 47.9173);
+      ctx.bezierCurveTo(46.9251, 48.4077, 46.6437, 48.9772, 46.2025, 49.5742);
+      ctx.bezierCurveTo(45.766, 50.165, 45.1974, 50.75, 44.5884, 51.2686);
+      ctx.bezierCurveTo(43.9794, 51.787, 43.3419, 52.2289, 42.7747, 52.5383);
+      ctx.bezierCurveTo(42.186, 52.8594, 41.7423, 52.9991, 41.5, 52.9991);
+      ctx.lineTo(39.1375, 52.9993);
+      ctx.bezierCurveTo(37.725, 52.9994, 35.1, 52.9995, 29.5, 52.9995);
+      ctx.bezierCurveTo(22.6806, 52.9995, 16.1752, 49.2176, 11.3536, 44.3958);
+      ctx.bezierCurveTo(8.94764, 41.9899, 6.97775, 39.341, 5.61194, 36.8088);
+      ctx.bezierCurveTo(4.24131, 34.2678, 3.5, 31.8836, 3.5, 29.9995);
+      ctx.bezierCurveTo(3.5, 26.117, 4.83437, 22.9677, 6.40534, 20.7924);
+      ctx.bezierCurveTo(7.19151, 19.7039, 8.0316, 18.8668, 8.78313, 18.3068);
+      ctx.bezierCurveTo(9.55775, 17.7296, 10.1668, 17.4995, 10.5, 17.4995);
+      ctx.bezierCurveTo(10.5365, 17.4995, 10.6751, 17.5316, 10.9493, 17.7035);
+      ctx.bezierCurveTo(11.2034, 17.8627, 11.5097, 18.0999, 11.8618, 18.4022);
+      ctx.bezierCurveTo(12.4682, 18.923, 13.1671, 19.5984, 13.9125, 20.3188);
+      ctx.bezierCurveTo(14.033, 20.4353, 14.1552, 20.5534, 14.2779, 20.6717);
+      ctx.bezierCurveTo(15.1518, 21.5143, 16.0729, 22.3884, 16.9363, 23.0838);
+      ctx.bezierCurveTo(17.7791, 23.7627, 18.6448, 24.3379, 19.4019, 24.4894);
+      ctx.bezierCurveTo(20.9063, 24.7902, 22.0713, 24.0127, 22.9905, 23.028);
+      ctx.bezierCurveTo(23.4524, 22.5332, 23.8747, 21.9633, 24.2682, 21.4046);
+      ctx.bezierCurveTo(24.4017, 21.215, 24.5307, 21.0284, 24.6571, 20.8458);
+      ctx.bezierCurveTo(24.9106, 20.4793, 25.1534, 20.1283, 25.4, 19.7995);
+      ctx.bezierCurveTo(26.0821, 18.8901, 27.1226, 18.1897, 28.1812, 17.778);
+      ctx.bezierCurveTo(29.2571, 17.3597, 30.2509, 17.2769, 30.8419, 17.4739);
+      ctx.bezierCurveTo(31.5361, 17.7053, 32.9953, 18.4307, 34.2852, 19.2906);
+      ctx.bezierCurveTo(34.9276, 19.7188, 35.5055, 20.1658, 35.9168, 20.5844);
+      ctx.bezierCurveTo(36.1224, 20.7936, 36.2749, 20.9842, 36.3734, 21.1506);
+      ctx.bezierCurveTo(36.4738, 21.3203, 36.5, 21.4342, 36.5, 21.4995);
+      ctx.lineTo(36.5, 24.9995);
+      ctx.bezierCurveTo(36.5, 25.14, 36.5591, 25.274, 36.6628, 25.3687);
+      ctx.bezierCurveTo(36.7665, 25.4635, 36.9053, 25.5102, 37.0452, 25.4975);
+      ctx.lineTo(37.0602, 25.4961);
+      ctx.lineTo(37.1055, 25.4921);
+      ctx.bezierCurveTo(37.1453, 25.4887, 37.204, 25.4836, 37.2791, 25.4773);
+      ctx.bezierCurveTo(37.4291, 25.4647, 37.6444, 25.4473, 37.9044, 25.4279);
+      ctx.bezierCurveTo(38.4248, 25.3891, 39.1224, 25.3427, 39.8342, 25.3117);
+      ctx.bezierCurveTo(40.5485, 25.2807, 41.2666, 25.2658, 41.8316, 25.2884);
+      ctx.bezierCurveTo(42.1156, 25.2997, 42.3467, 25.3201, 42.5138, 25.3489);
+      ctx.bezierCurveTo(42.5581, 25.3565, 42.5945, 25.3642, 42.6236, 25.3713);
+      ctx.bezierCurveTo(42.6269, 25.3882, 42.6303, 25.4078, 42.6337, 25.4306);
+      ctx.bezierCurveTo(42.6475, 25.5244, 42.6563, 25.6441, 42.6605, 25.7883);
+      ctx.closePath();
+      ctx.moveTo(33.6591, 31.799);
+      ctx.bezierCurveTo(33.7094, 31.7955, 33.7614, 31.7927, 33.8149, 31.7907);
+      ctx.lineTo(30.2524, 34.2081);
+      ctx.bezierCurveTo(29.9895, 34.0398, 29.7472, 33.863, 29.5102, 33.6901);
+      ctx.lineTo(29.4003, 33.61);
+      ctx.bezierCurveTo(28.3404, 32.8201, 27.2401, 32, 24.6303, 32);
+      ctx.bezierCurveTo(22.3203, 32, 20.8003, 33.42, 19.5803, 34.56);
+      ctx.bezierCurveTo(18.8303, 35.27, 18.1703, 35.88, 17.5303, 36.01);
+      ctx.bezierCurveTo(16.1003, 36.3, 15.0203, 37.8, 15.0003, 39.52);
+      ctx.bezierCurveTo(14.9973, 39.7517, 15.0156, 39.9905, 15.0577, 40.2309);
+      ctx.bezierCurveTo(13.156, 38.614, 11.5922, 37.065, 10.89, 36.1876);
+      ctx.bezierCurveTo(10.8109, 36.0887, 10.6954, 35.8614, 10.564, 35.4778);
+      ctx.bezierCurveTo(10.4378, 35.1094, 10.3119, 34.643, 10.1923, 34.1073);
+      ctx.bezierCurveTo(9.95324, 33.0368, 9.74627, 31.7209, 9.61183, 30.4239);
+      ctx.bezierCurveTo(9.47715, 29.1247, 9.4172, 27.863, 9.46608, 26.8974);
+      ctx.bezierCurveTo(9.49066, 26.4121, 9.54179, 26.0237, 9.61535, 25.75);
+      ctx.bezierCurveTo(9.65213, 25.6132, 9.68979, 25.5232, 9.72088, 25.4695);
+      ctx.bezierCurveTo(9.72957, 25.4545, 9.73643, 25.4446, 9.74107, 25.4385);
+      ctx.bezierCurveTo(9.84162, 25.3948, 9.98007, 25.3825, 10.1988, 25.448);
+      ctx.bezierCurveTo(10.4408, 25.5205, 10.7361, 25.6758, 11.0968, 25.9162);
+      ctx.bezierCurveTo(11.5389, 26.2108, 12.0093, 26.5823, 12.539, 27.0005);
+      ctx.bezierCurveTo(12.8957, 27.2822, 13.2793, 27.5851, 13.6993, 27.9001);
+      ctx.bezierCurveTo(14.872, 28.7796, 16.1801, 28.7465, 17.921, 28.5598);
+      ctx.bezierCurveTo(18.2432, 28.5252, 18.5844, 28.4846, 18.9481, 28.4414);
+      ctx.bezierCurveTo(20.5781, 28.2476, 22.6588, 28.0001, 25.4995, 28.0001);
+      ctx.bezierCurveTo(28.159, 28.0001, 29.6408, 28.7235, 30.4583, 29.5411);
+      ctx.bezierCurveTo(31.2814, 30.3642, 31.4993, 31.3503, 31.4993, 32.0002);
+      ctx.bezierCurveTo(31.4993, 32.2321, 31.6588, 32.4336, 31.8845, 32.4869);
+      ctx.bezierCurveTo(32.1101, 32.5401, 32.3428, 32.4312, 32.4466, 32.2238);
+      ctx.bezierCurveTo(32.4899, 32.1371, 32.7492, 31.8623, 33.6591, 31.799);
+      ctx.closePath();
+      ctx.moveTo(25.5789, 37.3793);
+      ctx.bezierCurveTo(25.2362, 37.6119, 25.1469, 38.0783, 25.3795, 38.4211);
+      ctx.bezierCurveTo(25.612, 38.7638, 26.0784, 38.8531, 26.4212, 38.6205);
+      ctx.lineTo(30.8147, 35.6392);
+      ctx.bezierCurveTo(31.2095, 35.8194, 31.6492, 35.997, 32.1103, 36.18);
+      ctx.lineTo(32.1523, 36.1971);
+      ctx.bezierCurveTo(33.935, 36.9241, 36.1303, 37.8193, 36.1303, 39);
+      ctx.bezierCurveTo(36.1303, 40.35, 34.7903, 42.11, 33.9103, 42.55);
+      ctx.bezierCurveTo(33.0903, 42.95, 23.3103, 43.52, 18.7403, 42.51);
+      ctx.bezierCurveTo(17.0203, 42.13, 15.9903, 41.01, 16.0103, 39.53);
+      ctx.bezierCurveTo(16.0203, 38.3, 16.7803, 37.18, 17.7303, 36.99);
+      ctx.bezierCurveTo(18.6503, 36.8, 19.4403, 36.07, 20.2703, 35.29);
+      ctx.lineTo(20.2903, 35.2714);
+      ctx.bezierCurveTo(21.4354, 34.2059, 22.7314, 33, 24.6303, 33);
+      ctx.lineTo(24.6303, 32.99);
+      ctx.bezierCurveTo(26.9003, 32.99, 27.7803, 33.64, 28.8003, 34.4);
+      ctx.bezierCurveTo(28.9814, 34.5387, 29.1654, 34.6774, 29.3598, 34.8137);
+      ctx.lineTo(25.5789, 37.3793);
+      ctx.closePath();
+      ctx.moveTo(36.1264, 32.0348);
+      ctx.bezierCurveTo(36.6409, 32.1417, 37.2158, 32.2871, 37.8558, 32.4791);
+      ctx.bezierCurveTo(40.2302, 33.1915, 41.2024, 34.3478, 41.5808, 35.5979);
+      ctx.bezierCurveTo(41.978, 36.9104, 41.7561, 38.4181, 41.5061, 39.918);
+      ctx.bezierCurveTo(41.2894, 41.2186, 40.1757, 42.4926, 38.7647, 43.5355);
+      ctx.bezierCurveTo(37.3692, 44.567, 35.8029, 45.284, 34.8781, 45.5152);
+      ctx.bezierCurveTo(34.1355, 45.7008, 32.6862, 45.8253, 30.8786, 45.9005);
+      ctx.bezierCurveTo(29.0886, 45.9751, 26.9964, 46, 24.9995, 46);
+      ctx.bezierCurveTo(24.1286, 46, 22.9389, 45.5822, 21.5631, 44.8479);
+      ctx.bezierCurveTo(20.9375, 44.514, 20.287, 44.1221, 19.628, 43.6906);
+      ctx.bezierCurveTo(21.4639, 43.962, 23.8808, 44.07, 26.2303, 44.07);
+      ctx.bezierCurveTo(30.0503, 44.07, 33.6803, 43.79, 34.3503, 43.45);
+      ctx.bezierCurveTo(35.4603, 42.9, 37.1303, 40.86, 37.1303, 39);
+      ctx.bezierCurveTo(37.1303, 37.14, 34.6703, 36.14, 32.4903, 35.26);
+      ctx.lineTo(32.2586, 35.1653);
+      ctx.bezierCurveTo(32.1002, 35.1006, 31.9448, 35.0372, 31.7942, 34.9746);
+      ctx.lineTo(36.1264, 32.0348);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.restore();
+      ctx.restore();
+    },
+  },
+  "jg_lmjs.svg": {
+    draw: function (ctx, fillStyle, strokeStyle) {
+      ctx.save();
+      ctx.strokeStyle = "rgba(0,0,0,0)";
+      ctx.miterLimit = 4;
+      // ctx.font = "15px ''";
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font = "   15px ''";
+      ctx.save();
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(64, 0);
+      ctx.bezierCurveTo(64, 0, 64, 0, 64, 0);
+      ctx.lineTo(64, 64);
+      ctx.bezierCurveTo(64, 64, 64, 64, 64, 64);
+      ctx.lineTo(0, 64);
+      ctx.bezierCurveTo(0, 64, 0, 64, 0, 64);
+      ctx.lineTo(0, 0);
+      ctx.bezierCurveTo(0, 0, 0, 0, 0, 0);
+      ctx.closePath();
+      ctx.clip();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(17.5, 25.999);
+      ctx.bezierCurveTo(17.5, 25.7229, 17.7239, 25.499, 18, 25.499);
+      ctx.lineTo(28, 25.499);
+      ctx.bezierCurveTo(28.2761, 25.499, 28.5, 25.7229, 28.5, 25.999);
+      ctx.bezierCurveTo(28.5, 26.2752, 28.2761, 26.499, 28, 26.499);
+      ctx.lineTo(18, 26.499);
+      ctx.bezierCurveTo(17.7239, 26.499, 17.5, 26.2752, 17.5, 25.999);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(8, 16.499);
+      ctx.bezierCurveTo(7.72386, 16.499, 7.5, 16.7229, 7.5, 16.999);
+      ctx.bezierCurveTo(7.5, 17.2752, 7.72386, 17.499, 8, 17.499);
+      ctx.lineTo(18, 17.499);
+      ctx.bezierCurveTo(18.2761, 17.499, 18.5, 17.2752, 18.5, 16.999);
+      ctx.bezierCurveTo(18.5, 16.7229, 18.2761, 16.499, 18, 16.499);
+      ctx.lineTo(8, 16.499);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(7.5, 35.999);
+      ctx.bezierCurveTo(7.5, 35.7229, 7.72386, 35.499, 8, 35.499);
+      ctx.lineTo(18, 35.499);
+      ctx.bezierCurveTo(18.2761, 35.499, 18.5, 35.7229, 18.5, 35.999);
+      ctx.bezierCurveTo(18.5, 36.2752, 18.2761, 36.499, 18, 36.499);
+      ctx.lineTo(8, 36.499);
+      ctx.bezierCurveTo(7.72386, 36.499, 7.5, 36.2752, 7.5, 35.999);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(27, 16.499);
+      ctx.bezierCurveTo(26.7239, 16.499, 26.5, 16.7229, 26.5, 16.999);
+      ctx.bezierCurveTo(26.5, 17.2752, 26.7239, 17.499, 27, 17.499);
+      ctx.lineTo(37, 17.499);
+      ctx.bezierCurveTo(37.2761, 17.499, 37.5, 17.2752, 37.5, 16.999);
+      ctx.bezierCurveTo(37.5, 16.7229, 37.2761, 16.499, 37, 16.499);
+      ctx.lineTo(27, 16.499);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(26.5, 35.999);
+      ctx.bezierCurveTo(26.5, 35.7229, 26.7239, 35.499, 27, 35.499);
+      ctx.lineTo(37, 35.499);
+      ctx.bezierCurveTo(37.2761, 35.499, 37.5, 35.7229, 37.5, 35.999);
+      ctx.bezierCurveTo(37.5, 36.2752, 37.2761, 36.499, 37, 36.499);
+      ctx.lineTo(27, 36.499);
+      ctx.bezierCurveTo(26.7239, 36.499, 26.5, 36.2752, 26.5, 35.999);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(46, 35.499);
+      ctx.bezierCurveTo(45.7239, 35.499, 45.5, 35.7229, 45.5, 35.999);
+      ctx.bezierCurveTo(45.5, 36.2752, 45.7239, 36.499, 46, 36.499);
+      ctx.lineTo(56, 36.499);
+      ctx.bezierCurveTo(56.2761, 36.499, 56.5, 36.2752, 56.5, 35.999);
+      ctx.bezierCurveTo(56.5, 35.7229, 56.2761, 35.499, 56, 35.499);
+      ctx.lineTo(46, 35.499);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(17.5, 45.999);
+      ctx.bezierCurveTo(17.5, 45.7229, 17.7239, 45.499, 18, 45.499);
+      ctx.lineTo(28, 45.499);
+      ctx.bezierCurveTo(28.2761, 45.499, 28.5, 45.7229, 28.5, 45.999);
+      ctx.bezierCurveTo(28.5, 46.2752, 28.2761, 46.499, 28, 46.499);
+      ctx.lineTo(18, 46.499);
+      ctx.bezierCurveTo(17.7239, 46.499, 17.5, 46.2752, 17.5, 45.999);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(35.5, 45.999);
+      ctx.bezierCurveTo(35.5, 45.7229, 35.7239, 45.499, 36, 45.499);
+      ctx.lineTo(46, 45.499);
+      ctx.bezierCurveTo(46.2761, 45.499, 46.5, 45.7229, 46.5, 45.999);
+      ctx.bezierCurveTo(46.5, 46.2752, 46.2761, 46.499, 46, 46.499);
+      ctx.lineTo(36, 46.499);
+      ctx.bezierCurveTo(35.7239, 46.499, 35.5, 46.2752, 35.5, 45.999);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(37, 25.499);
+      ctx.bezierCurveTo(36.7239, 25.499, 36.5, 25.7229, 36.5, 25.999);
+      ctx.bezierCurveTo(36.5, 26.2752, 36.7239, 26.499, 37, 26.499);
+      ctx.lineTo(47, 26.499);
+      ctx.bezierCurveTo(47.2761, 26.499, 47.5, 26.2752, 47.5, 25.999);
+      ctx.bezierCurveTo(47.5, 25.7229, 47.2761, 25.499, 47, 25.499);
+      ctx.lineTo(37, 25.499);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(28.1192, 9.51402);
+      ctx.bezierCurveTo(27.0619, 9.25009, 24.5151, 8.99959, 22.072, 8.93691);
+      ctx.bezierCurveTo(20.8433, 8.90539, 19.6199, 8.92072, 18.6024, 9.00886);
+      ctx.bezierCurveTo(18.094, 9.05289, 17.6272, 9.11589, 17.2322, 9.20336);
+      ctx.bezierCurveTo(16.8484, 9.28834, 16.4862, 9.40592, 16.2205, 9.58327);
+      ctx.bezierCurveTo(16.0535, 9.69477, 15.8576, 9.82864, 15.6379, 9.97876);
+      ctx.bezierCurveTo(14.8497, 10.5174, 13.755, 11.2655, 12.5868, 11.9414);
+      ctx.bezierCurveTo(11.8421, 12.3722, 11.0809, 12.7657, 10.3664, 13.0503);
+      ctx.bezierCurveTo(9.64482, 13.3377, 9.00732, 13.4991, 8.49991, 13.4991);
+      ctx.lineTo(8.46988, 13.4991);
+      ctx.bezierCurveTo(6.99619, 13.4991, 5.7177, 13.4991, 4.74584, 13.6287);
+      ctx.bezierCurveTo(3.80783, 13.7538, 2.92768, 14.0241, 2.55116, 14.775);
+      ctx.bezierCurveTo(2.11804, 15.6388, 1.99652, 16.8056, 2.00425, 18.2362);
+      ctx.bezierCurveTo(2.01116, 19.5156, 2.12415, 21.0785, 2.25829, 22.9338);
+      ctx.bezierCurveTo(2.27544, 23.171, 2.29293, 23.413, 2.3106, 23.6598);
+      ctx.bezierCurveTo(2.62316, 28.0267, 2.99744, 34.0009, 2.49909, 41.9679);
+      ctx.bezierCurveTo(2.43967, 42.9179, 2.7854, 44.0301, 3.39105, 45.145);
+      ctx.bezierCurveTo(3.58193, 45.4964, 3.80109, 45.8526, 4.04631, 46.2095);
+      ctx.bezierCurveTo(4.07087, 46.2623, 4.10441, 46.3102, 4.14497, 46.3511);
+      ctx.bezierCurveTo(4.66683, 47.0902, 5.29913, 47.8298, 6.02224, 48.5333);
+      ctx.bezierCurveTo(8.25564, 50.7062, 11.4039, 52.5798, 14.9397, 52.9957);
+      ctx.bezierCurveTo(14.9591, 52.998, 14.9786, 52.9991, 14.9981, 52.9991);
+      ctx.lineTo(28.9999, 52.9991);
+      ctx.bezierCurveTo(29.8364, 52.9991, 31.0814, 52.779, 32.569, 52.4132);
+      ctx.bezierCurveTo(34.0689, 52.0443, 35.8546, 51.5171, 37.7903, 50.8814);
+      ctx.bezierCurveTo(41.662, 49.61, 46.1543, 47.898, 50.1965, 46.1319);
+      ctx.bezierCurveTo(53.3561, 44.7513, 56.2544, 43.3318, 58.3693, 42.0583);
+      ctx.bezierCurveTo(59.4246, 41.4228, 60.3031, 40.8129, 60.9239, 40.2521);
+      ctx.bezierCurveTo(61.2341, 39.9718, 61.4941, 39.6912, 61.6798, 39.4133);
+      ctx.bezierCurveTo(61.8625, 39.1399, 61.9999, 38.8292, 61.9999, 38.4991);
+      ctx.bezierCurveTo(61.9999, 37.4709, 61.5754, 36.6096, 60.9149, 35.7944);
+      ctx.bezierCurveTo(60.2648, 34.9919, 59.3497, 34.1915, 58.3158, 33.2905);
+      ctx.lineTo(58.2436, 33.2276);
+      ctx.bezierCurveTo(56.1696, 31.4208, 53.4961, 29.0916, 50.916, 25.2215);
+      ctx.bezierCurveTo(46.3633, 18.3924, 41.1689, 14.5868, 36.8484, 12.4267);
+      ctx.bezierCurveTo(33.1685, 10.5869, 30.1169, 9.94175, 28.7003, 9.64229);
+      ctx.bezierCurveTo(28.4564, 9.59074, 28.261, 9.54942, 28.1192, 9.51402);
+      ctx.closePath();
+      ctx.moveTo(5.51191, 46.499);
+      ctx.lineTo(9, 46.499);
+      ctx.bezierCurveTo(9.27614, 46.499, 9.5, 46.2752, 9.5, 45.999);
+      ctx.bezierCurveTo(9.5, 45.7229, 9.27614, 45.499, 9, 45.499);
+      ctx.lineTo(4.77298, 45.499);
+      ctx.bezierCurveTo(4.58616, 45.2186, 4.41805, 44.9406, 4.26975, 44.6676);
+      ctx.bezierCurveTo(3.7073, 43.6323, 3.45433, 42.7148, 3.49714, 42.0304);
+      ctx.bezierCurveTo(3.89645, 35.6466, 3.73981, 30.5305, 3.50121, 26.499);
+      ctx.lineTo(8.5, 26.499);
+      ctx.bezierCurveTo(8.77614, 26.499, 9, 26.2752, 9, 25.999);
+      ctx.bezierCurveTo(9, 25.7229, 8.77614, 25.499, 8.5, 25.499);
+      ctx.lineTo(3.43918, 25.499);
+      ctx.bezierCurveTo(3.39591, 24.8302, 3.35136, 24.1937, 3.30805, 23.5884);
+      ctx.bezierCurveTo(3.29039, 23.3417, 3.27296, 23.1005, 3.25592, 22.8647);
+      ctx.bezierCurveTo(3.1212, 21.0001, 3.01095, 19.4743, 3.00423, 18.2308);
+      ctx.bezierCurveTo(2.9966, 16.8177, 3.12605, 15.8595, 3.44507, 15.2233);
+      ctx.bezierCurveTo(3.56969, 14.9747, 3.94043, 14.745, 4.87804, 14.62);
+      ctx.bezierCurveTo(5.77519, 14.5003, 6.98627, 14.4991, 8.49991, 14.4991);
+      ctx.bezierCurveTo(9.1925, 14.4991, 9.9675, 14.2856, 10.7365, 13.9793);
+      ctx.bezierCurveTo(11.5126, 13.6701, 12.32, 13.2511, 13.0876, 12.8069);
+      ctx.bezierCurveTo(14.2928, 12.1096, 15.4333, 11.33, 16.2209, 10.7918);
+      ctx.bezierCurveTo(16.4334, 10.6465, 16.6202, 10.5188, 16.7757, 10.415);
+      ctx.bezierCurveTo(16.8845, 10.3424, 17.1001, 10.2568, 17.4484, 10.1797);
+      ctx.bezierCurveTo(17.7854, 10.1051, 18.2051, 10.047, 18.6887, 10.0051);
+      ctx.bezierCurveTo(19.655, 9.92143, 20.8376, 9.90557, 22.0464, 9.93658);
+      ctx.bezierCurveTo(24.4783, 9.99897, 26.9325, 10.2485, 27.877, 10.4843);
+      ctx.bezierCurveTo(28.0346, 10.5236, 28.2444, 10.5681, 28.5017, 10.6228);
+      ctx.bezierCurveTo(29.9374, 10.9275, 32.8505, 11.5459, 36.4012, 13.3211);
+      ctx.bezierCurveTo(40.5811, 15.4109, 45.6367, 19.1053, 50.084, 25.7762);
+      ctx.bezierCurveTo(52.7385, 29.758, 55.495, 32.1594, 57.577, 33.9732);
+      ctx.lineTo(57.6588, 34.0445);
+      ctx.bezierCurveTo(58.7124, 34.9625, 59.5537, 35.7028, 60.1379, 36.4239);
+      ctx.bezierCurveTo(60.7118, 37.1323, 60.9999, 37.7774, 60.9999, 38.4991);
+      ctx.bezierCurveTo(60.9999, 38.5531, 60.9747, 38.6686, 60.8484, 38.8578);
+      ctx.bezierCurveTo(60.725, 39.0424, 60.5294, 39.2608, 60.2535, 39.51);
+      ctx.bezierCurveTo(59.7021, 40.0082, 58.8863, 40.5796, 57.8534, 41.2016);
+      ctx.bezierCurveTo(55.7921, 42.4429, 52.9385, 43.8425, 49.7961, 45.2155);
+      ctx.bezierCurveTo(45.7821, 46.9693, 41.3193, 48.67, 37.4783, 49.9314);
+      ctx.bezierCurveTo(35.5577, 50.5621, 33.7976, 51.0812, 32.3302, 51.4421);
+      ctx.bezierCurveTo(30.8504, 51.806, 29.7064, 51.9991, 28.9999, 51.9991);
+      ctx.lineTo(15.0277, 51.9991);
+      ctx.bezierCurveTo(11.7736, 51.6082, 8.8307, 49.8705, 6.71956, 47.8166);
+      ctx.bezierCurveTo(6.27686, 47.3859, 5.87287, 46.9433, 5.51191, 46.499);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.restore();
+      ctx.restore();
+    },
+  },
+  "jg_xfsj.svg": {
+    draw: function (ctx, fillStyle, strokeStyle) {
+      ctx.save();
+      ctx.strokeStyle = "rgba(0,0,0,0)";
+      ctx.miterLimit = 4;
+      // ctx.font = "15px ''";
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font = "   15px ''";
+      ctx.save();
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(64, 0);
+      ctx.bezierCurveTo(64, 0, 64, 0, 64, 0);
+      ctx.lineTo(64, 64);
+      ctx.bezierCurveTo(64, 64, 64, 64, 64, 64);
+      ctx.lineTo(0, 64);
+      ctx.bezierCurveTo(0, 64, 0, 64, 0, 64);
+      ctx.lineTo(0, 0);
+      ctx.bezierCurveTo(0, 0, 0, 0, 0, 0);
+      ctx.closePath();
+      ctx.clip();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(35.5, 38.5);
+      ctx.lineTo(28.5, 38.5);
+      ctx.lineTo(28.5, 37.5);
+      ctx.lineTo(35.5, 37.5);
+      ctx.lineTo(35.5, 38.5);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(39, 38);
+      ctx.bezierCurveTo(39, 41.866, 35.866, 45, 32, 45);
+      ctx.bezierCurveTo(28.134, 45, 25, 41.866, 25, 38);
+      ctx.bezierCurveTo(25, 34.3021, 27.8674, 31.274, 31.5, 31.0176);
+      ctx.lineTo(31.5, 19.5);
+      ctx.lineTo(21, 19.5);
+      ctx.lineTo(21, 18.5);
+      ctx.lineTo(43, 18.5);
+      ctx.lineTo(43, 19.5);
+      ctx.lineTo(32.5, 19.5);
+      ctx.lineTo(32.5, 31.0176);
+      ctx.bezierCurveTo(36.1326, 31.274, 39, 34.3021, 39, 38);
+      ctx.closePath();
+      ctx.moveTo(38, 38);
+      ctx.bezierCurveTo(38, 34.6863, 35.3137, 32, 32, 32);
+      ctx.bezierCurveTo(28.6863, 32, 26, 34.6863, 26, 38);
+      ctx.bezierCurveTo(26, 41.3137, 28.6863, 44, 32, 44);
+      ctx.bezierCurveTo(35.3137, 44, 38, 41.3137, 38, 38);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(52, 32);
+      ctx.bezierCurveTo(52, 43.0457, 43.0457, 52, 32, 52);
+      ctx.bezierCurveTo(20.9543, 52, 12, 43.0457, 12, 32);
+      ctx.bezierCurveTo(12, 20.9543, 20.9543, 12, 32, 12);
+      ctx.bezierCurveTo(43.0457, 12, 52, 20.9543, 52, 32);
+      ctx.closePath();
+      ctx.moveTo(51, 32);
+      ctx.bezierCurveTo(51, 21.5066, 42.4934, 13, 32, 13);
+      ctx.bezierCurveTo(21.5066, 13, 13, 21.5066, 13, 32);
+      ctx.bezierCurveTo(13, 42.4934, 21.5066, 51, 32, 51);
+      ctx.bezierCurveTo(42.4934, 51, 51, 42.4934, 51, 32);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.restore();
+      ctx.restore();
+    },
+  },
+  "jg_ysk.svg": {
+    draw: function (ctx, fillStyle, strokeStyle) {
+      ctx.save();
+      ctx.strokeStyle = "rgba(0,0,0,0)";
+      ctx.miterLimit = 4;
+      // ctx.font = "15px ''";
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font = "   15px ''";
+      ctx.save();
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(64, 0);
+      ctx.bezierCurveTo(64, 0, 64, 0, 64, 0);
+      ctx.lineTo(64, 64);
+      ctx.bezierCurveTo(64, 64, 64, 64, 64, 64);
+      ctx.lineTo(0, 64);
+      ctx.bezierCurveTo(0, 64, 0, 64, 0, 64);
+      ctx.lineTo(0, 0);
+      ctx.bezierCurveTo(0, 0, 0, 0, 0, 0);
+      ctx.closePath();
+      ctx.clip();
+      ctx.save();
+      ctx.fillStyle = fillStyle;
+      // ctx.font = "   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(63, 16);
+      ctx.lineTo(1, 16);
+      ctx.lineTo(1, 49);
+      ctx.lineTo(63, 49);
+      ctx.lineTo(63, 16);
+      ctx.closePath();
+      ctx.moveTo(2, 48);
+      ctx.lineTo(2, 17);
+      ctx.lineTo(31.5, 17);
+      ctx.lineTo(31.5, 48);
+      ctx.lineTo(2, 48);
+      ctx.closePath();
+      ctx.moveTo(48.7052, 48);
+      ctx.lineTo(62, 34.7052);
+      ctx.lineTo(62, 42.291);
+      ctx.lineTo(56.291, 48);
+      ctx.lineTo(48.7052, 48);
+      ctx.closePath();
+      ctx.moveTo(47.291, 48);
+      ctx.lineTo(38.7052, 48);
+      ctx.lineTo(62, 24.7052);
+      ctx.lineTo(62, 33.291);
+      ctx.lineTo(47.291, 48);
+      ctx.closePath();
+      ctx.moveTo(32.5, 48);
+      ctx.lineTo(32.5, 45.2052);
+      ctx.lineTo(60.7052, 17);
+      ctx.lineTo(62, 17);
+      ctx.lineTo(62, 23.291);
+      ctx.lineTo(37.291, 48);
+      ctx.lineTo(32.5, 48);
+      ctx.closePath();
+      ctx.moveTo(62, 48);
+      ctx.lineTo(57.7052, 48);
+      ctx.lineTo(62, 43.7052);
+      ctx.lineTo(62, 48);
+      ctx.closePath();
+      ctx.moveTo(32.5, 34.791);
+      ctx.lineTo(32.5, 27.2052);
+      ctx.lineTo(42.7052, 17);
+      ctx.lineTo(50.291, 17);
+      ctx.lineTo(32.5, 34.791);
+      ctx.closePath();
+      ctx.moveTo(32.5, 36.2052);
+      ctx.lineTo(51.7052, 17);
+      ctx.lineTo(59.291, 17);
+      ctx.lineTo(32.5, 43.791);
+      ctx.lineTo(32.5, 36.2052);
+      ctx.closePath();
+      ctx.moveTo(32.5, 17);
+      ctx.lineTo(41.291, 17);
+      ctx.lineTo(32.5, 25.791);
+      ctx.lineTo(32.5, 17);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.restore();
+      ctx.restore();
+    },
+  },
+};
+for (var name in SVGIcons) {
+  Q.registerImage(name, SVGIcons[name]);
+}

+ 5 - 6
src/graphic/Layer.js

@@ -184,7 +184,7 @@ export default class Layer {
         break;
       case LayerEvents.AddSVG:
         stateService.setEventName(LayerEvents.MoveSVG);
-        addSVG.buildSVG(position,Settings.selectSVGType);
+        addSVG.buildSVG(position, Settings.selectSVGType);
         // addSVG.newSVG.setType(Settings.selectSVGType);
 
         stateService.setSelectItem(addSVG.newSVG.vectorId, VectorType.SVG, -1);
@@ -220,7 +220,7 @@ export default class Layer {
                 selectItem.dir
               );
             }
-            roadService.initRoadWidthTipsPos(road)
+            roadService.initRoadWidthTipsPos(road);
           } else {
             road = dataService.getCurveRoad(selectItem.vectorId);
             if (road) {
@@ -241,7 +241,7 @@ export default class Layer {
               }
             }
           }
-          
+
           this.history.save();
           this.renderer.autoRedraw();
         }
@@ -289,7 +289,7 @@ export default class Layer {
               }
             }
           }
-          roadService.initRoadWidthTipsPos(road)
+          roadService.initRoadWidthTipsPos(road);
           this.history.save();
           this.renderer.autoRedraw();
         }
@@ -380,7 +380,6 @@ export default class Layer {
           }
         }
         break;
-      
     }
     selectItem = stateService.getSelectItem();
     stateService.setDraggingItem(selectItem);
@@ -491,7 +490,7 @@ export default class Layer {
         needAutoRedraw = listenLayer.start(position);
         let seleteItem = stateService.getSelectItem();
         if (seleteItem != null) {
-          console.log("选中:" + seleteItem.vectorId);
+          // console.log("选中:" + seleteItem.vectorId);
         } else {
         }
         break;

+ 28 - 24
src/graphic/ListenLayer.js

@@ -638,17 +638,24 @@ export default class ListenLayer {
       let rightLine = mathUtil.createLine1(rightEdge.start, rightEdge.end);
       let rightJoin = mathUtil.getJoinLinePoint(position, rightLine);
 
-      let leftSideLine =leftEdge.roadSide ? mathUtil.createLine1(leftEdge.roadSide.start, leftEdge.roadSide.end) : null;
-      let leftSideJoin = leftSideLine ? mathUtil.getJoinLinePoint(position, leftSideLine) : null;
-      
-      let rightSideLine =rightEdge.roadSide ? mathUtil.createLine1(rightEdge.roadSide.start, rightEdge.roadSide.end) : null;
-      let rightSideJoin = rightSideLine ? mathUtil.getJoinLinePoint(position, rightSideLine) : null;
+      let leftSideLine = leftEdge.roadSide
+        ? mathUtil.createLine1(leftEdge.roadSide.start, leftEdge.roadSide.end)
+        : null;
+      let leftSideJoin = leftSideLine
+        ? mathUtil.getJoinLinePoint(position, leftSideLine)
+        : null;
+
+      let rightSideLine = rightEdge.roadSide
+        ? mathUtil.createLine1(rightEdge.roadSide.start, rightEdge.roadSide.end)
+        : null;
+      let rightSideJoin = rightSideLine
+        ? mathUtil.getJoinLinePoint(position, rightSideLine)
+        : null;
       let distance = this.getDistance(position, join);
       if (
         mathUtil.isContainForSegment(join, startPoint, endPoint) &&
         (mathUtil.isContainForSegment(position, join, leftJoin) ||
-          mathUtil.isContainForSegment(position, join, rightJoin)
-          )
+          mathUtil.isContainForSegment(position, join, rightJoin))
       ) {
         if (!roadInfo.roadId || distance < roadInfo.distance) {
           roadInfo = {
@@ -669,34 +676,31 @@ export default class ListenLayer {
           // } else {
           //   roadInfo.dir = "left";
           // }
-          if(mathUtil.isClockwise([startPoint,endPoint,position])){
+          if (mathUtil.isClockwise([startPoint, endPoint, position])) {
             roadInfo.dir = "left";
-          }else{
+          } else {
             roadInfo.dir = "right";
           }
         }
       }
 
       //检查edge
- 
+
       distance = this.getDistance(position, leftJoin);
       if (
         (mathUtil.isContainForSegment(leftJoin, leftEdge.start, leftEdge.end) &&
-        distance < Constant.minAdsorbPix / 2) ||
-        (mathUtil.isContainForSegment(join, startPoint, endPoint) && 
-        leftSideJoin && 
-        mathUtil.isContainForSegment(position, join, leftSideJoin))
-      
+          distance < Constant.minAdsorbPix / 2) ||
+        (mathUtil.isContainForSegment(join, startPoint, endPoint) &&
+          leftSideJoin &&
+          mathUtil.isContainForSegment(position, join, leftSideJoin))
       ) {
         if (!edgeInfo.edgeId || distance < edgeInfo.distance) {
-
           edgeInfo = {
             edgeId: road.leftEdgeId,
             type: VectorType.RoadEdge,
             distance: distance,
             dir: "left",
           };
-
         }
       }
 
@@ -708,10 +712,10 @@ export default class ListenLayer {
           rightEdge.start,
           rightEdge.end
         ) &&
-        distance < Constant.minAdsorbPix / 2) ||
-        (mathUtil.isContainForSegment(join, startPoint, endPoint) && 
-        rightSideJoin &&
-        mathUtil.isContainForSegment(position, join, rightSideJoin))
+          distance < Constant.minAdsorbPix / 2) ||
+        (mathUtil.isContainForSegment(join, startPoint, endPoint) &&
+          rightSideJoin &&
+          mathUtil.isContainForSegment(position, join, rightSideJoin))
       ) {
         if (!edgeInfo.edgeId || distance < edgeInfo.distance) {
           edgeInfo = {
@@ -894,13 +898,13 @@ export default class ListenLayer {
       (!curveEdgeInfo.curveEdgeId ||
         curveRoadInfo.distance < curveEdgeInfo.distance)
     ) {
-      console.log("选中的CurveRoad:" + curveRoadInfo.curveRoadId);
+      // console.log("选中的CurveRoad:" + curveRoadInfo.curveRoadId);
       return curveRoadInfo;
     } else if (curveEdgeInfo.curveEdgeId) {
-      console.log("选中的CurveEdge:" + curveEdgeInfo.curveEdgeId);
+      // console.log("选中的CurveEdge:" + curveEdgeInfo.curveEdgeId);
       return curveEdgeInfo;
     } else {
-      console.log("既然没选中CurveRoad,也没选中CurveEdge");
+      // console.log("既然没选中CurveRoad,也没选中CurveEdge");
       return {
         curveRoadId: null,
         curveEdgeId: null,

+ 6 - 0
src/graphic/Renderer/Draw.js

@@ -533,8 +533,13 @@ export default class Draw {
       vector.rightLanes &&
         vector.rightLanes.forEach((g) => this.drawLan(g, !!label));
     }
+    if (vector.roadWidthTipsPos) {
+      this.drawRoadTip(vector);
+    }
   }
 
+  drawRoadTip() {}
+
   drawLan(lan, focus) {
     const ctx = this.context;
     const start = coordinate.getScreenXY(lan.start);
@@ -1266,6 +1271,7 @@ export default class Draw {
     this.context.translate(points[0].x, points[0].y);
     this.context.rotate(angle);
     this.context.scale(width / svgWidth, height / svgHidth);
+    console.log(width, height);
     const [style, label] = help.getVectorStyle(vector);
     this.context.lineWidth = style.lineWidth / (width / svgWidth);
     this.context.fillStyle = "rgba(0,0,0,0)";

+ 1 - 1
src/graphic/Service/StateService.js

@@ -38,7 +38,7 @@ export default class StateService {
       const point = dataService.getPoint(vectorId);
       this.selectItem.category = point.getCategory();
     }
-    console.log("选中的元素:" + JSON.stringify(this.selectItem));
+    // console.log("选中的元素:" + JSON.stringify(this.selectItem));
   }
   setSelectState(state) {
     if (!state || !this.selectItem) {

+ 0 - 1
src/views/graphic/childMenus.vue

@@ -30,7 +30,6 @@ const title = computed(() => findMainMenuByAttr(props.menus)?.text);
 
 const emit = defineEmits<{ (e: "quit") }>();
 const clickHandler = (menu) => {
-  console.log("????");
   uiType.change(menu.key as any);
   emit("quit");
 };

+ 57 - 40
src/views/graphic/imageLabel.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="graphic-child-menus">
+    {{}}
     <div class="header">
       <ui-icon type="return" class="icon" ctrl @click="$emit('quit')" />
-      <p>图例</p>
+      <p>{{ config.title }}</p>
     </div>
     <ui-input type="text" width="100%" v-model="keyword">
       <template v-slot:preIcon>
@@ -44,50 +45,64 @@
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
 import { uiType } from "@/hook/useGraphic";
-import icons, { typeKeys } from "@/graphic/CanvasStyle/ImageLabels/SVGIcons";
+import icons, {
+  imageTypeKeys,
+  structureTypeKeys,
+} from "@/graphic/CanvasStyle/ImageLabels/SVGIcons";
 import { computed, ref, watch } from "vue";
 import UiInput from "@/components/base/components/input/index.vue";
 import { uses } from "@/store/SVGLabel";
-
-const typeMenusRaw = typeKeys.map(({ type, children }) => ({
-  title: type,
-  children: children.map((key) => ({
-    key: key,
-    text: icons[key].text,
-    icon: key.substring(0, key.lastIndexOf(".")),
-  })),
-}));
+import { UITypeExtend } from "./menus";
+
+const props = defineProps<{ type: string }>();
+const config = computed(() =>
+  props.type === UITypeExtend.image
+    ? { title: "图例", data: imageTypeKeys, enableUse: true }
+    : { title: "道路结构", data: structureTypeKeys, enableUse: false }
+);
+
+const typeMenusRaw = computed(() =>
+  config.value.data.map(({ type, children }) => ({
+    title: type,
+    children: children.map((key) => ({
+      key: key,
+      text: icons[key].text,
+      icon: key.substring(0, key.lastIndexOf(".")),
+    })),
+  }))
+);
 const keyword = ref("");
 const typeMenus = computed(() => {
-  const raws = typeMenusRaw.map((typeMenu) => ({
+  const raws = typeMenusRaw.value.map((typeMenu) => ({
     ...typeMenu,
     children: typeMenu.children
       .filter((item) => item.text.includes(keyword.value))
       .sort((a, b) => a.icon.localeCompare(b.icon)),
   }));
 
-  const items = keyword.value
-    ? raws
-    : [
-        {
-          title: "常用",
-          children: uses.value
-            .sort((item1, item2) => (item2.count || 0) - (item1.count || 0))
-            .slice(0, 10)
-            .map((item) => {
-              for (let menu of typeMenusRaw) {
-                const findItem = menu.children.find(
-                  (menuItem) => menuItem.key === item.key
-                );
-                if (findItem) {
-                  return findItem;
+  const items =
+    keyword.value || !config.value.enableUse
+      ? raws
+      : [
+          {
+            title: "常用",
+            children: uses.value
+              .sort((item1, item2) => (item2.count || 0) - (item1.count || 0))
+              .slice(0, 10)
+              .map((item) => {
+                for (let menu of typeMenusRaw.value) {
+                  const findItem = menu.children.find(
+                    (menuItem) => menuItem.key === item.key
+                  );
+                  if (findItem) {
+                    return findItem;
+                  }
                 }
-              }
-            })
-            .filter((item) => !!item),
-        },
-        ...raws,
-      ];
+              })
+              .filter((item) => !!item),
+          },
+          ...raws,
+        ];
 
   return items.filter((item) => item.children.length);
 });
@@ -95,13 +110,15 @@ const showTypeMenu = ref();
 watch(typeMenus, () => (showTypeMenu.value = typeMenus.value[0]), { immediate: true });
 
 const clickHandler = (key) => {
-  const findUse = uses.value.find((use) => use.key === key);
-  const lastUpdateTime = new Date().getTime();
-  if (findUse) {
-    findUse.count++;
-    findUse.lastUpdateTime = lastUpdateTime;
-  } else {
-    uses.value.push({ key, count: 1, lastUpdateTime });
+  if (config.value.enableUse) {
+    const findUse = uses.value.find((use) => use.key === key);
+    const lastUpdateTime = new Date().getTime();
+    if (findUse) {
+      findUse.count++;
+      findUse.lastUpdateTime = lastUpdateTime;
+    } else {
+      uses.value.push({ key, count: 1, lastUpdateTime });
+    }
   }
   uiType.change(key as any);
 };

+ 10 - 4
src/views/graphic/index.vue

@@ -1,16 +1,22 @@
 <template>
-  <MainPanel :menus="store.menus as any" :active-menu-key="store.activeMenuKey.value">
+  <MainPanel :menus="(store.menus as any)" :active-menu-key="store.activeMenuKey.value">
     <template v-slot:header>
       <Header />
     </template>
     <Container />
     <ChildMenus
-      v-if="store.child.value && store.activeMenuKey.value === UITypeExtend.template"
-      :menus="store.child.value as any"
+      v-if="
+        store.child.value &&
+        [UITypeExtend.structure, UITypeExtend.template].includes(
+          store.activeMenuKey.value
+        )
+      "
+      :menus="store.child.value"
       @quit="store.child.value = null"
     />
     <ImageLabel
-      v-if="store.activeMenuKey.value === UITypeExtend.image"
+      v-if="[UITypeExtend.image].includes(store.activeMenuKey.value)"
+      :type="store.activeMenuKey.value"
       @quit="uiType.change(null)"
     />
 

+ 24 - 18
src/views/graphic/menus.ts

@@ -42,23 +42,24 @@ export type MenuRaw = {
 export type MenusRaw = Array<MenuRaw>;
 
 export const structureMenusRaw = [
-  { key: RoadStructure.BranchRoad, icon: "jg_zl-1", text: "支路" },
-  { key: RoadStructure.NarrowRoad, icon: "jg_zl", text: "窄路" },
-  { key: RoadStructure.ShoulderRoad, icon: "jg_lj", text: "路肩" },
+  // { key: RoadStructure.BranchRoad, icon: "jg_zl-1", text: "支路" },
+  // { key: RoadStructure.NarrowRoad, icon: "jg_zl", text: "窄路" },
+  // { key: RoadStructure.ShoulderRoad, icon: "jg_lj", text: "路肩" },
+  // { key: RoadStructure.ZebraCrossing, icon: "jg_bmx", text: "斑马线" },
+  // { key: RoadStructure.Bridge, icon: "jg_q", text: "桥" },
+  // { key: RoadStructure.Tunnel, icon: "jg_sd", text: "隧道" },
+  // { key: RoadStructure.Sidewalk, icon: "jg_rxd", text: "人行道" },
+  // { key: RoadStructure.ConstructionSection, icon: "jg_sgld", text: "施工路段" },
+  // { key: RoadStructure.Downhill, icon: "jg_road_u", text: "下坡" },
+  // { key: RoadStructure.Uphill, icon: "jg_sp", text: "上坡" },
+  // { key: RoadStructure.RoadsideGutter, icon: "jg_lpsg", text: "路边水沟" },
+  // { key: RoadStructure.RoadsAndRails, icon: "jg_dltlpjk", text: "道路与铁..." },
   { key: RoadStructure.ZebraCrossing, icon: "jg_bmx", text: "斑马线" },
-  { key: RoadStructure.Bridge, icon: "jg_q", text: "桥" },
-  { key: RoadStructure.Tunnel, icon: "jg_sd", text: "隧道" },
-  { key: RoadStructure.Sidewalk, icon: "jg_rxd", text: "人行道" },
-  { key: RoadStructure.ConstructionSection, icon: "jg_sgld", text: "施工路段" },
-  { key: RoadStructure.Downhill, icon: "jg_road_u", text: "下坡" },
-  { key: RoadStructure.Uphill, icon: "jg_sp", text: "上坡" },
-  { key: RoadStructure.RoadsideGutter, icon: "jg_lpsg", text: "路边水沟" },
-  { key: RoadStructure.RoadsAndRails, icon: "jg_dltlpjk", text: "道路与铁..." },
-  { key: RoadStructure.FireHydrantWell, icon: "jg_xfsj", text: "消火栓井" },
-  { key: RoadStructure.Gullies, icon: "jg_ysk", text: "雨水口" },
-  { key: RoadStructure.RoadPotholes, icon: "jg_lmak", text: "路面凹坑" },
-  { key: RoadStructure.ProtrudingRoad, icon: "jg_lmtcbf", text: "路面凸出..." },
-  { key: RoadStructure.WaterOnTheRoad, icon: "jg_lmjs", text: "路面积水" },
+  { key: "jg_xfsj.svg", icon: "jg_xfsj", text: "消火栓井" },
+  { key: "jg_ysk.svg", icon: "jg_ysk", text: "雨水口" },
+  { key: "jg_lmak.svg", icon: "jg_lmak", text: "路面凹坑" },
+  { key: "jg_lmtcbf.svg", icon: "jg_lmtcbf", text: "路面凸出..." },
+  { key: "jg_lmjs.svg", icon: "jg_lmjs", text: "路面积水" },
 ];
 
 export const templateMenusRaw = [
@@ -178,9 +179,14 @@ export const mainMenusRaw: MenusRaw = [
       { key: UIType.TwoEdgeTwoLanRoad, icon: "road_dd", text: "" },
       // { key: UIType.TwoEdgeThreeLanRoad, icon: "road_dt", text: "" },
       { key: UIType.CurveRoad, icon: "road_wl", text: "" },
-      // { key: UITypeExtend.structure, icon: 'r_template', text: '道路结构', extend: structureMenusRaw },
+      {
+        key: UITypeExtend.structure,
+        icon: "r_template",
+        text: "道路结构",
+        extend: structureMenusRaw,
+      },
+      // { key: 'ZebraCrossing', icon: 'r_template', text: '道路结构'},
       // { key: 'ZebraCrossing', icon: 'r_template', text: '道路结构'},
-      { key: 'ZebraCrossing', icon: 'r_template', text: '道路结构'},
       {
         key: UITypeExtend.template,
         icon: "r_structure",