vue如何使用mapbox对当前行政区划进行反选遮罩
作者:跳跳的小古风
这篇文章主要介绍了vue如何使用mapbox对当前行政区划进行反选遮罩问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用mapbox对当前行政区划进行反选遮罩
需求
给指定区划以外的地方添加蒙版遮罩
- 初始效果
- 需求效果
map.addLayer({ //蒙版边界 id: 'mb-line', type: 'line', source: { type: 'geojson', data:reData, //区划的面数据 }, paint: { 'line-color': 'rgba(100,149,237,0.8)', "line-width": 8 }, layout: { visibility: 'visible', }, }); map.addLayer({ //蒙版图层 //通过边界数据反选 达到挖洞效果 id: 'mb-tag', type: 'fill', source: { type: 'geojson', data: { type: 'Feature', geometry: { type: 'Polygon', coordinates: [ [ // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点 [-180, 90], [180, 90], [180, -90], [-180, -90], ], // 第 1个孔 //例如:[ // [31.4566,121.2671], // [31.3481,121.2382], // [31.3934,121.3659] // ], //这里从世界地图挖掉指定区划的面数据, //我们将原来的面数据处理一样 //let mbData = results.geometry.coordinates[0].flat(1); //取面数据 coordinates的第一层并拉平 形成例如的经纬度数组 mbData, ], }, }, }, paint: { 'fill-color': 'rgba(200,202,199,.68)', // 'fill-opacity': 1 /* 透明度 */, }, layout: { visibility: 'visible', }, });
- 蒙版边界数据格式
- 蒙版遮罩数据格式
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。