我可以使用传单从地图上剪下一个区域并将其余区域涂黑吗？

问题描述 投票：0回答：1

我使用传单在我的网站上显示地图。我想将除了我显示的多边形区域之外的所有内容都涂黑。例如，用黑色背景显示地图的其余部分（也许 90% 黑色，这样您就可以隐约看到地图的其余部分）。

这就是我想要得到的：

地图显示多边形被切掉，其余部分被涂黑

我发现了一个类似的问题here，但它已经有10年历史了，第一个答案的jsfiddles显示为空白，第二个答案引用了一个6年内未更新的github存储库，并且仅与版本1beta兼容。有没有考虑到最新传单的建议？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Polygon in City of London</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { height: 600px; }
    </style>
</head>
<body>

    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>

        var map = L.map('map').setView([51.5074, -0.1278], 13); // City of London (latitude, longitude)


        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);


        var polygonCoords = [
            [51.5174, -0.1349], // top-left
            [51.5115, -0.1225], // top-right
            [51.5053, -0.1281], // bottom-right
            [51.5093, -0.1406], // bottom-left
            [51.5174, -0.1349]  // close the polygon (same as top-left)
        ];

        // This is an example of a polygon that should be cut out
        var polygon = L.polygon(polygonCoords, {
            color: 'blue',       // Outline color
            fillColor: 'cyan',   // Fill color
            fillOpacity: 0.5     // Fill opacity
        }).addTo(map);

    </script>
</body>
</html>
javascript leaflet polygon
1个回答
0
投票

您可以在地图顶部添加一个图层，然后在多边形形状中创建一个洞。这是您的代码，已更新了其他更改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Polygon in City of London</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { height: 600px; }
    </style>
</head>
<body>

    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>

        const map = L.map('map').setView([51.5074, -0.1278], 13); // City of London (latitude, longitude)


        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Create the bounds of the map:
        const mapBounds = [
          [-90, -180], // Bottom-left
          [-90, 180],  // Bottom-right
          [90, 180],   // Top-right
          [90, -180],  // Top-left
          [-90, -180]  // Closing the loop back to Bottom-left
        ];

        const polygonCoords = [
            [51.5174, -0.1349], // top-left
            [51.5115, -0.1225], // top-right
            [51.5053, -0.1281], // bottom-right
            [51.5093, -0.1406], // bottom-left
            [51.5174, -0.1349]  // close the polygon (same as top-left)
        ];

        // Create a mask layer that will fill the map with a transparent black layer
        // and create a hole based on the polygon shape:  
        const mask = L.polygon([ // The outer rectangle
          ...mapBounds,
          ...polygonCoords.reverse() // The polygon as a hole
        ], {
          color: 'black',
          fillColor: 'black',
          fillOpacity: 0.25, // Adjust transparency
          stroke: false
        }).addTo(map);
      
        const polygon = L.polygon(polygonCoords, {
            stroke: false,
            fillOpacity: 0     // Fill opacity
        }).addTo(map);

    </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Polygon in City of London</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { height: 600px; }
    </style>
</head>
<body>

    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>

        const map = L.map('map').setView([51.5074, -0.1278], 13); // City of London (latitude, longitude)


        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Create the bounds of the map:
        const mapBounds = [
          [-90, -180], // Bottom-left
          [-90, 180],  // Bottom-right
          [90, 180],   // Top-right
          [90, -180],  // Top-left
          [-90, -180]  // Closing the loop back to Bottom-left
        ];

        const polygonCoords = [
            [51.5174, -0.1349], // top-left
            [51.5115, -0.1225], // top-right
            [51.5053, -0.1281], // bottom-right
            [51.5093, -0.1406], // bottom-left
            [51.5174, -0.1349]  // close the polygon (same as top-left)
        ];

        // Create a mask layer that will fill the map with a transparent black layer
        // and create a hole based on the polygon shape:  
        const mask = L.polygon([ // The outer rectangle
          ...mapBounds,
          ...polygonCoords.reverse() // The polygon as a hole
        ], {
          color: 'black',
          fillColor: 'black',
          fillOpacity: 0.25, // Adjust transparency
          stroke: false
        }).addTo(map);
      
        const polygon = L.polygon(polygonCoords, {
            stroke: false,
            fillOpacity: 0     // Fill opacity
        }).addTo(map);

    </script>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.