javascript - 如何在使用 JS/jQuery 单击按钮时向客户端 mapbox map 添加新图层？

Question

问题:

我正在做一个项目，我使用 node.js 服务器与我在 PG 中的空间数据库通信，我的客户端使用 mapbox 在他这边可视化 map 。点击按钮后，请求发送到服务器，服务器发送到 psql，psql 发送到服务器作为结果查询，然后通过 socket.io 返回客户端，我想把我的 geoJSON/新几何作为新层放在他的发生客户端按钮点击后映射。 HTML 客户端 map 运行良好，我可以与之交互。我在客户端的 HTML 页面中使用 JS。单击按钮后，我需要从那里用新几何更新 mapbox map 。

代码示例:

但是我试过这段代码，但是在点击按钮后什么都不做，并且在 devTool Chrome 控制台中不会显示任何错误:

    <script>
mapboxgl.accessToken = 'secretToken-I-have-just-for-ilustr--this-is-working';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v10',
    center: [17.10, 48.14], // starting position on Bratislava
    zoom: 11 // starting zoom
});

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

// later SOCKET PROCESSING
    
        $(document).ready(function(){
        $('#buttonRun').click(function(e){

                map.on('load', function () {
                    alert("got HERE") // this is working, alert shows itself
                    map.addLayer({
                        "id": "route",
                        "type": "line",
                        "source": {
                            "type": "geojson",
                            "data": {
                                "type": "Feature",
                                "properties": {},
                                "geometry": {
                                    "type": "LineString",
                                    "coordinates": [
                                        [-122.48369693756104, 37.83381888486939],
                                        [-122.48348236083984, 37.83317489144141],
                                        [-122.48339653015138, 37.83270036637107],
                                        [-122.48356819152832, 37.832056363179625],
                                        [-122.48404026031496, 37.83114119107971],
                                        [-122.48404026031496, 37.83049717427869],
                                        [-122.48348236083984, 37.829920943955045],
                                        [-122.48356819152832, 37.82954808664175],
                                        [-122.48507022857666, 37.82944639795659],
                                        [-122.48610019683838, 37.82880236636284],
                                        [-122.48695850372314, 37.82931081282506],
                                        [-122.48700141906738, 37.83080223556934],
                                        [-122.48751640319824, 37.83168351665737],
                                        [-122.48803138732912, 37.832158048267786],
                                        [-122.48888969421387, 37.83297152392784],
                                        [-122.48987674713133, 37.83263257682617],
                                        [-122.49043464660643, 37.832937629287755],
                                        [-122.49125003814696, 37.832429207817725],
                                        [-122.49163627624512, 37.832564787218985],
                                        [-122.49223709106445, 37.83337825839438],
                                        [-122.49378204345702, 37.83368330777276]
                                    ]
                                }
                            }
                        },
                        "layout": {
                            "line-join": "round",
                            "line-cap": "round"
                        },
                        "paint": {
                            "line-color": "#888",
                            "line-width": 8
                        }
                    });
                });

            });
        });
    </script>

即使这样也行不通 - 即使我以静态方式在点击功能中设置数据，但此数据稍后会动态更改。如果我将该图层添加到点击事件功能范围之外，它就会工作并且图层会加载到客户端 map 上。

设置/版本:

• Windows10 专业版 - 64 位
• Google Chrome - 版本 69.0.3497.100(正式版)(64 位)
• Node.js - v10.11.0
• mapbox-gl.js v0.49.0

问:

请问有什么方法可以动态地向 mapbox map 添加图层吗？然后在不刷新页面的情况下删除？ (我仍然没有找到答案，即使是 here )

Answer 1

解决方案

好吧，我发现了以前没有看到的东西，具体来说this .

我最好阅读 documentation ，并且不可能动态设置新图层，但现在它的工作方式如下/您需要:

1. 在所有范围之外定义您的变量，例如 geoJson1 和 geoJson2，您稍后可以使用函数编辑/填充
2. 提前在 map 上使用您的 ID 设置您的图层(如下面的代码所示)并填充它，例如使用 goeJson1 或空 []
3. 在您的点击监听器函数中调用:ma​​p.getSource('data-update').setData(geojson2);

您可以根据需要预先设置任意数量的图层，稍后您可以更新它们。

代码结果:

<script>

    mapboxgl.accessToken = 'token-from-your-registered-account';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v10',
        center: [17.10, 48.14], // starting position on Bratislava
        zoom: 11 // starting zoom
    });

    var geojson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                        [-122.48369693756104, 37.83381888486939],
                        [-122.48348236083984, 37.83317489144141],
                        [-122.48339653015138, 37.83270036637107],
                        [-122.48356819152832, 37.832056363179625],
                        [-122.48404026031496, 37.83114119107971]
                    ]
            }
        }]
    };

    var geojson2 = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                        [-122.48369693756104, 37.83381888486939],
                        [-122.48348236083984, 37.83317489144141],
                        [-122.48339653015138, 37.83270036637107],
                        [-122.48356819152832, 37.832056363179625],
                        [-122.48404026031496, 37.83114119107971],
                        [-122.48404026031496, 37.83049717427869],
                        [-122.48348236083984, 37.829920943955045],
                        [-122.48356819152832, 37.82954808664175],
                        [-122.48507022857666, 37.82944639795659],
                        [-122.48610019683838, 37.82880236636284],
                        [-122.48695850372314, 37.82931081282506],
                        [-122.48700141906738, 37.83080223556934],
                        [-122.48751640319824, 37.83168351665737],
                        [-122.48803138732912, 37.832158048267786],
                        [-122.48888969421387, 37.83297152392784],
                        [-122.48987674713133, 37.83263257682617],
                        [-122.49043464660643, 37.832937629287755],
                        [-122.49125003814696, 37.832429207817725],
                        [-122.49163627624512, 37.832564787218985],
                        [-122.49223709106445, 37.83337825839438],
                        [-122.49378204345702, 37.83368330777276]
                    ]
            }
        }]
    };

    map.on('load', function () {
        map.addLayer({
            "id": "data-update",
            "type": "line",
            "source": {
                "type": "geojson",
                "data": geojson // your previously defined variable
            },
            "layout": {
                "line-join": "round",
                "line-cap": "round"
            },
            "paint": {
                "line-color": "#888",
                "line-width": 8
            }
        });
    });

    $(document).ready(function(){
        $('#buttonRun').click(function(e){
             map.getSource('data-update').setData(geojson2);
        });
    });
    
</script>