标签: mapbox

在我的角度应用程序中，我使用 Directions api 并尝试添加从一个方向到另一个方向的路线路径。第一次发出 ajax 请求时，路由路径已正确创建，但从第二次开始，我看不到路由路径。

从第二次 ajax 请求开始，我收到此错误 - 此地图上已存在 id 为“route”的图层

有没有办法更新mapbox中的源和图层？

drawRoute() {
const url = `https://api.mapbox.com/directions/v5/mapbox/driving/${this.startData?.lng},${this.startData?.lat};${this.endData?.lng},${this.endData?.lat}?alternatives=true&geometries=geojson&steps=true&access_token=${environment.mapbox.accessToken}`;

this._http.get(url).subscribe({
    next: (result) => {
        const geojson: any = {
            type: 'Feature',
            properties: {},
            geometry: {
               type: 'LineString',
               coordinates: result.routes[0]
            }
        };

        if (this.map?.getSource('route')) {
            const source: mapboxgl.GeoJSONSource = this.map?.getSource('route') as 
             mapboxgl.GeoJSONSource;
            source.setData(geojson);
        } else {
            this.map?.addSource('route', {
            type: 'geojson',
                data: {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                       type: 'LineString',
                       coordinates: result.routes[0].geometry.coordinates
                    }
                }
            });
        }

        this.map?.addLayer({
            id: 'route',
            type: …

我正在研究 android studio 中的 mapbox 中的示例，但是当我运行代码时，它显示 FAILURE: Build failed with an exception。

任务“:app:checkDebugDuplicateClasses”执行失败。执行 com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable 模块中发现重复类 com.mapbox.android.telemetry.AlarmReceiver 时发生故障

这是我在 gradle 中的实现

implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:9.6.2'
implementation ('com.mapbox.mapboxsdk:mapbox-android-sdk:9.6.2'){
    exclude group: 'group_name', module: 'module_name'
}
implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-locationlayer:0.11.0'
implementation 'com.mapbox.mapboxsdk:mapbox-sdk-services:4.8.0'
implementation('com.mapbox.mapboxsdk:mapbox-android-navigation-ui:0.42.6') {
    exclude group: 'com.mapbox.mapboxsdk', module: 'mapbox-android-plugin-annotation-v8'
}

这是它显示的错误

Execution failed for task ':app:checkDebugDuplicateClasses'.
A failure occurred while executing 
com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable
Duplicate class com.mapbox.android.telemetry.AlarmReceiver found in modules jetified-mapbox-android-telemetry-4.7.0-runtime (com.mapbox.mapboxsdk:mapbox-android-telemetry:4.7.0) and mapbox-android-telemetry-okhttp3-8.1.0-runtime (com.mapbox.mapboxsdk:mapbox-android-telemetry-okhttp3:8.1.0)
 Duplicate class com.mapbox.android.telemetry.AlarmSchedulerFlusher found in modules jetified-mapbox-android-telemetry-4.7.0-runtime (com.mapbox.mapboxsdk:mapbox-android-telemetry:4.7.0) and mapbox-android-telemetry-okhttp3-8.1.0-runtime (com.mapbox.mapboxsdk:mapbox-android-telemetry-okhttp3:8.1.0)
 Duplicate class com.mapbox.android.telemetry.AppUserTurnstile found …

我建立了一个新的 React-Native 项目，并添加了 Mapbox 和yarn add @react-native-mapbox-gl/maps.

这

请注意，如果您使用默认的 Mapbox Android SDK（包含在此库中）并且使用较新的 Android 操作系统版本 (API 30+)，您将遇到致命异常：java.lang.SecurityException: getDataNetworkTypeForSubscriber。

据我了解，不适用，因为我的目标是Android上的API 29。另外，这不是我收到的错误。

我添加了提供的演示代码

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

MapboxGL.setAccessToken('<YOUR_ACCESSTOKEN>');

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  container: {
    height: 300,
    width: 300,
    backgroundColor: 'tomato'
  },
  map: {
    flex: 1
  }
});

export default class App extends Component {
  render() { …

我已经构建了一个带有渲染地图的地图组件的 React 应用程序。我尝试添加标记，但缩放时标记不断移动。是什么原因导致这种情况发生？

import MapGL, { Marker } from "react-map-gl"
import { useState } from "react";

const Map = () => {
    const [viewState, setViewState] = useState({
        longitude: 4.895168,
        latitude: 52.370216,
        zoom: 10,
    })
    const [marker] = useState({
        longitude: 4.895168,
        latitude: 52.370216,
    })

    return (
        <div className="map">
            <MapGL
                {...viewState}
                style={{ width: "100%", height: "100%" }}
                mapStyle="mapbox://styles/mapbox/streets-v9"
                onMove={(evt) => setViewState(evt.viewState)}
                mapboxAccessToken="my_token"
            >
                <Marker
                    {...marker}
                />
            </MapGL>
        </div>
    )
}

export default Map;

我从 Mapbox 中获取了这个演示：

https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

我放入我自己的 GeoJson 文件来替换演示文件，代码在这里：

https://codepen.io/hiven/pen/rNYdvdg?editors=1112

我得到的错误是：

Error: The feature id parameter must be provided.

我无法理解这是什么意思，因为此代码段中提供了功能 ID：

   map.addLayer({
        'id': 'state-borders',
        'type': 'line',
        'source': 'states',
        'layout': {},
        'paint': {
            'line-color': '#627BC1',
            'line-width': 2
        }
    });

我对JS很新,所以也许我的问题很容易解决,尽管我已经花了很多时间.

我正在使用带有传单api的Mapbox,我想在缩小时禁用重复的水平世界地图.我已经探索了maxBounds属性,但它并不令人满意,因为我想在边界之外隐藏地图.基本上,我想有这个结果http://jsfiddle.net/zF6bf/而不是"画布",我想有这个地图,存储在mapbox.com上:cartogrph.hbem5mod

此外,我想禁用拖动和缩放处理程序,所以我正在寻找一个与以下兼容的解决方案:

// disable drag and zoom handlers
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
// disable tap handler, if present.
if (map.tap) map.tap.disable();

谁能帮我？我真的很棒.

在此先感谢,乔纳斯

我在滚动视图上放置了一个MapBox地图，并且滚动视图意味着我无法在地图上平移/缩放。

我不确定这是否是MapBox的错误，或者我是否缺少某些可能很明显的东西？

我在Github（https://github.com/mapbox/react-native-mapbox-gl/issues/208）中发现了这个问题，但是正如我所说的，我不确定这实际上是一个错误，实际上仅仅是一个我的实施存在问题。

我想实现这样的http://techblog.mappy.com/Leaflet-active-area/examples/index.html

我在该部分的左侧添加了浮动内容。因此标记必须保留在右侧。

这是一个演示。

JS：

// ***********************************************
 mapboxgl.accessToken = 'pk.eyJ1IjoiZmFseiIsImEiOiJjaXdmczJha28wMG9sMnVsZnlxZWt1bmxhIn0.v8SlQ70Ay1MzNoPXhlXWVg';
// ***********************************************
// DID YOU FORK THIS EXAMPLE?
// Enter your access token below
// and uncomment the line to keep your
// project online!
// Need a token? Create free account 
// mapbox.com/signup
// ***********************************************
// mapboxgl.accessToken = 'YOUR-ACCESS-TOKEN-HERE';
// ***********************************************
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [144.985258,-37.807426],
    zoom: 14
});

var framesPerSecond = 15; 
var initialOpacity = 1
var opacity = initialOpacity; …

我需要使用mapbox-gl-js为地图中的每个点设置不同的自定义图像，但是我找不到一种为要素集中的每个要素提供自定义图标的方法

incidentMarkers = {
"type": "FeatureCollection"
"features": [{
  "type": "geojson",
  "data": {
    "type": "Feature",
    "properties": {
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        longitude
        latitude
      ]
    }
  }
},
  {
    "type": "geojson",
    "data": {
      "type": "Feature",
      "properties": {
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          longitude
          latitude
        ]
      }
    }
  }]
}

 map.addSource('incidentMarkers', {
    "type": "geojson"
    "data": incidentMarker
  })


window.map.addLayer({
    "id": 'incidentMarkers',
    "type": "symbol",
    "source": 'incidentMarkers' 
    "layout": {
      "icon-image": "image-1",
      "icon-size": 0.25,
      "icon-allow-overlap": true,
      "text-allow-overlap": true
    }
  })

现在，我将每个点添加为单独的图层，以便为每个图标添加自定义图像，但是要与标记进行聚类，我需要将所有标记都放置在同一层，是否有任何方法可以为每个图层添加自定义图像

pointsData.forEach …

现在，我的应用程序显示一个customUserAnnotationView，其中包含用户批注的自定义图像（您可以在ViewController.swift中看到它）。我还创建了一个自定义UIView，希望将其用作用户注释上方的注释（其代码和图像位于SpeechBubble.swift下）。

我想结合这两个对象，以便可以显示CustomUserAnnotationView和上面的注释中放置的Custom UIView（SpeechBubble.swift）。

我尝试从 多个 mapbox 教程制作Frankenstein程序的尝试对我来说还没有成功。我只想将我创建的自定义注释类放在图像上方，并可能添加一个小三角形以使其看起来像气泡。

ViewController.swift

import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        let mapView = MGLMapView(frame: view.bounds)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.delegate = self

        // Enable heading tracking mode so that the arrow will appear.
        mapView.userTrackingMode = .followWithHeading

        // Enable the permanent heading indicator, which will appear when the tracking mode is not `.followWithHeading`.
        mapView.showsUserHeadingIndicator = true

        view.addSubview(mapView)

        let idea =  UITextView(frame: CGRect(x: 0, y: 0, width: 100, height: 40)) …