MapBoxGL özel renkle GeoJSON dairesel işaretleyicileri ekleyin

MapJsON verilerini kullanarak bir mapboxgl haritasına işaretçi eklemem gerekiyor AJAX yoluyla elde ediyorum. GeoJSON verinin kendisine yılında MapBoxGL özel renkle GeoJSON dairesel işaretleyicileri ekleyin

geoJSONSource = new mapboxgl.GeoJSONSource({ 
     data: geodata 
    }); 

    map.addSource('markers', geoJSONSource); 
    map.addLayer({ 
     "id": "markers", 
     "interactive": true, 
     "type": "symbol", 
     "source": "markers", 
     "layout": { 
      "icon-image": "{marker-symbol}-15", // stuff in {} gets replaced by the corresponding value 
      "icon-allow-overlap": true, 
      "icon-size": 1 // size of the icon 
     } 
    });

, ben haritaya GeoJSON'a eklemeden önce bir döngü içinde 'roket' mülkü 'işaretleyici-sembolü' olan her özellik ayarlayın: Ben GeoJSON katman bu şekilde ekleyin. Ancak, ihtiyacım olan şey, her nokta için küçük, dairesel görüntüler, bir roket değil. GeoJSON'da bulunan verilere bağlı olarak noktaları üç renkten oluşan küçük ve dairesel bir görüntüye ayarlamak istiyorum. GeoJSON'u haritaya eklemeden önce svg görüntüsünü bir döngüde almayı planlıyorum.

Özel simge resmi nasıl eklenir? Simge-görüntü alanı için anlamsız olsa bile, Mapbox'ın önceden yapılmış işaretleyici sembollerinden gelen roket görüntüsü yüklenir. Aksi halde, özel bir işaretçi sembolünü nasıl ekleyebilirim?

Sokaklar-v8 mapbox stilini kullanıyorum; Bu bağlantıyı göre belirteçler için özel görüntüler erişmek için kendi stillerini yaparak deneyler çalıştı:

https://www.mapbox.com/help/custom-markers/#use-images-in-mapbox-gl-js

Ama bunu çözemedim.

kaynak

2016-03-22 stack_tom

İşaretçi simgeleri, stilde ayarlanmış olan current sprite sheet temel alınarak yüklenir.

Özel bir simge resmi yüklemek için, style.json öğesinde özel bir hareketli grafik dosya belirtmeniz gerekir. İşte https://github.com/mapbox/mapbox-gl-js/issues/822

özel sprite kullanarak bir örnek olduğu: http://codepen.io/znak/pen/PqOEyV

haritası customstyle.json adlı bir dosyada tanımlanmış bir özel stil kullanır:

var map = new mapboxgl.Map({ 
    container: 'map', 
    center: center, 
    zoom: 8, 
    style: 'http://www.lenart.pl/assets/codepen/customstyle.json' 
});

customstyle.json İşte detayları ile ilgili github tartışma bir customsprite.json

"sprite": "http://www.lenart.pl/assets/codepen/customsprite",

değinmektedir sprite json ve SVG dosyalarının tam bir dizin dışına gelen png spritesheet oluşturmak için https://github.com/mapbox/spritezero-cli:

http://www.lenart.pl/assets/codepen/customsprite.png

Ayrıca bu programı kullanabilirsiniz:burada bulunan ilgili PNG spritesheet kırpmak için nasıl belirtir.

kaynak

2016-03-24 13:07:36 kmandov

Mapbox stüdyosu kullanılarak yapılan bir stildeki style.json dosyasını düzenlemenin bir yolu var mı? Harita oluşturmak için önceden oluşturulmuş şablonlardan birini ve yalnızca işaretçilerle kullanılacak bir simge grafiği eklemek istiyorum. Sanırım başka bir soru: Bahsettiğin gibi özel bir json stili dosyası kullanırsam, benim için basit bir mapbox haritasına sahip olabileceğim (yol, sınır, vb.). isaretçi? Ya da customstyle.json yoluna gidersem temel haritayı çizmek için her şeyi sağlamalı mıyım? –

Denemediniz, ancak varolan bir harita kutusu stilini çoğaltmalı ve hareketli referansı değiştirebilmelisiniz. Style.json aynı vektör veri kaynaklarına başvurduğundan, çalışmalıdır. Mapbox Studio'yu kullanıyorsanız, svgs'lerinizi doğrudan yükleyebilir ve sizin için bir e-tablo oluşturabilir: https://www.mapbox.com/help/define-sprite/ – kmandov

Ben bir stilde yaptığım tarzın style.json dosyasını indirdim mapbox. Sonra sp_.json ve sprite.png dosyamın oluşturduğu sprite.json işaret etmek için sprite.json sprite değişkeni değiştirerek yanı sıra bağladığınız bu aracı kullanarak sprite.png oluşturdu. Harika çalıştı, detaylı cevap için teşekkürler. –

MapBoxGL özel renkle GeoJSON dairesel işaretleyicileri ekleyin

cevap

İlgili konular