Mapbox：如何在特定区域的任何地方获得半透明遮罩？

我明白如何为特定区域获得一个彩色多边形，例如缅因州。但现在，我想放面具到处都是，但是，从缅因州的顶部，所以什么样的负面下面做：Mapbox：如何在特定区域的任何地方获得半透明遮罩？

map.addSource("maine-boundaries", { 
    'type': 'geojson', 
    'data': { 
     "type": "Feature", 
     'geometry': { 
      'type': 'Polygon', 
      'coordinates': [[ 
       [-67.13734351262877, 45.137451890638886], 
       [-66.96466, 44.8097], 
       [-68.03252, 44.3252], 
       [-69.06, 43.98], 
       [-70.11617, 43.68405], 
       [-70.64573401557249, 43.090083319667144], 
       [-70.75102474636725, 43.08003225358635], 
       [-70.79761105007827, 43.21973948828747], 
       [-70.98176001655037, 43.36789581966826], 
       [-70.94416541205806, 43.46633942318431], 
       [-71.08482, 45.3052400000002], 
       [-70.6600225491012, 45.46022288673396], 
       [-70.30495378282376, 45.914794623389355], 
       [-70.00014034695016, 46.69317088478567], 
       [-69.23708614772835, 47.44777598732787], 
       [-68.90478084987546, 47.184794623394396], 
       [-68.23430497910454, 47.35462921812177], 
       [-67.79035274928509, 47.066248887716995], 
       [-67.79141211614706, 45.702585354182816], 
       [-67.13734351262877, 45.137451890638886] 
      ]] 
     } 
    } 
}); 

map.addLayer({ 
    'id': 'maine-fill', 
    'type': 'fill', 
    'source': "maine-boundaries", 
    'layout': {}, 
    'paint': { 
     'fill-color': '#ddd', 
     'fill-opacity': 0.5 
    }, 
    "filter": ["=", "$type", "Polygon"] // Fill up the Maine, but I want the opposite. 

});

怎么办呢？

来源

2017-04-22 2ndGAB

要做到这一点的方法是将[[-180，-90]，[-180,90]，[180,90]，[180，-90]，[-180，-90]]加入以GeoJSON坐标

如果u有坐标的多边形如下所示

coordinates:[ [[-122.55, 80.55], [-122.55, 80.55],[-122.55, 80.55], [-122.55, 80.55]] ]

你必须添加[[-180，-90]，[-180，90]，[180，90 ]，[180，-90]，[-180，-90]]到如下所示的坐标

coordinates:[ [[-180, -90], [-180, 90], [180, 90], [180, -90], [-180, -90]], [[-122.55, 80.55], [-122.55, 80.55],[-122.55, 80.55], [-122.55, 80.55]] ]

退房下面的代码片段点击面具地图按钮来掩盖它

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset='utf-8' /> 
 
    <title></title> 
 
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js'></script> 
 
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script> 
 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/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'><button onclick="mask()" style="position:relative; float:right; z-index:99999">Mask the map</button></div> 
 
    <script> 
 
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA'; 
 
    var map = new mapboxgl.Map({ 
 
     container: 'map', 
 
     style: 'mapbox://styles/mapbox/streets-v9', 
 
     center: [80.25, 13.082120], 
 
     zoom: 11 
 
    }); 
 

 
    map.on('load', function() { 
 

 
     map.addLayer({ 
 
     'id': 'chennai', 
 
     'type': 'fill', 
 
     'source': { 
 
      'type': 'geojson', 
 
      'data': { 
 
      'type': 'Feature', 
 
      'geometry': { 
 
       'type': 'Polygon', 
 
       'coordinates': [ 
 
       [ 
 
        [ 
 
        80.25735855102539, 
 
        13.071117736521623 
 
        ], 
 
        [ 
 
        80.24585723876953, 
 
        13.061586374612906 
 
        ], 
 
        [ 
 
        80.26010513305664, 
 
        13.056569720570309 
 
        ], 
 
        [ 
 
        80.26559829711914, 
 
        13.057740282292977 
 
        ], 
 
        [ 
 
        80.27933120727539, 
 
        13.064429100005883 
 
        ], 
 
        [ 
 
        80.27795791625977, 
 
        13.075465253049048 
 
        ], 
 
        [ 
 
        80.26525497436523, 
 
        13.083156825357857 
 
        ], 
 
        [ 
 
        80.25735855102539, 
 
        13.071117736521623 
 
        ] 
 
       ] 
 
       ] 
 
      } 
 
      } 
 
     }, 
 
     'layout': {}, 
 
     'paint': { 
 
      'fill-color': '#088', 
 
      'fill-opacity': 0.8 
 
     } 
 
     }); 
 
    }); 
 

 
    function mask() { 
 
     map.getSource('chennai').setData(turf.polygon([ 
 
     [ 
 
      [-180, -90], 
 
      [-180, 90], 
 
      [180, 90], 
 
      [180, -90], 
 
      [-180, -90] 
 
     ], map.getSource('chennai')._data.geometry.coordinates[0] 
 
     ])); 
 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

来源

2017-04-24 08:58:14 Aravind

这正是我一直在寻找。非常感谢。 – 2ndGAB

Mapbox：如何在特定区域的任何地方获得半透明遮罩？

回答

相关问题