标签: mapbox-gl-js

所以,我知道我们Marker.togglePopup()在Mapbox GL Api中有.但是我们能以编程方式关闭所有弹出窗口吗？

在OpenMapTiles的文档中，它可以为MapBox GL JS提供矢量图块。

但是在挖掘这两个项目的文档时，我没有找到一个选择：如何配置自托管的MapBox GL JS库以使用自托管的OpenMapTiles服务器中的图块？

尝试在mapboxgl中显示箭头以指示方向。该箭头仅在高缩放时可见，而在低缩放时不可见。

使用添加图像图层 'symbol-placement': 'line'

线层

  map.addLayer({
          'id': 'route',
          'type': 'line',
          'source': 'mapSource',
          'filter': ['==', '$type', 'LineString'],
          'layout': {
            'line-join': 'round',
            'line-cap': 'round'
          },
          'paint': {
            'line-color': '#3cb2d0',
            'line-width': {
              'base': 1.5,
              'stops': [[1, 0.5], [8, 3], [15, 6], [22, 8]]
            }
          }
        });

箭头层

const url = 'img/arrow.png'
    map.loadImage(url, (err, image) => {
      if (err) { return; }
      map.addImage('arrow', image);
      map.addLayer({
        'id': 'arrowId',
        'type': 'symbol',
        'source': 'mapSource',
        'layout': {
          'symbol-placement': 'line',
          'symbol-spacing': 1,
          'icon-allow-overlap': true,
          // 'icon-ignore-placement': true,
          'icon-image': 'arrow', …

我创建了一个MapBox实例:

var map = new mapboxgl.Map({
    container : 'map',
    style : 'mapbox://styles/mapbox/streets-v9'
});

我需要清除所有标记,并尝试使用map.remove(marker)等每个标记,以及其他一些东西,但似乎没有任何效果.

是否有一个简单的函数调用来清除地图上的所有标记？

编辑:不同于如何从地图中删除所有图层和功能？因为我在控制台中得到"eachLayer不是一个公认的功能"(或类似的功能).

我在尝试显示放置在完全相同的坐标处的 2 个不同标记时遇到了一些麻烦。

情况是：我们正在展示商店，其中一些商店位于同一栋建筑（即购物中心），因此，它们是不同的商店，但共享相同的公共/坐标。

我们的 json 源内容如下所示：

  {
     "properties" : {
        "id" : "1",
        "name" : "Store 1"
     },
     "geometry" : {
        "coordinates" : [-70.66667, -33.45],
        "type" : "Point"
     }
  },
  {
     "properties" : {
        "id" : "2",
        "name" : "Store 2"
     },
     "geometry" : {
        "coordinates" : [-70.66667, -33.45],
        "type" : "Point"
     }
  }

问题是，只有其中一个被显示。

我的问题是，对于这个用例是否有开箱即用的解决方案？或者我们应该实施我们自己的解决方案？

提前致谢！

首先，我想请 Mapbox 将文档放在他们的网站上，解释如何设置并开始进行简单的测试。他们的代码在 Github 上有很多测试，但是经过几天的阅读和尝试测试，我无法理解它们是如何工作的。

我有一个非常简单的方法：

1. 使用一些新坐标和标记的新标题（旋转）更新一些 geoJson。
2. 使用setSource将更改后的Json设置到Map中

我想在测试中运行我的小方法，然后检查新坐标是否已到达地图。

• 应该是小菜一碟！

现在Map需要一个浏览器或类似的。是的，有jsdom，这几乎肯定是所需要的，但我还没有发现如何将 dom 赋予 Map。

如果我尝试实例化window我在mapbox-js utils中找到的任何一个，或者Map，我得到

ReferenceError：未定义 self。-“self”似乎是窗口对象。

我使用 mocha 和 babel 7，因为它的价值，但我认为我所需要的只是解决设置 Map 实例的谜团，以便我可以询问它。

任何帮助将不胜感激。

是否可以获得瓷砖 LngLat 边界框？（如果可能的话还有中心/宽度）

即给定任何图块“id”（例如6/33/24），计算所需的坐标。我非常渴望得到答案，我什至不在乎它是用什么语言写的。

语境

磁贴“id”有 3 个部分：( 6/33/24) z/x/y。

zx/y从左/上原点开始进行地板缩放 (0-24) 和图块编号。

当缩放为 1 时，整个地图被分为 4 个相等的图块（如图所示）。每次缩放 ( z) 增加时，每个图块都会细分为 4 个相等的图块（例如，缩放 2 = 16 个图块）。

 _______________________
|          |           |
|  1/0/0   |   1/1/0   |
|          |           |
|__________|___________|
|          |           |
|  1/0/1   |   1/1/1   |
|          |           |
|__________|___________|

为什么？

我想实现客户端标记缓存并将它们绑定到图块似乎是最合理的解决方案。我知道如何获取图块（循环sourceCaches图块或使用几种transform方法），但我不知道如何从图块矩阵或图块 ID 获取 LngLat 数据。

标记缓存的超级基本 JavaScript 概念（用于上下文）：

 _______________________
|          |           |
|  1/0/0   |   1/1/0 …

我有一张包含多个多边形的地图。多边形需要在用户单击/拖动时移动/更新。我想要的功能与此示例相同：https ://www.mapbox.com/mapbox-gl-js/example/drag-a-point/

我想让多边形像 mousedown 上的点示例一样可拖动，能够在地图上移动它，在整个事件中更新多边形节点的 x/y 坐标，但在整个拖动过程中保持 geojson 大小不变。

Mapbox 上的点教程效果很好，但我不确定如何使其与多边形一起使用。

我基于“添加 3D 模型”示例的一些代码来仅在地图上绘制水平面，用于setTerrain添加地形图层。我的目的是在海拔高度绘制半透明图层，并使它们与山脉相交，有点类似于等高线。

我在海拔 0 处创建了一个 1 公里宽的正方形。海拔 0 是可见地图区域中心地形的高度。当我拖动地图并释放鼠标时，高度 0 会重置为中心地形的新高度 0，从而使飞机改变其相对高度：

为了更好地说明问题，夸大了海拔。

如何指定飞机的高度（以米为单位）并在拖动地图时将其固定在该高度？我想我需要获取中心地形的高度，然后从平面的 z 位置添加/减去它，但是如何在自定义图层的渲染函数中执行此操作？

我刚开始使用vuex和vue.我(大致)理解文档.我有一个特定的问题,我不确定是否应该使用vuex,如果是的话,如何去做.

我有一个应用程序,其中mapbox地图在各种布局和组件等无处不在.因为我将制作几个vue单个文件组件,但正在使用一个相同的mapbox地图实例,我认为有了mapbox是有道理的在vuex商店中启动和管理的地图.因此,例如,当我更改地图布局或其他内容时,它将反映在所有组件中.

当我继续朝着这个方向前进时,我对以下几点感到困惑:

1. 地图不仅仅是变量/数组,而是mapbox类映射的实例.所以我认为初始状态是一个空对象然后需要初始化.正确？
2. 初始化是异步的,只能在页面加载后发生,我猜想.这可能就是为什么我的代码不起作用的原因!？

我试过以下:

制作了一个mapboxmap模块

mapboxmap.js

import simple from '../../components/simplestyle'
let mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')

// initial state
const state = {
  myMap: {},
  mapLoaded: false
}

const mutations = {
  loadMap (state, myMap) {
    state.myMap = myMap
    state.mapLoaded = true
  }
}

const actions = {
  loadMap (context) {
    'use strict'
    mapboxgl.accessToken = 'mysecretmapboxcode'
    let myMap = new mapboxgl.Map({
      container: 'map',
      style: simple,
      hash: true,
      center: [-74.0073, 40.7124],
      zoom: 16
    })
    context.commit('loadMap', myMap)
  }
}

export default { …