扩大剪裁范围后，图形绘制不正确了

[deyihu]

maptalks's version and what browser you use?

Issue description

可能的原因：

• 溢出屏幕的gl坐标转换成屏幕坐标不对
• 剪裁算法有问题

=alpha20时会有这个问题， alpha26后就没有测出来这个（经纬下）这个问题(可能我用的测试数据范围比较小的原因)，但是用 identity 投影的数据会有问题

Please provide a reproduction URL (on any jsfiddle like site)

https://codepen.io/deyihu/pen/eYWLpzM?editors=0010

[deyihu]

经过测试和验证：

• gl坐标溢出屏幕范围后，尤其是在相机后面时转出的屏幕坐标不对

• 整个视野过滤和剪裁用的是bbox，当时当地图倾斜时地图的视野不在是bbox，而是个不规则的凸四边形

• 所以当地图倾斜时不能用简单的用bbox了，而是用地图的视野的四边形

• 目前剪裁也是用的bbox，当地图倾斜时是四边形，不能用bbox剪裁，应该用四边形剪裁才对

[deyihu]

基本已经改好

1.当地图不倾斜仍然保持原来的逻辑
2.当地图倾斜时用视椎的四边形来剪裁

• 线的剪裁有自己手写
• 面的剪裁有 https://github.com/mfogel/polygon-clipping 来实现

3. 整个包将膨胀30kb左右

下面为debug代码方便调试，这里记录下

function debug(path, p1, p2, p3, p4) {
    let canvas: HTMLCanvasElement = document.getElementById('c');
    if (!canvas) {
        canvas = document.createElement('canvas') as HTMLCanvasElement;
        canvas.width = 400;
        canvas.height = 400;
        canvas.style.position = 'absolute';
        canvas.style.zIndex = 1 + '';
        canvas.style.top = '0px';
        canvas.style.backgroundColor = 'black';
        canvas.id = 'c';
        document.body.appendChild(canvas);
    }
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const points = [p1, p2, p3, p4, ...path];


    const bbox = getDefaultBBOX();
    pointsBBOX(points, bbox);
    drawQuadrilateral(ctx, bbox, p1, p2, p3, p4);
    drawPaths(ctx, bbox, [path]);
    // drawBBOX(ctx, bbox, pathBBOX);
    // drawExtent(ctx, bbox, extent);

    return {
        ctx,
        bbox
    }

}

function drawClipPoints(ctx, bbox, clipPoints) {
    ctx.strokeStyle = 'yellow';
    clipPoints.forEach(d => {
        const points = d.map(item => {
            return item.point;
        })
        const pts = toPixels(points, bbox, ctx.canvas);
        drawPolyline(ctx, pts);
    });
}

function drawQuadrilateral(ctx, bbox, p1, p2, p3, p4) {
    ctx.strokeStyle = 'red';
    const points = [p1, p2, p3, p4, p1];
    const pts = toPixels(points, bbox, ctx.canvas);
    drawPolyline(ctx, pts);


}

function drawBBOX(ctx, bbox, pathBBOX) {
    ctx.strokeStyle = 'green';
    const points = [];
    const [xmin, ymin, xmax, ymax] = pathBBOX;
    points.push(new Point(xmin, ymin));
    points.push(new Point(xmin, ymax));
    points.push(new Point(xmax, ymax));
    points.push(new Point(xmax, ymin));
    points.push(new Point(xmin, ymin));
    const pts = toPixels(points, bbox, ctx.canvas);
    drawPolyline(ctx, pts);
}

function drawPaths(ctx, bbox, paths) {
    ctx.strokeStyle = 'green';
    paths.forEach(path => {
        const pts = toPixels(path, bbox, ctx.canvas);
        pts.slice(0, pts.length - 1).forEach((pt, index) => {
            ctx.fillStyle = 'white';
            ctx.fillText(index, pt.x, pt.y);
        });
        drawPolyline(ctx, pts);
    });

}

function drawExtent(ctx, bbox, extent) {
    ctx.strokeStyle = 'green';
    const points = extent.toArray();
    const pts = toPixels(points, bbox, ctx.canvas);
    drawPolyline(ctx, pts);
}

function drawPolyline(ctx, points) {
    ctx.beginPath();
    points.forEach((p, index) => {
        const { x, y } = p;
        if (index === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y)
        }
    });
    ctx.stroke();
}

function toPixels(points, bbox, canvas) {
    const [xmin, ymin, xmax, ymax] = bbox;
    const ax = (canvas.width - 20) / (xmax - xmin), ay = (canvas.height - 20) / (ymax - ymin);
    return points.map(p => {
        const x = (p.x - xmin) * ax + 10;
        const y = (canvas.height) - (p.y - ymin) * ay - 10;
        return new Point(x, y);
    })
}