Use a clip layer to remove rendered features from the map | Mapbox GL JS

Upgrade to Mapbox GL JS v3

This feature is available in Mapbox GL JS v3. Learn how to migrate in our migrate to v3 guide

Experimental Feature

Note that this is an experimental feature which is under development and is subject to change.

This example uses clip layer to remove the 3D content from the Mapbox Standard style.

The clip layer is configured to remove certain features (from zoom level 16 and below) within the polygon shown in red.

Zoom out slightly and you will see the clip layer take effect and remove the buildings, trees and symbols.

A few notes on clip layer

It requires a geojson or vector source.
The clip-layer-types property can be used to configure it such that it also removes trees, wind turbines and symbols from the map.
It only removes content from layers that are located below it in the style layer stack.
It can be activated at a certain zoom range using layer minzoom and maxzoom.

JavaScript

React

JavaScript

React


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Use a clip layer to remove rendered features from the map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.9.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = (window.map = new mapboxgl.Map({
        container: 'map',
        center: [-74.006292, 40.712666],
        zoom: 16.2,
        pitch: 40,
        bearing: 53,
        style: 'mapbox://styles/mapbox/standard',
        minZoom: 15,
        maxZoom: 17
    }));

    map.on('style.load', () => {
        // add a geojson source with a polygon to be used in the clip layer.
        map.addSource('eraser', {
            'type': 'geojson',
            'data': {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'properties': {},
                        'geometry': {
                            'coordinates': [
                                [
                                    [-74.00618, 40.71406],
                                    [-74.00703, 40.71307],
                                    [-74.00787, 40.71206],
                                    [-74.00766, 40.71176],
                                    [-74.00624, 40.71204],
                                    [-74.00487, 40.71252],
                                    [-74.00421, 40.71315],
                                    [-74.00618, 40.71406]
                                ]
                            ],
                            'type': 'Polygon'
                        }
                    }
                ]
            }
        });

        // add the clip layer and configure it to also remove symbols and trees.
        // clipping becomes active from zoom level 16 and below.
        map.addLayer({
            'id': 'eraser',
            'type': 'clip',
            'source': 'eraser',
            'layout': {
                // specify the layer types to be removed by this clip layer
                'clip-layer-types': ['symbol', 'model']
            },
            'maxzoom': 16
        });

        // add a line layer to visualize the clipping region.
        map.addLayer({
            'id': 'eraser-debug',
            'type': 'line',
            'source': 'eraser',
            'paint': {
                'line-color': 'rgba(255, 0, 0, 0.9)',
                'line-dasharray': [0, 4, 3],
                'line-width': 5
            }
        });
    });
</script>

</body>
</html>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

JavaScript

React


import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      center: [-74.006292, 40.712666],
      zoom: 16.2,
      pitch: 40,
      bearing: 53,
      style: 'mapbox://styles/mapbox/standard',
      minZoom: 15,
      maxZoom: 17
    });

    mapRef.current.on('style.load', () => {
      // add a geojson source with a polygon to be used in the clip layer.
      mapRef.current.addSource('eraser', {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              properties: {},
              geometry: {
                coordinates: [
                  [
                    [-74.00618, 40.71406],
                    [-74.00703, 40.71307],
                    [-74.00787, 40.71206],
                    [-74.00766, 40.71176],
                    [-74.00624, 40.71204],
                    [-74.00487, 40.71252],
                    [-74.00421, 40.71315],
                    [-74.00618, 40.71406]
                  ]
                ],
                type: 'Polygon'
              }
            }
          ]
        }
      });

      // add the clip layer and configure it to also remove symbols and trees.
      // clipping becomes active from zoom level 16 and below.
      mapRef.current.addLayer({
        id: 'eraser',
        type: 'clip',
        source: 'eraser',
        layout: {
          // specify the layer types to be removed by this clip layer
          'clip-layer-types': ['symbol', 'model']
        },
        maxzoom: 16
      });

      // add a line layer to visualize the clipping region.
      mapRef.current.addLayer({
        id: 'eraser-debug',
        type: 'line',
        source: 'eraser',
        paint: {
          'line-color': 'rgba(255, 0, 0, 0.9)',
          'line-dasharray': [0, 4, 3],
          'line-width': 5
        }
      });
    });
  }, []);

  return <div id="map" style={{ height: '100%' }} ref={mapContainerRef} />;
};

export default MapboxExample;

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

追加の開発者リソース

このexampleは役に立ちましたか？