标签: mapbox

我目前正在开发一个基于地图的应用程序，需要一种方法在Leaflet从 中提取图块时收到通知TileProvider（在我的例子中是MapBox）。我阅读了Leaflet 文档，特别是TileLayer的部分。目前，我正在使用以下代码来附加tileload处理程序：

map.eachLayer(function (layer) {
    layer.on('tileload', function(e) {
        console.log(e);
    });
});

有没有更好的方法来获取TileLayer当前地图的？这种方法的一个问题是我将处理程序挂钩到所有层（虽然只会TileLayers引发事件，但将其挂钩到所有层是不干净的）。或者我可以以某种方式将处理程序直接附加到地图实例吗？

更新

我使用以下MapBox代码片段初始化地图：

map = L.mapbox.map( element, '...', mapOptions );

这会自动创建一个TileLayer（以及其他几个层），将它们附加到该map对象并返回该对象以供以后使用。

我最近从旧版 Mapbox SDK（版本 1.6）更新到最新的 Mapbox iOS SDK 3.x。

在新版本中，我无法弄清楚如何将 Mapbox MGLMapView 缩放到给定的半径（以公里为单位）以适合屏幕。

在旧版本（版本 1.6）中，RMMapView.zoomWithLatitudeLongitudeBoundsSouthWest方法的工作如下：

func centerAndZoom(center: CLLocationCoordinate2D, kilometers: Float) {
    let meters = Double(kilometers * 1000)
    let region = MKCoordinateRegionMakeWithDistance(center, meters / 2, meters / 2);

    let northEastLat = center.latitude - (region.span.latitudeDelta / 2);
    let northEastLon = center.longitude + (region.span.longitudeDelta / 2);
    let northEast = CLLocationCoordinate2D(latitude: northEastLat, longitude: northEastLon)

    let southEastLat = center.latitude + (region.span.latitudeDelta  / 2);
    let southEastLon = center.longitude - (region.span.longitudeDelta / 2);
    let southEast = …

对于我们的应用程序，我目前正在将地图框与自定义地图图块表面集成（如此处所述）。使用有效的互联网连接，一切都运行良好，OfflineManager我OfflineTilePyramidRegionDefinition可以下载图块并在 mbgl-offline.db 中找到它们，但它们似乎未在应用程序中使用。据报告，离线区域已完成，但只是不显示。据我了解离线文档，下载图块后，其他一切都是“放手”。

我尝试了几个不同的来源（例如，OpenMapTiles.org），因为我们仍在建立自己的地图切片服务器的过程中。

我在这里错过了什么吗？我真的很感谢任何线索。

最好的，菲尔

更新： 这里有更多信息：

XML 布局

<com.mapbox.mapboxsdk.maps.MapView
    android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    mapbox:center_latitude="51"
    mapbox:center_longitude="7"
    mapbox:style_url="http://demo.tileserver.org/styles/klokantech-basic.json"
    mapbox:zoom="1"/>

下载地图数据的代码：

// Set up the OfflineManager
OfflineManager offlineManager = OfflineManager.getInstance(context);

// Create a bounding box for the offline region
LatLngBounds latLngBounds = new LatLngBounds.Builder()
        .include(new LatLng(6, 50))
        .include(new LatLng(8, 52))
        .build();

// Define the offline region
OfflineTilePyramidRegionDefinition definition = new OfflineTilePyramidRegionDefinition(
        mapView.getStyleUrl(),
        latLngBounds,
        0,
        9, // also tried other zoom levels
        context.getResources().getDisplayMetrics().density); …

我希望在 MapBox 的 Android SDK 中检测地图运动的完全结束。我所说的完全结束是指不再有用户交互（触摸）和相机移动（触摸移动或快速惯性）。

由于 SDK 中没有此类回调，因此我在 , 上组合了两个侦听器MapView，OnTouchListener如下OnMapChangedListener所示（在 Kotlin 中，但非常清楚）：

mapView.setOnTouchListener { _, event ->
    when (event.actionMasked) {
        MotionEvent.ACTION_DOWN -> {
            listener?.onMapDragBegin()
        }
        MotionEvent.ACTION_UP -> {
            listener?.onMapDragEnd()
        }
    }
    false
}

mapView.addOnMapChangedListener { c ->
    when (c) {
        MapView.REGION_WILL_CHANGE, MapView.REGION_WILL_CHANGE_ANIMATED -> {
            listener?.onMapMovementBegin()
        }
        MapView.REGION_DID_CHANGE, MapView.REGION_DID_CHANGE_ANIMATED -> {
            listener?.onMapMovementEnd()
        }
    }
}

侦听器等待两个事件结束。除了一个微小的细节之外，这种方法工作得很好：当用户停止触摸屏幕时，两个结束事件都会被发送，并且只有在地图REGION_WILL_CHANGE_ANIMATED更改之后才会被调用。所以有时候我不知道地图是否还在移动。在日志中看起来像这样：

19:23:42.431: Map touch started
19:23:42.537: Map region change started
19:23:42.538: Map region change ended
...
19:23:42.570: …

我正在使用Mapbox-gl.js (v0.38.0) 和Maki图标、Ionic3 和 angular4。我不想使用mapbox.js。我已经完成了我想要的操作，但默认情况下图标颜色为“棕色”。但我希望它的颜色为“绿色”。

我尝试了与mapbox-gl 示例类似的以下链接，

如何自定义颜色和其他图标属性

我是 Mapbox 的新手，最近我想创建一个网络地图。我将一个形状上传到 mapbox tilseset cloud 中，但是当我尝试将其添加到地图中时，它不显示。这是我正在使用的代码函数：

        map.on('load', function() {
        map.addLayer({
            'id' : 'Resguardos',
            'type' : 'fill',
            "source" : {
                'type' : 'vector',
                'url' : 'mapbox://fabiofz1990.9lhgml6c',
            },
            'layout' : {},
            'paint' : {
                'fill-color' : '#0044b2',
                'fill-opacity' : 1
            }
        });

    });

谢谢

Plotly Python API可以使用MapBox（ScatterMapbox）制作漂亮的交互式地图，但无法控制地图范围。例如，如果您想要将图像保存为 PDF 或 PNG 文件并且不希望用户以交互方式缩放，那么能够控制地图范围就很重要。

我面临的问题是没有办法直接表明您只想查看某个区域。例如，无法表明您希望地图仅显示佛罗里达州。

但是，您可以设置地图的中心和缩放级别。当您知道想要可见的框的纬度/经度坐标并且知道中心坐标时，是否可以使用一个公式来定义缩放级别？

例如，如果我希望地图以坐标（center_lat，center_long）为中心并进行缩放，以便可见部分具有西南坐标（sw_lat，sw_long）和东北坐标（ne_lat，ne_long），那么MapBox ZOOM是什么我必须提供的级别？

我意识到该公式可能取决于地图投影，这就是为什么我具体使用 MapBox 和 Plotly。此外，我在 SO 上看到过类似的问题，但这些问题似乎都与通过 JS 使用 MapBox 有关，而不是在 Plotly Python API 中，这使我很难将解决方案转化为我认为可以使用的东西。

我想在 Mapbox GL JS 中的图层之间切换。我创建了一些单选按钮，它们在一定程度上起作用，您可以从一层切换到另一层，但不能来回切换。

下面是到目前为止我用于切换图层的代码：

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

    function switchLayer(layer) {
        var layerId = layer.target.id;
        map.setLayoutProperty(layerId, 'visibility');
    }

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

这是其余的代码（简化）和 jsbin 的链接https://jsbin.com/cigekutiho/edit?html,output

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset=utf-8 />
   <title>Test</title>
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
   <link rel="stylesheet" type="text/css" href="css/style.css" />
   <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'> 
   </script>
   <link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
   <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
   <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet'/>
   <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'></script>
   <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css' type='text/css' />
   <link href='https://www.mapbox.com/base/latest/base.css' …

我想在 Mapbox GL JS 中为一行制作一个弹出窗口。我有一个包含很多直线的图层，定义如下：

map.addLayer({id: 'lineLayer',
          type: 'line',
          source: 'lineSource',
          layout: {'line-join': 'round', 'line-cap': 'round'},
          paint: {'line-color': '#00c853','line-width': 5, 'line-opacity': 1 }});

然后我将弹出窗口添加到一行，如下所示（伪代码）：

map.on('mousemove', 'lineLayer', (e) => {
    map.getCanvas().style.cursor = 'pointer';
    popupCoordinatesXY = e.point; });

问题是：出于美观原因，我不希望线条太宽，但让鼠标精确地位于线条上太困难了。即使光标距离某一行大约 10 个像素，如何触发该行的 mousemove 事件？

我已经考虑过制作一个额外的、具有更宽线条的隐形层，但我可以想象有一个更优雅的解决方案。

我正在尝试更改圆形标记的颜色，该标记是使用图层上的 paint 属性绘制的。

按照本教程：https :
//docs.mapbox.com/mapbox-gl-js/example/hover-styles/

我已将 设置circle-color为依赖于 a feature-state：

          map.addLayer({
        id: "singles",
        type: "circle",
        source: "users",
        filter: ["!has", "point_count"],
        paint: {
            'circle-radius': {
                'base': 10,
                'stops': [[5, 20], [15, 500]]
            },
            'circle-color':  ["case",
            ["boolean", ["feature-state", "hover"], false],
            '#ddffc8',
            '#ff0000'
            ],
          }
      });

然后当有人将鼠标悬停在侧边栏上时，我想更新功能状态并更改颜色：

function highlightMarkersOnHoverOnSidebar (markers, map) {
  let marks = markers
  Array.from(document.querySelectorAll('.sideBarItems')).map( (x, i) => {

    x.addEventListener('mouseenter', function(){

      map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: true});
    }, false)

    x.addEventListener('mouseleave', function(){
      map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { …