vsCode 对未使用过的变量波浪线显示出

安装eslint插件，在项目的vsCode配置settings.json文件，

"javascript.validate.enable": true,

重新启动vscode生效

同步与异步的区别：

同步：

同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

异步：

将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

promise all异步用法：

    
getType=(data)=>{
    return new Promise(function(resolve, reject){
        resolve(data);  //输出数据
    });

}
getHeader=(data)=>{
   return new Promise(function(resolve, reject){
        resolve(data);  //输出数据
    });
}
getList=(data1,data2)=>{
   this.setState({
       data1,
       data2,
   })
} 

    Promise.all([
        this.getType(1),
        this.getHeader(2)
    ]).then((results)=>{
        var data1=results[0];
        var data2=results[1];
        this.getList(data1,data2);
    })

npm基本命令

npm install xxx

安装xxx模块，但不记录到package.json里

npm install xxx@版本号

安装指定版本号的xxx模块

npm install --save xxx

安装xxx模块，并且记录到package.json里，字段对应的dependency，是产品环境必须依赖的模块

npm install --save-dev xxx

安装xxx模块，并且记录到package.json里，字段对应的dev-dependency，是开发环境必须依赖的模块

npm install --global xxx

全局安装xxx模块，不记录到package.json

npm uninstall xxx
删除xxx模块

npm uninstall -g xxx
全局删除xxx模块

nodeJs文件写入与导出操作：
通过nodeJs内置的fs操作文件，获取本地json数据遍历格式化生成新的json数据导出到本地

var fs = require('fs'); //文件模块
var path = require('path'); //系统路径模块

//获取本地json文件
var file = path.join(__dirname, 'src/path.json');
var allArr=[];
//读取json文件
fs.readFile(file, 'utf-8', function(err, data) {
if (err) {
    res.send('文件读取失败');
} else {
    var newData=JSON.parse(data);
    //格式化数据
    for(let j=0;j<newData.length;j++){
        let list=[];
        var index=j*2;
        if(newData[index]){
            list.push(newData[index]);
            list.push(newData[index+1]);
            allArr.push(list);
        }
    }

    
    var content = JSON.stringify(allArr); 

    //指定创建目录及文件名称，__dirname为执行当前js文件的目录
    var file = path.join(__dirname, 'json/path.json'); 

    //写入文件
    fs.writeFile(file, content, function(err) {
        if (err) {
            return console.log(err);
        }
        console.log('文件创建成功，地址：' + file);
    });
}});

path.json数据：
[

113.24253,23.17111,113.24288,23.17116,113.24297,23.17149,113.24243,23.17140,113.24227,23.17101,113.24205,23.17111,113.24189,23.17048

]

生成新的json文件：
[[113.24253,23.17111],[113.24288,23.17116],[113.24297,23.17149],[113.24243,23.1714],[113.24227,23.17101],[113.24205,23.17111],[113.24189,23.17048]]

一、mySql常用语句
1、新增数据库

CREATE TABLE sys_list (
id bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID，自动递增',
title varchar(32) NOT NULL COMMENT '标题',
content varchar(200) NOT NULL COMMENT '内容',
photo varchar(32) NOT NULL COMMENT '图片',
author varchar(32) NOT NULL COMMENT '作者',
type enum('1','2') NOT NULL COMMENT '类型',
createTime TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
updateTime TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2、新增一条数据
insert into sys_list values(1,'标题1','内容1','','2020-10-07','2020-10-07')

3、查询一条数据
select * from sys_brand d where d.id=1 //通过id查询
select * from sys_brand d where d.title like '%标%' //通过title模糊查询

4、修改一条数据
update sys_list set title='标题11',content='内容11' where id='1'

5、删除一条数据
delete from sys_list where id='1'

6、复制表到另外的数据库
create table sys_user select * from my_test.sys_user;

NodeJS全栈开发之后端实现上传文件功能并保存到Mysql数据库

安装第三方插件multer
npm i --save multer

创建上传接口文件upload.js
var createFolder = function(folder){

try{
    fs.accessSync(folder); 
}catch(e){
    fs.mkdirSync(folder);
}  

};
var uploadFolder = './uploads/'; //文件上传位置

createFolder(uploadFolder);
var storage = multer.diskStorage({

destination: function (req, file, cb) {
  cb(null, uploadFolder)
},
filename: function (req, file, cb) {
  cb(null, file.originalname)
}

})

var upload = multer({ storage: storage })

//上传接口
router.post('/upload', upload.single('file'), function(req, res) {

fs.rename(req.file.path, "uploads/" + req.file.originalname, function(err) {
    if (err) {
        throw err;
    }
    var data= req.file
    var photo=req.file.url
    res.send({
        code:CODE_SUCCESS,
        msg:'上传成功',
        data:data
      })
   //添加到数据库
    const query = `insert into sys_data(photo) values( '${photo}')`;
    querySql(query)
    .then(data => {

      res.json({ 
          code: CODE_SUCCESS, 
          msg: '添加数据成功', 
          data: null 
        })
    })
 })

})

module.exports = router

通过postman测试上传接口

react使用gg-editor编辑可视化流程，有保存按钮

安装gg-editor与@ant-design/icons
npm i gg-editor@2.0.2
npm i @ant-design/icons

引入对应的页面
import GGEditor, { Mind,Toolbar,Command,Item,ItemPanel,Flow} from "gg-editor";
import Save from "./ggSave";
import ToolbarButton from './ToolbarButton';
import FlowDetailPanel from './FlowDetailPanel';
import FlowContextMenu from './FlowContextMenu'

相关代码：
<GGEditor className='editor '>

            <Save />
            <Row className="editorHd">
              <Col span={24}>
                <Toolbar className='toolbar'>
                <ToolbarButton command="undo" />
                <ToolbarButton command="redo" />
                <Divider type="vertical" />
                <ToolbarButton command="copy" />
                <ToolbarButton command="paste" />
                <ToolbarButton command="delete" />
                <Divider type="vertical" />
                <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
                <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
                <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
                <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
                <Divider type="vertical" />
                <ToolbarButton command="toBack" icon="to-back" text="To Back" />
                <ToolbarButton command="toFront" icon="to-front" text="To Front" />
                <Divider type="vertical" />
                <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
                <ToolbarButton command="addGroup" icon="group" text="Add Group" />
                <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
                      </Toolbar>
              </Col>
            </Row>
            <Row className="editorHd">
              <Col span={4} className="editorSidebar">
                <ItemPanel className="itemPanel">
                  <Card bordered={false}>
                    <Item
                      type="node"
                      size="72*72"
                      shape="flow-circle"
                      model={{
                        color: '#FA8C16',
                        label: 'Start',
                      }}
                      data-original="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
                    />
                    <Item
                      type="node"
                      size="80*48"
                      shape="flow-rect"
                      model={{
                        color: '#1890FF',
                        label: 'Normal',
                      }}
                      data-original="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
                    />
                    <Item
                      type="node"
                      size="80*72"
                      shape="flow-rhombus"
                      model={{
                        color: '#13C2C2',
                        label: 'Decision',
                      }}
                      data-original="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
                    />
                    <Item
                      type="node"
                      size="80*48"
                      shape="flow-capsule"
                      model={{
                        color: '#722ED1',
                        label: 'Model',
                      }}
                      data-original="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
                    />
                  </Card>
                </ItemPanel>
              </Col>
              <Col span={16} className="editorContent">
                  <Flow className="flow" />
              </Col>
              <Col span={4} className="editorSidebar">
                <FlowDetailPanel  />
              </Col>
            </Row>
             <FlowContextMenu />
        </GGEditor>

项目效果截图：

项目源码

//异步获取本地json文件
handleJson=(name)=>{
    return new Promise((resolve,reject)=>{
        axios.get(`/border/${name}.json`).then(
            function(data){
                resolve(data)
            }
        )
    })
}
//循环变量获取对应json文件
handleBorderData=()=>{
    var {districts}=this.state;
    _.forEach(districts,(item)=>{
        var name=item.codeName
        this.handleJson(name).then((data)=>{
            gzData[item.code]=data.data
            console.log('gzData',gzData[item.code][0])
        })
        
    })
}
async componentDidMount(){
    await this.handleBorderData();
    
}

当type为1是不显示‘操作’列

filter写在这里页面初始化只执行一次
this.columns = [
    {
        title: '姓名',
        dataIndex: 'xm',
        key: 'xm',
    },
    {
        title: '操作',
        dataIndex: 'handle',
        key: 'handle',
    },

].filter((item)=>{
   if(this.state.type==1){
      return item.title!="操作"
   }else{
      return item
   }
})

放在<Table columns={this.columns.filter((item)=>{

   if(this.state.type==1){
      return item.title!="操作"
   }else{
      return item
   }
}} 根据state type的改变而执行

ArcGIS for JS argis地图限制显示不规则区域

   dojoRequire(["esri/map", 
    "esri/geometry/Point",
    "esri/layers/ImageParameters",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/GraphicsLayer", ], (Map, Point, ImageParameters, ArcGISDynamicMapServiceLayer,GraphicsLayer) => {
          

    //方法一
   var    map = new Map("map", {
        basemap: "satellite", 
        center: [113.36112, 23.12467],
        zoom: 11,
    });
        
           
    var imageParameters = new ImageParameters();
    imageParameters.format = "PNG24";
    var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer", {
      "opacity"        :1.0,
      "imageParameters":imageParameters
    });
    map.addLayer(dynamicMapServiceLayer);


    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    canvas.width = width
    canvas.height = height
    context.fillStyle="#fff";
    context.fillRect(0,0,width,height);
    axios.get(`/borderAll/test.json`).then(           
        function (gzJson) {
            var data=gzJson.data;
            context.globalCompositeOperation='destination-out';
            for (var item of data) {
                var [lon, lat] = item
                var [left,top] = this.lngLat2Vector2(lon,lat)
                context.lineTo(left, top);
            }

            context.fillStyle="green";
            context.fill();
        }.bind(this)
    );
    
})

<div>
             <div id='map' style={{height:window.innerHeight-50,width:'100%',position:'relative'}}></div>
             <canvas id="myCanvas" className='shadediv' />
        </div>

test.json为不规则路径的边界经纬度