Строки со значениями всплывающих окон и суммами маршрутов - PullRequest
Новая
       12

Строки со значениями всплывающих окон и суммами маршрутов

0 голосов
/ 05 мая 2020

Я новичок в Mapbox и изо всех сил пытался найти этот ответ в документации; их так много, что сначала это немного ошеломляет. Я делаю некоторые вычисления локально и загружаю результаты в виде гео json, которое включает сегменты многих дорог и число до go для каждого сегмента. Например, сегмент дороги A имеет числовое c значение 1, а сегмент дороги B имеет числовое c значение 3. Я хотел бы сделать две вещи:

  1. Установите так, чтобы на этих участках дороги есть всплывающие окна со значением. В настоящее время я загружаю их и показываю их цвет на основе этого значения, но я не могу найти способ добавить всплывающее окно к тем сегментам, которые отображали бы это значение; вся всплывающая документация, которую я нахожу, сосредоточена на точках.
  2. Создайте опцию, которая будет оценивать навигационные маршруты путем суммирования всех числовых c значений сегментов, встречающихся на маршруте. Поэтому, если маршрут проходит через два вышеуказанных сегмента (A и B), в конце будет показано значение 4.

Я делаю все это в браузере, поэтому ни один из SDK не нужен насколько я могу судить, хотя я думаю, что может понадобиться mapbox-GL. Я не понимаю, с чего начать; любая помощь будет очень признательна!

1 Ответ

0 голосов
/ 05 мая 2020

Это возможно. Вы также можете заменить прослушиватель событий onClick на прослушиватель событий, который прослушивает onHover или что-то еще. Чтобы он заработал, просто замените <Your_Access_Token> своим токеном доступа. 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a GeoJSON line</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<Your_Access_Token>';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-122.486052, 37.830348],
    zoom: 15
});

map.on('load', function () {

    map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {
                  "name": "Hello, world!"
                },
                "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
        }
    });
  
  map.on('click', 'route', function (e) {
  new mapboxgl.Popup()
    .setLngLat(e.lngLat)
    .setHTML(e.features[0].properties.name)
    .addTo(map);
  });
 
  // Change the cursor to a pointer when the mouse is over the states layer.
  map.on('mouseenter', 'route', function () {
     map.getCanvas().style.cursor = 'pointer';
  });
 
  // Change it back to a pointer when it leaves.
  map.on('mouseleave', 'route', function () {
    map.getCanvas().style.cursor = '';
  });
});
</script>

</body>
</html>
...