实现mapbox-gl-draw连续标注

234 阅读1分钟

修改源码之后无法打补丁?用脚本覆盖!

mapbox-gl-draw目前不支持连续标注,在等待issue被处理之前需要上线使用,项目使用pnpm,无法打补丁,新建脚本进行覆盖,操作步骤

  1. mapbox/mapbox-gl-draw(github.com) 下载修改打包之后用命令覆盖node_modules
  2. 修改src-modes-draw_polygon.js文件中第45行方法内容
//默认是完成后选中标注多边形
DrawPolygon.clickOnVertex = function(){
    this.changeMode('static');
    requestAnimationFrame(()=>{
        this.changeMode(Constants.modes.DRAW_POLYGON);
    })
    return this
}
  1. 执行npm run build-min混合模式打包,将dist里面的map-gl-draw.js放到项目中patch[新建根目录文件夹]中,并在scripts[新建根目录文件夹]中新建postinstall.js写入
//postinstall.js
const fs = require('fs')
copyFileSync('./patch/mapbox-gl-draw.js', './node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js');
function copyFileSync(source, target) {
    var targetFile = target;
    // If target is a directory, a new file with the same name will be created
    if (fs.existsSync(target)) {
        if (fs.lstatSync(target).isDirectory()) {
            targetFile = path.join(target, path.basename(source));
        }
    }
    fs.writeFileSync(targetFile, fs.readFileSync(source));
}
  1. 修改package.json中命令,在运行和打包的时候运行postinstall.js替换node_modules中文件
 "build": "npm run patch&&umi build",
 "postinstall": "umi setup",
 "patch": "node scripts/postinstall.js",
 "setup": "umi setup",
 "start": "npm run patch&&npm run dev"