使用truf.js渲染出两个面重合的部分(挖洞)

本文介绍了如何使用Three.js库在前端开发中渲染两个面重叠区域,通过定义加载面的函数和计算重合部分,最终实现类似挖洞的视觉效果。文章提供了详细步骤及效果图。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.定义一哥加载面的函数:

	//加载面数据
			function polygonRender(id, geojson, color, opacity) {
				map.addSource(id + '_maine', geojson);
				map.addLayer({
					'id': id,
					'type': 'fill',
					'source': id + '_maine',
					'layout': {},
					'paint': {
						'fill-color': color,
						'fill-opacity': opacity
					}
				});
				map.addLayer({
					'id': id + '_outline',
					'type': 'line',
					'source': id + '_maine',
					'layout': {},
					'paint': {
						'line-color': '#5500ff',
						'line-width': 2
					}
				});
			}

2.拿到两个面的数据,如下:

var poly1 = turf.polygon([
					[
						[-74.59750366210933, 40.24100740474415],
						[-74.30448358322855, 40.25882589192875],
						[-74.37864129807222, 40.01209703137826],
						[-74.59012811447857, 40.036284501614546],
						[-74.59750366210933, 40.24100740474415]
					]
				]);
				var poly2 = turf.polygon([
					[
						[-74.52009027244021, 40.19067137177086],
						[-74.40310561419257, 40.19486747791623],
						[-74.4456776356767, 40.118247713516155],
						[-74.52009027244021, 40.19067137177086]
					]
				]); 

3.计算两个面重合的地方:

//去重部分,镂空状态
				var difference = turf.difference(poly1, poly2); //交集
				var polygonjson4 = {
					'type': 'geojson',
					'data': difference

				};
				polygonRender("polygon_id_4", polygonjson4, "orange", 1);

效果图如下:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值