Bu dokümanda, Maps JavaScript API'yi kullanarak Google Sınırları'nın dinamik veriye dayalı stilinin neden ve nasıl uygulanacağı açıklanmaktadır. Bu mod, sektörlerde ve segmentlerde çeşitli kullanım alanları için kullanışlıdır.
New York'ta posta kodu sınırına göre animasyonlu taksi sayısı (simüle, zaman atlamalı):
Veriye dayalı stil, Google'ın idari sınır poligonlarından yararlanmanıza, haritalarınızda görüntülemek üzere bu poligonlara stil uygulamanıza ve verilerinizin görsel analizi ile daha iyi anlaşılması için kullanılabilecek zengin, özelleştirilmiş haritalar oluşturmak üzere kendi verilerinizi birleştirmenize olanak tanıyan bir Google Haritalar Platformu özelliğidir. Bu dokümanda, verilerinizi neden ve nasıl dinamik veri feed'lerini entegre ederek bir harita üzerinde veriye dayalı stil ile neredeyse gerçek zamanlı olarak görselleştirebileceğinizi açıklayan bazı kullanım örnekleri ele alınmaktadır.
Veriye dayalı stil, verilerin coğrafi dağılımını gösteren haritalar oluşturmanıza, poligon stilini dinamik olarak özelleştirmenize ve tıklama etkinlikleri aracılığıyla verilerinizle etkileşimde bulunmanıza olanak tanır. Bu özellikler, çeşitli kullanım alanları ve sektörler için bilgilendirici ve ilgi çekici haritalar oluşturmak amacıyla kullanılabilir.
Aşağıda, Veriye dayalı stilde dinamik veri güncellemelerini gösteren bir haritaya uygulanabilecek bazı kullanım alanı örnekleri verilmiştir:
- Yolculuk paylaşımı: Gerçek zamanlı güncellemeler, talebin yüksek olduğu bölgeleri belirlemek için kullanılabilir. Bu durumda, bazı sağlayıcılar için yüksek fiyatlandırma olabilir.
- Ulaşım: Anlık güncellemeler, trafiğin yoğun olduğu bölgeleri belirleyip en iyi alternatif rotaları belirlemenize yardımcı olur.
- Seçimler: Seçim gecelerinde, sonuçları yayınlanır yayınlanmaz görselleştirmek için anlık veri anket verileri kullanılabilir.
- Çalışan güvenliği: Gerçek zamanlı güncellemeler; olayları gerçek zamanlı olarak takip etmek, yüksek riskli alanları belirlemek ve sahadaki müdahale ekiplerine durumsal farkındalık sağlamak için kullanılabilir.
- Hava durumu: Gerçek zamanlı güncellemeler fırtınaların hareketini takip etmek, mevcut tehlikeleri belirlemek ve uyarılarla uyarılar sağlamak için kullanılabilir.
- Çevre: Gerçek zamanlı güncellemeler; volkanik küllerin ve kirliliğe yol açan diğer maddelerin hareketini izlemek, çevresel bozulma alanlarını belirlemek ve insan faaliyetlerinin etkisini izlemek için kullanılabilir.
Tüm bu durumlarda müşteriler, verilerini bir harita üzerinde hızlı ve kolay bir şekilde görselleştirmek için gerçek zamanlı veri feed'lerini Google'ın sınırlarıyla birleştirerek ek değer sağlayabilir. Bu da onlara daha bilinçli kararlar almaları için neredeyse anında analizlerin süper gücünü verir.
Çözüme Mimari Yaklaşım
Şimdi, dinamik verileri görselleştirmek için Veri odaklı stilleri kullanarak harita oluşturma adımlarından bahsedelim. Daha önce gösterildiği gibi, kullanım alanı posta koduna göre görselleştirilmiş NYC taksilerinin sayısıdır. Bu, kullanıcıların taksi çağırmanın ne kadar kolay olacağını anlamalarına yardımcı olabilir.
Yaklaşımın uygulama mimarisi şemasını aşağıda görebilirsiniz:
Dinamik Veriye Dayalı Stil Çözümü
Şimdi, veri kümenize dinamik bir Veriye dayalı stil kanal haritası uygulamak için gereken adımların üzerinden geçelim.
Bu çözüm, New York'taki gerçek zamanlı taksi yoğunluğuna ilişkin varsayımsal bir veri kümesini posta kodlarına göre görselleştirmenizi sağlar. Bu, gerçek dünyadan alınan veriler olmasa da gerçek dünyadan uygulamalar içerir ve dinamik verilerin veri odaklı stil kullanarak haritada nasıl görselleştirilebileceğine dair bir güç ve olanak sunar.
1. Adım: Görselleştirilecek verileri seçin ve bir sınır Yer Kimliğiyle birleştirin
İlk adım, görüntülemek istediğiniz verileri tanımlamak ve Google'ın sınırlarıyla eşleştirilebildiğinden emin olmaktır. Bu eşleştirme istemci tarafını, her mailCode için findPlaceFromQuery geri çağırma yöntemini çağırarak gerçekleştirebilirsiniz. ABD'deki posta kodlarının farklı adları olduğunu, diğer idari düzeylerde ise farklı adlar bulunduğunu unutmayın. Belirsiz sonuçlar olabileceği durumlarda, sorgunuz için doğru Yer Kimliği'ni seçtiğinizden emin olun.
const request = {
query: postalCode,
fields: ['place_id'],
};
function findPlaceId() {
placesService.findPlaceFromQuery(request, function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(results[0]);
}
});
}
Verilerinizde enlem ve boylam değerleri varsa bu enlem/boylam değerlerini, stilini ayarlamak istediğiniz özellik katmanının Yer Kimliği değerlerine dönüştürmek için bileşen filtrelemeyle birlikte Coğrafi Kodlama API'sını da kullanabilirsiniz. Bu örnekte, POSTAL_CODE özellik katmanının stilini ayarlayacaksınız.
2. adım: Gerçek zamanlı verilere bağlanın
Veri kaynaklarına bağlanmanın çeşitli yolları vardır. En iyi uygulama yöntemi, özel ihtiyaçlarınıza ve teknik altyapınıza bağlıdır. Bu örnekte, verilerinizin "zip_code" ve "taxi_count" adlı iki sütunlu bir BigQuery tablosunda bulunduğunu varsayalım. Bu verileri Firebase Cloud Functions işlevi aracılığıyla sorgulayacaksınız.
async function queryNycTaxis() {
// Queries the NYC Taxis dataset.
// Create a client
const bigqueryClient = new BigQuery();
// The SQL query to run
const sqlQuery = 'SELECT zip_code, taxi_count
FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
const options = {
query: sqlQuery,
// Location must match that of the dataset(s)
// referenced in the query.
location: 'US',
};
// Run the query
const [rows] = await bigqueryClient.query(options);
rows.forEach(row => {
const postalCode = row['zip_code'];
const taxiCount = row['taxi_count'];
});
}
Sonraki adımda, verileri güncel tutmanız gerekir. Bunu yapmanın bir yolu, yukarıdaki sorguyu bir web çalışanı kullanarak çağırmak ve verilerinizi yenilemek için setInterval işlevini kullanarak zamanlayıcı ayarlamaktır. Aralığı, haritayı 15 saniyede bir yenileme gibi uygun bir değere ayarlayabilirsiniz. Aralık her geçtiğinde, web çalışanı mailCode başına güncellenmiş taxiCount değerleri ister.
Artık verileri sorgulayıp yenileyebildiğimize göre, harita poligonlarının görünümünün bu değişiklikleri yansıttığından emin olalım.
3. Adım: Veriye dayalı stil ile haritanızın stilini belirleyin
Haritalar JavaScript örneğinizdeki posta kodu sınırlarına JSON nesnesi olarak bir görsel stil oluşturup uygulamak için gereken dinamik veri değerlerine sahip olduğunuza göre, artık aşım haritası olarak bir stil kazandırmanın zamanı geldi.
Bu örnekte, haritanın stilini her posta kodundaki taksi sayısına göre belirleyeceksiniz. Bu sayede, kullanıcılarınıza bölgelerindeki taksilerin yoğunluğu ve müsait olma durumu hakkında fikir vereceksiniz. Stil, taksi sayısı değerlerine bağlı olarak değişir. En az taksi bulunan alanlara mor stil uygulanır ve renk gradyanı kırmızı, turuncuya doğru ilerler ve en yüksek yoğunluklu bölgeler için NYC taksi sarısında sona erer. Bu renk şeması için, full-color ve bulletColor'a bu renk değerlerini uygularsınız. FillOpacity'yi 0,5 olarak ayarlamak, kullanıcılarınızın alttaki haritayı görmesine ve vuruş Opaklığı'nı 1,0 olarak ayarlamasına izin verir. Böylece, aynı renkli poligonların sınırlarını birbirinden ayırt edebilirler:
const featureLayer = map.getFeatureLayer(
google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
const placeFeature = featureStyleFunctionOptions.feature;
// taxiCount per (postal_code) PlaceID
const taxiCount = zips[placeFeature.placeId];
let fillColor;
let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
fillColor = "#571845";
strokeColor = "#571845";
} else if (taxiCount < 13) {
fillColor = "#900c3e";
strokeColor = "#900c3e";
} else if (taxiCount < 21) {
fillColor = "#c60039";
strokeColor = "#c60039";
} else if (taxiCount < 34) {
fillColor = "#fe5733";
strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) {
fillColor = "#fec30f";
strokeColor = "#fec30f";
}
return {
fillColor,
strokeColor,
fillOpacity: 0.5,
strokeOpacity: 1.0,
};
Sonuç
Google sınırlarına yönelik veriye dayalı stil, verilerinizi kullanarak, sektörler ve segmentlerdeki çeşitli uygulamalar için haritanızın stilini belirleme imkanı sunar. Gerçek zamanlı verilere bağlanmak ne neler olduğunu, nerede gerçekleştiğini ve olduğuyla iletişim kurmanızı sağlar. Bu özellik, gerçek zamanlı verilerinizin değerini ortaya çıkarma ve kullanıcılarınızın bu verileri gerçek zamanlı olarak daha iyi anlamalarına yardımcı olma potansiyeline sahiptir.
Sonraki İşlemler
- Google harita sınırlarına stil uygulamak için veriye dayalı stil nasıl kullanılır? konulu web seminerini izleyin.
- Veriye dayalı stil için tıklama etkinlikleri ile görselleştirmenizi bir adım ileriye taşıyın.
- Haritanıza Gelişmiş İşaretçiler ekleyebilirsiniz.
Katkıda bulunanlar
Ana yazar:
Jim Leflar | Google Haritalar Platformu Çözüm Mühendisi