Javascript 如何使用JS/jQuery在点击按钮时向客户端mapbox地图添加新图层？ 问题:

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

代码示例： 但我尝试了这段代码，但在单击按钮后它什么也不做，并且在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>

mapboxgl.accessToken='secretToken-I-have-just-for-ilustr——这正在工作'；
var map=new mapboxgl.map({
容器：'映射'，//容器id
风格：'mapbox://styles/mapbox/streets-v10',
中锋：[17.10,48.14]，//在布拉迪斯拉发的起始位置
缩放：11//开始缩放
});
//向地图添加缩放和旋转控件。
addControl（新的mapboxgl.NavigationControl（））；
//后期套接字处理
$（文档）.ready（函数（）{
$（“#按钮运行”）。单击（函数（e）{
map.on（'load'，function（）{
警报（“到达这里”）//这起作用了，警报显示出来了
map.addLayer({
“id”：“路线”，
“类型”：“行”，
“来源”：{
“类型”：“geojson”，
“数据”：{
“类型”：“功能”，
“属性”：{}，
“几何学”：{
“类型”：“行字符串”，
“坐标”：[
[-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]
]
}
}
},
“布局”：{
“线路连接”：“圆形”，
“线帽”：“圆形”
},
“油漆”：{
“线条颜色”：“#888”，
“线宽”：8
}
});
});
});
});

即使这不起作用-即使我在click函数中以静态方式设置数据，但这些数据稍后将动态更改。如果我将该层添加到click event功能范围之外，则该层正在工作，并在客户端映射上加载层

设置/版本：

• Windows10 Pro-64位
• 谷歌浏览器-版本69.0.3497.100（官方版本）（64位）
• Node.js-v10.11.0
• mapbox-gl.js v0.49.0

问: 请问，有没有办法将图层动态添加到mapbox地图？以后在不刷新页面的情况下删除？（我甚至还没有找到答案）

解决方案 好吧，我发现了一些我以前没有看到的东西，具体地说

我更好地阅读了，动态设置新层是不可能的，但现在它的工作方式如下/您需要：

在所有范围之外定义变量，例如geoJson1和geoJson2，您可以稍后使用函数编辑/填充这些变量

使用您的ID（如下面的代码所示）在地图上预先设置图层，并使用goeJson1或empty[]填充图层

在点击式侦听器函数中调用：map.getSource（'data-update'）.setData（geojson2）

您只需根据需要提前设置任意数量的图层，然后就可以对其进行更新

代码结果：

mapboxgl.accessToken='来自您注册帐户的令牌'；
var map=new mapboxgl.map({
容器：'映射'，//容器id
风格：'mapbox://styles/mapbox/streets-v10',
中锋：[17.10,48.14]，//在布拉迪斯拉发的起始位置
缩放：11//开始缩放
});
var geojson={
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“行字符串”，
<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>