Kendi vektör tabanlarınızı kolay bir şekilde oluşturun

Basemaps bir web haritacılarının en iyi arkadaşıdır, değil mi? Çevrimiçi olarak, yaklaşan güzel web haritası uygulamanıza gömülmeye hazır. Bu makalede kendi tabanımızı yayınlayacağız…. Ama bu sefer: Vectorstyle!

Klasik Basemap, belirli bir sırada (XYZ-Tiles için) bir dizi PNG/JPG dosyasıdır. Kullanım için klasik bir taban işareti oluşturmak için, seçtiğiniz CBS içinde güzel bir harita oluşturmak/şekillendirmek için biraz zaman harcamanız gerekir. O zaman fayansları oluşturacaksınız. Bağlı olarak Farklı Ölçekler Bu dosyaları oldukça iyi hale getirecektir bir süre (Burada saatler/gün/haftalardan bahsediyoruz!). Bunu dikkate almak, bir taban haritası değiştirmek veya güncellemek bir oyunun cehennemidir!

Vektör haritaları

Vektör haritaları burada kullanışlı geliyor. Stilin uygulanması istemci tarafında yapılacak ve ilgilenmeniz gereken tek işlem, vetcor verilerini istemcinin anlayabileceği bir formatta dışa aktarmaktır. Bu öğreticide şunları yapacağız:

• OSM’den veri alın
• Verileri QGIS’te görüntüleyin
• Verileri PBF’ye dışa aktarın
• tabakayı broşürde şekillendirin

Bu, kendi özel baz haritalarınızı yayınlamanızı veya yeni bir Etsy Business.

Verileri almak

Örneğimiz için kullanacağız Quickosm eklentisi qGIS için/içinde.

Doğru verileri elde etmek için ilgi alanımın ilk sınırlarını dışa aktarıyorum ve diğer tüm özellikleri kaldırıyorum:

Bu çokgen katmanını üç ek katmanın çıkarılması için kullanacağız:

• binalar
• Karayolları (“Sokaklar” için OSM adı)
• parklar

Önceden ihracat, stil ile alakalı olmayabilecek tüm özniteliklerden kurtularak verilerin boyutunu azalttığımızdan emin olmalıyız. Bir örnek: Sokakların stilini sadece otoyol özelliklerini (“birincil”, ikincil ”ve“ üçüncül ”) kullanarak yöneteceğim. Stil için gerekli olmayan diğer tüm sokakları ve diğer tüm özellikleri kaldırıyorum. Tüm katmanları bu şekilde hazırlamalısınız, çünkü vektör haritasının daha hızlı yüklenmesine neden olacak dosya boyutunu azaltacaktır.

Lütfen doğrudan ihracattan kaçının: Bazı OSM verileri çarpık olabilir, bu nedenle tüm katmanlarınızda “geometrileri düzeltin” algoritmasını çalıştırdığınızdan emin olun!

Verilerinizi temizledikten sonra bir geojson olarak kaydedin. Hala unutmayın: sizin içindeki ondalık sayı sayısını azaltın Önseyi mümkün olduğunca düşük koordine edin.

Geojson’u PBF’ye ihraç et

Geojson olarak taban haritanız için ihtiyacınız olan tüm katmanları kaydettikten sonra kullanacağız Tippecanoe Raster BaseMaps ile alışık olduğumuz kiremit haritası şemasını oluşturmak için katmanlarımızı söz konusu olarak dışa aktaracağız. Protobuf dosyaları (PBF dosya biçimidir). Bu dosyaları doğrudan QGIS’te tüketeceğiz ve broşür.

Tippecanoe, Ubuntu’nun yanı sıra Mac’e kurulumu kolaydır. Tippecanoe ile ihracat oldukça özelleştirilebilir ve belgelere göre düzinelerce parametre ile oynayabilirsiniz. Harita kutusu.

Basit bir adam olduğum için ihracatım çok temel biriydi. Katmanlarımı bu komutla dışa aktarıyorum:

tippecanoe -pk -pC -P -an -z17 -Z11 -e vector_tiles --extend-zooms-if-still-dropping
       buildings.GeoJSON highways.GeoJSON leisure.GeoJSON  --force*/

• -pk: boyut sınırı yok
• -pc: Sıkıştırma yok
• -Z17-Z11 Zoom 11-17
• -e klasörüne “derleme”
• –Bin… Mapbox bize söyler: Yüksek zoom seviyelerindeki fayanslar bile çok büyükse, tüm özellikleri temsil edebilecek olana ulaşana kadar zoom seviyeleri eklemeye devam edin.

Bu komut, bazı meta bilgileri depolayan kökte alt klasörler ve özellikler dosyasına sahip bir klasör kümesi (her zoom seviyesinin bir klasör vardır) ile sonuçlanır.

Bunu bir Mac’te çalıştırırken şaşırdım (Ubuntu test etmiyordum): tam çekirdek desteğine sahip ve tüm çekirdeklerinizi başlatacak… tüm ihracat yaklaşık 4400 dosya oluşturmak için yaklaşık 1 dakika sürdü.

Vektör verilerinin tükenmesi

Sonuç olarak, ortaya çıkan klasörü zaten QGIS ile tüketebiliriz, ancak hikayenin broşür kısmına daha fazla bakıyoruz.

Kullanıyorum VectorGrid eklentisi PBF dosyalarını broşürde stilize etmek için. Bu, ünlü Z/X/Y tarzında Protobuf’u cunsumr yapmama izin verecek. Ancak bu eklentinin mevcut sürümü ile bir dezavantaj var: katmanlarınızın sırasını broşürde görselleştirilmesini kontrol etmenize izin vermiyor, bu nedenle yerel kopyanızdaki verison’u olarak ayarlamamız gerekiyor. Burada tarif edilen.

Temel kurulum diğer tüm Leafelt web haritasıyla karşılaştırılabilir:

• Bir Harita Konteyneri Oluşturun
• VectorGrid eklentisini kullanarak bir katman ekleyin
• Stil için bazı kurallar uygulayın

Harita şimdi bir piggy-pembe arka plan rengiyle çalışır durumda olduğumuz için, ilk katmanı ekleyelim. Lütfen, vektör verilerini yalnızca Zoom Seviye 17’ye kadar dışa aktardığımızı unutmayın…

var myLayer = L.vectorGrid.protobuf('http://localhost:8080/pankow_talk/data/vector_tiles/{z}/{x}/{y}.pbf', {
            maxZoom: 20,
            maxNativeZoom: 17,
            minZoom: 11,
            vectorTileLayerStyles: {
                //////////////////////////////////////
                // simple style                     //
                //////////////////////////////////////
                leisure: function (properties, zoom) {
                    return {
                        fillColor: "#becf50",
                        opacity: 1,
                        fillOpacity: 0.5,
                        weight: 1,
                        color: "grey",
                        fill: true,
                        zorder: 1
                    }
                },
                ///////////////////////////////////////
                // we need zoom !!!                  //
                ///////////////////////////////////////
                building: function (properties, zoom) {
                    zoom2 = map.getZoom();
                    var color, weight;
                    if (zoom2 >= 16) {
                        color = "grey";
                        weight = 1;
                    }
                    if (zoom2 >= 18) {
                        color = "grey";
                        weight = 0.5;
                    }
                    return {
                        fillColor: "#bfc7c8",
                        opacity: 1,
                        fillOpacity: 1,
                        weight: weight,
                        color: color,
                        fill: true,
                        zorder: 2
                    }
                },
                //////////////////////////////////////
                // properties! we need properties!  //
                //////////////////////////////////////
                highway: function (properties, zoom) {
                    var weight;
                    if (properties.highway == "primary" || properties.highway == "motorway") {
                        weight = 4;
                    }
                    else if (properties.highway == "secondary") {
                        weight = 2;
                    }
                    else {
                        weight = 1;
                    }
                    return {
                        opacity: 1,
                        weight: weight,
                        color: "black",
                        zorder: 3
                    }
                },
            }
        }).addTo(map);

Katmanlarımızı sünnet ediyoruz. Her bir aşırı imalatçı katmandaki stilleri düzeltmeyecekseniz, çizgiler kalınlıklarını iki katına çıkarır, bu nedenle bunu her zoom seviyesi için yeni bir kuralla düzeltiriz. Furthorme Sokak katmanında olduğu gibi özellik özelliklerine göre stil yapabiliriz. Zorder özniteliği ile taban haritanızdaki bir katmanın z-endeksini yönetebilirsiniz.

Kendinize sorabilirsiniz, neden bir Zoom2 var. Ne yazık ki aşırı görme ile ilgili bazı sorunlar gördüm. Bu yüzden, hedef yakınlaştırma seviyesini almak ve doğru stili uygulamak için her bir zoom/zoom-out katmanı yeniden çizmeye karar verdim:

map.on('zoomend', function () {
    myLayer.redraw();
})

Ortaya çıkan taban haritası: