标签: mapbox-gl-js

我使用Mapbox GL JS并遇到群集问题.我通过点击群集添加了一些我想要获得聚集点列表的图层.

map.on('click', function(e) {
    var cluster = map.queryRenderedFeatures(e.point, { layers: ["cluster"] });

    if (cluster.length) {
        // get clustered points here
        console.log(cluster[0]);
    }
});

关于jsfiddle的工作示例 https://jsfiddle.net/L3hm8rur/

有没有办法隐藏/删除或禁用控件，例如 mapbox-gl-draw 中的控件？

我添加绘制控件如下

    draw = mapboxgl.Draw({
    drawing: true,
    displayControlsDefault: false,
    controls: {
        polygon: true,
        trash: true
    }
});

map.addControl(draw);

绘制多边形后，我想禁用或隐藏控件，因此不再可能绘制另一个多边形。

非常感谢！

格雷戈尔

我在我的Angular 2/4应用程序中导入模块,如下所示:

import { MapboxDraw } from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw';

并在其中一个组件中使用它:

var draw = new MapboxDraw({
   displayControlsDefault: false,
   controls: {
     polygon: true,
     trash: true
   }
});

map.addControl(draw);

但是当我打开页面时收到错误:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_4__mapbox_mapbox_gl_draw_dist_mapbox_gl_draw__.MapboxDraw is not a constructor

导入mapbox-gl-draw的最佳方法是什么？

我正在尝试使用react-map-gl 库在两点之间画一条线。我无法从官方文档中找到示例，因此我尝试从以下使用 Mapbox 库的代码片段中重现相同的行为

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-122.486052, 37.830348],
    zoom: 15
});

map.on('load', function() {
    map.addSource('route', {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'properties': {},
            'geometry': {
                'type': 'LineString',
                'coordinates': [
                    [-122.483696, 37.833818],

                    [-122.493782, 37.833683]
                ]
            }
        }
    });
    map.addLayer({
        'id': 'route',
        'type': 'line',
        'source': 'route',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#888',
            'line-width': 8
        }
    });
});

这是沙箱，我在控制台上没有看到任何错误，但未显示该行：
https://codesandbox.io/s/draw-line- Between-two-point-v0mbc?file=/src/index。 js:214-226

如何在mapbox-gl中为图层文本字段添加背景颜色,或者如何在文本字段中添加背景框

map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

我正在使用MapBox GL JS来创建带有自定义标记的地图:

var marker = new mapboxgl.Marker(container)
    .setLngLat([
        datacenters[country][city].coordinates.lng,
        datacenters[country][city].coordinates.lat
    ])
    .addTo(map);

但是,我似乎对标记有某种偏移问题.问题是:当缩小一点时,标记的底部并没有真正指向确切的位置:

当我进一步放大它到达目的地时,它指向确切的位置.

我真的很喜欢MapBox GL,但这个特殊的问题让我烦恼,我很想知道如何解决它.当这个问题得到解决时,我的实现远比我使用的原始映射软件更优越.

所以,我知道我们Marker.togglePopup()在Mapbox GL Api中有.但是我们能以编程方式关闭所有弹出窗口吗？

在OpenMapTiles的文档中，它可以为MapBox GL JS提供矢量图块。

但是在挖掘这两个项目的文档时，我没有找到一个选择：如何配置自托管的MapBox GL JS库以使用自托管的OpenMapTiles服务器中的图块？

尝试在mapboxgl中显示箭头以指示方向。该箭头仅在高缩放时可见，而在低缩放时不可见。

使用添加图像图层 'symbol-placement': 'line'

线层

  map.addLayer({
          'id': 'route',
          'type': 'line',
          'source': 'mapSource',
          'filter': ['==', '$type', 'LineString'],
          'layout': {
            'line-join': 'round',
            'line-cap': 'round'
          },
          'paint': {
            'line-color': '#3cb2d0',
            'line-width': {
              'base': 1.5,
              'stops': [[1, 0.5], [8, 3], [15, 6], [22, 8]]
            }
          }
        });

箭头层

const url = 'img/arrow.png'
    map.loadImage(url, (err, image) => {
      if (err) { return; }
      map.addImage('arrow', image);
      map.addLayer({
        'id': 'arrowId',
        'type': 'symbol',
        'source': 'mapSource',
        'layout': {
          'symbol-placement': 'line',
          'symbol-spacing': 1,
          'icon-allow-overlap': true,
          // 'icon-ignore-placement': true,
          'icon-image': 'arrow', …

我创建了一个MapBox实例:

var map = new mapboxgl.Map({
    container : 'map',
    style : 'mapbox://styles/mapbox/streets-v9'
});

我需要清除所有标记,并尝试使用map.remove(marker)等每个标记,以及其他一些东西,但似乎没有任何效果.

是否有一个简单的函数调用来清除地图上的所有标记？

编辑:不同于如何从地图中删除所有图层和功能？因为我在控制台中得到"eachLayer不是一个公认的功能"(或类似的功能).