Question

我知道如何获得特定区域的彩色多边形，例如缅因州。但是现在，我想把面具放在缅因州的所有地方，所以对下面的内容不利：

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.

});

怎么做？

Answer 1

这样做的方法是将[[-180，-90]，[ - 180,90]，[180,90]，[180，-90]，[ - 180，-90]]添加到GeoJSON坐标

如果您的坐标多边形如下所示

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>

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

1 个答案: