标签: mapbox-gl-js

来自Mapbox词汇表Mapbox.js

Mapbox.js是一个JavaScript库,允许您将交互式地图添加到您的网站.它是Leaflet的插件,它是一个可以免费使用的开源库.

和Mapbox GL JS

Mapbox GL JS是一个使用Mapbox GL渲染交互式地图的JavaScript库.它是一个可以免费使用的开源库.您可以将Mapbox样式或使用Mapbox Studio创建的自定义样式添加到Mapbox GL JS应用程序中.

并从这个答案

Mapbox样式适用于Mapbox GL以及原生iOS和Android SDK.您不能将它们与经典的Mapbox JS一起使用.Mapbox JS支持光栅图块,你无法设置样式.他们只是图像.Mapbox GL和原生SDK(可以)使用矢量切片,并且可以设置样式.

我相信我可以用来mapbox.js代替leaflet css和js来源,但我可以这样做mapbox-gl.js吗？
两个库之间还存在哪些差异？

我正在将地图从使用mapbox.js转换为mapbox-gl.js,并且无法绘制使用英里或米的半径而不是像素的圆圈.该特定圆圈用于显示从中心点到任何方向的距离区域.

以前我可以使用以下内容,然后将其添加到图层组:

// 500 miles = 804672 meters
L.circle(L.latLng(41.0804, -85.1392), 804672, {
    stroke: false,
    fill: true,
    fillOpacity: 0.6,
    fillColor: "#5b94c6",
    className: "circle_500"
});

我在Mapbox GL中发现的唯一文档如下:

map.addSource("source_circle_500", {
    "type": "geojson",
    "data": {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-85.1392, 41.0804]
            }
        }]
    }
});

map.addLayer({
    "id": "circle500",
    "type": "circle",
    "source": "source_circle_500",
    "layout": {
        "visibility": "none"
    },
    "paint": {
        "circle-radius": 804672,
        "circle-color": "#5b94c6",
        "circle-opacity": 0.6
    }
});

但是这会以像素为单位呈现圆形,但不会缩放.目前是否有一种方法可以让Mapbox GL渲染一个带有圆(或多个)的图层,该图层基于距离和缩放比例？

我目前正在使用Mapbox GL的v0.19.0.

有没有办法更改mapbox-gl-js图标图像颜色？

此代码取自https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/,不会将标记颜色更改为红色

map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    },
    "paint": {
        "text-size": 12,
        "icon-color" : "#ff0000"
    }
});

我已经尝试了官方文档中列出的所有选项

我正在使用Mapbox GL JS版本0.32.有没有办法将地图导出为高分辨率的PNG或PDF？

显然,我可以截图,但如果有更正式的方式会很好.

我找到了这个回购,但它看起来很旧,并不清楚它是如何工作的.

我尝试使用该preserveDrawingBuffer选项:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    minZoom: 4,
    maxZoom: 14,
    center: [-2.0, 53.3],
    preserveDrawingBuffer: true
});
console.log(map.getCanvas().toDataURL());

这会在控制台中输出一个长数据URL,但将其复制并粘贴到base64转换器中似乎只会产生一个空图像.

更新:这是我的新代码,完整:

mapboxgl.accessToken = 'pk.eyXXX';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    minZoom: 4,
    maxZoom: 14,
    center: [-2.0, 53.3],
    preserveDrawingBuffer: true
});
var dpi = 300;
Object.defineProperty(window, 'devicePixelRatio', {
    get: function() {return dpi / 96}
});

map.on('load', function () {
    var content = …

我正在尝试优化长途远足径的Mapbox视图,例如Appalachian Trail或Pacific Crest Trail.这是一个例子,我手工定向,展示了西班牙的SendaPirenáica:

给出了感兴趣的区域,视口和音高.我需要找到正确的中心,方位和缩放.

这个map.fitBounds方法对我没有帮助,因为它假设pitch = 0且bearing = 0.

我做了一些戳,这似乎是最小的周围矩形问题的变化,但我仍然坚持一些额外的复杂性:

1. 我如何解释音高的扭曲效果？
2. 如何优化视口的宽高比？请注意,将视口缩小或更宽会改变最佳解决方案的方位:

FWIW我也使用turf-js,这可以帮助我获得线的凸包.

我正在使用Mapbox-GL构建一个映射Web应用程序.它有很多很酷的功能.我按照Mapbox网站上的示例设置按钮来切换基本地图(即卫星,地形等).

我遇到的问题是,当我更改样式时,它会删除作为图层加载的多边形并重新加载地图.我从Mongo数据库加载多边形作为基于用户查询的图层.我希望能够更改基本地图并保留这些图层.

有没有办法在不重新加载地图的情况下更改样式,或者至少不丢弃图层？

这是我的切换器代码,它与示例相同,但我添加了自定义样式的条件:

 var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');

    function switchLayer(layer) {
        var layerId = layer.target.id;
        if (layerId === 'outdoors') {
            map.setStyle('/outdoors-v8.json');
        } else {
        map.setStyle('mapbox://styles/mapbox/' + layerId + '-v8');
        }
    }

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchLayer;
    }

我正在按照此示例在 Mapbox GL JS 页面中使用 Three.js 渲染一些自定义图层。我想添加光线投射来确定用户点击了哪个对象。

问题是我只从 Mapbox 获得了一个投影矩阵，我用它来渲染场​​景：

class CustomLayer {
  type = 'custom';
  renderingMode = '3d';

  onAdd(map, gl) {
    this.map = map;
    this.camera = new THREE.Camera();
    this.renderer = new THREE.WebGLRenderer({
      canvas: map.getCanvas(),
      context: gl,
      antialias: true,
    });
    this.scene = new THREE.Scene();
    // ...
  }

  render(gl, matrix) {
    this.camera.projectionMatrix = new THREE.Matrix4()
      .fromArray(matrix)
      .multiply(this.cameraTransform);
    this.renderer.state.reset();
    this.renderer.render(this.scene, this.camera);
  }
}

这渲染得很好，并在我平移/旋转/缩放地图时跟踪视图中的变化。

不幸的是，当我尝试添加光线投射时，出现错误：

  raycast(point) {
    var mouse = new THREE.Vector2();
    mouse.x = ( point.x / this.map.transform.width ) * …

有没有办法在离线设置中使用Mapbox GL(询问JS和本机)？使用MBTiles,您可以使用MBTiles文件或提取光栅图像.我想知道是否有类似的东西允许Mapbox GL从本地源加载数据而不是需要与Mapbox服务器的Web连接.不是谈论只是在用户离线时缓存数据,而是实际制作一个始终完全脱机运行的地图.谢谢.

我正在使用 Mapbox GL 显示地图并从其中心裁剪固定大小的图像。它适用于我设计的特定分辨率（1920x1080），但是当我开始使页面响应地图样式width和height更改时，画布大小也开始更改！

因此，当我裁剪图像时，大小应该始终不同，因为 900 像素画布上的 300 像素与 2000 像素画布上的 300 像素不同。如果我在 Chrome 中将设备类型从桌面更改为移动，画布大小甚至会发生巨大变化。

有什么方法可以使画布 DOM 大小固定，同时使用 CSS 属性缩放整个地图，就像在正常情况下所做的那样canvas？我尝试这样做trackResize: false并且画布 DOM 大小保持固定，但地图也没有缩放以适应容器。

我创建了一个自定义圆圈图层.我想只在水面而不是陆地上展示这一层.我设法使用下面的命令做相反的事情(即:在陆地上而不是在水面上显示图层).请参阅此图片以便更好地理解

map.moveLayer( '多边形', '水');

现在我需要知道mapboxgl使用的land层,以便我可以调用函数map.moveLayer('polygon','land');来实现我想要的.

我需要帮助才能找到mapboxgl-streets地图中的不同图层.但不幸的是,Mapboxgl没有map.eachLayer函数.