Skip to main content

Grid mask settings

Supports masking of raster static tile services according to irregular boundaries, and only displays raster map content within a specified geographical range.

show
<!DOCTYPE html>
<html>

<head>
    <title>Grid Mask</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }

        .btn-group {
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>

<body>
    <div id="map"></div>
    <div class="btn-group">
        <button class="btnItem" onclick="addMask1()">Jinjihu Street</button>
        <button class="btnItem" onclick="addMask2()">Loufen Street</button>
        <button class="btnItem" onclick="addMask3()">Weiting Street</button>>
    </div>

    <script>

        const map = new mapmost.Map({
            container: 'map',
            style: "<your style url>",
            center: [120.70601016502286, 31.32489250629321],
            zoom: 13.9,
            bearing: 0.20550766176791058,
            userId: '***', // Authorization code
        });

        map.on('load', function () {
            //Add data source
            map.addSource('wmts-test-source', {
                'type': 'raster',
                'tiles': ["<your server url>"],
                'tileSize': 256
            });

            map.addLayer(
                {
                    'id': 'wmts-test-layer',
                    'type': 'raster',
                    'source': 'wmts-test-source',
                    'paint': {
                        'raster-mask': true, // Turn on raster mask
                    }
                }
            );
        })

        function addMask1() {
            let geojsonData1 = './Jinjihu Street.geojson'
            map.setMaskData(geojsonData1); // Set raster mask data
        }

        function addMask2() {
            let geojsonData2 = './Loufen Street.geojson'
            map.setMaskData(geojsonData2); //Set raster mask data
        }

        function addMask3() {
            let geojsonData3 = './Weiting Street.geojson'
            map.setMaskData(geojsonData3); // Set raster mask data
        }
    </script>
</body>

</html>