Mapbox/MapLibre, как использовать пользовательский хэш для отображения параметров в URL?
Mapbox и MapLibre предоставляют возможность объекту карты отображать параметры в URL-адресе. Установка для этого параметра «хеш» значения true показывает центр (широта, долгота), масштабирование, азимут и информацию о шаге в URL-адресе. Его можно установить так:
var map = new mapboxgl.Map({
// ...
hash: true
});
В документации указано, что может быть предоставлена дополнительная строка для указания хэша, основанного на параметрах. В моем приложении у меня есть меню для переключения слоев, и я хотел бы поместить эту информацию в URL-адрес. Я не могу найти способ, как установить эту пользовательскую хеш-строку. Всякий раз, когда регистрируется событие переключения слоев, я могу легко адаптировать эту строку, которая затем также должна быть обновлена в URL-адресе.
Я не смог найти примеров ни в документации, ни в сети.
Ответы 1
Передача строки в параметре hash не предназначена для передачи дополнительных строк запроса. Он просто дает ключ к хэшу Mapbox, поэтому он не перезаписывает ваши собственные дополнительные строки запроса. Вам все равно придется добавлять свои собственные строки запроса к URL-адресу вручную.
Если вы используете
var map = new mapboxgl.Map({
// ...
hash: true
});
ваш URL будет: http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60
Теперь, если вы передадите строку в хэш
var map = new mapboxgl.Map({
// ...
hash: "mapHash"
});
получится: http://path/to/my/page.html#mapHash=2.59/39.26/53.07/-24.1/60
Таким образом, вы можете добавить другие строковые параметры, и mapbox не перезапишет их. Рабочий пример:
https://codesandbox.io/s/relaxed-glitter-teyb7m?file=/src/App.js:462-477
Когда вы перетаскиваете карту, она обновляет координаты. Когда вы нажимаете на нее, она обновляет временную метку.
В примере попробуйте изменить хэш на true, чтобы увидеть, что произойдет с URL-адресом.
большое спасибо, я неправильно понял значение строки хеша. Спасибо за разъяснение функционала!