标签: mapbox-gl-js

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

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

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

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

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

我使用mapbox-gl-js将geojson文件中的点渲染到地图上.

对于每个点,我还在标记图标下方显示标签.我目前使用以下代码执行此操作:

map.addSource("mypoints", {
    type: "geojson",
    data: "mypoints.geojson",
});

map.addLayer({
    "id": "layer-mypoints",
    "type": "symbol",
    "source": "mypoints",
    "layout": {
        "icon-image": "marker-15",
        "text-field": "{name}",
        "text-anchor": "top"
    }
});

这可以按预期工作,并将点添加到地图中,并在每个点下呈现标签.

为了减少地图的混乱,我希望在地图缩小超过某个缩放级别时隐藏标签(反之亦然,在地图放大时显示标签).无论缩放级别如何,我总是想要显示点图标.

我不知道该怎么做.如何实现这一点的任何想法将不胜感激!

我试图为 mapbox-gl-draw 项目创建一个类型化定义。但是失败了。有人可以给一些提示吗？

javascript文件是这样的

'use strict';

var Setup = require('./src/setup');
var Options = require('./src/options');
var API = require('./src/api');
const Constants = require('./src/constants');

var Draw = function(options) {
  options = Options(options);

  var ctx = {
    options: options
  };

  var api = API(ctx);
  ctx.api = api;

  var setup = Setup(ctx);
  api.addTo = setup.addTo;
  api.remove = setup.remove;
  api.types = Constants.types;
  api.options = options;

  return api;
};

module.exports = Draw;

window.mapboxgl = window.mapboxgl || {};
window.mapboxgl.Draw = Draw;

我的 index.d.ts 就像

declare namespace mapboxgl …

所以,我知道我们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不是一个公认的功能"(或类似的功能).

我想使用 GeoJSON 数据在 mapbox 地图上显示自定义标签，我name在功能下添加properties了一个color我想显示为区域的多边形填充颜色，我不知道该怎么做，我已经搜索了很多但发现关于这个主题，我对 MapBox 很陌生，需要您的帮助：

JSFiddle 演示

这是代码

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [55.2324,25.073], // starting position
    zoom: 12 // starting zoom
});

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

map.addControl(draw);

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

var featureCollection = {
    "type": "FeatureCollection",
    "features": [ …

Mapbox 不适合它的容器。为什么不是？

这是呈现的 html：

<div class="map mapboxgl-map" id="mapBox">
  <div class="mapboxgl-canvas-container">
    <canvas class="mapboxgl-canvas" style="position: absolute; width: 1920px; height: 277px;" tabindex="0" aria-label="Map" width="1920" height="277">
    </canvas>
  </div>
</div>

这些277px是我猜的默认值。

这是js：

mapboxgl.accessToken = 'blabla';
  var map = new mapboxgl.Map({
    container: 'mapBox',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-77.04, 38.907],
    zoom: 11.15
  });

这是 scss：

.map {
  grid-column: 1/-1;
  height: 100%;
  position: relative;
  canvas, .mapboxgl-canvas {
    height: 100%;
  }
}

如果我将如此著名的添加!important到 ，height: 100%;那么它会起作用，但地图会被拉伸。

我该怎么做？

我有一个 geoJSON 文件，我vector.tiles使用这个 npm 包转换成它。我用const tileIndex = geojsonvt(geoJSON). geoJSON 文件具有以下格式，并且在转换时没有任何错误。

const geoJSON = {
  type: 'FeatureCollection',
  crs: {
    type: 'name',
    properties: { name: 'urn:ogc:def:crs:OGC:1.3:CRS84' }
  },
  features: [
    {
      properties: [Object],
      geometry: [Object],
      type: 'Feature',
      _id: '5ed7b221a61a4b2970433932'
    },
    ... 1840 more items
 ]
}

转换后得到的结果（geoJSON vector-tiles）如下 -

const tiles = {
    options: {},
    tiles: {
      '0': {
        features: [Array],
        numPoints: 540529,
        numSimplified: 3,
        numFeatures: 1940,
        source: null,
        x: 0,
        y: 0,
        z: …