怎样利用绘制工具挖洞

@HJH%H6UI4Z})UIT)DG6C9B.png

核心逻辑：

当绘制图形时,判断正在绘制的图形是否可以作为已经绘制好的图形的洞
如果可以就把绘制的图形作为洞处理
如果不可以就将其作为独立的图形加到图层
整个过程中最核心的即使几何关系的判断,好在社区已经有了成熟的开源库

TIP

示例里默认是开启洞检测模式的,如果你的业务需要手动开启,请自行设置相关逻辑,比如弄个checkbox,表示是否开启绘制洞模式

jsts

maptalks是个纯的地图引擎,内部没有集成任何图形几何库,这里我们使用 jsts来进行几何关系的判断,你可以可以使用其他的库

turf
geolib
其他

为什么使用jsts？

我比较熟
性能比 turfjs 要好多了
jsts是JTS 的 js版本,后端几何判断一般用JTS,这样就可以前端端统一起来了 (API啊,各种方法等都是一样的,就不用折腾两套API)

处理洞

判断正在绘制的图形是否存在成为洞的条件
如果存在就是将其坐标作为满足这个洞的图形的洞坐标

WARNING

这里默认已经有洞的图形不参与再次挖洞了,如果你的业务需要多次挖洞,请根据业务需要在这个代码上做出自己的修改

//挖洞
function holes(tempGeometry) {
    const coordinates = tempGeometry.getCoordinates();
    if (coordinates.length < 3) {
        return;
    }
    if (!hitGeometry) {
        //判断绘制的图形属于哪个图形的洞
        const geo = geoJSONRender.read(tempGeometry.toGeoJSON());
        const filterGeo = layer.getGeometries().filter((g) => {
            return g.getHoles().length === 0;
        });
        const geos = filterGeo.map((g) => {
            return geoJSONRender.read(g.toGeoJSON());
        });
        for (let i = 0, len = geos.length; i < len; i++) {
            if (geos[i].geometry.contains(geo.geometry)) {
                hitGeometry = filterGeo[i];
                break;
            }
        }
    }
    if (!hitGeometry) {
        return;
    }
    // console.log(hitGeometry.getId());
    const polygonCoordinates = hitGeometry.getCoordinates();
    polygonCoordinates[1] = coordinates.map((c) => {
        return c.copy();
    });
    hitGeometry.setCoordinates(polygonCoordinates);
}

不满足的就直接作为独立图形处理

drawTool.on("drawend", function (param) {
    //当绘制的图形不是任何图形的洞时
    if (!hitGeometry) {
        const geometry = param.geometry;
        geometry.setId(maptalks.Util.GUID());
        geometry.setSymbol(fillSymbol);
        layer.addGeometry(geometry);
    }
    hitGeometry = null;
});

怎样配置绘制图形的样式?绘制图形的样式

怎样利用绘制工具挖洞 ​

jsts ​

处理洞 ​

怎样利用绘制工具挖洞

jsts

处理洞