如何添加图标来动态切换 mapboxgl 样式？

Question

我想在 mapboxgl 视图中添加如下图标。使用 Angular2

当我点击图标时它应该会自动切换样式（streets-v9, satelllite-v9）

我正在关注 link mapboxgl example

Answer 1

你看到这个API方法了吗？ https://www.mapbox.com/mapbox-gl-js/api/#map#setstyle

有了它，您可以为地图设置新的样式，例如：单击一个图标或按一个按钮或任何你想要的。

以此为参考，构建于：

https://jsfiddle.net/andi_lo/706pot8L/

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
let map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9', 
  center: [-1.77, 52.73],
  zoom: 3,
});

let icon = document.getElementById('icon');

icon.addEventListener('click', function(e) {
 map.setStyle('mapbox://styles/mapbox/light-v9');
}, false)

#icon {
  position: absolute;
  top: 15px;
  left: 15px;
  color: black;
}

#map {
  height: 500px;
}

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>

<div id="map"></div>

<button id="icon">
Switch layers
</button>

Answer 2

你想要的是一个可以切换图层的"control"。 Mapbox-GL-JS 不包含这样的东西，也没有被列为 plugin（还）。

您应该使用 Mapbox-GL-JS 的 iControl class 创建控件，然后按照 Mapbox 的说明添加样式和行为：

function LayerSwitchControl() { }

LayerSwitchControl.prototype.onAdd = function(map) {
    this._map = map;
    this._container = document.createElement('div');
    this._container.className = 'mapboxgl-ctrl';
    // change this next line to include a layer-switching icon
    this._container.textContent = 'Hello, world';
    return this._container;
};

LayerSwitchControl.prototype.onRemove = function () {
     this._container.parentNode.removeChild(this._container);
     this._map = undefined;
};

然后您需要将代码添加到：

添加控件
适当响应 click 事件。

Answer 3

这是我的工作代码，

这是缩放级别控件

如何添加图标来动态切换 mapboxgl 样式？

How can I add an icon to switch the mapboxgl style dynamically?

mapbox

mapbox-gl

mapbox-gl-js

mapbox-marker