mapbox turf求缓冲区demo（代码）

最新推荐文章于 2024-06-14 17:57:48 发布
最新推荐文章于 2024-06-14 17:57:48 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： WEBGIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41310868/article/details/113924655
版权

Mapbox是一个大而全的开源地图前端平台，turf是mapbox的一个开源的地理空间计算脚本js库。

Turf可以在前端实现缓冲区计算、拆分、合并、不规则三角网生成等功能。

Turf官网：http://turfjs.org/

Turf的github：https://github.com/Turfjs/turf/

以下是用mapbox和turf实现一个查看缓冲区的页面。

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>mapbox turf buffer</title>

    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>

    <script src="https://npmcdn.com/@turf/turf@6.3.0/turf.min.js"></script>

    <link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />

    <style>

 
最低0.47元/天 解锁文章
才华横溢吴道简
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
turf生成缓冲区--maptalks缓冲区分析
七月❤的博客
10-27 1659
使用，生成缓冲区坐标。加载点、面缓冲区结果。
turf-mapboxjs:使用mapbox.js可视化的Turfjs示例
05-17
使用mapbox.js可视化的Turfjs示例
关于mapbox的一些学习
最新发布
Elaine20132014的博客
06-14 487
添加图层/删除图层/添加图片/删除图片/修改图层层级/图层显隐。“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。"GeometryCollection"：几何集合。"FeatureCollection"：特征集合。GeoJSON是一种对各种地理数据结构进行。"MultiLineString"： 多线。"MultiPoint" ： 多点。"MultiPolygon"：多面。"LineString"： 线。"Feature"：特征。"Point" ： 点。"Polygon"：面。
OpenLayers Turf.js 线的缓冲区 平头 单侧 双侧 两侧 缓冲区
a571574085的博客
03-19 2573
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="t...
Openlayers前端复用Turf.js生成平头Buffer
cwr888的专栏
10-19 1035
Openlayers前端复用Turf.js生成平头Buffer，实现如下效果： 代码如下： <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/cs.
java sdk 离线安装包,java – 使用MapBox Android SDK进行离线平铺缓存
weixin_36269733的博客
03-11 163
我有一个使用iOS平铺缓存技术的iOS原型,如下所示(Objective-C代码)：RMTileCache * tileCache = [[RMTileCache alloc] initWithExpiryPeriod:0];[tileCache setBackgroundCacheDelegate:self];RMMapboxSource * tileSource = [[RMMapboxSo...
openlayer+turf 通过geojson添加线和缓冲区域
josiecici的博客
05-16 1176
效果：如下图所示，中间黄色实线为被缓冲的线，而浅黄色为缓冲区域， 核心代码：turf.buffer axios.get("static/rq3.json").then(res => { var buffered = turf.buffer(res.data, 6 * 0.001, { units: 'kilometers' }) m_layers.mediumPressureBufferLayer = new VectorLayer({ sour
alien-buffer:Mapbox使用Turf进行缓冲的教程
05-26
使用OpenStreetMap，Mapbox和Turf进行SPHERE映射 难民营中的水分配是良好营地管理的关键部分，并且受到强制要求，该设定了人道主义行动的标准，以提高质量和问责制。 SPHERE手册规定了标准，例如营地居民应获得多少...
mapbox搭载vue3测试demo 总共20个具体案例
05-30
mapbox搭载vue3测试demo 总共20个具体案例 1、[行政边界查询地址](https://lbs.amap.com/demo/javascript-api/example/district-search/draw-district-boundaries) 2、[坐标拾取系统地址]...
mapbox_3dbubble_demo.rar
10-16
在研究webGL和Three.js之前，曾经看过mapbox-gl源码的一个分支，在mapbox主分支不支持 symbol 类型 layer 的3D效果（也就是Z轴传值）时，根据源码内容新建一个demo研究此类型的3d效果，现在我把成果分享出来！
mapbox_3dbar_demo.rar
11-09
《使用Mapbox GL实现地图上的3D柱状图》 Mapbox GL是一个强大的地图渲染库，它提供了丰富的自定义选项，使用户能够创建交互式、高性能的地图。在本示例中，我们将探讨如何利用Mapbox GL实现地图上的3D柱状图效果，...
GIS插件turf的压缩版
12-17
Turf的压缩用JavaScript编写的模块化GIS地理空间引擎，用于空间分析的JavaScript库。它包括传统的空间操作，用于创建GeoJSON数据的辅助函数，以及数据分类、空间计算和统计工具。Turf可以作为客户端插件添加到您的网站。
mapbox-android-demo：适用于Android的Mapbox Maps SDK的Google Play演示应用
02-04
Mapbox Android演示应用 这是Android版Mapbox Maps SDK的公开演示。 该演示应用，并展示了许多示例，这些示例可在以下位置找到： 还有仅在应用程序中存在的示例。 该应用程序的“实验室”部分提供了一些示例，这些...
Mapbox Android 加载图片到指定坐标范围
做GIS梦的人
10-12 1169
在前面的中，介绍了在web端使用Mapbox如何加载图片到指定坐标范围。后来就遇到了一个网友提的问题，如何在移动端（Mapbox SDK for Android）实现加载图片到指定的坐标范围。Android端无法使用对应的Vue插件，这个就比较麻烦了。查阅了相关资料后发现，Mapbox Style中有一种source类型为image，支持指定四至坐标，通过Raster Layer就可以渲染到地图上。
使用leafletjs、turfjs前端绘制点线面缓冲区
诚的博客
02-05 1271
首先本GISer（自称）选择使用geotools结合jts依赖包实现： （1）说说他的优点，话不多说，直接上图 geotools（还有一个jsts，js版的geotools）相信我不多说，GISer们应该大有耳闻，java程序包，GIS功能十八般武艺样样精通，学会它，走遍天下都不怕。缓冲区只是其中一个功能点。 （2）说说他的缺点，成也缓冲区，败也缓冲区。上一张我用geotools生成的缓冲区图 GISer们一眼就能看出问题，geotools对于这种自相交的线面真是很排斥，直接粗暴地填充了，让
mapbox 基于turf 绘制扇形
qq_34870529的博客
04-08 1039
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绘制扇形</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link href="https://api.mapbox.com/map.
Cesium+Turf.js实现缓冲分析
weixin_45390762的博客
08-24 1050
1.用cesium的handle进行线绘制。2.用turf.buffer函数对绘制的线进行缓冲区分析。3.在地图上绘制缓冲区。 2.调用工具类（别忘了代码中定义的全局变量） 3.绘制效果 2.将缓冲后的面再绘制到viewer中，因为cesium绘制面需要的坐标数据是这种格式。 而我使用turf.buffer获取的数据是这种格式 需要再次转换一下 完整代码（记得检查一下this和_this,viewer和c_viewer）
使用mapbox+turf.js完成迁徙图，流向图教程
lz5211314121的博客
05-15 1412
尽管它这段弧线不是很明显，因为它的角度比较大，因此如果距离短的话，几乎就是一条直线，为了优化这一缺陷。我们可以配合另一个函数叫做：bezierSpline，这个函数是贝塞尔曲线函数，它能够将一段折线变得更加平滑，我们把greatCircle的结果放入bezierSpline中就会让这条线更有弧度。首先我们要把思路捋清楚，迁徙图表示的是从一个点出发向多个点均有流向（这个流向用线条表示）或者是从多个地方向一个地方汇总。也就是一对多或者是多对一，这里面的多和一都是城市位置，也就是经纬度坐标点。
【mapbox+turf.js】WebGIS空间分析系列（1）
yuelizhe4774的博客
04-23 1202
所以大概的内容就包括了，选择目标对象（点线面），如果是单个图层的话，那就可以直接进行对应的分析；如果涉及多个图层的话，就需要存储两个图层的图像，再进行操作。在这里，我的思路是，再构建框选区域时，通过turf来计算出在区域内的点（数据），将这些数据构成一个新的图层，置放于最上层，用不同的颜色来表示。STEP 2：为了简化程序，所以在默认生成的vue3项目里，将所有代码删除，所有后续的代码将在App.vue里写。大概的思路是，获取目标图层（多个图层），然后选择空间分析的内容，包括缓冲区、叠置、最短路径等。
mapbox离线部署具体代码
06-03
具体的代码实现会因应不同的部署环境而有所不同，以下是一些通用的步骤和示例代码，供参考： 1. 下载Mapbox GL JS： 从Mapbox官方网站上下载Mapbox GL JS的最新版本，或者从GitHub上下载源代码： ```shell git clone https://github.com/mapbox/mapbox-gl-js.git ``` 2. 下载Mapbox样式： 从Mapbox官方网站上下载所需的Mapbox样式，或从GitHub上下载开源的Mapbox样式，例如OSM Bright，示例代码： ```shell git clone https://github.com/mapbox/osm-bright-gl-style.git ``` 3. 下载Mapbox矢量切片数据： 从Mapbox官方网站上下载所需的矢量切片数据，或使用开源的矢量切片数据，例如OpenMapTiles： ```shell wget https://github.com/openmaptiles/openmaptiles/releases/download/v3.12.2/europe.mbtiles ``` 4. 部署Web服务器： 部署一个Web服务器，例如Apache或Nginx。 5. 配置Web服务器： 将Mapbox GL JS和Mapbox样式和矢量切片数据放在Web服务器的可访问目录中，并配置Web服务器以提供这些文件。例如，在Nginx中配置如下： ```nginx server { listen 80; server_name yourdomain.com; location / { root /path/to/your/mapbox/files; index index.html; } } ``` 6. 在网页中加载Mapbox GL JS： 在网页中加载Mapbox GL JS，并使用JavaScript代码来设置地图样式和添加矢量切片数据源。示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mapbox GL JS Example</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <script src="path/to/mapbox-gl.js"></script> <link href="path/to/mapbox-gl.css" rel="stylesheet"> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> mapboxgl.accessToken = 'your-access-token'; var map = new mapboxgl.Map({ container: 'map', style: 'path/to/mapbox-style.json', center: [-122.4443, 47.2529], zoom: 10 }); map.on('load', function () { map.addSource('europe', { type: 'vector', url: 'path/to/europe.mbtiles' }); map.addLayer({ 'id': 'europe', 'type': 'fill', 'source': 'europe', 'layout': {}, 'paint': { 'fill-color': '#088', 'fill-opacity': 0.8 }, 'source-layer': 'europe' }); }); </script> </body> </html> ``` 在以上代码中，我们使用了Mapbox GL JS的`Map`类来创建地图对象，并将地图样式设为`path/to/mapbox-style.json`，将矢量切片数据源添加到地图中，并添加了一个面图层，用来显示欧洲地区的矢量切片数据。 以上是一个基本的离线部署Mapbox GL JS的流程和示例代码，具体的实现可能会因为部署环境的不同而有所变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值