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

Question

问题：

我正在做一个项目，我使用 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>

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

设置/版本：

Windows10 专业版 - 64 位
Google Chrome - 版本 69.0.3497.100（官方构建）（64 位）
Node.js - v10.11.0
mapbox-gl.js v0.49.0

问：

请问有什么方法可以动态添加图层到mapbox地图吗？然后在不刷新页面的情况下删除？（我仍然没有找到答案，甚至here）

Answer 1

解决方案

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

我最好阅读documentation，动态设置新层是不可能的，但现在它工作如下/你需要：

在所有范围之外定义您的变量，例如 geoJson1 和 geoJson2，您稍后可以使用函数编辑/填充它们
提前在地图上使用您的 ID 设置您的图层（如下面的代码所示）并填充它，例如使用 goeJson1 或空 []
在你的点击监听函数中调用这个：map.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>

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

How to add new layer to client mapbox map on button click with JS/jQuery?

html

javascript

jquery

geojson

mapbox

问题：

代码示例：

设置/版本：

问：

解决方案

代码结果：