标签: mapbox

我正在使用 Mapbox GL JS 从某些页面上的外部 URL 加载 GeoJSON。我想自动使地图适合我正在加载的多边形的边界。

我知道turf.js 的 bbox 方法可以帮助解决这个问题，但我不确定如何将 GeoJSON 加入turf.bbox调用中。

这是我现在的代码：

map.addSource('mylayer', {
    type: 'geojson',
    data: '/boundaries.geojson'
});
map.addLayer({
    "id": "mylayer",
    "type": "fill",
    "source": "mylayer",
    'paint': {
        'fill-color': '#088',
        'fill-opacity': 0.6
    }
});
var bbox = turf.bbox('mylayer');
map.fitBounds(bbox, {padding: 20});

但它失败了turf.min.js:1 Uncaught Error: Unknown Geometry Type。文档说需要bbox“任何 GeoJSON 对象”。

我该如何正确地做到这一点？我显然宁愿不加载外部文件两次。

我设法添加了地图导航控件，移除了指南针并更改了缩放控件背景和不透明度。但是“+”和“-”图标呢？如果可以，如何更改图标颜色？

我正在使用 Mapbox iOS SDK 并尝试在没有 geojson 的情况下绘制折线。我尝试使用此方法获取路线：

func calculateRoute() {

    ...

    let options = NavigationRouteOptions(waypoints: [origin, destination], profileIdentifier: .automobileAvoidingTraffic)
    Directions.shared.calculate(options) { (waypoints, routes, error) in 
        guard let route = routes?.first else { return }
        self.showPreview(route: route)
    }
}

然后我试着画了一条路线。

func showPreview(route: Route) {

    guard let steps = route.legs.first?.steps else { return }
    var points = [CLLocationCoordinate2D]()
    for step in steps {
        points.append(step.maneuverLocation)
    }
    let line = MGLPolyline(coordinates: &points, count: UInt(points.count))
    mapView?.addAnnotation(line)
}

它在地图视图上绘制一条折线。我可以使用两个委托方法 (MGLMapViewDelegate) 更改折线的颜色和宽度：

func mapView(_ mapView: MGLMapView, lineWidthForPolylineAnnotation …

我的地图上有 JSON 图标，当它们靠得很近时，它们会随着我缩小而消失。（我猜是为了避免混乱）。我想保留它们 - 即使它们以某种方式重叠 - 因为这些图标用于分析。我找不到避免这种情况的文档。下面是一个示例屏幕截图 - 以及我显示 JSON 点的代码。

截屏 ：

当前代码（整个功能，因为它没有太多 - 简单）：

function addMDA_toA(){

    topleftmapbox.loadImage('images/MDA.png', function(error, image) {
        if (error) throw error;
        topleftmapbox.addImage('meso-image', image);

    });


     var url = 'json/MDA.json';



    window.setInterval(function() {
        topleftmapbox.getSource('mesocyclone').setData(url);
    }, 2000);

    topleftmapbox.addSource('mesocyclone', { type: 'geojson', data: url });
    topleftmapbox.addLayer({
        "id": "mesocyclone",
        "type": "symbol",
        "source": "mesocyclone",
        "layout": {
            "icon-image": "meso-image"
        }
    });

}

我在我的 android 应用程序上使用 MapBox SDK，地图 onCreate 显示完美。我可以添加图层并显示我的标记等等。
当用户点击一个标记时，另一个活动就会启动。所以我在 onPause() 方法上使用 mapView.onPause() 。
当用户尝试返回地图活动时出现问题，我为此使用了 finish() 方法，一旦在地图活动上，黑屏将替换地图，用户将无法再看到地图和标记。
我发现当我锁定手机并返回应用程序时也会出现该问题。
关于如何解决这个问题的任何想法。

非常感谢您。

使用 Mapbox 删除和添加源/图层的正确方法是什么？data我正在使用 React，并且在更新源属性时遇到问题并收到错误。据我在 Mapbox 的文档中读到的内容，removeSource应该在再次添加之前将其删除，但它不适用于组件更新。

错误：已经存在具有此 ID 的源

  componentDidMount() {
    const { data } = this.props;
    this.map = new mapboxgl.Map(config);
  }

  componentWillUnmount() {
    const map = this.map;
    map.remove();
    map.removeControl(Draw, 'top-left');
  }


  shouldComponentUpdate(props, nextProps) {
    const { data } = props;
    if (JSON.stringify(data) !== JSON.stringify(nextProps.data)) {
      return true;
    }
    return false;
  }


  componentDidUpdate(prevProps) {
    const { data } = this.props;
    if (JSON.stringify(data) !== JSON.stringify(prevProps.data)) {
      this.fetchMap();
    }
  }

  fetchMap() {
        const map = this.map;
        const { …

今天，我想提交基于 Mapbox Navigation SDK 及其所有依赖项构建的应用程序。遗憾的是，由于以下错误，App Store Connect 每次都拒绝我的上传：

为了使 SDK 工作，文档说启用以下后台模式：

• 应用程序使用 AirPlay 播放音频或流式传输音频/视频
• 应用注册位置更新
• 应用下载内容以响应推送通知

从现在开始，在 IOS13 中，Apple 希望您提供这些模式的标识符。唯一的问题，我在任何地方都找不到它们。

有人可以帮我弄这个吗？

重现步骤

• 实现 Mapbox SDK、Directions SDK、Navigation SDK、...
• 启用后台模式：应用程序使用 AirPlay 播放音频或流音频/视频，应用程序注册位置更新，应用程序下载内容以响应推送通知
• 尝试将应用存档并发布到 App Store Connect

预期行为

完成了 info.plist 中后台任务的标识符，应用程序可以毫无问题地存档和构建到 App Store Connect

实际行为

本地应用程序在没有它的情况下运行，但是当您想将其上传到 App Store Connect 时，它会请求这些标识符。如果 info.plist 中没有这些标识符，它就不会上传。

配置

** Mapbox SDK 版本：pod 'MapboxNavigation', '~> 0.38.0' **

** iOS/macOS 版本：iOS 13.1.3 (17A878) **

** 设备/模拟器型号：Iphone XS Max iOS 13.1.3 (17A878) **

** Xcode 版本：版本 11.0 (11A420a) **

我从重写路线规划Web应用程序的过程中Mapbox.js，以Mapbox GL JS库。

几乎实现了所有功能，由于滞后、不流畅的动画和地图层的普遍迟缓，它几乎无法使用。

现在，我完全有可能使用错误的 API。我做了一个快速比较并在这里发布：

https://petrnagy.github.io/index.html#automove=no

请注意，旧的Mapbox.js（左）比新的Mapbox GL JS（右）平滑得多。

您可以在这里更清楚地看到两个地图都在移动和缩放的区别：

https://petrnagy.github.io/index.html#automove=yes

这只是一个基本的例子。该应用程序本身还具有：

• 动态风格的路线（交通、空气质量、海拔）
• 覆盖地图的丰富用户界面
• 附加层（例如自行车道、POI、空气质量）

有了所有这些功能，Mapbox GL JS 几乎无法使用。不像旧的 Mapbox.js，它很流畅。

任何优化性能的建议表示赞赏！

我的应用程序将数据（包括坐标和其他信息）存储在本地数据库中。由于数据点的数量，该应用程序使用聚类在 iOS 上使用 Mapbox 显示数据。一些标记样式基于数据，这些数据可能会在运行时发生变化。地图设置为：

// fetch data from DB
let dataArray: [MyData] = fetchData()

// build features from data array
var features = [MGLPointFeature]()
dataArray.forEach({ (data) in
   let feature = MGLPointFeature()
   feature.identifier = data.id
   feature.coordinate = CLLocationCoordinate2D(latitude: data.lat, longitude: data.lng)
   // our attributes
   feature.attributes = [
      "amount": data.amount
      "marked": false
   ]
   features.append(feature)
})

// make and add source
let source = MGLShapeSource(identifier: "MySourceId", features: features, options: [
   .clustered: true
])
style.addSource(source)

// regular marker layer
let layer = MGLSymbolStyleLayer(identifier: …

如何在Mapbox 地图对象之外创建可以拖入其中的元素？例如，假设我想在页面上呈现位置列表。每个位置都是一个带有自定义标记或图标的 React 组件。

在此位置列表旁边是 Mapbox 地图。位置列表不会在地图内呈现。虽然我知道可以使这些单独的位置组件可拖动，但是否可以将它们拖放到 Mapbox 地图中，并将其识别为地图上具有纬度/经度坐标的实际标记？如果是这样，我该怎么做？

以下是我尝试过的代码中的相关源文件：

索引.js

import dynamic from "next/dynamic";
import { useSelector } from "react-redux";
import Plant from "../../components/Plant";

const MapboxMap = dynamic(() => import("../../components/MapboxGLMap"), {
  ssr: false,
});

const Blueprint = () => {
  const plants = useSelector((state) => state.plants);

  const showPlants = () => {
    return (
      <React.Fragment>
        {plants.map((plant) => (
          <Plant plant={plant} />
        ))}
      </React.Fragment>
    );
  };

  return (
    <React.Fragment>
      <div className="ui container centered grid blueprint">
        <div className="three wide …