web-dev-qa-db-ja.com

Mapbox GL JS getBounds（）/ fitBounds（）

私はMapbox GL JS v0.14.2を使用しています。ドキュメントで高低を検索しましたが、これについてはほとんど明確ではありません。

標準のJS APIを使用する場合、提供されている例を使用して「マーカーにマップを合わせる」ことは非常に明確です（ https://www.mapbox.com/mapbox.js/example/v1.0.0/fit -map-to-markers / ）;ただし、GL apiを使用する場合のセットアップはかなり異なります。GL APIにはgetBounds()があります（- https：// www.mapbox.com/mapbox-gl-js/api/#Map.getBounds ）しかし、標準のJS APIのような名前付きのレイヤーがないため、使用方法を見つけるのに苦労していますgetBounds()まったく。

私はこれを見つけました（ Mapbox GL JS API Set Bounds ）が、確かに正しい答えになることはできませんか？

これが私のセットアップの大部分です。 JSONセットアップおよびその他のオプションを除外します。

_mapboxgl.accessToken = '<myaccesstoken>';

var markers = <?php echo $programme_json; ?>;

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/richgc/cikyo5bse00nqb0lxebkfn2bm',
    center: [-1.470085, 53.381129],
    zoom: 15
});

map.on('style.load', function() {
    map.addSource('markers', {
        'type': 'geojson',
        'data': markers
    });

    map.addLayer({
        "id": "markers",
        "interactive": true,
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "venue-map-icon-blue",
            'icon-size': 0.5,
            "icon-allow-overlap": true
        }
    });

    map.scrollZoom.disable();

});
_

私は次を試しました：

_alert(map.getBounds()); // LngLatBounds(LngLat(-1.4855345239256508, 53.37642500812015), LngLat(-1.4546354760740883, 53.38583247227842))
var bounds = [[-1.4855345239256508, 53.37642500812015],[-1.4546354760740883, 53.38583247227842]]
map.fitBounds(bounds);
_

だから、私はBoundsをフィットする方法を知っていますが、それらを取得する方法がわかりませんmap.getBounds()はちょうど設定された中心位置lng/latを返すようです。

マーカーJSON：

_var markers = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"title":"Site Gallery","url":"\/Freelance\/art-sheffield-2016\/programme\/site-gallery\/","summary":"Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec id justo. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse feugiat. Etiam rhoncus.","image":"\/Freelance\/art-sheffield-2016\/site\/assets\/files\/1032\/site_gallery.jpg","marker-symbol":"venue-map-icon-blue","colour":"blue"},"geometry":{"type":"Point","coordinates":["-1.466439","53.376842"]}},{"type":"Feature","properties":{"title":"Moore Street Substation","url":"\/Freelance\/art-sheffield-2016\/programme\/moore-street-substation\/","summary":"","image":null,"marker-symbol":"venue-map-icon-green","colour":"green"},"geometry":{"type":"Point","coordinates":["-1.477881","53.374798"]}},{"type":"Feature","properties":{"title":"S1 Artspace","url":"\/Freelance\/art-sheffield-2016\/programme\/s1-artspace\/","summary":"","image":null,"marker-symbol":"venue-map-icon-red","colour":"red"},"geometry":{"type":"Point","coordinates":["-1.459620","53.380562"]}}]};
_
javascriptjsonmapbox
34
John the Painter

マップをマーカーに合わせる場合、すべてのマーカーを含む境界を作成できます。

var bounds = new mapboxgl.LngLatBounds();

markers.features.forEach(function(feature) {
    bounds.extend(feature.geometry.coordinates);
});

map.fitBounds(bounds);
69
Timur Bilalov

マーカーのセットだけでなく、すべてのGeoJSONオブジェクトで機能するソリューションについては、Mapboxの Turf.js を確認してください。

このコードは私にとって非常に役に立ちました： https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

ただし、リンクが停止した場合に備えて基本を繰り返します。

var bounds = turf.bbox(markers);
map.fitBounds(bounds, {padding: 20});

リンクされたコードで言及されているextentメソッドはbboxを支持して廃止されましたが、結果は同じです。

10
ChidG

Mapbox独自の geojson-extent プラグインがトリックを行います。 markersオブジェクトが 有効なGeoJSON であると仮定すると、それをgeojsonExtent()関数に渡すだけで一連の境界を取得し、それをfitBounds()。

geojson-extent.js ファイルをロードしたら（たとえば、<script>タグをHTMLコードに追加）、これを実行して、マップをGeoJSON markersオブジェクトの境界に合わせることができます。

map.fitBounds(geojsonExtent(markers));

[〜＃〜] update [〜＃〜]

GeoJSONLint は、各位置の要素が数字ではなく文字列として解釈されているため、markersオブジェクトが有効なGeoJSONではないことを報告します。経度と緯度の座標から引用符を削除すると、正常に機能するはずです。

var markers = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "title": "Site Gallery",
        "url": "\/Freelance\/art-sheffield-2016\/programme\/site-gallery\/",
        "summary": "Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec id justo. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse feugiat. Etiam rhoncus.",
        "image": "\/Freelance\/art-sheffield-2016\/site\/assets\/files\/1032\/site_gallery.jpg",
        "marker-symbol": "venue-map-icon-blue",
        "colour": "blue"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.466439,
          53.376842
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Moore Street Substation",
        "url": "\/Freelance\/art-sheffield-2016\/programme\/moore-street-substation\/",
        "summary": "",
        "image": null,
        "marker-symbol": "venue-map-icon-green",
        "colour": "green"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.477881,
          53.374798
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "S1 Artspace",
        "url": "\/Freelance\/art-sheffield-2016\/programme\/s1-artspace\/",
        "summary": "",
        "image": null,
        "marker-symbol": "venue-map-icon-red",
        "colour": "red"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.459620,
          53.380562
        ]
      }
    }
  ]
};
5
Charlie Greenbacker