美文网首页前端技巧
前端js读写本地文件(2019年和2020年行政区域变化对比)

前端js读写本地文件(2019年和2020年行政区域变化对比)

作者: 恬雅过客 | 来源:发表于2021-12-24 15:11 被阅读0次

    最近做监测可视化大屏的热力地图功能,成都新津县,后端返回了数据,前端渲染热力地图时,始终渲染不出来数据。后来发现是,后端的行政区域编码是2019年版本的:510132新津县,而高端地图api取到的是新版的(2020年版本):510118新津区。发现没,该区域的编码和名称叫法都变动。 所以需要兼容处理。故做了个这2个版本的所有区域的对比分析,确认哪些区域有调整。

    读写本地文件

    前端fetch方法或jqueryajax方法,没法逐行解析读取的非json类的结果集。所以,需要将2019年和2020年的行政区划代码转出json格式类数据。之前,我都是麻烦后端给我转的,现在不用了,因为node支持读写本地文件,瞬间惊喜。
    2020年12月中华人民共和国县以上行政区划代码2019年7月中华人民共和国县以上行政区划代码
    将2019年和2020年的行政区划代码保存成txt文件,然后转换成json数据格式存储在本地。
    本地txt文件内容格式:

    110000  北京市                     
    110101     东城区                      
    110102     西城区                      
    110105     朝阳区
    

    转换成json格式文件内容:

    {
        "year": "2019-07",
        "data": [
            {
                "code": "110000",
                "name": "北京市"
            },
            {
                "code": "110101",
                "name": "东城区"
            },
            {
                "code": "110102",
                "name": "西城区"
            },
            {
                "code": "110105",
                "name": "朝阳区"
            }
          ]
    }
    

    转换的js代码如下(file.js),自行调整读写文件的路径、名称。

    // var fs = require("fs");
    // var data = fs.readFileSync('test.txt');
    // console.log("同步读取: ",data.toString());
    // console.log("同步读取: ",data);
    
    let inputFileUrl = 'test.txt';//待读取文件的路径;调试用
    let outputFileUrl = './output.json';//写本地文件的路径。调试用
    // inputFileUrl = 'areacode2019-07.txt';//2019年7月全国行政区域编码表
    // outputFileUrl = 'areacode2019-07.json';//2019年7月全国行政区域编码表(json格式)
    inputFileUrl = 'areacode2020-06.txt';//2020年6月全国行政区域编码表
    outputFileUrl = 'areacode2020-06.json';//2020年6月全国行政区域编码表(json格式)
    
    const fs = require('fs');
    const readline = require('readline');
    
    const rl = readline.createInterface({
        input: fs.createReadStream(inputFileUrl),
        output: process.stdout,
        terminal: false
    });
    let data = [];//结果数据
    let rowObj = null;
    rl.on('line', (line) => {
        //console.log(line);
        //console.log(Object.prototype.toString.call(line));
        let rowStr = line.toString().replace(/\s*/g,"");
        let code = rowStr.substring(0,6);//前6位数字是行政区域编码
        let name = rowStr.substring(6);
        data.push({
            code: code,
            name: name
        });
    });
    rl.on('close', () => {
        console.log('读取文件结束。。。。。。');
        let str = JSON.stringify({year:'20120-06',data:data},"","\t")
        //console.log(str);
        toJsonFile(str,outputFileUrl);
    });
    
    function toJsonFile(data, fileUrl){
        //console.log('读取转换后json:',data);
        // let str = JSON.stringify({year:'2019-07',data:data},"","\t")
        // console.log(str);
        fs.writeFile(fileUrl, data, function (error) {
          if (error) {
            console.log('写入文件失败')
          } else {
            console.log('写入文件成功')
          }
        })
    }
    
    //cmd窗口执行命令:node fieurl 比如:node file.js
    

    假设你安装了node.js(如未安装,自行下载安装,很简单。),win+R,输入cmd,打开命令窗口,进入到file.js文件的目录,然后执行命令$ node file.js即可。

    数据对比

    fetch方法取到上步骤生成的json数据,然后对比2019年和2020年不同部分的区域(名称或编码有变化的,包括新增或删除的)。
    示例代码:

           var year201907 = [];//areacode2019-07.json
           var year202006 = [];//areacode2020-06.json
    
           var p1,p2;
           var url1 = 'areacode2019-07.json',
           url2 = 'areacode2020-06.json';
           p1  = new Promise(function(resolve, reject){
            fetch(url1)
                .then(res => res.json())
                .then(json => {
                    console.log('1111',json);
                    resolve(1);
                })
           });
    
           p2  = new Promise(function(resolve, reject){
            fetch(url2)
                .then(res => res.json())
                .then(json => {
                    console.log('2222',json);
                    resolve(2);
                })
           });
           
    
           Promise.all([p1,p2]).then(data=>{
                console.log('3333',data);
           });
    

    对比的结果,如下图:


    2019-2020年变动行政区域.png

    参考

    相关文章

      网友评论

        本文标题:前端js读写本地文件(2019年和2020年行政区域变化对比)

        本文链接:https://www.haomeiwen.com/subject/fdslqrtx.html