vue项目 使用svg渲染地图 并添加点击事件，下拉框选中区域，动态改变地上对应区域的背景颜色（按百分比渲染背景颜色）
vue项目 使用svg渲染地图 并添加点击事件，下拉框选中区域，动态改变地上对应区域的背景颜色（按百分比渲染背景颜色）
·
需求： 根据下拉框选择的地点，对应的地图区域背景颜色改变，
给了一张地图的svg，前端需要渲染出来并添加对应的点击事件，选中区域，根据接口返回的 percent （百分比）字段 ，背景渲染不同的颜色
颜色值换算：故障率%5=N，取对应颜色数组第N+1个颜色填充
实现效果：
实现思路：
1.拿到需要渲染的 svg图片，把其中path的值复制过来，所有数据一起组成一个新的json文件
代码：
{
"svgArr": [
{
"d": "M5.962,41.742 C5.627,41.15 5.115,40.249 4.551,39.256 C3.941,38.574 4.245,37.445 4.817,36.625 C5.254,35.999 5.532,35.42 5.941,34.575 C6.162,34.117 6.642,33.622 6.486,33.303 C5.816,31.933 6.433,29.23 5.111,29.201 C5.849,27.011 5.214,24.857 4.277,22.871 C3.786,21.83 3.213,20.784 2.977,19.676 C2.665,18.215 2.043,17.964 3.858,16.813 C4.67,16.186 5.424,16.044 5.584,15.02 C5.726,14.103 5.428,13.567 4.712,12.818 C3.881,11.947 4.286,10.057 3.4,9.139 C2.491,8.197 1.907,5.594 1.764,3.88 C1.736,3.544 1.234,3.379 0.96,3.133 L0.96,2.484 C1.584,2.292 2.274,1.827 2.82,1.959 C4.296,2.315 5.044,1.463 5.827,0.537 L7.449,0.537 C9.231,1.509 11.072,2.389 12.766,3.494 C13.537,3.997 13.994,4.967 14.637,5.685 C15.218,6.334 15.845,6.942 16.473,7.546 C18.985,9.962 21.479,12.398 24.033,14.767 C25.163,15.815 26.463,16.676 27.612,17.705 C28.575,18.569 29.43,19.552 30.358,20.509 C29.788,21.432 29.141,22.391 28.586,23.401 C27.44,25.484 27.854,27.259 29.857,28.488 C31.535,29.517 33.296,30.41 35.046,31.378 C34.709,32.605 34.654,33.876 34.044,34.767 C33.167,36.047 32.063,37.371 30.738,38.099 C28.602,39.273 26.25,40.119 23.905,40.824 C22.537,41.236 20.966,40.942 19.558,41.271 C18.504,41.518 17.563,42.252 16.417,42.85 C14.225,41.245 12.517,43.333 10.718,44.336 C9.593,44.963 9.227,44.23 8.581,43.824",
"gIFAG": false,
"name": "市北",
"textX": "70",
"textY": "85"
},
{
"d": "M84.2047,190.048 C83.1727,188.298 82.1157,186.563 81.1167,184.795 C80.1827,183.141 79.3767,181.411 78.3627,179.811 C78.1097,179.411 77.2837,179.267 76.6997,179.205 C74.1827,178.939 74.9707,178.526 73.3377,177.2 C71.7907,176.153 71.5137,177.384 70.6837,175.768 C70.8987,174.816 71.0627,174.249 71.1447,173.671 C71.1967,173.306 71.1237,172.924 71.1107,172.55 C71.0407,170.603 70.9507,168.938 69.0437,167.429 C67.8387,166.474 67.7857,164.054 67.2457,162.281 C67.1147,161.849 67.0737,161.382 67.0467,160.927 C67.0237,160.538 66.9247,159.949 67.1297,159.783 C68.9177,158.332 68.5607,156.457 68.1777,154.626 C67.6397,152.05 67.9797,151.325 70.4297,150.586 C71.5767,150.239 72.7947,150.088 73.8957,149.639 C75.1377,149.133 76.2917,148.407 77.4667,147.745 C77.8847,147.51 78.2137,147.042 78.6497,146.923 C80.8727,146.317 83.1167,145.79 85.4237,145.217 C85.7147,146.279 86.5757,146.152 86.7887,146.935 C87.7017,146.486 87.8287,147.107 88.6107,146.803 C88.8197,146.722 90.1477,146.638 90.2047,146.811 C90.6367,148.117 90.9927,148.101 92.1507,148.294 C92.7287,148.39 93.0207,148.365 93.5407,148.638 C96.7677,147.971 98.8267,147.625 101.6717,147.669 C101.7737,147.671 101.9247,147.709 101.9687,147.782 C103.2217,149.833 105.1917,148.76 106.8827,148.939 C108.8537,149.147 110.8607,149.255 112.7707,149.734 C115.1557,150.331 116.7627,152.159 118.3337,153.949 C118.9477,154.649 119.5857,155.34 120.2927,155.941 C122.2017,157.565 124.1217,159.329 124.4267,161.87 C124.6637,163.842 124.4837,166.06 123.7887,167.904 C122.6057,171.047 122.6447,173.807 124.6417,176.534 C125.2017,177.299 125.5947,178.185 126.0637,179.015 L126.0637,179.34 C123.2617,179.322 120.4547,179.393 117.6567,179.267 C111.5607,178.994 105.6047,179.48 99.9037,181.888 C94.5357,184.156 89.1547,186.385 84.5297,190.048 L84.2047,190.048 Z",
"gIFAG": false,
"name": "奉贤",
"textX": "91",
"textY": "167"
},
{
"d": " M35.2989,87.3449 C36.3919,88.1199 37.9269,88.8389 37.7519,90.6639 C37.6969,91.2269 37.6459,91.7899 37.5909,92.3529 C37.4949,93.3539 37.3969,94.3549 37.2619,95.7349 C38.1819,95.1079 38.6339,94.7999 39.1099,94.4759 C39.9339,95.9779 40.7259,97.3489 41.4269,98.7649 C41.5449,99.0039 41.2979,99.4499 41.1659,99.7779 C41.0139,100.1549 40.8019,100.5059 40.6159,100.8689 C40.7939,100.7589 40.9729,100.6489 41.1519,100.5389 C41.5879,101.2049 42.0629,101.8499 42.4509,102.5429 C43.2629,103.9939 45.1439,104.4329 46.6829,103.7809 C48.0699,103.1929 49.5939,102.9209 51.0659,102.5389 C51.2449,102.4929 51.4739,102.6239 51.6769,102.6819 C53.7629,103.2779 54.6609,103.7539 56.7229,104.3439 C57.1959,104.4379 58.0989,105.3759 58.2469,105.7709 C59.3839,108.8049 61.8449,109.2599 64.2229,107.0209 C64.5759,106.6889 65.2029,106.3509 65.5069,106.7249 C65.9469,107.2679 66.1869,106.7479 66.2639,106.8459 C67.1659,107.9999 67.9999,106.4719 68.6469,105.7869 C69.1119,105.2929 69.8549,105.0629 70.2809,104.8239 C69.1719,103.9699 68.0319,103.5329 67.7679,102.7859 C67.3869,101.7109 66.9029,101.4809 65.9199,101.5229 C65.1009,101.5569 63.0759,99.0599 63.3519,98.3539 C63.9629,96.7929 64.6639,95.2679 65.3219,93.7259 C65.4649,93.3909 65.7369,93.0209 65.6849,92.7119 C65.4729,91.4409 65.1439,89.9739 64.7969,89.0359 C64.1509,87.2879 65.3219,85.5119 64.6259,85.2859 C64.2919,85.1779 64.3339,84.5989 64.1749,84.2579 C63.4079,82.6099 62.5609,80.9939 61.8949,79.3059 C61.5859,78.5239 61.5669,77.6569 62.6129,77.1159 C64.9509,75.9079 65.1479,74.3929 63.7369,72.1829 C62.9449,70.9429 62.5489,69.4239 62.1079,67.9899 C61.5849,66.2919 61.2049,64.5499 60.7649,62.8379 C57.8939,63.9939 55.4449,64.9819 52.9259,65.9969 C52.5129,65.0229 52.2099,64.3059 51.8449,63.4469 C51.5039,63.8539 51.0779,64.1249 51.0669,64.4109 C50.9979,66.2219 49.9239,66.3249 48.5199,66.0879 C48.2309,66.0389 47.8019,66.2679 47.5759,66.5019 C46.5709,67.5439 45.0049,68.0589 44.6649,69.7599 C44.5919,70.1249 43.8839,70.4699 43.4049,70.6199 C42.8549,70.7909 42.1869,70.6119 41.6549,70.8099 C41.0439,71.0379 40.5239,71.5129 39.9649,71.8809 C40.3629,72.3139 40.7379,72.7719 41.1679,73.1699 C41.4209,73.4029 41.7619,73.5399 42.1069,73.7459 C41.9009,74.0619 41.8049,74.4069 41.6039,74.4869 C40.1649,75.0529 39.9229,75.8099 41.0279,76.9849 C41.2389,77.2099 41.2749,77.8079 41.1349,78.1199 C40.6449,79.2189 40.0429,80.2689 39.4839,81.3369 C39.6069,81.4159 39.7309,81.4939 39.8549,81.5729 C38.5009,82.2629 37.1479,82.9529 36.2219,83.4259 C35.7509,84.2039 35.5369,84.6789 35.2159,85.0659 C34.5489,85.8689 34.0049,86.4269 35.2989,87.3449 Z",
"gIFAG": false,
"name": "嘉定",
"textX": "48",
"textY": "85"
},
{
"d": "M94.2252,144.32 C94.3272,143.899 94.4482,143.481 94.5252,143.055 C94.6852,142.172 94.8952,141.286 94.9202,140.397 C94.9282,140.152 94.3882,139.824 94.0402,139.655 C93.6252,139.454 92.8112,139.454 92.7652,139.239 C92.6612,138.755 92.7912,138.11 93.0612,137.676 C93.9202,136.295 94.8872,134.981 95.6142,133.929 C95.1212,133.713 94.4122,133.402 93.7012,133.09 C94.2712,132.341 94.8412,131.592 95.4112,130.843 C95.5392,130.912 95.6682,130.981 95.7972,131.049 C95.4182,130.177 95.0392,129.306 94.7122,128.552 C92.3092,128.197 90.9942,127.773 88.7022,127.434 C88.9002,127.544 87.9482,127.277 87.7112,127.342 C87.3372,127.217 86.9132,127.309 86.5702,127.205 C84.8552,126.68 84.8532,126.232 84.4832,126.593 C84.2942,126.778 83.9302,127.497 83.6412,127.499 C83.0782,127.501 83.0232,128.705 82.3562,128.581 C82.4952,127.83 82.7012,127.161 82.7272,126.485 C82.7882,124.902 80.6332,122.479 79.5652,123.202 C76.9402,124.98 73.2482,124.424 71.1042,122.683 C70.1042,123.581 70.5732,124.77 69.4242,125.127 C67.5312,125.714 65.2282,128.153 67.2852,129.785 C68.9252,130.436 69.8822,131.225 69.7282,132.388 C69.4972,134.141 67.2722,137.267 64.7142,137.77 C64.7142,139.732 64.3872,140.607 64.4752,142.594 C64.5002,143.175 63.7862,145.106 64.4512,145.647 C64.5382,147.375 63.8382,148.238 64.2812,150.301 C65.7972,151.314 67.1542,151.796 68.9032,151.047 C70.9682,150.161 73.2192,149.72 75.3422,148.955 C76.2732,148.619 77.0782,147.943 77.9542,147.446 C78.7812,146.978 79.5912,146.447 80.4732,146.117 C81.5092,145.731 82.6362,145.596 83.6842,145.238 C85.7212,144.544 86.0382,144.673 86.6882,146.705 C86.7482,146.892 86.8652,147.061 86.9592,147.245 C87.6232,146.957 88.1902,146.588 88.8032,146.485 C89.2582,146.408 90.1102,146.552 90.2042,146.811 C90.8472,148.566 92.4982,148.445 93.7522,148.533 C94.6522,148.597 96.1302,148.444 96.3542,146.957 C96.5012,145.988 96.4852,144.995 96.5422,143.992 C96.3042,144.046 95.8982,144.161 95.4842,144.222 C95.0682,144.283 94.6452,144.29 94.2252,144.32",
"gIFAG": false,
"name": "市南",
"textX": "75",
"textY": "140"
},
{
"d": "M117.4606,77.0158 C114.4496,75.3908 111.3016,74.1018 107.9786,73.1458 C105.0436,72.3018 102.3286,70.7038 99.4056,69.7968 C97.0626,69.0708 95.7486,67.7508 95.1956,65.4348 C95.0436,64.7958 94.6666,63.8828 94.1746,63.7078 C92.4096,63.0828 90.5596,62.6838 88.7216,62.2938 C88.4096,62.2268 87.8466,62.5348 87.6796,62.8288 C87.5326,63.0868 87.6566,63.6718 87.8756,63.9298 C88.3206,64.4528 88.9086,64.8538 89.4426,65.2998 C90.5096,66.1908 91.7496,66.9388 92.6136,67.9948 C94.3856,70.1608 96.2916,72.0518 98.6876,73.5998 C104.4736,77.3398 110.0796,81.3578 115.7756,85.2378 C118.0256,86.7698 120.0546,88.4458 120.8866,91.2028 C121.0646,91.7908 121.4646,92.3848 121.9196,92.8048 C123.2676,94.0498 124.7926,93.5188 125.1376,91.7198 C125.3106,90.8208 125.3966,89.9068 125.5496,88.7898 C125.3526,87.9248 125.0466,86.8908 124.8886,85.8348 C124.2196,81.3618 121.0636,78.9598 117.4606,77.0158",
"gIFAG": false,
"name": "长",
"textX": "110",
"textY": "80"
},
{
"d": "M103.568,68.9728 C102.471,66.5238 99.412,64.3548 96.641,64.9878 C97.448,67.0258 100.835,69.8248 102.679,70.0618 C103.565,70.1758 103.964,69.8558 103.568,68.9728 Z",
"gIFAG": false,
"name": "兴",
"textX": "118",
"textY": "85"
},
{
"d": "M145.6187,186.4055 C144.9197,184.8935 144.3477,183.3045 143.4847,181.8935 C142.7427,180.6825 141.6187,180.1125 139.9737,180.1415 C135.5647,180.2195 131.1437,180.0875 126.7447,179.7995 C126.0087,179.7505 125.2507,178.5705 124.6767,177.7865 C122.8987,175.3595 121.7887,172.7885 122.6787,169.6255 C123.3337,167.2985 123.8387,164.8915 124.0387,162.4895 C124.1227,161.4825 123.3047,160.3655 122.7847,159.3575 C122.4357,158.6815 121.8857,158.1105 121.4317,157.4885 C121.2517,157.2415 121.1287,156.9385 120.9087,156.7405 C118.7737,154.8315 116.6387,152.9235 114.4737,151.0475 C112.5937,149.4175 110.1837,149.5535 107.9387,149.2675 C106.4077,149.0715 104.8337,149.2285 103.2797,149.1945 C102.9787,149.1885 102.5377,149.1245 102.4027,148.9245 C101.1817,147.1195 99.4217,147.6835 97.7667,147.8225 C97.1347,147.8755 96.5107,148.0325 95.6477,148.1825 C95.8107,146.5565 95.9567,145.0955 96.1027,143.6375 C94.2117,143.9515 93.8637,143.6195 94.1307,141.7475 C94.2627,140.8235 94.7527,139.8525 93.9027,139.4275 L92.0097,139.4275 C92.1677,138.9775 92.3247,138.5265 92.4827,138.0765 C93.1367,136.2285 94.2487,134.8115 96.2157,133.8955 C95.5437,133.8065 94.8697,133.7295 94.2007,133.6265 C93.7887,133.5635 93.3837,133.4595 92.9757,133.3735 C93.2797,132.9535 93.5207,132.4595 93.9067,132.1375 C94.2317,131.8655 94.7247,131.7945 95.1807,131.6205 C94.7587,130.4985 94.3257,129.3485 93.8437,128.0665 C93.3777,128.2705 92.9177,128.4725 92.8327,128.5095 C91.8227,128.1445 91.1077,127.7635 90.3497,127.6375 C88.9577,127.4065 87.5347,127.3715 86.1397,127.1575 C85.5977,127.0745 85.0947,126.7285 84.7197,126.5655 C83.8157,127.3475 82.9457,128.1005 82.0757,128.8545 C81.8917,128.7865 81.7077,128.7185 81.5237,128.6505 C82.5737,127.0225 81.7897,125.8505 81.0157,124.5495 C80.3507,123.4315 79.2577,122.3495 80.3827,121.2195 C80.8207,120.7795 81.0777,119.0775 80.9297,118.3905 C80.3787,115.8335 80.6677,115.2825 83.2167,114.6115 C85.3737,114.0435 85.7647,112.6655 86.4597,111.1335 C86.7837,110.4195 85.9647,109.1715 85.2777,108.2035 C84.4117,106.9845 84.6057,105.0565 86.6647,105.4015 C87.1417,105.4815 87.6247,105.1755 88.1027,105.1865 C90.1817,105.2345 94.8587,99.8005 94.5867,100.3105 C94.3207,100.8115 94.8267,98.8005 94.7527,98.2145 C94.5197,96.3665 94.1347,94.7495 94.0467,92.8995 C93.9527,90.9615 93.3327,90.1985 91.5787,89.4525 C90.1647,88.8505 88.5057,87.6665 87.8107,86.8365 C86.9107,86.3075 86.4327,84.0435 86.9237,82.8415 C87.3177,81.8765 87.7497,80.8925 88.3697,80.0725 C88.6187,79.7435 89.4797,79.6235 89.9557,79.7655 C92.8697,80.6335 95.8477,81.3895 98.6167,82.6095 C100.7137,83.5335 102.5807,85.0245 104.4617,86.3855 C108.2067,89.0945 112.0457,91.7085 115.5377,94.7195 C117.4457,96.3635 118.8877,98.6365 120.2497,100.8065 C122.8667,104.9725 125.1967,109.3195 127.8137,113.4855 C128.8737,115.1725 130.3937,116.5665 131.6717,118.1205 C135.0327,122.2105 138.4067,126.2895 141.7157,130.4215 C143.8237,133.0535 146.1297,135.5975 147.7847,138.5025 C149.2847,141.1365 150.2367,144.1465 151.0397,147.0975 C151.9247,150.3515 152.3907,153.7205 152.9857,157.0505 C153.2047,158.2765 153.2707,159.5295 153.4067,160.7705 L153.4067,169.8565 C153.2437,170.3865 153.0647,170.9115 152.9227,171.4475 C152.3007,173.7955 150.4627,175.2225 148.8397,176.8005 C147.8197,177.7905 147.0107,178.6935 148.1307,180.1765 C148.5767,180.7695 148.5687,181.6855 148.9387,182.3595 C149.7277,183.7935 149.9027,184.9215 147.9837,185.5355 C147.5767,185.6665 147.2697,186.1075 146.9167,186.4055 L145.6187,186.4055 Z",
"gIFAG": false,
"name": "浦东",
"textX": "115",
"textY": "135"
},
{
"d": "M24.8409,123.7687 C24.9169,123.6357 25.0799,123.4847 25.0569,123.3727 C24.5019,120.7537 26.5509,121.3517 27.8299,121.2337 C29.3459,121.0947 29.8259,120.6877 29.5899,119.1937 C29.1529,116.4177 28.5849,113.6567 28.2839,110.8657 C27.9529,107.8037 27.8609,104.7157 27.6659,101.6597 C28.5459,101.3977 29.1269,101.3577 29.5289,101.0697 C29.9609,100.7607 30.3189,100.2587 30.5309,99.7647 C30.6879,99.4007 30.4449,98.8687 30.5929,98.4957 C30.7409,98.1217 31.1059,97.7257 31.4689,97.5897 C31.6569,97.5197 32.1459,97.9367 32.3269,98.2377 C32.6889,98.8397 32.9319,99.5137 33.3089,100.3437 C34.1509,99.4147 34.5549,97.9797 35.9019,98.5377 C37.3989,99.1567 39.5209,101.3187 40.6159,100.1197 C41.8409,98.7757 41.9339,100.4447 42.3679,101.6477 C42.6569,102.4527 45.2249,103.8277 46.0039,103.2447 C46.9179,102.5607 48.4189,101.8037 49.6459,102.2667 C52.6339,101.1367 49.6119,101.7567 52.2429,103.0897 C51.7439,103.8657 52.2669,105.0607 51.6269,106.0567 C54.3189,106.5297 54.0529,108.7057 54.4519,110.4977 C54.8259,112.1787 54.2799,112.4097 56.1819,113.4657 C56.3319,113.1997 57.4279,112.9077 57.6789,112.6467 C58.4639,111.8337 58.5699,112.9397 59.1659,114.2007 C60.1549,116.2887 61.1859,118.4957 62.3499,120.7707 C60.4149,121.1737 59.8429,120.9037 58.4049,121.4097 C56.9159,121.9347 56.7289,122.2477 57.4989,123.2007 C57.7619,123.5267 57.6939,124.0757 57.7789,124.5107 C56.3359,124.6677 55.4819,125.4297 54.2159,125.3067 C53.6269,125.2487 52.1279,125.8587 51.8399,126.9097 C51.4829,128.2107 50.2109,127.7477 49.1079,127.9077 C49.3989,126.6077 49.6609,125.4377 49.9019,124.3647 C47.9019,124.0877 45.9039,123.8117 43.7679,123.5167 C43.8269,124.6487 43.8989,126.0137 43.9519,127.0217 C42.6309,128.6437 41.9829,130.9807 40.5939,132.6847 C39.4959,132.1737 37.6479,130.7217 36.1999,130.3527 C34.7259,129.9777 33.8819,129.5037 33.2729,131.2197 C32.8359,132.4517 32.9349,133.4567 34.2269,133.9847 C35.3089,134.4267 36.3409,136.3767 36.2129,138.0017 C34.6649,137.5727 32.8879,138.8667 31.5429,137.1087 C30.1669,137.9227 30.1429,138.1997 31.3689,139.0697 C32.8679,140.1337 33.1259,143.4377 31.9919,144.1227 C33.1039,145.3877 33.7179,146.7077 33.6969,148.0907 C33.6689,150.0347 33.1099,152.2297 32.2289,153.9347 C31.6659,155.0237 30.2659,155.4967 28.9939,156.1067 C28.7649,156.2167 27.5179,155.0647 27.1029,154.6187 C26.6589,154.1417 26.3089,153.5777 26.1029,153.2997 C24.8529,155.0227 23.8029,156.5787 22.5899,157.9927 C22.4529,158.1517 21.3879,157.5157 20.7639,157.1077 C20.0429,156.6877 18.8209,156.3727 18.7049,155.8257 C18.4699,154.7117 17.3629,153.3057 19.0509,152.2657 C19.2779,152.1257 19.3229,151.4517 19.2309,151.0797 C18.8889,149.6977 17.9119,148.5407 18.1169,146.9177 C18.1809,146.4097 17.0309,145.2657 16.4139,145.2487 C14.8329,145.2047 14.1409,144.4197 13.6349,143.1397 C13.5389,142.8967 13.1919,142.7527 12.7289,142.3727 C12.8569,143.2997 12.9449,143.9407 13.0509,144.7077 C12.4179,144.7867 11.8549,144.8567 11.2179,144.9357 C11.6119,146.0207 11.1049,146.3537 10.1549,146.0137 C8.9259,145.5737 7.2979,146.3387 6.4399,144.7907 C6.2729,144.4907 5.9819,144.2127 5.9409,143.8997 C5.7809,142.6867 5.8439,141.4287 5.5569,140.2527 C5.0009,137.9747 5.3019,135.8957 6.6799,133.4367 C5.4889,132.5637 4.1639,131.5917 2.8379,130.6217 C2.7979,130.5927 2.7219,130.5597 2.6929,130.5777 C1.6649,131.2147 0.5839,130.5517 0.5079,129.8777 C0.4149,129.0537 1.1829,128.1267 1.5989,127.2537 C1.6879,127.0677 1.9639,126.9367 1.9879,126.7587 C2.3829,123.8457 4.5069,124.0227 6.6079,124.1417 C6.9609,124.1617 7.4019,124.2767 7.6549,124.1167 C10.4189,122.3617 13.0129,123.7317 15.6859,124.4157 C18.0879,125.0317 20.4899,125.2407 22.6749,123.5157 C23.1029,123.1767 23.9649,123.3877 24.6269,123.3457 C24.6979,123.4867 24.7699,123.6277 24.8409,123.7687 Z",
"gIFAG": false,
"name": "青浦",
"textX": "30",
"textY": "125"
},
{
"d": "M66.5221,127.3674 L65.5491,127.3674 C65.0961,126.4794 64.6241,125.6014 64.1941,124.7024 C63.0811,122.3694 62.0231,120.0094 60.8701,117.6964 C59.9831,115.9154 58.9861,114.1904 57.9941,112.3604 C55.7891,114.4174 54.8601,114.3514 53.8451,112.1654 C53.3151,111.0244 53.0681,109.7424 52.7741,108.5054 C52.4801,107.2684 52.2051,106.0764 50.6221,105.9514 L50.6221,104.9774 C51.1881,104.2764 51.7941,102.5554 52.2681,102.6134 C53.5431,102.7664 54.6781,102.5864 55.8131,103.2624 C56.3141,103.5604 57.4071,104.4214 57.7321,105.0214 C59.0031,107.3684 61.6271,108.7834 63.2711,106.6704 C63.5641,106.2914 64.3731,105.7994 64.5431,105.9214 C65.8351,106.8444 66.5361,105.8004 67.5911,105.4114 C69.0831,104.8614 69.0041,103.9654 69.0921,102.8554 C69.1201,102.5074 69.3561,102.0504 69.6401,101.8754 C70.1501,101.5604 70.8821,101.5544 71.3211,101.1824 C72.5211,100.1664 73.4621,100.5114 74.4331,101.8084 C75.5321,99.8454 77.1681,99.4654 79.1091,99.5464 C80.0521,99.5854 81.0161,99.1424 81.9701,98.9124 C83.2031,98.6154 84.4851,98.7294 85.5801,97.6764 C86.3431,96.9414 87.8041,96.9634 88.6491,96.2744 C90.5211,94.7474 92.5721,93.2224 92.4811,90.3754 L93.1301,90.3754 C93.7641,91.0444 93.8541,92.4064 94.1351,93.7374 C94.3811,94.8964 94.3691,96.7084 94.7521,97.8394 L94.7521,100.1104 C92.4461,102.9364 89.8901,105.0964 85.8671,105.1534 C84.1201,105.1784 83.9361,106.3414 85.0721,107.7274 C86.9251,109.9894 87.0631,110.7394 85.3701,113.0774 C84.7781,113.8954 83.6621,114.4374 82.6771,114.8454 C80.7621,115.6394 80.4231,116.1874 80.8981,118.2414 C81.1591,119.3714 81.1231,120.4394 80.2291,121.4004 C79.7541,121.9114 79.5491,122.6734 79.0381,123.6854 C78.0161,124.1024 76.5891,125.1784 75.2281,125.1014 C73.8541,125.0234 71.7911,124.9384 71.5691,122.3784 C71.2341,122.8174 71.0991,122.9574 71.0071,123.1214 C70.1231,124.7064 69.1151,126.1234 67.1431,126.4964 C66.8901,126.5444 66.7271,127.0654 66.5221,127.3674",
"gIFAG": false,
"name": "市区",
"textX": "70",
"textY": "112"
},
{
"d": "M104.0846,57.5524 C104.9986,57.5214 105.8976,58.0354 106.7456,58.2914 C108.3816,58.7864 110.0906,59.0434 111.6186,59.8714 C112.3556,60.2704 113.0096,60.7094 113.7376,61.1504 C114.4976,61.6114 115.4036,61.8364 116.2496,62.1934 C116.9786,62.5024 117.7586,62.8634 118.4666,63.2174 C118.9486,63.4574 119.2076,63.8814 119.6376,64.1614 C120.2716,64.5754 121.1536,64.8404 121.8646,65.1024 C122.3226,65.2704 122.7696,65.4514 123.2186,65.6434 C123.8376,65.9074 124.3056,66.7524 124.9896,66.8594 C125.3046,66.9084 125.4866,66.6594 125.7956,66.8564 C126.2856,67.1674 126.1836,67.8284 126.7326,68.1564 C127.4136,68.5634 128.2166,68.9114 129.0016,69.0284 C129.8396,69.1524 130.6316,69.4094 131.4656,69.5734 C131.9096,69.6604 132.2246,69.4604 132.6376,69.3604 C132.8356,69.7724 132.4346,70.1644 132.6026,70.5114 C133.0126,71.3664 133.7286,71.2674 134.4716,71.3414 C135.1236,71.4054 135.2946,71.0474 135.8966,70.9004 C136.2266,70.8204 136.6026,70.8304 136.9286,70.7524 C137.4246,70.6344 138.0166,70.5994 138.5256,70.6264 C138.8706,70.6434 139.2596,70.8954 139.5816,70.8814 C140.2066,70.8534 141.0056,69.5744 141.0676,69.0294 C141.1086,68.6604 141.0336,68.3044 141.1266,67.9444 C141.2086,67.6364 141.3766,67.3264 141.4696,67.0184 C141.8596,66.9114 141.8596,66.4894 142.1376,66.2594 C142.4066,66.0364 142.8036,65.8384 143.1356,65.7394 C144.1346,65.4424 144.5966,65.8284 145.4586,66.2084 C145.9426,66.4214 147.0796,66.8234 147.2236,66.0264 C147.3146,65.5274 147.0626,65.5564 147.5306,65.1894 C147.8216,64.9604 148.1596,64.8304 148.4916,64.6344 C149.8516,63.8304 149.6926,62.1284 150.1296,60.8054 C150.3426,60.1584 150.7046,59.4434 150.6696,58.7874 C150.6286,57.9894 150.5686,57.1384 150.6206,56.3244 C150.6636,55.6474 150.9346,54.8334 150.6346,54.3044 C150.2156,53.5714 149.6396,53.0084 149.2296,52.2884 C148.9396,51.7814 148.7726,51.6654 148.2636,51.4404 C147.9666,51.1264 147.8236,50.5154 147.4716,50.1554 C147.1046,49.7774 146.5966,49.7144 146.1506,49.4194 C145.8126,49.1954 145.5296,48.8234 145.1916,48.6244 C144.7756,48.3804 144.2246,48.3744 143.7766,48.2004 C143.4156,48.0594 143.1076,47.8834 142.7916,47.7194 C142.0956,47.3634 141.2716,47.2594 140.5336,47.0554 C139.0156,46.6344 137.3566,46.3094 135.8366,45.8954 C135.2816,45.7434 134.7436,45.5194 134.1736,45.4904 C133.4736,45.4554 132.8336,45.5514 132.1526,45.4504 C131.2806,45.3234 130.3496,45.2584 129.5006,45.0404 C128.6326,44.8164 127.9256,44.1904 127.0336,44.0134 C126.0946,43.8264 125.3686,43.5214 124.4766,43.1144 C123.0346,42.4554 121.5176,41.4674 119.9806,41.1184 C119.1486,40.9304 118.2346,41.1464 117.3816,41.0584 C116.7946,40.9984 116.4026,40.9544 115.9386,40.6124 C115.4426,40.2474 115.0296,39.7544 114.4756,39.4714 C113.8576,39.1564 113.2436,39.1254 112.5836,38.9924 C111.9686,38.8684 111.4326,38.4304 110.8706,38.1174 C107.7836,36.4004 104.8086,34.5954 101.8176,32.6484 C100.4566,31.7624 99.0226,30.8724 97.6836,29.9924 C97.0086,29.5484 96.3466,29.2184 95.5416,28.9324 C94.5736,28.5884 94.0806,28.1414 93.2916,27.5684 C91.9086,26.5654 90.9996,24.9514 89.4686,24.2034 C88.7026,23.8294 87.9346,23.3914 87.1946,23.0324 C86.5166,22.7024 85.7686,22.4924 85.1286,22.0994 C84.3776,21.6374 83.5076,21.3994 82.8936,20.7504 C82.2886,20.1114 81.9166,19.2984 81.4516,18.5614 C81.4886,18.5694 81.5796,18.5884 81.6156,18.5944 C81.1876,18.4324 80.7866,18.2364 80.3386,18.1204 C79.9206,18.0124 79.4196,18.0364 79.0316,17.8534 C78.4076,17.5584 77.9576,17.1064 77.2446,16.9314 C76.5606,16.7634 76.0556,16.6054 75.5366,16.0884 C74.6226,15.1784 73.6946,13.8094 73.2576,12.5974 C72.9816,11.8354 72.9306,10.9204 72.4126,10.2634 C71.7566,9.4314 70.7586,9.3204 69.9286,8.7764 C68.9666,8.1444 67.9606,7.5814 66.9566,7.0214 C66.1396,6.5664 65.3206,6.1144 64.5196,5.6324 C63.9086,5.2644 63.3256,4.7044 62.6866,4.4174 C61.9366,4.0794 61.1586,3.9144 60.4256,3.5004 C59.2366,2.8254 58.2096,2.1364 57.1076,1.3154 C56.4856,0.8524 55.5586,0.3764 54.7416,0.5294 C54.0466,0.6594 53.5486,1.3124 52.8216,1.4154 C51.4576,1.6104 50.0276,1.8624 48.7836,2.4984 C48.1856,2.8054 47.7336,3.3014 47.2456,3.7684 C46.6956,4.2944 46.0236,4.5204 45.3266,4.8534 C44.6516,5.1754 44.0136,5.5914 43.3566,5.9834 C42.1036,6.7314 40.6686,7.2694 39.5266,8.2124 C38.9946,8.6514 38.7706,9.3804 38.2336,9.8784 C37.7156,10.3574 37.1056,10.7264 36.6216,11.2654 C36.2956,11.6304 36.3336,11.7904 36.2286,12.3014 C36.1426,12.7164 35.9256,13.0084 35.9786,13.4844 C36.0476,14.1054 36.5516,14.8914 36.8266,15.3944 C37.1576,16.0014 37.9866,16.3624 38.5236,16.7294 C39.1726,17.1734 39.5736,17.8664 40.0216,18.4934 C40.3096,18.8974 40.4646,19.3854 40.7466,19.7984 C41.5636,20.9954 42.4046,22.4934 43.8986,22.9474 C44.7426,23.2044 45.6246,23.2574 46.5016,23.2594 C46.8446,23.2594 47.4326,23.1234 47.7516,23.2404 C48.2976,23.4404 48.7686,23.8954 49.0946,24.3424 C49.8126,25.3234 50.8146,25.4084 51.6526,26.1874 C52.5886,27.0564 53.3756,28.0674 54.2096,29.0314 C54.3686,29.2164 54.5866,29.4834 54.7846,29.5934 C54.9726,30.2144 55.5966,30.6744 55.9626,31.2204 C56.1716,31.5324 56.3866,31.9534 56.6656,32.2074 C56.8936,32.4134 57.1956,32.5174 57.4286,32.7434 C57.9226,33.2214 58.2286,33.8524 58.6686,34.3734 C59.5426,35.4094 60.5966,35.9974 61.5916,36.8594 C62.3696,37.5334 63.2456,38.3434 64.2456,38.6444 C64.6676,38.7714 65.1326,38.8304 65.5276,39.0404 C66.1336,39.3624 66.5486,40.0564 67.0426,40.5664 C67.3106,40.8414 67.5246,41.1124 67.8906,41.2174 C68.2756,41.3264 68.7016,41.2734 69.0836,41.3914 C69.9656,41.6614 70.9516,41.8444 71.7926,42.2894 C72.5626,42.6974 73.3916,43.1414 74.0486,43.7054 C74.6636,44.2344 75.1316,44.6854 75.9806,45.0374 C76.7066,45.3384 77.4566,45.4314 78.1826,45.7724 C78.9506,46.1334 79.7436,46.3984 80.4996,46.7584 C81.7496,47.3524 82.9316,48.2374 84.1526,48.9244 C84.8976,49.3434 85.6696,49.7994 86.3716,50.2564 C86.6966,50.4694 86.9916,50.7204 87.3406,50.9214 C87.7216,51.1394 88.1276,51.1584 88.5246,51.3094 C89.2866,51.6004 90.0216,52.1464 90.7026,52.5714 C91.0136,52.7654 91.2846,53.0174 91.5886,53.2124 C91.9366,53.4344 92.3706,53.4734 92.7476,53.6514 C94.1226,54.3014 95.5786,54.9034 96.8436,55.7954 C97.6426,56.3574 98.5346,56.9844 99.4046,57.4204 C100.6726,58.0544 102.3396,57.8884 103.7096,57.5974 C103.8356,57.5714 103.9596,57.5564 104.0846,57.5524",
"gIFAG": false,
"name": "崇",
"textX": "70",
"textY": "30"
},
{
"d": "M104.0846,57.5524 C104.9986,57.5214 105.8976,58.0354 106.7456,58.2914 C108.3816,58.7864 110.0906,59.0434 111.6186,59.8714 C112.3556,60.2704 113.0096,60.7094 113.7376,61.1504 C114.4976,61.6114 115.4036,61.8364 116.2496,62.1934 C116.9786,62.5024 117.7586,62.8634 118.4666,63.2174 C118.9486,63.4574 119.2076,63.8814 119.6376,64.1614 C120.2716,64.5754 121.1536,64.8404 121.8646,65.1024 C122.3226,65.2704 122.7696,65.4514 123.2186,65.6434 C123.8376,65.9074 124.3056,66.7524 124.9896,66.8594 C125.3046,66.9084 125.4866,66.6594 125.7956,66.8564 C126.2856,67.1674 126.1836,67.8284 126.7326,68.1564 C127.4136,68.5634 128.2166,68.9114 129.0016,69.0284 C129.8396,69.1524 130.6316,69.4094 131.4656,69.5734 C131.9096,69.6604 132.2246,69.4604 132.6376,69.3604 C132.8356,69.7724 132.4346,70.1644 132.6026,70.5114 C133.0126,71.3664 133.7286,71.2674 134.4716,71.3414 C135.1236,71.4054 135.2946,71.0474 135.8966,70.9004 C136.2266,70.8204 136.6026,70.8304 136.9286,70.7524 C137.4246,70.6344 138.0166,70.5994 138.5256,70.6264 C138.8706,70.6434 139.2596,70.8954 139.5816,70.8814 C140.2066,70.8534 141.0056,69.5744 141.0676,69.0294 C141.1086,68.6604 141.0336,68.3044 141.1266,67.9444 C141.2086,67.6364 141.3766,67.3264 141.4696,67.0184 C141.8596,66.9114 141.8596,66.4894 142.1376,66.2594 C142.4066,66.0364 142.8036,65.8384 143.1356,65.7394 C144.1346,65.4424 144.5966,65.8284 145.4586,66.2084 C145.9426,66.4214 147.0796,66.8234 147.2236,66.0264 C147.3146,65.5274 147.0626,65.5564 147.5306,65.1894 C147.8216,64.9604 148.1596,64.8304 148.4916,64.6344 C149.8516,63.8304 149.6926,62.1284 150.1296,60.8054 C150.3426,60.1584 150.7046,59.4434 150.6696,58.7874 C150.6286,57.9894 150.5686,57.1384 150.6206,56.3244 C150.6636,55.6474 150.9346,54.8334 150.6346,54.3044 C150.2156,53.5714 149.6396,53.0084 149.2296,52.2884 C148.9396,51.7814 148.7726,51.6654 148.2636,51.4404 C147.9666,51.1264 147.8236,50.5154 147.4716,50.1554 C147.1046,49.7774 146.5966,49.7144 146.1506,49.4194 C145.8126,49.1954 145.5296,48.8234 145.1916,48.6244 C144.7756,48.3804 144.2246,48.3744 143.7766,48.2004 C143.4156,48.0594 143.1076,47.8834 142.7916,47.7194 C142.0956,47.3634 141.2716,47.2594 140.5336,47.0554 C139.0156,46.6344 137.3566,46.3094 135.8366,45.8954 C135.2816,45.7434 134.7436,45.5194 134.1736,45.4904 C133.4736,45.4554 132.8336,45.5514 132.1526,45.4504 C131.2806,45.3234 130.3496,45.2584 129.5006,45.0404 C128.6326,44.8164 127.9256,44.1904 127.0336,44.0134 C126.0946,43.8264 125.3686,43.5214 124.4766,43.1144 C123.0346,42.4554 121.5176,41.4674 119.9806,41.1184 C119.1486,40.9304 118.2346,41.1464 117.3816,41.0584 C116.7946,40.9984 116.4026,40.9544 115.9386,40.6124 C115.4426,40.2474 115.0296,39.7544 114.4756,39.4714 C113.8576,39.1564 113.2436,39.1254 112.5836,38.9924 C111.9686,38.8684 111.4326,38.4304 110.8706,38.1174 C107.7836,36.4004 104.8086,34.5954 101.8176,32.6484 C100.4566,31.7624 99.0226,30.8724 97.6836,29.9924 C97.0086,29.5484 96.3466,29.2184 95.5416,28.9324 C94.5736,28.5884 94.0806,28.1414 93.2916,27.5684 C91.9086,26.5654 90.9996,24.9514 89.4686,24.2034 C88.7026,23.8294 87.9346,23.3914 87.1946,23.0324 C86.5166,22.7024 85.7686,22.4924 85.1286,22.0994 C84.3776,21.6374 83.5076,21.3994 82.8936,20.7504 C82.2886,20.1114 81.9166,19.2984 81.4516,18.5614 C81.4886,18.5694 81.5796,18.5884 81.6156,18.5944 C81.1876,18.4324 80.7866,18.2364 80.3386,18.1204 C79.9206,18.0124 79.4196,18.0364 79.0316,17.8534 C78.4076,17.5584 77.9576,17.1064 77.2446,16.9314 C76.5606,16.7634 76.0556,16.6054 75.5366,16.0884 C74.6226,15.1784 73.6946,13.8094 73.2576,12.5974 C72.9816,11.8354 72.9306,10.9204 72.4126,10.2634 C71.7566,9.4314 70.7586,9.3204 69.9286,8.7764 C68.9666,8.1444 67.9606,7.5814 66.9566,7.0214 C66.1396,6.5664 65.3206,6.1144 64.5196,5.6324 C63.9086,5.2644 63.3256,4.7044 62.6866,4.4174 C61.9366,4.0794 61.1586,3.9144 60.4256,3.5004 C59.2366,2.8254 58.2096,2.1364 57.1076,1.3154 C56.4856,0.8524 55.5586,0.3764 54.7416,0.5294 C54.0466,0.6594 53.5486,1.3124 52.8216,1.4154 C51.4576,1.6104 50.0276,1.8624 48.7836,2.4984 C48.1856,2.8054 47.7336,3.3014 47.2456,3.7684 C46.6956,4.2944 46.0236,4.5204 45.3266,4.8534 C44.6516,5.1754 44.0136,5.5914 43.3566,5.9834 C42.1036,6.7314 40.6686,7.2694 39.5266,8.2124 C38.9946,8.6514 38.7706,9.3804 38.2336,9.8784 C37.7156,10.3574 37.1056,10.7264 36.6216,11.2654 C36.2956,11.6304 36.3336,11.7904 36.2286,12.3014 C36.1426,12.7164 35.9256,13.0084 35.9786,13.4844 C36.0476,14.1054 36.5516,14.8914 36.8266,15.3944 C37.1576,16.0014 37.9866,16.3624 38.5236,16.7294 C39.1726,17.1734 39.5736,17.8664 40.0216,18.4934 C40.3096,18.8974 40.4646,19.3854 40.7466,19.7984 C41.5636,20.9954 42.4046,22.4934 43.8986,22.9474 C44.7426,23.2044 45.6246,23.2574 46.5016,23.2594 C46.8446,23.2594 47.4326,23.1234 47.7516,23.2404 C48.2976,23.4404 48.7686,23.8954 49.0946,24.3424 C49.8126,25.3234 50.8146,25.4084 51.6526,26.1874 C52.5886,27.0564 53.3756,28.0674 54.2096,29.0314 C54.3686,29.2164 54.5866,29.4834 54.7846,29.5934 C54.9726,30.2144 55.5966,30.6744 55.9626,31.2204 C56.1716,31.5324 56.3866,31.9534 56.6656,32.2074 C56.8936,32.4134 57.1956,32.5174 57.4286,32.7434 C57.9226,33.2214 58.2286,33.8524 58.6686,34.3734 C59.5426,35.4094 60.5966,35.9974 61.5916,36.8594 C62.3696,37.5334 63.2456,38.3434 64.2456,38.6444 C64.6676,38.7714 65.1326,38.8304 65.5276,39.0404 C66.1336,39.3624 66.5486,40.0564 67.0426,40.5664 C67.3106,40.8414 67.5246,41.1124 67.8906,41.2174 C68.2756,41.3264 68.7016,41.2734 69.0836,41.3914 C69.9656,41.6614 70.9516,41.8444 71.7926,42.2894 C72.5626,42.6974 73.3916,43.1414 74.0486,43.7054 C74.6636,44.2344 75.1316,44.6854 75.9806,45.0374 C76.7066,45.3384 77.4566,45.4314 78.1826,45.7724 C78.9506,46.1334 79.7436,46.3984 80.4996,46.7584 C81.7496,47.3524 82.9316,48.2374 84.1526,48.9244 C84.8976,49.3434 85.6696,49.7994 86.3716,50.2564 C86.6966,50.4694 86.9916,50.7204 87.3406,50.9214 C87.7216,51.1394 88.1276,51.1584 88.5246,51.3094 C89.2866,51.6004 90.0216,52.1464 90.7026,52.5714 C91.0136,52.7654 91.2846,53.0174 91.5886,53.2124 C91.9366,53.4344 92.3706,53.4734 92.7476,53.6514 C94.1226,54.3014 95.5786,54.9034 96.8436,55.7954 C97.6426,56.3574 98.5346,56.9844 99.4046,57.4204 C100.6726,58.0544 102.3396,57.8884 103.7096,57.5974 C103.8356,57.5714 103.9596,57.5564 104.0846,57.5524 Z",
"gIFAG": false,
"name": "明",
"textX": "100",
"textY": "45"
},
{
"d": "M76.2145,179.2404 C74.9295,178.4544 73.9285,177.7104 72.8195,177.1984 C71.5705,176.6214 70.4625,175.1914 70.7245,174.2744 C70.9645,173.4374 71.4175,172.4734 71.2015,171.7344 C70.8275,170.4574 71.6405,168.8004 70.1235,167.8944 C68.8885,167.1574 68.1715,166.1564 67.9795,164.7034 C67.8055,163.3914 67.3775,162.3344 65.7195,163.4144 C65.4175,163.6114 64.8835,163.4974 64.4635,163.4594 C63.4605,163.3654 62.4555,163.2644 61.4615,163.1044 C60.7355,162.9874 60.0255,162.7714 59.3805,162.6154 C59.4035,162.6524 59.5165,162.8404 59.4215,162.8574 C57.6035,163.1694 58.4575,165.5514 57.8695,166.0754 C56.9645,166.8824 56.7815,165.2834 56.0585,164.6184 C55.5985,164.1954 55.1225,163.5284 54.6045,163.4774 C53.1565,163.3364 52.6805,162.5524 52.4185,161.2624 C52.1885,160.1294 50.2055,159.5534 49.3335,160.2044 C46.9615,161.9754 44.4275,162.8624 41.4725,161.4424 C41.3705,161.9304 41.6195,162.4034 41.1495,162.9884 C40.5255,163.2474 39.1805,162.4084 38.3845,162.1844 C38.8145,163.5854 39.2675,164.6924 37.7275,164.6774 C36.8405,164.6684 35.9545,164.6754 34.7025,164.6754 C35.0175,163.6074 35.3825,162.3674 35.7285,161.1954 C34.7395,161.0344 34.0085,160.9154 33.1805,160.7804 C32.9765,161.1284 32.7145,161.5744 32.6105,161.7514 C32.4595,162.0484 32.3845,162.3874 32.1035,162.9974 C32.0595,163.0924 31.7805,163.8274 31.3685,163.8564 C29.3145,164.0004 28.1505,164.2934 26.1005,164.4734 C24.4175,164.6204 22.7635,162.8034 23.1525,161.1244 C23.4365,159.9034 23.6525,158.6664 23.8125,157.8734 C22.3035,157.2544 21.1045,156.7624 19.7965,156.2254 C19.9745,156.9744 20.1645,157.5324 20.2275,158.1044 C20.2915,158.6904 20.2045,159.2924 20.2305,159.8854 C20.2635,160.6324 20.1095,161.5204 20.4575,162.0904 C20.9985,162.9744 20.6125,163.2844 20.0275,163.7934 C19.6415,164.1304 19.4415,164.6804 19.1565,165.1344 C19.6145,165.4074 20.0395,165.7924 20.5345,165.9324 C22.3645,166.4524 23.1275,167.7524 22.5935,169.5704 C22.4145,170.1824 22.1255,170.8064 22.1355,171.4214 C22.1535,172.4554 21.4985,172.9074 20.8605,173.5194 C19.9605,174.3824 18.7365,175.1714 19.1285,176.8194 C20.6095,176.1864 21.9045,174.6124 23.5795,176.2554 C24.0125,176.6804 24.4595,177.0914 25.0235,177.6254 C26.1075,176.1754 27.1375,174.7614 28.2185,173.3874 C28.3875,173.1734 28.7845,173.1204 29.0865,173.0304 C30.4005,172.6374 31.7175,172.2594 33.1925,171.8284 C33.3475,171.9984 33.6945,172.3774 34.0405,172.7574 C34.0905,172.6194 34.1405,172.4824 34.1905,172.3454 L36.7645,172.9064 C36.6205,173.0814 36.4775,173.2574 36.3335,173.4324 C36.6645,174.0654 36.8395,175.0104 37.3565,175.2694 C38.6625,175.9234 38.8645,176.7114 38.4055,177.9934 C37.9595,179.2394 37.6895,180.5484 37.3445,181.8294 C37.1175,182.6704 36.8955,183.5114 36.6715,184.3534 C36.5275,184.4924 36.3835,184.6314 36.2395,184.7704 C37.0155,184.9644 37.7815,185.2334 38.5695,185.3314 C39.5015,185.4474 40.4555,185.3734 41.3935,185.4564 C42.6835,185.5704 44.0125,186.4344 45.2145,185.1044 C45.3305,184.9764 46.0575,185.3994 46.1935,185.4504 C46.6945,184.9094 47.1555,183.9894 47.6745,183.9554 C48.3615,183.9094 49.2355,184.4144 49.7715,184.9444 C50.3495,185.5164 50.9025,186.3594 50.9885,187.1374 C51.2005,189.0454 52.3195,189.9694 53.8725,190.8464 C56.5315,192.3484 56.9615,193.6474 56.3065,196.5704 C56.2035,197.0304 56.2225,197.5404 56.2915,198.0124 C56.4615,199.1744 56.6305,200.3444 56.9315,201.4754 C57.0455,201.9034 57.5015,202.5404 57.8355,202.5624 C60.7925,202.7614 63.7645,203.0114 66.7145,202.8714 C67.7645,202.8224 68.9725,201.9404 69.7555,201.1064 C72.8075,197.8574 75.6205,194.3824 79.5965,192.1374 C81.0865,191.2974 82.4745,190.2754 84.0875,189.2194 C82.4125,186.2954 80.6685,183.5764 79.2725,180.6894 C78.4185,178.9234 77.4605,178.5154 76.2145,179.2404",
"gIFAG": false,
"name": "金山",
"textX": "55",
"textY": "183"
},
{
"d": "M66.4547,127.5817 C65.6617,125.9347 65.0897,124.1837 64.3537,122.5077 C63.6197,120.8327 62.7287,121.3917 60.9177,120.8327 C60.0547,120.5667 58.3227,121.1687 56.9967,122.3657 C57.1737,122.7617 57.2607,122.9937 57.3767,123.2107 C57.6037,123.6357 57.8477,124.0527 58.0837,124.4727 C57.5307,124.6507 56.9737,124.9877 56.4267,124.9727 C55.5017,124.9457 52.5617,125.0587 51.6257,127.0897 C51.1047,128.2217 50.1597,127.9277 49.1077,127.8607 C49.3667,126.5717 49.6607,125.5447 49.8717,124.4987 C47.8677,124.2727 45.9967,123.6967 43.8227,123.4507 C43.8767,124.1667 44.0437,125.6847 43.9307,126.6187 C43.8737,127.0897 43.6407,127.4787 43.3437,127.8817 C43.2287,128.0387 42.9837,128.3657 42.9817,128.4547 C42.9437,129.9497 41.8137,130.2117 40.9177,131.0417 C40.6547,131.2857 40.6637,131.8247 40.5037,132.3837 C39.1687,131.7217 37.8227,131.1767 36.6097,130.4177 C35.1387,129.4987 33.4777,129.8887 33.1697,131.5537 C32.9857,132.5507 32.5557,133.7897 34.3007,134.3867 C35.8077,134.9027 36.0937,135.9867 36.4157,137.8567 C34.9797,137.9657 34.3137,137.9867 33.0257,137.9507 C32.6947,137.9407 32.1837,137.8217 31.7057,137.2607 C31.3767,137.6527 31.0287,138.0667 30.6857,138.4747 C33.3087,141.0657 33.6257,142.8237 31.5997,144.2187 C35.1687,146.6057 32.8827,149.8477 32.8367,152.7687 C32.8037,154.8947 30.4557,154.8927 29.3027,156.0167 C29.1247,156.1897 27.9577,155.5357 27.4007,155.0787 C26.8847,154.6567 26.5727,153.9857 26.2897,153.5907 C25.5137,154.6797 24.6367,155.4967 24.2887,156.4967 C23.7987,157.9097 23.7157,159.4607 23.4227,160.9457 C23.3437,161.3447 23.1367,161.7187 22.9887,162.1037 L22.9887,164.3757 C25.3447,165.4587 27.7267,165.1647 30.1607,164.6437 C30.9267,164.4787 31.7947,164.7937 32.6167,164.8897 L33.2287,164.1307 C32.6777,163.8697 32.1267,163.6067 31.6427,163.3767 C33.3537,161.2937 33.9297,160.5847 35.7287,161.1487 C35.3057,162.2257 35.0037,164.3947 34.5357,165.5877 C35.9447,165.4457 37.1217,165.3267 38.4337,165.1937 C39.2597,164.9817 38.0097,164.8877 38.7127,164.0287 C39.9787,163.6227 38.9587,163.9437 40.4117,163.9467 C41.6337,162.5357 41.3947,162.2877 42.4417,162.8627 C43.4167,163.3977 47.9687,162.4477 48.5797,161.3537 C49.3407,159.9917 50.3187,161.3637 51.1247,160.9157 C51.2497,160.8467 52.2837,161.7807 52.3077,162.2787 C52.3787,163.7517 53.2487,164.1007 54.4257,164.3657 C54.8267,164.4567 55.1517,164.9057 55.4987,165.2057 C55.9177,165.5697 56.3237,165.9497 56.7357,166.3227 L58.3577,166.3227 C58.4577,165.2737 58.5567,164.2417 58.6297,163.4757 C58.8167,163.4377 58.9937,163.3737 59.1617,163.2937 C61.0157,163.7337 62.8117,164.2327 64.6387,164.4647 C65.2697,164.5437 65.9797,163.6917 66.7057,163.3937 C67.9397,162.8867 67.1747,162.1627 67.0317,161.4617 C66.9617,161.1217 66.9457,160.6147 67.1427,160.3977 C69.3647,157.9467 67.8787,153.8467 67.9877,151.4867 C66.3977,151.0537 65.1027,151.6757 64.6247,150.4757 C64.2907,149.6377 63.8827,149.5157 64.2287,148.7007 C64.4797,148.1067 64.7407,148.1827 65.0227,147.5937 C65.2647,147.0877 66.0347,146.2657 64.6507,145.9977 C64.4907,145.9657 64.3607,145.2977 64.3747,144.9307 C64.4637,142.5327 64.5957,140.1357 64.7147,137.7227 C64.8997,137.6727 65.0977,137.5487 65.1937,137.6037 C66.9057,138.5717 67.6737,137.4717 68.3807,136.1877 C68.8097,135.4077 69.8537,132.5757 69.9337,132.2867 C70.4567,130.3857 67.1287,128.9807 66.4547,127.5817",
"gIFAG": false,
"name": "松江",
"textX": "46",
"textY": "145"
}
]
}
2.将Json文件引入需要的页面中，将这些数据重新渲染成一个新的svg显示
3.调接口，拿到后端返回的百分比数据
返回的数据格式
<template>
<div>
<el-select
v-model="valueArea"
clearable
placeholder="全国"
@clear="handleClearArea()"
><el-option
v-for="item in subNodes"
:key="item.abbreviation"
:label="item.name"
:value="item.abbreviation"
@click.native="handleArea(index)"
></el-option
></el-select>
<div class="map">
<svg
xmlns="http://www.w3.org/2000/svg"
width="154px"
height="204px"
viewBox="0 0 160 204"
version="1.1"
class="svg"
>
<g
v-for="(item, index) in svgData"
:key="index"
@click="gClick(index)"
:style="{ transform: index == 0 ? 'translate(59px,59px)' : '',}"
>
<path
class="st0"
:d="item.d"
:style="{ fill: gIFag && gIndex == index
? colorList[Math.floor(selectPercent / 5) + 1] : '',}">
</path>
</g>
<text
:x="item.textX"
:y="item.textY"
class="text01"
:class="{ text01Active: (gTextIFag && textIndex == index) ||
(gIFag && gIndex == index),}" v-for="(item, index) in svgData"
:key="item.name" >
{{ item.name }}
</text>
</svg>
</div>
</div>
</template>
<script>
import svg from "@/assets/svg.json";
export default {
data() {
return {
subNodes: [],//下拉框数据数组
valueArea:'',
svgData: [],
gTextIFag: false,
gIFag: false,
gIndex: -1,
textIndex: -1,
selectPercent: "", //选中区域的百分比
colorList: [
"#52c41a",
"#63c219",
"#74bf19",
"#84bd18",
"#95bb18",
"#a6b917",
"#b7b616",
"#c8b416",
"#d8b215",
"#e9af15",
"#f8a119",
"#f6951e",
"#f38a23",
"#f17e28",
"#ef722c",
"#ed6631",
"#ea5b36",
"#e84f3b",
"#e64340",
],//颜色数组
subNodes: [],
};
},
methods: {
handleArea() {
this.gClick(this.valueArea);
},
gClick(value) {
this.gIFag = true;
const selectArea = this.svgData.findIndex((r) => {
if (value === "崇明") {
return r.name === "明";
}
if (value === "长兴") {
return r.name === "长";
}
return r.name === value;
});
for (let i = 0; i < this.svgData.length; i++) {
if (this.svgData[i].name == value) {
this.selectPercent = this.svgData[i].percent;
}
if (this.svgData[i].name == "明" && value == "崇明") {
this.selectPercent = this.svgData[i].percent;
}
if (this.svgData[i].name == "长" && value == "长兴") {
this.selectPercent = this.svgData[i].percent;
}
}
if (selectArea > -1) {
this.gIndex = selectArea;
} else {
this.$message.error("无此区域~");
// this.$infoMsg.showErrorMsg('', this)
}
},
// 清空事件
handleClearArea() {
this.gIFag = false;
this.gIndex = -1;
this.textIndex = -1;
},
},
//调去接口获取百分比字段
getList(){
getOverview(data).then((res) => {
if (res.data && res.data.code == "10000") {
//接口返回的数据
this.subNodes = res.data.results[0].subNodes;
//根据返回的数据格式以及需求可自行处理
for (let i = 0; i < this.svgData.length; i++) {
for (let j = 0; j < this.subNodes.length; j++) {
if (this.svgData[i].name == this.subNodes[j].abbreviation) {
this.svgData[i].percent =
this.subNodes[j].percent.split("%")[0];
}
if (
this.svgData[i].name == "明" &&
this.subNodes[j].abbreviation == "崇明"
) {
this.svgData[i].percent =
this.subNodes[j].percent.split("%")[0];
}
if (
this.svgData[i].name == "长" &&
this.subNodes[j].abbreviation == "长兴"
) {
this.svgData[i].percent =
this.subNodes[j].percent.split("%")[0];
}
}
}
}
});
}
},
mounted() {
this.svgData = svg.svgArr;
this.getList()
},
};
</script>
<style scoped>
.map {
width: 500px;
height: 500px;
}
.svg {
width: 100%;
}
.st0 {
fill: #eff1f9;
stroke: #009999;
stroke-width: 1px;
transition: all linear 0.3s;
cursor: pointer;
}
.st0Active {
fill: #52c41a;
transition: all linear 0.3s;
}
.st0:hover {
fill: #3253ff;
transition: all linear 0.3s;
}
.text01 {
display: block;
width: 12px;
height: 12px;
background-color: #7e92ff;
fill: red;
font-size: 12px;
transition: all linear 0.3s;
cursor: pointer;
}
.text01Active {
display: block;
transition: all linear 0.3s;
}
</style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献36条内容
所有评论(0)