标签: mapbox

我在我的地图上放置了几个标记并向它们添加了弹出窗口。以下代码在循环中执行并且工作正常：

L.marker([
    item.Lat,
    item.Long
]).bindPopup(item.count + ' projects').addTo(map);

单击标记时会显示标记并打开弹出窗口。但是，弹出窗口始终在标记的顶部打开。有没有办法在标记的底部（或任何一侧）打开？Leaflet 文档中的弹出选项似乎没有提供这样做的选项。

我有一些 geojson 形状，我要传递给Mapbox 静态地图 API。一些形状是折线，另一些是圆表示为具有半径属性的点，例如：

    {
        "type": "Feature",
        "properties": {
            "radius": 500
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                30.5,
                50.5
            ]
        }
    }

这些被渲染为带有标记的点。有什么办法可以让一个点渲染为以该点为中心的特定半径的圆？

我在 Mapbox 上有一个矢量瓦片集，我通过上传一个 geojson 文件创建了它，该文件包含代表澳大利亚维多利亚州特定郊区的多边形。我的矢量切片集具有三个属性 - 郊区、州、邮政编码 - 对应于 geojson 中的特征属性。

我还可以通过 Mapbox web gl js 库成功查询这些属性以获得准确的地图。例如，我有一张地图在工作，当我单击突出显示的多边形时会显示一个弹出窗口，并且弹出窗口正确显示了该郊区的属性（郊区、州、邮政编码）。

现在我想在我的网页中访问这些属性 - 对于我的图块集中的每个功能。我基本上想将这些属性作为列表转储到地图外的 div 中；只是列出每个郊区及其属性。为此，我尝试使用 MapBox Web GL JS 库的 querySourceFeatures 函数。我有点挣扎。

这是我的代码。我的地图按预期显示。但是在 JS 控制台中，我只是得到一个空数组。

这是我的代码

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [144.96, -37.81], // starting position
    zoom: 8, // starting zoom,
    hash:true
});

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.Navigation());

map.on('load', function () {
    map.addSource('charlieSource', {
        type: 'vector',
        url: …

有一个示例说明如何使点可拖动（具有图层），还有一个示例说明如何使用自定义图像设置标记，但是当它没有时，我如何使该自定义图像可在地图上拖动与之相关的层？！

一直在寻找可以将编码的折线解码为 geoJSON 字符串的各种 JS 函数，而我尝试的所有方法都提出了非常奇怪的 lat,lng 点。通常从正确的位置开始，但随后偏离了路线。

这是我在https://github.com/jhermsmeier/node-google-polyline/blob/master/lib/decode.js 上找到的功能之一

    function decode( value ) {

  var values = decode.integers( value )
  var points = []

  for( var i = 0; i < values.length; i += 2 ) {
    points.push([
      ( values[ i + 0 ] += ( values[ i - 2 ] || 0 ) ) / 1e5,
      ( values[ i + 1 ] += ( values[ i - 1 ] || 0 ) ) / 1e5,
    ])
  } …

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

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

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

我正在我的片段中加载 Mapbox，该片段将在从 DrawerLayout 单击时启动。

  @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.map_fragment, container, false);


    }

  @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        bindUI(getView());        mapView = view.findViewById(R.id.mapView);

        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(map -> {
            mapboxMap = map;

            setUpMap();
        });

    }

 @Override
    public void onStart() {
        super.onStart();
        mapView.onStart();

    }

    @Override
    public void onStop() {
        super.onStop();
        mapView.onStop();

    }


    @Override
    public void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }

    @Override
    public void onResume() {
        super.onResume();
        mapView.onResume();
    }

    @Override
    public …

我按照这个示例https://www.mapbox.com/mapbox-gl-js/example/timeline-animation/创建基于时间的可视化。我正在使用这个版本“d3”：“^5.4.0”代码是：

d3.json('http://127.0.0.1:5000', function (err, data) {
        if (err) throw err;

        // Create a month property value based on time
        // used to filter against.
        data.features = data.features.map(function (d) {
          d.properties.month = new Date(d.properties.time).getMonth();
          return d;
        });

        map.addSource('visits', {
          'type': 'geojson',
          'data': data
        });

        map.addLayer({
          'id': 'visits-circles',
          'type': 'circle',
          'source': 'visits',
          'paint': {
            'circle-color': [
              'interpolate',
              ['linear'],
              ['get', 'name'],
              6, '#FCA107',
              8, '#7F3121'
            ],
            'circle-opacity': 0.75,
            'circle-radius': [
              'interpolate',
              ['linear'],
              ['get', 'name'],
              6, 20,
              8, 40
            ]
          }
        }); …

我想在页面加载后使用 queryRenderedFeatures 来填充列表，但它似乎在加载图层之前不断触发。我在下面的控制台中收到错误消息：

The layer 'Points' does not exist in the map's style and cannot be queried for features.

要素加载后如何查询图层？我尝试遵循这些答案中的建议，但它一直返回空

页面加载后执行的 JavaScript

页面加载完成后调用函数

这就是我现在所拥有的

map.on('load', function() {
  map.addLayer({
      'id': 'Points',
      'type': 'circle',
      'source': 'Points-45d56v',
      'source-layer': 'Points-45d56v',
      'layout': {
          'visibility': 'visible',
      },
      'paint': {
        'circle-radius': 6,
        'circle-color': 'red'
      }
  });
});

$(document).ready(function(){
  var features = map.queryRenderedFeatures({layers:['Points']});
  console.log(features);
});

我正在尝试使用 React 使用 MapBox。我已经用 create-react-app 创建了项目，添加了 mapbox-gl ("mapbox-gl": "^0.46.0-beta.1")，但是我的 css 文件有问题。它向我展示了这个警告：

This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described inhttps://www.mapbox.com/mapbox-gl-js/api/

我已按照以下所有步骤操作：

1 - 安装 npm 包： npm install --save mapbox-gl

2 - 在您的 HTML 文件中包含 CSS 文件：<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />.

但是我如何使用与 ES6 的反应，我已经在 index.js css 文件中添加了 import 'mapbox-gl/dist/mapbox-gl.css';

如果我导入 css 文件，它不会显示任何内容，如果我评论导入它会显示我的地图而没有设计，它会向我显示警告。

我怎样才能解决它？？？谢谢你的帮助

这是我的代码：

import React, { Component …