使用leafletjs、turfjs前端绘制点线面缓冲区

前一段时间,项目要求对点线面做缓冲区分析,点缓冲区没毛病,GISer们可以随意选择第三方插件或者自己开发缓冲区功能实现。至于线面实现缓冲区,问题就浮现出来了,尤其是对于自相交线面(俗称闭合线或者相交面,不太准确,希望海涵)。下面针对我所选的两种不同工具实现缓冲区,说说各自的优缺点。

首先本GISer(自称)选择使用geotools结合jts依赖包实现:

(1)说说他的优点,话不多说,直接上图

geotools(还有一个jsts,js版的geotools)相信我不多说,GISer们应该大有耳闻,java程序包,GIS功能十八般武艺样样精通,学会它,走遍天下都不怕。缓冲区只是其中一个功能点。

(2)说说他的缺点,成也缓冲区,败也缓冲区。上一张我用geotools生成的缓冲区图

GISer们一眼就能看出问题,geotools对于这种自相交的线面真是很排斥,直接粗暴地填充了,让我大吃一惊。其实这也可以理解,GIS界有个拓扑关系,有一条约束就是不容许相交。但是实际应用难免遇到这种情况,所以还得解决。说说我的解决思路

1.首先我觉得有可能是单线引起的,那我在自相交部分打断,让其生成多线,最后根据多线绘制缓冲区,结果还是令我失望;

2.还有思路,自相交问题自己优先解决,geotools有功能可以实现(不过本人没进行尝试),解决自相交,geotools应该也能完美的绘制缓冲区。

第二种缓冲区方案来了,也是本文的重点(GISer们先别急着拍砖,好东西肯定要压轴),使用leafletjs结合turfjs实现,上张图:

Turf是一个用JavaScript编写的模块化GIS引擎。根据GeoJSON数据处理执行地理空间任务,可以在服务器或在浏览器上运行,功能虽然不如geotools丰富,但在geojson格式数据处理上,绝对一流。贴一些turf的使用和缓冲区部分代码:

npm install @turf/turf
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
map.on('pm:create', function(e) {
    e.shape; // the name of the shape being drawn (i.e. 'Circle')
    const buffered = turf.buffer(e.layer.toGeoJSON(), 100, {
        units: 'meters'
    });
    /* const roadbuf = L.polygon(buffered, {
        color: 'red'
    }).addTo(map); */
    L.geoJSON(buffered, {
        style: function(feature) {
            return {
                color: 'red'
            };
        }
    }).addTo(map);
});

(1)说说turf生成缓冲区的优点:

a. 不用进行坐标转换(geotools必须要手动转换坐标);

b. 自动解决自相交问题。

(2)缺点,功能丰富度还是远远落后与geotools。

最后谢谢各位GISer的支持,以后有好的文章或者代码都会分享。

转载自:https://blog.csdn.net/yangdengxian/article/details/82794748

You may also like...