中国制霸生成器 - 中国三十四省级行政区域制霸标记生成工具

├── .gitignore ├── README.md ├── china-ex.svg ├── cover.png ├── html ├── index.html ├── 样式.less └── 脚本.js ├── package.json ├── 生成字体子集.js └── 转译.js /.gitignore: -------------------------------------------------------------------------------- 1 | Un/* 2 | *.css 3 | package-lock.json 4 | china-ex-fixed.svg 5 | dist/* 6 | html/字体.woff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![中国制霸生成器](cover.png) 2 | # 中国制霸生成器 3 | 中国三十四省级行政区域制霸标记生成工具 4 | 5 | https://lab.magiconch.com/china-ex/ 6 | 7 | 有感兴趣画简化矢量地图的小伙伴欢迎来一起整活儿~ 8 | 9 | ## [全球版在这里！🤗](https://github.com/itorr/world-ex) 10 | 11 | ## 功能 12 | 可以在线标记居住、短居、游玩、出差、路过标记后可生成图片进行社区分享 13 | 14 | 标记过的信息会记录到本地存储，有什么新进展再次打开网页更新即可 15 | 16 | ## 说明 17 | 简化地图在保留了地缘相接特征的基础上把省级行政区域尽可能简化成了方框，目标是把省级行政区域之间的关系通过画面展现到一目了然的程度 18 | 19 | 仅三十四省级行政区域可标记，九段线西沙南沙等群岛在地图上有标示 20 | 21 | ## 关于等级 22 | 23 | 我的个人标准 24 | 25 | - 居住：住过年以上 26 | - 短居：住过月以上 27 | - 游玩：旅行过 28 | - 出差：去过但完全没玩 29 | - 路过：汽车火车路过或飞机经停 30 | 31 | ## 提示 32 | 请使用自带浏览器进行保存 33 | 34 | ## 参考 35 | 参考自 https://zhung.com.tw/japanex/ 36 | 37 | ## 衍生 38 | - 吃货制霸 @lvwzhen https://github.com/lvwzhen/foodie-ex 39 | - 美国版、欧洲版 @tenpages https://github.com/tenpages/us-level 40 | - 全球版 @itorr https://github.com/itorr/world-ex 41 | - 普通/简化切换版 @qianphong https://github.com/qianphong/china-ex-ns 42 | - 中国马拉松制霸 @Likenttt https://github.com/Likenttt/china-city-marathon-ex 43 | - 福建版 @action-hong https://github.com/action-hong/china-ex 44 | - 大湾区版 @yusancky https://github.com/yusancky/GBA-ex 45 | - 自定义等级分享版 @kf-liu https://github.com/kf-liu/china-ex-pro 46 | 47 | ## 微博 48 | https://weibo.com/1197780522/MaCGDCt6N 49 | 50 | ## GitHub 51 | https://github.com/itorr/china-ex 52 | 53 | ## 反馈 54 | https://github.com/itorr/china-ex/issues 55 | 56 | ## 使用了 57 | 腾祥嘉丽大圆 58 | 59 | ## 协议 60 | 允许非商用非盈利的利用 61 | -------------------------------------------------------------------------------- /china-ex.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itorr/china-ex/c0662adc22903e0accc0779b3a0c1e5e40b4bd05/cover.png -------------------------------------------------------------------------------- /html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 中国制霸生成器 - 中国三十四省级行政区域制霸标记生成工具 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

地区

16 | 居住 17 | 短居 18 | 游玩 19 | 出差 20 | 路过 21 | 没去过 22 |

23 | 28 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /html/样式.less: -------------------------------------------------------------------------------- 1 | html{ 2 | font: 18px/40px '字体',sans-serif; 3 | background-color: #efb4b4; 4 | color: #111; 5 | } 6 | body{ 7 | margin: 0; 8 | } 9 | html, 10 | body{ 11 | height:100%; 12 | overflow: hidden; 13 | } 14 | svg{ 15 | display: block; 16 | width: 100%; 17 | height: 100%; 18 | pointer-events: none; 19 | a{ 20 | pointer-events: auto; 21 | } 22 | } 23 | a{ 24 | color: #111; 25 | cursor: pointer; 26 | text-decoration: none; 27 | } 28 | ::selection{ 29 | background-color: #FF7E7E; 30 | } 31 | #设置等级{ 32 | display: none; 33 | position: absolute; 34 | z-index: 1; 35 | background: #FFF; 36 | width: 140px; 37 | border-radius: 4px; 38 | overflow: hidden; 39 | box-shadow: 3px 6px 0 rgba(0,0,0,.1); 40 | border: 4px solid #000; 41 | text-align: center; 42 | h2{ 43 | margin: 0; 44 | font-weight: normal; 45 | font-size: 26px; 46 | line-height: 40px; 47 | cursor: default; 48 | } 49 | a{ 50 | line-height: 24px; 51 | cursor: pointer; 52 | } 53 | h2, 54 | a{ 55 | display: block; 56 | padding: 4px 10px; 57 | &[data-level="5"]{background:#FF7E7E;} 58 | &[data-level="4"]{background:#FFB57E;} 59 | &[data-level="3"]{background:#FFE57E;} 60 | &[data-level="2"]{background:#A8FFBE;} 61 | &[data-level="1"]{background:#88AEFF;} 62 | } 63 | } 64 | .按钮{ 65 | background: #FFF; 66 | box-shadow: 0 0 0 4px #111; 67 | border-radius: 3px; 68 | } 69 | footer{ 70 | position: absolute; 71 | right: 0; 72 | bottom: env(safe-area-inset-bottom, 0); 73 | margin: 20px; 74 | font-size: 24px; 75 | line-height: 30px; 76 | transition: opacity 1s ease; 77 | a{ 78 | float: left; 79 | padding: 8px 12px; 80 | &.按钮{ 81 | margin-left: 12px; 82 | } 83 | } 84 | } 85 | #输出{ 86 | display: flex; 87 | position: fixed; 88 | top: 0; 89 | right: 0; 90 | bottom: 0; 91 | left: 0; 92 | background:#FFF; 93 | text-align: center; 94 | flex-direction: column; 95 | flex-wrap: nowrap; 96 | align-content: center; 97 | justify-content: center; 98 | align-items: center; 99 | img{ 100 | display: block; 101 | width: 480px; 102 | height: 480px; 103 | margin: 0 auto; 104 | box-shadow: 0 5px 20px rgba(0,0,0,.1); 105 | } 106 | .按钮{ 107 | padding: 8px 12px; 108 | box-shadow: 0 0 0 2px #111; 109 | } 110 | } 111 | @media (max-width:800px) , (max-height:800px) { 112 | html{ 113 | font-size: 14px; 114 | } 115 | footer{ 116 | font-size: 16px; 117 | line-height: 24px; 118 | margin: 10px; 119 | a{ 120 | padding: 6px 8px; 121 | } 122 | } 123 | .按钮{ 124 | box-shadow: 0 0 0 2px #111; 125 | } 126 | #设置等级{ 127 | width: 110px; 128 | border-width: 2px; 129 | h2{ 130 | font-size: 18px; 131 | line-height: 30px; 132 | } 133 | a{ 134 | font-size: 14px; 135 | line-height: 18px; 136 | } 137 | } 138 | } 139 | @media (max-width:480px) and (min-height:600px) { 140 | footer{ 141 | bottom: 50px; 142 | } 143 | #输出{ 144 | img{ 145 | width: 100vw; 146 | height: 100vw; 147 | } 148 | } 149 | } 150 | 151 | html{ 152 | &[data-loading]{ 153 | footer{ 154 | pointer-events: none; 155 | opacity: 0; 156 | } 157 | } 158 | &[data-running]{ 159 | cursor: wait; 160 | body{ 161 | pointer-events: none; 162 | } 163 | } 164 | } -------------------------------------------------------------------------------- /html/脚本.js: -------------------------------------------------------------------------------- 1 | const 本地存储 = localStorage; 2 | const 视窗 = window; 3 | const 文档 = document; 4 | const 读文件 = FileReader; 5 | const 取 = fetch; 6 | const 如何做爱元素 = 文档.documentElement; 7 | const 体元素 = 文档.body; 8 | const 头元素 = 文档.head; 9 | const 新建元素 = 名 => 文档.createElement(名); 10 | const 新建图 = _=> new Image(); 11 | const 添加事件监控 = (元素,事件,回调) => 元素[`on${事件}`] = 回调;// 元素.addEventListener(事件,回调); 12 | const 获取元素方位 = 元素 => 元素.getBoundingClientRect(); 13 | const 设置延时 = setTimeout; 14 | const 数学 = Math; 15 | const 统一资源定位 = URL; 16 | const 点击 = 'click'; 17 | const 加载 = 'load'; 18 | const 等级 = 'level'; 19 | const 样式 = 'style'; 20 | const 唯一标识 = 'id'; 21 | const 源 = 'src'; 22 | const 目标 = 'href'; 23 | const 成果 = 'result'; 24 | const 那么 = 'then'; 25 | const 加末尾 = 'appendChild'; 26 | const 设置属性 = 'setAttribute'; 27 | const 获取属性 = 'getAttribute'; 28 | const 清除属性 = 'removeAttribute'; 29 | const 来源 = 'referrer'; 30 | const 数据属性头 = 'data-'; 31 | const 呢 = 'ing'; 32 | const 运行中属性 = 数据属性头 + 'runn' + 呢; 33 | const 加载中属性 = 数据属性头 + 加载 + 呢; 34 | const 子元素 = 'children'; 35 | const 停止冒泡 = 'stopPropagation'; 36 | const 新建数据地址 = 'createObjectURL'; 37 | const 展示 = 'display'; 38 | const 块 = 'block'; 39 | const 肉 = 'innerHTML'; 40 | const 宽度 = 'width'; 41 | const 高度 = 'height'; 42 | const 左边 = 'left'; 43 | const 上边 = 'top'; 44 | const 零 = 0; 45 | const 二 = 2; 46 | const 千 = 1e3; 47 | const 面 = '2d'; 48 | const 像素 = 'px'; 49 | const 空字 = ''; 50 | const 啊 = 'a'; 51 | const 靶子 = 'target'; 52 | const 真 = true; 53 | const 无 = 'none'; 54 | const 最小 = 'min'; 55 | const 最大 = 'max'; 56 | const 四舍五入 = 'round'; 57 | const 是社交媒体 = /weibo|qq/i.test(navigator.userAgent); 58 | 59 | const $ = (名,元素 = 文档) => 元素.querySelector(名); 60 | 61 | const 字体名 = '字体'; 62 | const 背景色 = '#efb4b4'; 63 | const 本地存储等级们钥匙 = 'china-ex-levels'; 64 | const 保存文件名 = `[神奇海螺][中国制霸].png`; 65 | 66 | const 宽 = 1134; 67 | const 高 = 976; 68 | const 比 = 二; 69 | const 最小间距 = 6; 70 | 71 | const 地区 = $('#地区'); 72 | const 保存 = $('#保存'); 73 | const 输出 = $('#输出'); 74 | const 输出图片 = $('img',输出); 75 | const 设置等级 = $('#设置等级'); 76 | 77 | const 画板 = 新建元素('canvas'); 78 | const 上下文 = 画板.getContext(面); 79 | 80 | 画板[宽度] = 宽 * 比; 81 | 画板[高度] = 宽 * 比; 82 | 83 | const 图形 = 体元素[子元素][零]; 84 | const 设置等级标题 = 设置等级[子元素][零]; 85 | 86 | const 设置等级样式 = 设置等级[样式]; 87 | const 输出样式 = 输出[样式]; 88 | 89 | 90 | const 全关闭 = _=>{ 91 | 设置等级样式[展示] = 空字; 92 | }; 93 | const 数据 = {}; 94 | const 获取所有省元素们 = _=>[ ...地区[子元素] ]; 95 | const 获取所有省等级们 = _=>获取所有省元素们().map(元素 => 元素[获取属性](等级) || 零); 96 | const 获取所有省等级们字符串 = _=> 获取所有省等级们().join(空字); 97 | const 保存等级们 = _=>{ 98 | 本地存储.setItem(本地存储等级们钥匙,获取所有省等级们字符串()); 99 | }; 100 | const 获取等级们并生效 = _=>{ 101 | const 等级们字串 = 本地存储.getItem(本地存储等级们钥匙) || 空字; 102 | 获取所有省元素们().forEach((元素,下标)=>{ 103 | 元素[设置属性](等级,等级们字串[下标] || 零) 104 | }); 105 | }; 106 | 添加事件监控(地区, 点击, 事件=>{ 107 | 事件[停止冒泡](); 108 | 109 | const 省元素 = 事件[靶子]; 110 | const 省元素方位 = 获取元素方位(省元素); 111 | 数据.省元素 = 省元素; 112 | 113 | 设置等级标题[肉] = 省元素[唯一标识]; 114 | 设置等级样式[展示] = 块; 115 | const 设置等级元素方位 = 获取元素方位(设置等级); 116 | 117 | let 左 = 数学[四舍五入](如何做爱元素.scrollLeft + 省元素方位[左边] + 省元素方位[宽度] / 二 - 设置等级元素方位[宽度] / 二); 118 | 左 = 数学[最小]( 119 | 左, 120 | 体元素.offsetWidth - 设置等级元素方位[宽度] - 最小间距 121 | ); 122 | 左 = 数学[最大]( 123 | 左, 124 | 最小间距 125 | ); 126 | 127 | let 上 = 数学[四舍五入](如何做爱元素.scrollTop + 省元素方位[上边] + 省元素方位[高度] / 二 - 设置等级元素方位[高度] / 二); 128 | 上 = 数学[最小]( 129 | 上, 130 | 体元素.offsetHeight - 设置等级元素方位[高度] - 最小间距 131 | ); 132 | 上 = 数学[最大]( 133 | 上, 134 | 最小间距 135 | ); 136 | 137 | 设置等级样式[左边] = 左 + 像素; 138 | 设置等级样式[上边] = 上 + 像素; 139 | }); 140 | 添加事件监控(文档,点击,全关闭); 141 | const 计分 = _=>{ 142 | const 分 = 获取所有省等级们().reduce((全, 当前) => { 143 | return 全 + (+当前 || 零); 144 | }, 零); 145 | 分数[肉] = `分数: ${分}`; 146 | } 147 | 添加事件监控(设置等级,点击,事件=>{ 148 | 事件[停止冒泡](); 149 | const 等级值 = 事件[靶子][获取属性](数据属性头+等级); 150 | if(!等级值) return; 151 | 数据.省元素[设置属性](等级,等级值); 152 | 计分(); 153 | 全关闭(); 154 | 保存等级们(); 155 | }) 156 | 157 | 获取等级们并生效(); 158 | 计分(); 159 | 160 | const 读文件成地址 = (原始数据,回调)=>{ 161 | const 读 = new 读文件(); 162 | 添加事件监控(读,加载,事件 => 回调(事件[靶子][成果])); 163 | 读.readAsDataURL(原始数据); 164 | }; 165 | const 获取字体数据地址 = (地址,回调)=>{ 166 | 取(地址)[那么](资源 => 资源.blob())[那么](原始数据 => 读文件成地址(原始数据,回调)); 167 | }; 168 | const 获取字体样式 = (字体名,回调)=>{ 169 | 获取字体数据地址( 170 | `${字体名}.woff?v={version}`, 171 | 地址 => 回调(`@font-face{font-family:${字体名};${源}:url(${地址})}`) 172 | ); 173 | }; 174 | 获取字体样式(字体名,样式字串=>{ 175 | $(样式,图形)[肉] = 样式字串; 176 | const 样式元素 = 新建元素(样式); 177 | 样式元素[肉] = 样式字串; 178 | 头元素[加末尾](样式元素); 179 | 设置延时(_=>如何做爱元素[清除属性](加载中属性),二 * 千); 180 | }); 181 | 182 | const 从文档文本新建图形文件 = 文档文本=>{ 183 | const 原始数据 = new Blob([文档文本], {type: 'image/svg+xml'}); 184 | return 统一资源定位[新建数据地址](原始数据); 185 | }; 186 | const 下载文件 = (地址,文件名,元素 = 新建元素(啊))=>{ 187 | if(!是社交媒体){ 188 | 元素.download = 文件名; 189 | } 190 | 元素[目标] = 地址; 191 | 元素[点击](); 192 | }; 193 | const 地址变图像元素 = (地址,回调)=>{ 194 | const 图 = 新建图(); 195 | 添加事件监控(图,加载,_=>设置延时(_=>回调(图),千 / 二)); 196 | 图[源] = 地址; 197 | }; 198 | const 日志 = _=>(新建图())[源] = `https://lab.magiconch.com/api/china-ex/log?levels=${获取所有省等级们字符串()}&r=${文档[来源]}`; 199 | 200 | const 保存图像 = _=>{ 201 | 如何做爱元素[设置属性](运行中属性,真); 202 | 203 | const 文档文本 = ``; 204 | const 数据地址 = 从文档文本新建图形文件(文档文本); 205 | 206 | 地址变图像元素(数据地址,图=>{ 207 | 上下文.fillStyle = 背景色; 208 | 上下文.fillRect( 209 | 零,零, 210 | 宽 * 比,宽 * 比 211 | ); 212 | 上下文.drawImage( 213 | 图, 214 | 零,零, 215 | 宽,高, 216 | 零,(宽 - 高) * 比 / 二, 217 | 宽 * 比, 高 * 比 218 | ); 219 | 画板.toBlob(元素数据=>{ 220 | const 地址 = 统一资源定位[新建数据地址](元素数据); 221 | 输出图片[源] = 地址; 222 | 输出样式[展示] = 空字; 223 | 224 | 设置延时(_=>{ 225 | 下载文件(地址,保存文件名); 226 | 如何做爱元素[清除属性](运行中属性); 227 | },50) 228 | }); 229 | }); 230 | 日志(); 231 | }; 232 | 233 | 添加事件监控(保存,点击,保存图像); 234 | 235 | 添加事件监控($(啊,输出),点击,_=>{ 236 | 输出样式[展示] = 无 237 | }); 238 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "china-ex", 3 | "version": "0.0.2", 4 | "description": "中国制霸生成器", 5 | "main": "html/index.html", 6 | "scripts": { 7 | "build": "node 生成字体子集.js && node 转译.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/itorr/china-ex.git" 12 | }, 13 | "keywords": [ 14 | "china" 15 | ], 16 | "author": "itorr", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/itorr/china-ex/issues" 20 | }, 21 | "files": [ 22 | "html/index.html", 23 | "html/样式.css", 24 | "html/脚本.js", 25 | "html/字体.woff" 26 | ], 27 | "homepage": "https://github.com/itorr/china-ex#readme", 28 | "dependencies": { 29 | "axios": "^1.1.3", 30 | "html-minifier": "^4.0.0", 31 | "less": "^4.1.3", 32 | "uglify-js": "^3.17.3" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /生成字体子集.js: -------------------------------------------------------------------------------- 1 | const replaceSVG = text=>{ 2 | text = text.replace(/ transform="matrix$1 0 0 1 (\d+) (\d+)$" class=".+"/,' x="$1" y="$2"') 3 | return text; 4 | }; 5 | 6 | let fontAPI = `https://lab.magiconch.com/api/fontmin`; 7 | const generateFontURL = (name,text)=>{ 8 | text += '0'; 9 | text = text.replace(/\s/g,''); 10 | text = Array.from(new Set(text)).sort().join(''); 11 | 12 | if(!text) return requestAnimationFrame(onOver); 13 | 14 | console.log(text); 15 | 16 | const unicode = str2utf8(text).join(); 17 | const fontURL = `${fontAPI}?name=${name}&unicode=${unicode}&type=woff`; 18 | 19 | return fontURL; 20 | }; 21 | 22 | const getFontFromText = (name,text,onOver=_=>{})=>{ 23 | const fontURL = generateFontURL(name,text); 24 | loadFont(name,fontURL,_=>{ 25 | onOver(_) 26 | }) 27 | }; 28 | 29 | const loadFont = async (fontName,fontURL,callback) => { 30 | const fontFace = new FontFace(fontName, `url(${fontURL})`); 31 | fontFace.load().then(fontFace => { 32 | document.fonts.add(fontFace); 33 | callback(fontFace); 34 | }).catch(e=>{ 35 | callback(); 36 | }) 37 | }; 38 | function str2utf8(str) { 39 | return str.split('').map(s=>s.charCodeAt(0)) 40 | } 41 | function utf82str(str) { 42 | return String.fromCharCode.apply(null,Array.from(str)) 43 | }; 44 | 45 | const { readFileSync, writeFileSync } = require('fs'); 46 | const getTextFromHTMLFile = (filename)=>{ 47 | let html = readFileSync(filename,'utf8'); 48 | const texts = []; 49 | 50 | const addTextFromMatch = (all,text)=>{ 51 | text = text.replace(/<.+?>/g,''); 52 | 53 | texts.push(text); 54 | return ''; 55 | } 56 | html = html.replace(/<(?:path|rect) id="(.+?)"/g,addTextFromMatch); 57 | html = html.replace(/(.+?)<\/text>/g,addTextFromMatch); 58 | html = html.replace(/(.+?)<\/a>/g,addTextFromMatch); 59 | html = html.replace(/

(.+?)<\/h2>/g,addTextFromMatch); 60 | html = html.replace(/
([\s\S]+?)<\/p>/g,addTextFromMatch); 61 | 62 | return texts.join(''); 63 | }; 64 | 65 | const defaultText = `1234567890:`; 66 | const text = defaultText + getTextFromHTMLFile('html/index.html') + getTextFromHTMLFile('china-ex.svg'); 67 | const fontURL = generateFontURL(`JiaLiDaYuanJF`,text); 68 | 69 | 70 | const axios = require('axios'); 71 | 72 | 73 | const downFontFile = async _=>{ 74 | let r = await axios.get(fontURL,{ 75 | responseType: 'arraybuffer' 76 | }); 77 | console.log(r.data); 78 | writeFileSync('html/字体.woff',r.data,'binary'); 79 | }; 80 | 81 | downFontFile(); -------------------------------------------------------------------------------- /转译.js: -------------------------------------------------------------------------------- 1 | const levelsStyleText = ` 2 | #countrys>[level="5"]{fill:#FF7E7E;} 3 | #countrys>[level="4"]{fill:#FFB57E;} 4 | #countrys>[level="3"]{fill:#FFE57E;} 5 | #countrys>[level="2"]{fill:#A8FFBE;} 6 | #countrys>[level="1"]{fill:#88AEFF;} 7 | #countrys>[level="w"]{fill:#edd1ff;} 8 | `; 9 | 10 | const replaceSVG = text=>{ 11 | text = text.replace(/ transform="matrix$1 0 0 1 (\d+)(?:\.\d+)? (\d+)(?:\.\d+)?$" class="(.+)"/g,' x="$1" y="$2" class="$3"') 12 | text = text.replace(//g,'') 13 | text = text.replace(/\n+/g,'\n') 14 | text = text.replace(/ xml:space="preserve"/g,'') 15 | text = text.replace(/ style="enable-background:new 0 0 \d+ \d+;?"/g,'') 16 | text = text.replace(/width="\d+px" height="\d+px"/g,'') 17 | text = text.replace(/ x="0px" y="0px"/g,'') 18 | text = text.replace(/ id="图层_1"/g,'') 19 | text = text.replace(/ version="1.1"/g,'') 20 | text = text.replace(/ xmlns:xlink="http:\/\/www\.w3\.org\/1999\/xlink"/g,'') 21 | text = text.replace(//g,'') 22 | text = text.replace(/'Tensentype-JiaLiDaYuanJF'/g,'字体') 23 | 24 | text = text.replace(//g,(all,id,c,p)=>{ 25 | return `` 26 | }); 27 | // 28 | // 29 | text = text.replace(//g,(all,id,x,y,c,w,h)=>{ 30 | // console.log(x,y,w,h) 31 | return `` 32 | }); 33 | 34 | text = text.replace(/