Mapbox GL JS getBounds()/fitBounds()

Mapbox GL JS v0.14.2 kullanıyorum ve belgeler arasında yüksek ve düşük arama yaptım ve bu konuda çok az şey net.Mapbox GL JS getBounds()/fitBounds()

Standart JS API'sini kullanırsanız, sağladıkları bir örneği kullanarak 'işaretleyicilere eşleme' (https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers/); Ancak GL api kullanırken kurulum oldukça farklıdır. GL API'sı getBounds() (https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds) var, ancak standart JS API'sı gibi adlandırılmış bir katmanınız olmadığı için, getBounds()'un nasıl kullanılacağını öğrenmek için uğraşıyorum.

Bunu (Mapbox GL JS API Set Bounds) buldum, fakat kesinlikle doğru cevap bulamıyorum?

Bu, kurulumumun büyük kısmıdır; JSON kurulumu ve diğer seçenekler hariç.

mapboxgl.accessToken = 'pk.eyJ1IjoicmljaGdjIiwiYSI6ImNpa3lpcWIzYjAwNWZ3bm0wMHJvOWV5enYifQ.l55SYYn9MVjEN8CM3Q1xdw'; 

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(); 

});

Aşağıdaki denedim:

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);

Yani nasıl fitBounds biliyorum ama bunları nasıl emin değilim map.getBounds() sadece enlem seti merkezi konumu LNG/dönmek gibi görünüyor.

İşaretleyiciler 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"]}}]};

kaynak

2016-02-23 John the Painter

"map.getBounds() yalnızca set orta konum lng/lat döndürüyor gibi görünüyor" Sınırlayıcı kutunun sol alt ve sağ üst koordinatları dönmüyor mu? –

sen bütün işaretlerini içeren sınırları oluşturabilir belirteçler haritayı sığdırmak istiyorsanız. , Tüm GeoJSON nesneler için belirteçlerin sadece bir set çalışması Mapbox en Turf.js kontrol edecek bir çözüm için

var bounds = new mapboxgl.LngLatBounds(); 

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

map.fitBounds(bounds);

kaynak

2016-03-01 05:09:55

Bu çalışır! Zaten buna dolgu ekleyebilir miyim? –

Genellikle fitBounds arandığında, haritalar, harita ui öğelerinin (yakınlaştırma artı/eksi düğmeleri, logo ve vb.) Üst sınırlarını önlemek için bu sınırlara dolgu ekler. Daha fazla dolgu eklemek istediğinizde, 'map.setZoom (map.getZoom() - 1) 'kullanarak bir haritayı biraz küçültebilirsiniz, ancak küçük bir kesmek gibi görünüyor. –

@braw 'fitBounds seçeneği, 'padding' seçeneğini kabul eder – chrki

Mapbox kendi geojson-extent eklenti işinizi görecektir. markers nesnesinin valid GeoJSON olduğu varsayılarak, 'a geçebileceğiniz bir sınır kümesi almak için geojsonExtent() işlevine iletebilirsiniz.

map.fitBounds(geojsonExtent(markers));

, bağlantıyı GeoJSON sınırları için markers nesneyi haritanızı sığdırmak için bunu yapmak mümkün olmalıdır (örneğin, HTML kodunda bir <script> etiketi kullanarak) geojson-extent.js dosyası yüklemek kez

GeoJSONLint

GÜNCELLEME her pozisyonda elemanları dizeleri, sayılar değil olarak yorumlanır ediliyor çünkü markers nesne geçerli GeoJSON olmadığını bildirir. Eğer lon-lat koordinatlardan tırnak kaldırırsanız, sorun çıkmaması gerekir:

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 ] } } ] };

kaynak

2016-02-29 06:02:19

Yardım için teşekkürler. Konsolumda bu hatayı alıyorum 'Yakalanmamış Hata: Geçersiz LngLat nesnesi: (NaN, 1)' - Harita çalıştığı için geçerli bir geoJSON olduğuna inanıyorum ama sanırım işaretçiler sadece koordinatlardan daha fazlasını döndürüyordur belki de geojsonExtent içine sadece koordinatları geçmek gerekir. –

Ve bu örneğe dayanarak (https://www.mapbox.com/mapbox.js/example/v1.0.0/static-map-from-geojson-with-geo-viewport/) statik haritayı kullanan değil, GL JS haritası, geoJSON'um geçerli görünüyor. –

Bu kod bana çok yardımcı oldu:

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

bağlantılı kodunda belirtilen extent yöntem lehine kaldırıldı: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

Ama sadece bağlantı ölür durumda temellerini tekrarlamak bbox, ancak sonuç aynı.

kaynak

2016-09-01 12:07:14 ChidG

Mapbox GL JS getBounds()/fitBounds()

cevap

İlgili konular