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

使用leafletjs、turfjs前端绘制点线面缓冲区
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说使用leafletjs、turfjs前端绘制点线面缓冲区,希望能够帮助大家进步!!!

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

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

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

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

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

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

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

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

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

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

使用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>
 
  1. map.on('pm:create', function(e) {

  2. e.shape; // the name of the shape being drawn (i.e. 'Circle')

  3. const buffered = turf.buffer(e.layer.toGeoJSON(), 100, {

  4. units: 'meters'

  5. });

  6. /* const roadbuf = L.polygon(buffered, {

  7. color: 'red'

  8. }).addTo(map); */

  9. L.geoJSON(buffered, {

  10. style: function(feature) {

  11. return {

  12. color: 'red'

  13. };

  14. }

  15. }).addTo(map);

  16. });

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

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

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

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

本文来源huayang183,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/17925

发表评论