标签: mapbox-gl-js

有人知道如何绕过 MapBox 的 500KB 图块大小限制吗？

他们网站上的规则规定：“在任何缩放级别，单个矢量图块都不能超过 500kb。”

我在几个缩放级别上的一组数据达到了这个限制。（我通过 Tippecanoe 运行 geojson 文件以 .mbtiles 格式创建此数据。）我尝试通过他们的 Uploads API 上传，但这仍然有限制。删除功能并在较低的细节级别上工作不是选项。我也尝试过向 MapBox 发送电子邮件，但没有收到任何消息。

我正在使用 mapbox-gl-js 库尝试实现一个功能，用户可以将多边形添加到 Mapbox 地图并根据需要进行编辑。我已经能够通过添加图层将多边形添加到地图中，但我不知道如何允许用户编辑它们。有没有一种简单的方法可以将多边形添加到地图框并更改它们是否可编辑？

有什么方法可以检测 Mapbox 弹出窗口何时打开？mapbox 存储库中的此问题close描述了一个如下工作的事件：

let popup = new mapboxgl.Popup()
popup.on('close', function(e) {
    alert()
})

但是，我找不到任何方法来检测弹出窗口何时打开。这不起作用：

let popup = new mapboxgl.Popup()
popup.on('open', function(e) {
    alert()
})

编辑：

现在支持弹出事件，因此上面的示例应该可以工作。

在 Google 地图宣布政策变更后，我开始更换地图。然而，第一次尝试遵循 Mapbox 示例并没有渲染地图 - 只有带有 Mapbox 徽标和信息图标的容器可见。有什么想法可能是错误的吗？该地图在 Chrome 和 Firefox 中均未显示，因此这不是浏览器问题。Mapbox 自己的示例在两者中呈现，并且我的访问令牌是有效的。如果这个论坛能够提供大力支持，我也很乐意考虑使用替代 API。

这些行被添加到头部的底部：

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

这是创建地图的实际代码：

<div id = "googleMap"> </div>
   <script>
    mapboxgl.accessToken = '<MyAccessToken>';

    var monument = [51.5220163 , -0.1404545];
    var map = new mapboxgl.Map({
    container: 'googleMap',
    style: 'mapbox://styles/mapbox/light-v9',
    center: monument,
    zoom: 16
});
</script>

这是用于完成图片的 div 的 CSS：

#googleMap {

    width: 49%;
    margin-top: 100px;
    margin-left: 50%;
    margin-bottom: 10px;
    max-height: 60%;
 }

也没有控制台消息。

我尝试使用以下代码更改 line-dasharray 设置，

'line-dasharray': [
    "case", 
    ['==', ['get', "user_class_id"], 'laneway'],[0.2,2],[0.3,2] 
 ]

它给出了这个错误，

Error: layers.gl-draw-line-active.hot.paint.line-dasharray[2][0]: Expression name must be a string, but found number instead. If you wanted a literal array, use ["literal", [...]].

所以我根据错误建议修复了代码，

  'line-dasharray': [
      "case", 
      ['==', ['get', "user_class_id"], 'laneway'],['literal',[0.2,2]],['literal',[0.3,2]] 
  ]

它给了我这个错误，

evented.js:136 Error: layers.gl-draw-line-active.hot.paint.line-dasharray: data expressions not supported

有谁知道如何解决这个问题？

使用react-native-mapbox-gl/maps，当aSymbolLayer动态添加到a时ShapeSource，似乎没有显示，或者ShapeSource没有更新。

这是要重现的示例：根据CustomIcon示例，我用下面的代码替换了代码。要重现，只需执行示例，复制粘贴代码来代替CustomIcon.js示例中的现有代码。

import React from 'react';
import { View, Text } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';

import sheet from '../styles/sheet';

import BaseExamplePropTypes from './common/BaseExamplePropTypes';
import Page from './common/Page';
import Bubble from './common/Bubble';

const styles = {
  icon: {
    iconAllowOverlap: true,
  },
  view: {
    width: 60,
    height: 60,
    borderColor: 'black',
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 50
  }
};

const customIcons …

我正在使用 Mapbox、material-ui 和自定义样式测试 React 组件。我使用 Jest + Enzyme 进行测试。

我有问题：“window.URL.createObjectURL 不是函数”。我读过类似的问题： github.com/uber/react-map-gl/issues/210
github.com/mapbox/mapbox-gl-js/issues/3436
github.com/mapbox/mapbox-gl-js-mock

并试图添加一些东西但没有成功。请解决问题。

代码沙盒

我需要在 javascript 中更改地图框的语言，我只在文档中看到以下代码

map.setLayoutProperty('country-label', 'text-field', ['get', 'name_de'])

但这行代码只会更改国家/地区名称，但我需要一切（城市、城镇等）

我是 MapBox GL Js 的新手，我想通过 https 调用一个大的 GeoJSON 文件并将其显示到地图上。我认为调用矢量平铺是最好的方法，我发现一些教程展示了如何将 GeoJSON 数据转换为矢量平铺，但在服务器端或将其上传到 MapBox 样式，但我的 GeoJSON 文件经常更改。所以我找到了这个解决方案是一个名为 geojson-vt 的新 JavaScript 库，描述了如何将巨大的 GeoJSON 文件快速转换为矢量切片（客户端），这似乎是我正在寻找的，但是！ ，如何将其集成到MapBox GL JS中以调用图层？

阻止如何使用 Mapbox GL JS 添加图层，结果如下：vartileIndex = geojsonvt(MyGeoJSON); vartile =tileIndex.getTile(z,x,y);

...或者我只是没有明白！请有人帮助或可以为我的问题提出其他解决方案。

在过去的几个小时里，我一直用头撞桌子。

我试图让 Mapbox 放大所有标记的边界区域的负载。

但是，这是我在下面的代码中遇到的错误。

此错误出现在下面的控制台日志图像之后，因此 lat lng 坐标肯定存在。

未捕获的错误：无效的 LngLat 对象：（NaN，NaN）

  const onLoad = () => {

    let points = [];

    props.cats.forEach(cat => (
      points.push([ cat.lat, cat.lng ])
    ));

    points.length > 0 && ref.current.getMap().fitBounds(points, {
      padding: { top: 50, bottom: 50, left: 50, right: 50 },
      easing(t) {
          return t * (2 - t);
      },
    });

  };