turf.js介绍及使用（地图掩膜遮罩功能的实现）

目前在前端GIS应用中turf.js几乎是必不可少了，我们首先来看一下官网的介绍。

官网地址：Turf.js中文网

官网提供了许多方法，基本的turf的引入和使用我就不说，我说一些重要的常用的，以及大家没注意到的点。

1.计算多边形的边界范围

这个函数（功能）很常用，尽管在很多前端的GIS框架中都自带这一功能，但是有时在脱离环境的前提下想要计算边界这个函数还是很好用的。

var line = turf.lineString([[104.99467, 30.071677],[107.13797, 36.550462],[112.607082, 34.991467]]);
var bbox = turf.bbox(line);
var bboxPolygon = turf.bboxPolygon(bbox);

上面是官网的示例，实际上可以计算边界的不仅仅是线要素，我们更多使用的是面要素，因此呢在使用这个函数的时候大家可以将一个标准的面要素，geojson格式的面要素当作参数传入，turf也会计算出一个extent给我们的。可以封装一个方法：

  getExtent(geojson) {return turf.bbox(geojson);}

这样在前端项目中如果你遇到了geojson数据，不管是服务传给你的还是本地的静

turf.js介绍及使用（地图掩膜遮罩功能的实现）相关推荐

利用turf.js分析数据---占地分析
之前写过关于占地分析的方案,使用的是geoserver地图服务分析数据,这次还可以使用turf.js来实现功能,改效果展示的是切割效果具体可从以下链接查看turf.js的一些操作: Turf.js中 ...
turf.js实现行政区（多边形）图形合并边界提取，掩膜等效果
在做前端行政区展示的时候,可能经常会遇到这样的需求,就是给定一个行政区比如杭州市各个区,县的行政区边界图形,但是我们现在需要一个杭州市的行政区边界,我们是否可以通过前端合并这些行政区,答案当然是可以的 ...
Turf.js——用于地理空间分析的js库，处理各种地图算法
Turf.js--用于地理空间分析的js库,处理各种地图算法一.官网中文--https://turfjs.fenxianglu.cn/ 英文--https://turfjs.org/ npm地址- ...
Turf.js(地理空间GIS分析的js库)，处理地图相关算法
场景 Turf.js Advanced geospatial analysis for browsers and Node.js 浏览器和Node.js的高级地理空间分析. 特点 Modular, s ...
java 地理围栏实现_基于Turf.js教你快速实现地理围栏的合并拆分
以下内容转载自totoro的文章<几何计算-基于Turf.js实现多边形的拆分及合并> 作者:totoro 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. JavaS ...
LeaFlet学习之结合turf.js生成简单的等值线demo
本文主要结合turf.js生成等值线俺,进行展示效一.放张图: 二.全部源码 <!DOCTYPE html> <html xmlns="http://www.w3.org ...
uni-app map路线轨迹回放功能及turf.js实现缓冲区渲染（微信小程序）
使用uni-app中 map组件实现路线轨迹回放功能. 1.通过接口获取返回的轨迹点. 2.地图的坐标系与轨迹点的坐标系要保持一致,否则轨迹有偏差.点经纬度转换,wgs84togcj02 =>j ...
Openlayers前端复用Turf.js生成平头Buffer
Openlayers前端复用Turf.js生成平头Buffer,实现如下效果: 代码如下: <!doctype html> <html lang="en"> ...
Turf.js 地理空间分析库简介
Turf.js是一个轻量级的JavaScript库,用于地理空间分析和操作.它提供了许多强大的函数和算法,用于处理地理空间数据,如点.线.多边形和网格等.Turf.js的API简单易用,可以轻松地与其 ...

turf.js介绍及使用（地图掩膜遮罩功能的实现）

turf.js介绍及使用（地图掩膜遮罩功能的实现）相关推荐

最新文章

热门文章