标签: mapbox

根据Mapbox GL JS 快速入门指南，使用 Mapbox CDN 在网站上实现地图应该很简单。不幸的是，如果地图位于 Bootstrap 模态内部，则情况并非如此，该模态没有预定义宽度，该属性仅在模态打开后设置。

结果是加载默认宽度为 400px 的 Mapbox 画布，这可能与模态宽度不同并造成糟糕的用户体验。

此外，如果打开模式，然后调整浏览器窗口的大小，地图会自动按预期适合整个水平空间，这似乎是对调整大小事件的 JavaScript 响应。

下面是相关代码。

HTML 文件

<div id='map'></div>

CSS文件

#map {
  height: 300px;
}

JS文件

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

我尝试在 Bootstrap 3.4.0 模式中加载 Mapbox，就像我以前在使用 Google 地图或 Bing 地图时所做的那样，但在这两种情况下都嵌入在 iframe 中。因此，我期待看到 Mapbox 能够像 Google 地图和 Bing 地图一样填充整个模式。

相反，Mapbox 界面（左下角徽标和右下角信息按钮）正确定位在模式内部的边界处，但包含地图的画布定位不正确。

最后，为 #map CSS 属性设置预定义宽度并不是解决方案。如果宽度设置为固定宽度（以像素为单位），则可能无法在所有窗口尺寸上正确显示，而添加固定百分比宽度（例如 100%）则无法解决问题。

我正在尝试创建一个 android 和 ios 应用程序，您可以在其中看到整个世界。我只需要以单独的颜色显示国家/地区。不需要城市、街道等。它应该看起来像这样：

我不能使用静态图像，它需要为每个用户单独着色。

到目前为止我已经尝试过使用 Mapbox。但对于 Mapbox，我还没有找到动态样式。似乎它们必须使用 Mapbox Studio 提前创建。我尝试了带有图块图层的谷歌地图。但为此（据我所知）我需要重新创建整个世界。这将是一个巨大的努力。

所以它们都不符合我的需求。也许我错过了一个简单的技巧，但我对此感到非常沮丧。

非常感谢任何帮助！

我想自行托管我的矢量地图。我正在使用一些自定义字体和一些自定义图标。

当我在 Mapbox Studio 中创建样式并稍后将其导出时，我的样式文件中将包含以下两行：

"sprite": "mapbox://sprites/<user>/<token>/<token>",
"glyphs": "mapbox://fonts/<user>/{fontstack}/{range}.pbf",

我现在的问题是如何自己创建这些文件？我有一个包含我.svg和我的.ttf文件的文件夹。但我现在如何将它们转换成我需要的格式呢？

我尝试了https://github.com/openmaptiles/fonts来获取字形部分，但无法运行。然后我找到了https://github.com/mapbox/glyph-pbf-composite但不明白它应该如何工作。

我正在尝试更改图层中value某个功能（基于）的属性（） 。id我无法使用 setFeatureState，因为我需要根据属性对功能进行聚类value，并且clusterProperties不支持功能状态聚合。我当前用于设置value具有特定功能的属性的方法id如下（每 2 秒，我迭代GeoJSON 中的每个功能并设置属性）：

setTimeout(() => {\n  const newGeojson = {\n    ...geojson,\n    features: geojson.features.map(feature => {\n      if ([0, 1].includes(feature.id)) { // update features selectively\n        feature.properties.value= 1;\n      }\n      return feature;\n    })\n  };\n  map.getSource(\'geom\').setData(newGeojson);\n}, 2000);\n

这是非常低效的，时间复杂度为 O(nk)，k 是我想要更改的特征数量\xe2\x80\x94我有大约130,000 个特征。事实上，它导致我的浏览器崩溃。我尝试使用mapbox-gl-js的MapboxDraw（mapbox-gl-js有一个setFeatureProperty方法），但是加载130,000个功能需要太长时间（使浏览器崩溃），所以这不能作为一个选项。是否有更可行的选择，我可以在运行时设置功能的属性，而无需花费很长时间？

我的 GeoJSON （geojson变量）具有以下格式（Mapbox需要 GeoJSON 数据）：

{ \n    "type":"FeatureCollection",\n    "features":[ \n        { …

我目前正在 Mapbox 上进行可视化，该可视化主要针对给定区域，在此示例中假设为德克萨斯州。我想让这个区域在地图上得到强调，而其他所有东西都淡入背景。

到目前为止，我已成功将 Natural Earth 的 shapefile 导入 Mapbox Studio，以使德克萨斯州以外的所有地方的阴影变暗：

这很棒，但理想情况下我想隐藏德克萨斯州以外的所有 Mapbox 标签。我一直在尝试使用 Mapbox studio 中的过滤器来“过滤掉”每个图层上的所有项目，但似乎它们的图层设置不允许我根据地理空间属性（仅限数据属性）进行过滤。

有谁知道我可以隐藏德克萨斯州以外所有城市标签的方法吗？要么在 js Mapbox GL 库上以编程方式，要么最好通过 Mapbox Studio？

我正在使用mapbox 静态图像 API。我的风格有两层，我试图根据请求进行过滤。该文档似乎只提供了一个“setfilter”和一个“layer_id”属性，表明我只能过滤其中一层。

是否可以在静态图像 API 中过滤两层（或三层、四层）？我希望能够在请求中用逗号分隔 layer_id 和/或 setfilter 参数来处理这种情况。

他们在文档中提供的用于设置过滤器的示例请求是：

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-91,60,2/800x600?access_token=YOUR_MAPBOX_ACCESS_TOKEN&setfilter=["==","name_en","Canada"]&layer_id=country-label

我正在寻找类似的东西：

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-91,60,2/800x600?access_token=YOUR_MAPBOX_ACCESS_TOKEN&setfilters=["==","name_en","Canada"],["==","name","New York"]&layer_ids=country-label,state-label

FWIW，我当前的解决方法是对其中一个层使用覆盖层来形成我需要过滤的 geojson 对象，但它很老套，并且对我可以添加到请求中的数量有上限，我必须简化 geojson请求的简洁性。

我的任务是更改 Mapbox 中图标图像的图标颜色。mapbox 允许这样做的唯一方法是使用 sdf-icons( https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color )。

通过一小时的搜索，我找不到实现这一目标的最简单方法。我发现有一个 npm 模块是https://www.npmjs.com/package/image-sdf但是在 png 上使用它的命令将其转换为 sdf 然后在地图上渲染后并没有给我最好的结果。

我正在使用的命令

image-sdf cycle-initial.png --spread 5 --downscale 1 --color black > cycle.png

cycle-initial.png(INPUT) 如下：

cycle.png(OUTPUT) 如下：

但是在使用 cycle.png 作为 Image src 时并没有给出最好的结果。

代码片段：

const img = new Image();
img.addEventListener('load', () => {
            this.mapInstance.addImage('circle-icon', img, { sdf: true });
        }, false);
img.src = cycle;

我请求是否有人，如果我在这里做错了什么，请帮助我，或者是否有任何正确的方法来创建 sdf-icon 以正确呈现。

我正在尝试在React-Mapbox-GL 中实现自定义缩放行为。如果用户滚动，地图不会缩放，只有网页在滚动。只有当用户“双指缩放”时，地图才能缩放。

我使用scrollZoom: false，它禁用两个操作的缩放（滚动和“双指缩放”）。然后，我添加了react-quick-pinch-zoom库及其onUpdate事件，这有助于我为“pinch-to-zoom”事件添加侦听器。

缩放体验不好，我不知道如何实现与 React-Mapbox-GL 类似的缩放体验。

代码沙盒

import React, { useState, useCallback } from "react";
import QuickPinchZoom from "react-quick-pinch-zoom";
import ReactDOM from "react-dom";
import ReactMapboxGL from "react-mapbox-gl";

const Map = ReactMapboxGL({
  accessToken:
    "pk.eyJ1IjoiZG9ubm5lLWdyaSIsImEiOiJjanF5eHB1aDMwOG83NDVxcTd4aG0xbTcxIn0.sZBpmFCnFBApzXGsIFXh4A",
  maxZoom: 18,
  scrollZoom: false
});

const MapContainer = () => {
  const [mapZoom, setMapZoom] = useState(8);

  const onUpdate = useCallback(
    ({ scale }) => {
      if (scale === 1) {
        return;
      }
      const scaleDiff = (scale - 1) …

我正在尝试向我的地图添加一个自定义的 Geolocate me 按钮并且它有点工作，但是前提是我还添加了来自 Mapbox 的标准图标。下面的代码有效，但如果我删除该行map.addControl(geolocate, 'top-right');，我的左按钮将停止工作。

      // Initialize the geolocate control.
  var geolocate = new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true
    },
      trackUserLocation: true
    });
    // Add the control to the map.
  map.addControl(geolocate, 'top-right');

  class ToggleControl {

    constructor(options) {
      this._options = Object.assign({}, this._options, options)
    }

    onAdd(map, cs) {
      this.map = map;
      this.container = document.createElement('div');
      this.container.className = `${this._options.className}`;

      const button = this._createButton('monitor_button')
      this.container.appendChild(button);
      return this.container;
    }
    onRemove() {
      this.container.parentNode.removeChild(this.container);
      this.map = undefined;
    }
    _createButton(className) {
      const el = window.document.createElement('button') …

我在安装 pod 时面临以下问题。

[!] 安装 Mapbox-iOS-SDK 时出错 [!] /usr/bin/curl -f -L -o /var/folders/qn/l5lqh07s5sscfzbm1tklmzgr0000gn/T/d20200915-46243-1aqah9u/file.zip https://api .mapbox.com/downloads/v2/mobile-maps/releases/ios/packages/6.1.0/mapbox-ios-sdk-dynamic.zip --create-dirs --netrc-optional --retry 2 -A 'CocoaPods /1.9.3 cocoapods-downloader/1.4.0'

% Total % Received % Xferd 平均速度时间时间时间当前下载上传总花费左速度0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0 curl: (22) 请求的 URL 返回错误：401 Unauthorized

我在主目录中添加了 .netrc 文件仍然面临问题。

Pod 错误1