Mapbox/ mapplibre如何使用自定义散列来显示URL中的参数?

Question

Mapbox和mapplibre都为地图对象提供了在URL中显示参数的选项。设置这个"hash"选项为true显示URL中的中心(纬度，长度)，缩放，方位和俯仰信息。可以这样设置:

var map = new mapboxgl.Map({
// ...
hash: true
});

在文档中声明，可以提供一个额外的字符串来指示基于参数的散列。在我的应用程序中，我有一个菜单来切换图层，我想把这个信息在URL中。我找不到一种方法来设置这个自定义哈希字符串。当一个切换层事件被注册时，我可以很容易地调整这个字符串，然后在URL中也应该更新。

我在文档中找不到任何例子，也没有在网上找到。

Answer 1

将字符串传递给哈希选项并不会传递额外的查询字符串。它只是为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会发生什么。