标签: mapbox

我想使用leaflet.draw来创建区域的轮廓.我设法让这个工作正常:https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-draw/

现在我想将每个多边形的数据保存到mysql表中.我有点坚持我将如何导出数据和我应该做的格式.

如果可能的话,我希望将来将数据拉回到地图框/传单地图中,所以猜想像geojson这样的东西会很好.

我正在尝试在地图上加载一些额外的图块层,但我无法弄明白.我目前拥有的那些我只感谢有人提供了一个教程,但没有说明其他的选项是什么.有人可以帮我弄这个吗？

var mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}';
var accessToken = 'mySuperSecretToken';

var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox.light', attribution: '', maxZoom: 20, accessToken: accessToken}),
streets = L.tileLayer(mapboxUrl, {id: 'mapbox.streets', attribution: '', maxZoom: 20, accessToken: accessToken});

我似乎无法弄清楚如何获得任何额外的图层,甚至使用我今天收到的电子邮件的新街道版本.

有没有办法更改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,这可以帮助我获得线的凸包.

我有回家功能

function panToHome(){
    latLng = [current.lat, current.lng];
    map.setView(latLng, 8);
}

我想将当前视图保存为历史记录,因此用户可以切换回来,因为他们可能会错误地点击.所以问题是如何才能知道Mapbox上当前的latlng？!

我收到此错误：

Refused to load the image 'blob:file:///cf368042-bf23-42b6-b07c-54189d3b0e01' because it violates the following Content Security Policy directive: "default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

在尝试加载 mapboxGL 地图时。这是我的 CSP 标签：

<meta http-equiv="Content-Security-Policy" 
    content="
      worker-src blob:; 
      child-src blob: gap:;
      default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">

我正在使用 Leaflet JS 和 MapBox 创建地图。我的浏览器显示如下：

地图根本不显示，我的地图图块是空白的。我在开发工具控制台中得到的错误是：

GET https://api.tiles.mapbox.com/v4/mapbox.streets/9/123/183.png?access_token=pk.eyJ1IjoibXl2ZXJkaWN0IiwiYSI6ImNrZmoyYmpuNDB1eHYycG16bms0aHN2ZWwifQ.w0DRp5yDUHxa2RJa0aDRlQ 410 (Gone)
Image (async)       
createTile  @   TileLayer.js:158
_addTile    @   GridLayer.js:812
_update     @   GridLayer.js:709
_setView    @   GridLayer.js:570
_resetView  @   GridLayer.js:526
 onAdd      @   GridLayer.js:162
_layerAdd   @   Layer.js:114
whenReady   @   Map.js:1465
addLayer    @   Layer.js:176
addTo       @   Layer.js:52
(anonymous) @   maps.js:16

上面的 maps.js:16 引用了下面 maps.js 代码片段中的最后一行 .addTo(map)：

let coordinates = [ 44.96, -93.2 ] 
let zoomLevel = 9
let map = L.map("college-map").setView(coordinates, zoomLevel)

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery …

我已经为MapBox地图添加了自定义按钮,他们正确购物.但是当我添加一个点击监听器时,它不起作用.我在控制台中看到没有错误.

代码如下所示:

const currentLocationControl = new CustomControl('current-location-control', 'GPS');

this.map.addControl(currentLocationControl, 'top-left');

document.getElementById('test').addEventListener('click', function (e) {
    alert('test');
});

我在mounted方法中执行此代码vue.js.

CustomControl:

export default class CustomControl {

    constructor(className, text) {
        this.className = className;
        this.text = text;
    }

    onAdd(map){
        this.map = map;
        this.container = document.createElement('div');
        this.container.id = 'test';
        this.container.className = this.className;
        this.container.textContent = this.text;
        return this.container;
    }
    onRemove(){
        this.container.parentNode.removeChild(this.container);
        this.map = undefined;
    }
}

当我console.log(document.getElementById('test'));在控制台(测试div)中看到预期结果时.

那么可能会发生什么？

我们尝试过使用苹果地图，但苹果地图 SDK 不允许我们在地图上绘制折线，因此我们看到一个应用程序使用 MapBox SDK 执行类似的操作。但不幸的是，Mapbox 官方文档没有提供任何关于在 Apple WatchO 中实现 Mapbox SDK 的指南。

我们还尝试联系 Mapbox 支持，但没有得到回复，因此是否有人知道如何在 Apple watchOS 中集成 Mapbox SDK。