标签: mapbox-gl

我正在运行一个 Mapbox 地图，其中的点具有以下样式的图标：

  iconImage: ['get', 'icon'],
  iconSize: ['interpolate', ['linear'], ['zoom'], 15, 0.0015, 23, 0.2],
  iconAllowOverlap: true,

该图标是房屋的图像。插值效果很好，直到缩放非常高并且 iconSize 保持不变但地图更加详细，使房子越来越小： https: //i.imgur.com/6i8OwPL.mp4。

任何建议都会有所帮助。先感谢您。

我绝对可以排除问题是图像的大小，因为我可以使图像的高度大于手机的高度。

有没有办法禁用地图旋转的图层旋转？我正在使用带有箭头图像图标的符号图层，我不希望它们与地图一起旋转并保持固定。

我是 Mapbox 的新手。

我想知道如何在 Javascript 中读取 gpx 文件数据。

我从 mapbox 文档中获得了两个链接。

一个是这个 =>

我想要像这个例子一样的结果。如何在此示例中使用我的 gpx 文件？

https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/

& 其一是 =>

我可以在以下示例中将 mvt URL 替换为我的 gpx URL 吗？当我这样做时，它会抛出一些错误message: "Unimplemented type: 4"

我的目标是使用 Javascript 在 Mapbox 上加载 gpx 文件数据。

谢谢

https://docs.mapbox.com/mapbox-gl-js/example/third-party/

我正在将mapbox-3d-terrain与新版本的mapbox-gl一起使用。我们希望让用户可以选择切换回 2D。我希望能够

1. 未设置地形
2. 然后删除源

这是将其“打开”的功能。

    // manage 3D terrain
    enable3DTerrain() {
        try {
            this.map.addSource('mapbox-dem-2', {
                "type": "raster-dem",
                "url": "mapbox://mapbox.mapbox-terrain-dem-v1",
                "tileSize": 512,
            });
            this.map.setTerrain({ "source": "mapbox-dem-2", 'exaggeration': 1.5 });
        } catch (e) {
            console.log({ e });
        }
    },

有没有取消地形的地图功能？目前我正在完全重新启动/重建/重新加载地图以删除 3D 地形，这不是我想要实现我的解决方案的方式。

我正在使用react-gl 库来使用mapbox 来使用map-api。我也创建了一个帐户地图框，但它仍然显示图片中描述的错误。

这是我的 app.js 代码

import * as React from 'react';
import Map from 'react-map-gl';

function App() {
  return (
    <Map
      initialViewState={{
        longitude: -122.4,
        latitude: 37.8,
        zoom: 14
      }}
      mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX}
      style={{width: 600, height: 400}}
      mapStyle="mapbox://styles/mapbox/streets-v9"
    />
  );
}

export default App

这是错误：

我正在尝试将地图放入我的项目中，并从浏览器控制台遇到此问题。'net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200'

这是我的代码中使用 mapbox 的地方。

首先，viewController.js 文件：

const Tour = require('../models/tourModel');
const catchAsync = require('../utils/catchAsync');

exports.getOverview = catchAsync(async (req, res) => {
  // 1) Get tour data from collection
  const tours = await Tour.find();

  // 2) Build template
  // 3) Render that template using tour data from 1)
  res.status(200).render('overview', {
    title: 'All Tours',
    tours,
  });
});

exports.getTour = catchAsync(async (req, res) => {
  // 1) Get the data for the requested tour (including reviews and guides)
  const tour = await …

我们目前正在从geojson数据将图层加载到mapbox GL中。如果我们的geojson具有包含点和多边形的要素集合，则由于需要设置图层类型，因此似乎没有办法同时显示mapbox gl。

有没有办法为图层设置多种类型？似乎无法处理多个。

   map.addLayer({
    "id": "route",
    "type": "line", //THIS SEEMS TO BE THE LIMITATION
    "source": "route",
   });

有人可以提供代码示例以将ArcGIS Map Service消费到MapBox GL API中吗？谢谢！

我想删除Mapbox地图上的源和图层。我设法删除了所有的源和图层，除了我添加到Mapbox地图中的第一个源和图层。

请注意，我不太擅长使用jQuery $ .post。

这是我添加所有源和图层的方法。

$.post('ajax/marker.php', function(data)
{
    var firstSplit = data.split(",");

    for(i=0;i<firstSplit.length-1;i++)
    {
        var secondSplit = firstSplit[i].split("|");
        var id = secondSplit[0];
        var lat = secondSplit[1];
        var lng = secondSplit[2];

        var point = {
            "type": "Point",
            "coordinates": [lat, lng]
        };

        map.addSource(id, { type: 'geojson', data: point });
        map.addLayer({
            "id": id,
            "type": "symbol",
            "source": id,
            "layout": {
                "icon-image": "airport-15"
            }
        }); 
    }
}); 

记住，我设法查看了Mapbox地图上的所有源和图层。 只是我不能只删除添加到地图的第一个源和图层。我希望外面有人对此有一些想法。谢谢。

我在循环中使用了以下两个语句来删除源和图层。

map.removeSource(id);
map.removeLayer(id);

我做了一个测试，手动删除了第一个源和图层，如下所示，但它不起作用。

map.removeSource('1612280004A');
map.removeLayer('1612280004A');

但是，它适用于下一个源和层。

我正在尝试创建一个自定义按钮,以显示在弹出窗口上,生成动态链接(URL).由于时间原因,我似乎无法通过.setHTML执行此操作,无法在运行时将按钮绑定到函数.所以我想我会尝试新的.setDOMContent网上没有关于这个功能如何工作的零信息.我想知道是否有人有一个例子,其中一个按钮被添加到弹出窗口,可以运行一个函数并发送数据.

这是我设置这个的非常糟糕的尝试.

此函数创建弹出窗口

function GameObjectPopup(myObject) {
    var features = map.queryRenderedFeatures(myObject.point, {
        layers: ['seed']
    });

    if (!features.length) {
        return;
    }

    var feature = features[0];
    // Populate the popup and set its coordinates
    // based on the feature found.
    var popup = new mapboxgl.Popup()
        .setLngLat(feature.geometry.coordinates)
        .setHTML(ClickedGameObject(feature))
        .setDOMContent(ClickedGameObject2(feature))
        .addTo(map);
};

此函数通过.setHTML添加html

function ClickedGameObject(feature){
    console.log("clicked on button");
    var html = '';

    html += "<div id='mapboxgl-popup'>";
    html += "<h2>" + feature.properties.title + "</h2>";
    html += "<p>" + feature.properties.description + "</p>";
    html += "<button class='content' id='btn-collectobj' …