Как добавить новый слой на карту клиента mapbox по нажатию кнопки с помощью JS / jQuery? - PullRequest
Новая
       20

Как добавить новый слой на карту клиента mapbox по нажатию кнопки с помощью JS / jQuery?

0 голосов
/ 10 октября 2018

Проблема:

Я работаю над проектом, в котором я использую сервер node.js, который связывается с моей пространственной БД в PG, а мой клиент использует mapbox для визуализации карты на его стороне.После нажатия кнопки запрос отправляется на сервер, сервер на psql, psql на сервер как запрос результата, а затем через socket.io возвращается к клиенту, где Я хочу поместить свою геометрию geoJSON / new в качестве нового слоя на егокарта после этого нажатия кнопки клиента происходит .Карта на стороне клиента в HTML хорошо работает, и я могу взаимодействовать с ней.Я использую JS внутри HTML-страницы моего клиента.Оттуда мне нужно обновить карту 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 Pro - 64-разрядная
  • Google Chrome - версия 69.0.3497.100 (официальная сборка) (64-разрядная версия)
  • Node.js - v10.11.0
  • mapbox-gl.js v0.49.0

Q:

Есть ли способ, как динамически добавить слой на карту mapbox, пожалуйста?А позже удалить без обновления страницы?(Я до сих пор не нашел ответа, даже здесь )

1 Ответ

0 голосов
/ 10 октября 2018

Решение

Хорошо, я нашел что-то, чего раньше не видел, конкретно это .

Мне лучше прочитать документацию , и этоневозможно настроить новые слои динамически, но теперь он работает следующим образом / вам необходимо:

  1. Из всех областей определить ваши переменные, например, geoJson1 и geoJson2, которые вы позже сможете редактировать / заполнятьfunction
  2. Заранее настройте свой слой на карте с вашим идентификатором (как в коде ниже) и заполните его, например, goeJson1 или пустым []
  3. В функции прослушивателя по щелчку вызовите это: 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>
...