标签: mapbox

我目前正在从事一个涉及 Mapbox GL 的项目。我从服务器获取一个 json 文件，其中包含很多位置点。该文件具有以下结构：

{"location": {"lat": 50.62914, "lon": 5.61972}}

现在我想将它们放置在地图盒中的图层上。问题是mapbox仅支持GeoJSON。因此，我尝试通过以下解决方法来解决此问题。

function updateMap(data) {
    console.log("Updating map with " + data.length + " users");
    // Converting my json file into a Geojson format by returning type:point, coordinates for every json entry
    data.forEach(function(d) {
        return {
            "type": "Point",
            "coordinates": [d.location.lon, d.location.lat]
        };
    });
};

我不确定这是否可能，所以如果我错了，请纠正我。我想我必须在 forEach 循环之外返回它，否则我只会得到第一个结果。

接下来是添加此 geojson 文件作为图层的源。看起来像这样的东西：

map.on('load', function () {
    map.addSource('point', {
        "type": "geojson",
        "data": //need to add the points that I returned above here.
    });

    map.addLayer({ …

在Android中使用MapBox，我试图找到左下角和右上角。我在他们的文档中找不到任何地方来检索此信息。

有人知道如何仅使用北/南边界限制 Mapbox 地图中的平移吗？我想做的是使用世界副本，以便用户可以连续从东向西平移，但限制向北和向南平移，这样您就无法在地图图块之外平移（我觉得这非常烦人）。我目前在初始化地图时使用 maxbounds，以防止平移到两极上方和下方的白色瓷砖中，但这对于世界复制来说是不行的。

现在，当我在scrollview中使用mapbox时，scrollview会滑动到页面中mapbox所在的位置，但我希望第一眼看到页面顶部，而不是mapbox。顺便说一句，我正在使用 Mapbox 4.0.0 Android SDK。

我想看到的是：

然而奇怪的事情是这样的：

我对编程很陌生，我需要制作一个 Android 应用程序。我刚刚发现了一个很好的 API，而不是谷歌地图。它被称为 Mapbox。所以，我一直在关注他们的文档和示例代码，但是，我认为他们的一些示例已经过时，并且已经弃用了一些使用的类。因此，我已经能够初始化地图并将运行时权限放入我的程序中。

现在，我不知道如何像 Google Maps API 使用的那样放置“位置按钮”。我在使用 Google Maps API 之前编写了一个应用程序，并使用mMap.getUISettings().setMyLocationEnabled(true)和mMap.setMyLocationEnabled(true)来显示位置按钮。当我浏览互联网时，我似乎找不到在 Mapbox 中带来这种 UI 的代码。我找到了一些代码片段，但正如我所说，其中一些已经过时了。此外，他们有自己的 .xml 文件，我没有，所以当我尝试复制他们的代码时，我总是遇到错误。

因此，如果您有任何想法如何编辑我的文件，或者如果我需要将某些文件添加到我的项目中，请帮助我。

我将在下面附上我的文件。谢谢！

您可以在我的 GitHub 存储库中找到这些文件：https : //github.com/CyrilOlanolan/Tara-JMapbox

我的 MainActivity.java：

package com.garate.tara_j;

//Mapbox imports
import android.Manifest;
import android.app.AlertDialog;
import android.app.Dialog;
import android.graphics.Color;
import android.os.Bundle;

import com.mapbox.android.core.location.LocationEngine;
import com.mapbox.android.core.location.LocationEngineProvider;
import com.mapbox.android.core.permissions.PermissionsListener;
import com.mapbox.android.core.permissions.PermissionsManager;
import com.mapbox.mapboxsdk.Mapbox;
import com.mapbox.mapboxsdk.location.LocationComponent;
import com.mapbox.mapboxsdk.location.LocationComponentActivationOptions;
import com.mapbox.mapboxsdk.location.LocationComponentOptions;
import com.mapbox.mapboxsdk.location.OnCameraTrackingChangedListener;
import com.mapbox.mapboxsdk.location.OnLocationClickListener;
import com.mapbox.mapboxsdk.location.modes.CameraMode;
import com.mapbox.mapboxsdk.location.modes.RenderMode;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
import com.mapbox.mapboxsdk.maps.Style; …

我有一个灰色层来在 Mapbox 地图上显示多个多边形。当用户单击它以显示“选定”多边形时，我试图仅更改其中一个的颜色。我不想要交互，这就是为什么我不使用 Draw 库，只是为了显示选定的多边形。

有没有办法只在一层中做到这一点？我尝试向boolean每个多边形属性添加一个名为“selected”的属性，但我没有实现更新图层。

// Define polygons with properties
var features = [];
areas.forEach(area => features.push(turf.polygon(area.polygon, { id_area: area.id_area, name: area.name, selected: 'false' })));
features = turf.featureCollection(features);

map.on('load', function () {
    // Add polygons to map
    map.addSource('areas', {
        'type': 'geojson',
        'data': features
    });
    // Layer settings
    map.addLayer({
        'id': 'polygons',
        'type': 'fill',
        'source': 'areas',
        'paint': {
            'fill-color': [
                'match',
                ['get', 'selected'],
                'true', '#64bdbb', // if selected true, paint in blue
                '#888888' // else paint in gray
            ], …

用一个例子来解释更简单。看看这段代码：

const network:any = this.props.network;

    this.map.addLayer({
      id: "route",
      type: "line",
      source: {
        type: "geojson",
        data: network
      },
      layout: {
        "line-join": "round",
        "line-cap": "round"
      },
      paint: {
        "line-color": "red",
        "line-width": 2
      }
    });

this.props.network 设置在其他地方，代码类似于：

const response = await fetch("http://localhost:5000/network");
this.props.network = await response.json();

此代码按 expexted 工作。但我想正确设置 te type 以this.props.network删除any解决方法。network是一个有效的 geojson 对象，VS 代码向我展示了这个提示：

所以我猜正确的类型是： FeatureCollection<Geometry, GeoJsonProperties>

但我不知道在哪里定义了这些类型以及我必须导入的内容；

我使用 Mapbox Studio 作为映射和样式的基础，然后将 HTML 用于其他地图功能。

其中一项功能是在悬停或鼠标进入时更改图标不透明度。当您直接在 HTML 中创建它时，我已经检查了其他示例和所有其他参考功能。我设法改变了不透明度，但仅限于整个图层。

我可以以某种方式使用 e.features[0] 命令行将更改仅应用于一个功能而不是整个图层吗？

我使用此代码更改整个图层“图标”的不透明度（图层包含 5 个带有文本的图标）：

    // Change the cursor to a default and change opacity when the it enters a feature in the 'Icons' layer.
map.on('mouseenter', 'Icons', function() {
    map.getCanvas().style.cursor = 'default';
    var feature = e.features[0];
    map.setPaintProperty('Icons', 'icon-opacity', 0.5);
});

// Change it back to a pointer and reset opacity when it leaves.
map.on('mouseleave', 'Icons', function() {
    map.getCanvas().style.cursor = '',
    map.setPaintProperty('Icons', 'icon-opacity', 1);
});

谢谢！！！

我试图让我的地图框显示像这个 Google 地图示例这样的坐标，点击后会弹出一个纬度坐标。我得到的最接近的是获得一个可拖动标记，它显示地图左下角的坐标，如果我尝试使用 onclick 函数，地图就会变成空白。我怎样才能让坐标在点击时显示为弹出窗口？

var marker = new mapboxgl.Marker({
        draggable: true
    })
    .setLngLat([101.967, 35.431])
    .addTo(map);

function onDragEnd() {
    var lngLat = marker.getLngLat();

    coordinates.style.display = 'block';
    coordinates.innerHTML =
        'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
}

marker.on('dragend', onDragEnd);

我有 .coordinates 的 css 样式，当标记被拖动时，它们会显示在屏幕的左下方。我知道这是一个简单的问题，但我对 mapbox 和一般编码完全陌生。将不胜感激任何帮助！谢谢！

我有一个 react-native 项目，在安装了一些与 mapbox 相关的 pod 后，我的 xcode 构建中开始出现以下错误。

ld: warning: building for iOS, but linking in dylib file (/Users/nitinsharma/Library/Developer/Xcode/DerivedData/app-bpqejjqomhurrldtyubqevqtdqzc/Build/Products/Debug-iphoneos/MapboxAccounts.framework/MapboxAccounts) built for Mac Catalyst
Undefined symbols for architecture arm64:
  "_swift_getFunctionReplacement", referenced from:
      _swift_getFunctionReplacement50 in libswiftCompatibilityDynamicReplacements.a(DynamicReplaceable.cpp.o)
     (maybe you meant: _swift_getFunctionReplacement50)
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

现在，如果我按照这些步骤操作，错误就会消失

 1. Go to project>build settings> library search path
 2. remove "$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)"

但是，之后我无法安装该应用程序，因为当 xcode 尝试在我的设备上安装该应用程序时出现以下错误。我什至尝试删除DerivedData文件夹但没有运气

Details

Unable to …