Bir veri kümesi özellik katmanındaki style
özelliğini, stil mantığı içerebilen bir google.maps.FeatureStyleFunction
olarak veya bir katmanın tüm özelliklerini eşit şekilde biçimlendirmek için google.maps.FeatureStyleOptions
olarak ayarlayarak veri özelliklerine stil uygulayın. Dolgu (renk, opaklık), fırça (renk, opaklık, fırça kalınlığı) ve çap (nokta) için veri özelliklerine stil uygulayabilirsiniz. Bu sayfada, bir veri kümesine programatik olarak nasıl erişileceği ve özelliklerinin nasıl biçimlendirileceği gösterilmiştir. Ayrıca nokta, poligon ve çoklu çizgi geometrisine dayalı olarak veri özelliklerine yönelik stil örnekleri adım adım anlatılmaktadır.
Veri kümeleri için veriye dayalı stil, veri özelliklerini oluşturmak için kullanılan coğrafi veri dosyasından sağlanan enlem ve boylam koordinatlarına göre oluşturur.
Veri özelliği özellikleri
Bir veri kümesindeki tüm verilere özellik stili işlevinden erişilebilir. Veri özelliği özelliklerini almak için önce, veri kümesindeki tüm verileri içeren veri kümesi özelliğini edinin, ardından burada gösterildiği gibi istediğiniz veri özelliğini edinin:
TypeScript
// Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
JavaScript
// Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];
Özellik stili seçenekleri
Özellik stili seçeneklerinde, bir veri özellik katmanı için stil tanımlarsınız. Örneğin, poligonlar için dolgu ve çizgiyi ya da noktaların rengini ve çapını belirleyebilirsiniz. Aşağıdaki örnekte, bir özelliğin style
özelliği kullanılarak doğrudan uygulanabilecek özellik stili seçenekleri gösterilmektedir:
TypeScript
// Apply style to all features. datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features. datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
Özellik stili işlevi
Veri kümesi özelliklerinin stilini belirleme mantığını tanımlamak için özellik stili işlevi kullanın.
Bir özelliğin stilini belirlemek için style
özelliğini google.maps.FeatureStyleFunction
olarak ayarlayın.
Stil işlevi, özellik katmanındaki tek tek özelliklerin stil özelliklerini ayarlamak için mantığı tanımladığınız yerdir. featureLayer.style
ayarlandığında stil işlevi, etkilenen özellik katmanındaki
her özelliğin üzerinde çalıştırılır. İşlev, stil özelliğini ayarladığınız
zaman uygulanır. Güncellemek için stil özelliğini tekrar ayarlamanız gerekir. Aşağıdaki örnekte basit bir özellik stili işlevi gösterilmektedir:
TypeScript
const styleDefault = { strokeColor: 'green', strokeWeight: 2.0, strokeOpacity: 1.0, fillColor: 'green', fillOpacity: 0.3, }; const styleClicked = { ...styleDefault, strokeColor: 'blue', fillColor: 'blue', fillOpacity: 0.5, }; const styleMouseMove = { ...styleDefault, strokeWeight: 4.0 }; function applyStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleClicked; } //@ts-ignore if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleMouseMove; } return styleDefault; }
JavaScript
const styleDefault = { strokeColor: "green", strokeWeight: 2.0, strokeOpacity: 1.0, fillColor: "green", fillOpacity: 0.3, }; const styleClicked = { ...styleDefault, strokeColor: "blue", fillColor: "blue", fillOpacity: 0.5, }; const styleMouseMove = { ...styleDefault, strokeWeight: 4.0, }; function applyStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if ( lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"]) ) { return styleClicked; } //@ts-ignore if ( lastInteractedFeatureIds.includes( datasetFeature.datasetAttributes["globalid"], ) ) { return styleMouseMove; } return styleDefault; }
Stil işlevi, özellikler üzerine uygulandığında her zaman tutarlı sonuçlar döndürmelidir. Örneğin, bir özellik grubunu rastgele renklendirmek istiyorsanız istenmeyen sonuçlara yol açabileceğinden özellik stili işlevinde rastgele bölümün yer almaması gerekir. Bu işlev bir katmandaki tüm özellikler üzerinde çalıştığı için
optimizasyon önemlidir. Oluşturma sürelerini etkilememek için artık kullanılmayan katmanların stilini null
olarak ayarlayın.
Nokta verileri stil örneği
Bu örnekte, nokta geometrisine dayalı veri özelliklerine stil eklemek için bir yaklaşım gösterilmektedir.
Veri kümesi hakkında
Bu örnekte kullanılan veri kümesi New York, Central Park'ta 2018 yılında yapılan sincaplarla ilgili bir anketin sonucudur.
CSV veri dosyasından yapılan aşağıdaki alıntıda, x
ve y
sütunlarının coğrafi konum için kullanıldığını ve bir LatLng
sütununun dahil edildiğini görüyoruz. Ancak coğrafi konumun iki sütunla temsil edilmesi gerektiğinden bu örnekte kullanılmıyor. Sincap sayım veri kümesi, sincapların gözlemlenen kürk rengi ve davranışıyla ilgili hoş çeşitli veri noktaları içerir (tümünü görmek için yatay olarak kaydırdığınızdan emin olun).
X | Y | UniqueSquirrelID | Hektar | üst karakter | Tarih | Hektar Sincap Numarası | Yaş | PrimaryFurColor | HighlightFurColor | CombinationofPrimaryandHighlightColor | Renk notları | Konum | OverGroundSighter Ölçümü | SpecificLocation | Çalışıyor | Kovalama | Tırmanma | Yemek yemek | Yiyecek arama | Diğer Etkinlikler | Kuks | Quaa'lar | İnlemeler | Kuyruklu bayraklar | Tailswit'ler | Yaklaşımlar | Fikrim Yok | Çalıştırılan kaynak | OtherInteractions | LatLng |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-73,9561344937861 | 40,7940823884086 | 37F-PM-1014-03 | 37F | ÖS | 10142018 | 3 | + | false | false | false | false | false | false | false | false | false | false | false | false | false | PUAN (-73.9561344937861 40.7940823884086) | |||||||||
-73,9688574691102 | 40,7837825208444 | 21B-AM-1019-04 | 21B | AM | 10192018 | 4 | + | false | false | false | false | false | false | false | false | false | false | false | false | false | PUAN (-73.9688574691102 40.7837825208444) | |||||||||
-73,9742811484852 | 40,775533619083 | 11B-PM-1014-08 | 11B | ÖS | 10142018 | 8 | Gri | Gri+ | Yer Üstü | 10 | false | true | false | false | false | false | false | false | false | false | false | false | false | PUAN (-73.97428114848522 40.775533619083) | ||||||
-73,9596413903948 | 40,7903128889029 | 32E-PM-1017-14 | 32D | ÖS | 10172018 | 14 | Adult | Gri | Gri+ | Birincil olarak seçim yapılmadı. Vurgulananlar olarak gri seçili. Yönetim değişiklikleri yaptı. | false | false | false | true | true | false | false | false | false | false | false | false | true | PUAN (-73.9596413903948 40.7903128889029) | ||||||
-73,9702676472613 | 40,7762126854894 | 13E-AM-1017-05 | 13D | AM | 10172018 | 5 | Adult | Gri | Tarçın | Gri+Taç | Yer Üstü | ağaç kütüsünde | false | false | false | false | true | false | false | false | false | false | false | false | false | PUAN (-73.9702676472613 40.7762126854894) | ||||
-73,9683613516225 | 40,7725908847499 | 11H-AM-1010-03 | 11 saat | AM | 10102018 | 3 | Adult | Tarçın | Beyaz | Tarçın+Beyaz | false | false | false | false | true | false | false | false | false | true | false | true | false | PUAN (-73.9683613516225 40.7725908847499) | ||||||
-73,9541201789795 | 40,7931811701082 | 36H-AM-1010-02 | 36 saat | AM | 10102018 | 2 | Adult | Gri | Gri+ | hektarın hemen dışında | Kara Düzlemi | FALSE | false | false | false | false | true | false | false | false | false | false | false | false | false | PUAN (-73.9541201789795 40.7931811701082) |
Nokta verisi özelliklerinin stilini belirleme
Bu örnekteki kod, her nokta için dolgu renginin ve fırça renginin stil özelliklerini CombinationofPrimaryandHighlightColor
özelliğine göre
yönlendiren basit bir yaklaşım benimser. Bu özellik, her sincabın birincil ve ikincil kürk renklerini birleştirir.
TypeScript
function setStyle(/* FeatureStyleFunctionOptions */ params) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor']; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch (furColors) { case 'Black+': return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 }; break; case 'Cinnamon+': return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 }; break; case 'Cinnamon+Gray': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 }; break; case 'Cinnamon+White': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 }; break; case 'Gray+': return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 }; break; case 'Gray+Cinnamon': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+Cinnamon, White': return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+White': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 }; break; } }
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ params) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"]; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch (furColors) { case "Black+": return /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 }; break; case "Cinnamon+": return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 }; break; case "Cinnamon+Gray": return /* FeatureStyleOptions */ { fillColor: "#8b0000", strokeColor: "gray", pointRadius: 6, }; break; case "Cinnamon+White": return /* FeatureStyleOptions */ { fillColor: "#8b0000", strokeColor: "white", pointRadius: 6, }; break; case "Gray+": return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 }; break; case "Gray+Cinnamon": return /* FeatureStyleOptions */ { fillColor: "gray", strokeColor: "#8b0000", pointRadius: 6, }; break; case "Gray+Cinnamon, White": return /* FeatureStyleOptions */ { fillColor: "silver", strokeColor: "#8b0000", pointRadius: 6, }; break; case "Gray+White": return /* FeatureStyleOptions */ { fillColor: "gray", strokeColor: "white", pointRadius: 6, }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 }; break; } }
Örnek kodu tamamlayın
Örnek kaynak kodunun tamamını inceleyin
TypeScript
let map; function setStyle(/* FeatureStyleFunctionOptions */ params) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor']; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch (furColors) { case 'Black+': return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 }; break; case 'Cinnamon+': return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 }; break; case 'Cinnamon+Gray': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 }; break; case 'Cinnamon+White': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 }; break; case 'Gray+': return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 }; break; case 'Gray+Cinnamon': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+Cinnamon, White': return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+White': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 }; break; } } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; const position = {lat: 40.780101, lng: -73.967780}; const map = new Map(document.getElementById('map') as HTMLElement, { zoom: 17, center: position, mapId: 'b98e588c46685dd7', mapTypeControl: false, streetViewControl: false, fullscreenControl: false, }); // Add the data legend. makeLegend(map); // Dataset ID for squirrel dataset. const datasetId = '02fa1552-37dd-4a95-844f-f99e1c22541f'; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); //@ts-ignore datasetLayer.style = setStyle; // Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement('div'); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(attributionDiv); } // Create a custom control to hold attribution text. function createAttribution(map) { const attributionLabel = document.createElement('div'); // Define CSS styles. attributionLabel.style.backgroundColor = '#fff'; attributionLabel.style.opacity = '0.7'; attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif'; attributionLabel.style.fontSize = '10px'; attributionLabel.style.padding = '2px'; attributionLabel.style.margin = '2px'; attributionLabel.textContent = 'Data source: NYC Open Data'; return attributionLabel; } function makeLegend(map) { let colors = { 'black': ['black'], 'cinnamon': ['#8b0000'], 'cinnamon + gray': ['#8b0000','gray'], 'cinnamon + white': ['#8b0000', 'white'], 'gray': ['gray'], 'gray + cinnamon': ['gray', '#8b0000'], 'gray + cinnamon + white': ['silver', '#8b0000'], 'gray + white': ['gray', 'white'], 'no color data': ['yellow'], }; let legend = document.createElement('div'); legend.id = 'legend'; let title = document.createElement('div'); title.innerText = 'Fur Colors'; title.classList.add('title'); legend.appendChild(title); let k; for (k in colors) { let wrapper = document.createElement('div'); wrapper.id = 'container'; let box = document.createElement('div'); box.style.backgroundColor = colors[k][0]; if (colors[k][1]) { box.style.borderColor = colors[k][1]; } else { box.style.borderColor = colors[k][0]; } box.classList.add('box'); let txt = document.createElement('div'); txt.classList.add('legend'); txt.innerText = k; wrapper.appendChild(box); wrapper.appendChild(txt); legend.appendChild(wrapper); } map.controls[google.maps.ControlPosition.LEFT_TOP].push(legend); } initMap();
JavaScript
let map; function setStyle(/* FeatureStyleFunctionOptions */ params) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"]; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch (furColors) { case "Black+": return /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 }; break; case "Cinnamon+": return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 }; break; case "Cinnamon+Gray": return /* FeatureStyleOptions */ { fillColor: "#8b0000", strokeColor: "gray", pointRadius: 6, }; break; case "Cinnamon+White": return /* FeatureStyleOptions */ { fillColor: "#8b0000", strokeColor: "white", pointRadius: 6, }; break; case "Gray+": return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 }; break; case "Gray+Cinnamon": return /* FeatureStyleOptions */ { fillColor: "gray", strokeColor: "#8b0000", pointRadius: 6, }; break; case "Gray+Cinnamon, White": return /* FeatureStyleOptions */ { fillColor: "silver", strokeColor: "#8b0000", pointRadius: 6, }; break; case "Gray+White": return /* FeatureStyleOptions */ { fillColor: "gray", strokeColor: "white", pointRadius: 6, }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 }; break; } } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const position = { lat: 40.780101, lng: -73.96778 }; const map = new Map(document.getElementById("map"), { zoom: 17, center: position, mapId: "b98e588c46685dd7", mapTypeControl: false, streetViewControl: false, fullscreenControl: false, }); // Add the data legend. makeLegend(map); // Dataset ID for squirrel dataset. const datasetId = "02fa1552-37dd-4a95-844f-f99e1c22541f"; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); //@ts-ignore datasetLayer.style = setStyle; // Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement("div"); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(attributionDiv); } // Create a custom control to hold attribution text. function createAttribution(map) { const attributionLabel = document.createElement("div"); // Define CSS styles. attributionLabel.style.backgroundColor = "#fff"; attributionLabel.style.opacity = "0.7"; attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif"; attributionLabel.style.fontSize = "10px"; attributionLabel.style.padding = "2px"; attributionLabel.style.margin = "2px"; attributionLabel.textContent = "Data source: NYC Open Data"; return attributionLabel; } function makeLegend(map) { let colors = { "black": ["black"], "cinnamon": ["#8b0000"], "cinnamon + gray": ["#8b0000", "gray"], "cinnamon + white": ["#8b0000", "white"], "gray": ["gray"], "gray + cinnamon": ["gray", "#8b0000"], "gray + cinnamon + white": ["silver", "#8b0000"], "gray + white": ["gray", "white"], "no color data": ["yellow"], }; let legend = document.createElement("div"); legend.id = "legend"; let title = document.createElement("div"); title.innerText = "Fur Colors"; title.classList.add("title"); legend.appendChild(title); let k; for (k in colors) { let wrapper = document.createElement("div"); wrapper.id = "container"; let box = document.createElement("div"); box.style.backgroundColor = colors[k][0]; if (colors[k][1]) { box.style.borderColor = colors[k][1]; } else { box.style.borderColor = colors[k][0]; } box.classList.add("box"); let txt = document.createElement("div"); txt.classList.add("legend"); txt.innerText = k; wrapper.appendChild(box); wrapper.appendChild(txt); legend.appendChild(wrapper); } map.controls[google.maps.ControlPosition.LEFT_TOP].push(legend); } initMap();
Poligon veri stili örneği
Bu örnekte, poligon geometrisine dayalı veri özelliklerine stil eklemek için bir yaklaşım gösterilmektedir.
Veri kümesi hakkında
Bu örnekte kullanılan veri kümesi New York'taki parkları göstermektedir. GeoJSON veri kümesinden alınan aşağıdaki alıntıda, temsili bir özellik girişi gösterilmektedir.
{ "type": "Feature", "properties": { "jurisdiction": "DPR", "mapped": "False", "zipcode": "11356", "acres": "0.05", "location": "College Pl., College Pt. Blvd., bet. 11 Ave. and 12 Ave.", "nys_assembly": "27", "councildistrict": "19", "url": "http://www.nycgovparks.org/parks/Q042/", "typecategory": "Triangle/Plaza", "us_congress": "14", "eapply": "Poppenhusen Park", "parentid": "Q-07", "gispropnum": "Q042", "retired": "false", "communityboard": "407", "objectid": "6248", "globalid": "F4810079-CBB9-4BE7-BBFA-B3C0C35D5DE5", "name311": "Poppenhusen Park", "department": "Q-07", "pip_ratable": "true", "subcategory": "Sitting Area/Triangle/Mall", "precinct": "109", "permit": "true", "acquisitiondate": null, "omppropid": "Q042", "gisobjid": "100000301", "signname": "Poppenhusen Park", "address": null, "permitparent": "Q-07", "class": "PARK", "nys_senate": "11", "permitdistrict": "Q-07", "borough": "Q", "waterfront": "false" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -73.84575702371716, 40.78796240884273 ], [ -73.84593393292693, 40.78796857347548 ], [ -73.84577256469657, 40.787651355629556 ], [ -73.84575702371716, 40.78796240884273 ] ] ] ] } },
Poligon veri özelliklerinin stilini ayarlama
Bu örnekteki kod, "Geliştirilmemiş" veya "Otoyol" typecategory
ile ilişkili veri özelliklerine özel renklendirme uygular ve diğer tüm özellikleri yeşil renklendirir.
TypeScript
function setStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // 'typecategory' is an attribute in this Dataset. const typeCategory = datasetFeature.datasetAttributes['typecategory']; switch (typeCategory) { case 'Undeveloped': // Color undeveloped areas blue. return /* FeatureStyleOptions */ { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 1, fillColor: 'blue', fillOpacity: 0.3, }; break; case 'Parkway': // Color historical house sites red. return /* FeatureStyleOptions */ { strokeColor: 'red', strokeWeight: 2, strokeOpacity: 1, fillColor: 'red', fillOpacity: 0.5, }; break; default: // Color other type categories green. return /* FeatureStyleOptions */ { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, }; break; } }
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // 'typecategory' is an attribute in this Dataset. const typeCategory = datasetFeature.datasetAttributes["typecategory"]; switch (typeCategory) { case "Undeveloped": // Color undeveloped areas blue. return /* FeatureStyleOptions */ { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 1, fillColor: "blue", fillOpacity: 0.3, }; break; case "Parkway": // Color historical house sites red. return /* FeatureStyleOptions */ { strokeColor: "red", strokeWeight: 2, strokeOpacity: 1, fillColor: "red", fillOpacity: 0.5, }; break; default: // Color other type categories green. return /* FeatureStyleOptions */ { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1, fillColor: "green", fillOpacity: 0.3, }; break; } }
Örnek kodu tamamlayın
Örnek kaynak kodunun tamamını inceleyin
TypeScript
let map; function setStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // 'typecategory' is an attribute in this Dataset. const typeCategory = datasetFeature.datasetAttributes['typecategory']; switch (typeCategory) { case 'Undeveloped': // Color undeveloped areas blue. return /* FeatureStyleOptions */ { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 1, fillColor: 'blue', fillOpacity: 0.3, }; break; case 'Parkway': // Color historical house sites red. return /* FeatureStyleOptions */ { strokeColor: 'red', strokeWeight: 2, strokeOpacity: 1, fillColor: 'red', fillOpacity: 0.5, }; break; default: // Color other type categories green. return /* FeatureStyleOptions */ { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, }; break; } } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const position = {lat: 40.580732, lng: -74.152826}; const map = new Map(document.getElementById('map') as HTMLElement, { zoom: 14, center: position, mapId: 'b98e588c46685dd7', mapTypeControl: false, }); // Dataset ID for NYC park data. const datasetId = '6fe13aa9-b900-45e7-b636-3236672c3f4f'; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = setStyle; // Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement('div'); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv); } function createAttribution(map) { const attributionLabel = document.createElement('div'); // Define CSS styles. attributionLabel.style.backgroundColor = '#fff'; attributionLabel.style.opacity = '0.7'; attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif'; attributionLabel.style.fontSize = '10px'; attributionLabel.style.padding = '2px'; attributionLabel.style.margin = '2px'; attributionLabel.textContent = 'Data source: NYC Open Data'; return attributionLabel; } initMap();
JavaScript
let map; function setStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // 'typecategory' is an attribute in this Dataset. const typeCategory = datasetFeature.datasetAttributes["typecategory"]; switch (typeCategory) { case "Undeveloped": // Color undeveloped areas blue. return /* FeatureStyleOptions */ { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 1, fillColor: "blue", fillOpacity: 0.3, }; break; case "Parkway": // Color historical house sites red. return /* FeatureStyleOptions */ { strokeColor: "red", strokeWeight: 2, strokeOpacity: 1, fillColor: "red", fillOpacity: 0.5, }; break; default: // Color other type categories green. return /* FeatureStyleOptions */ { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1, fillColor: "green", fillOpacity: 0.3, }; break; } } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const position = { lat: 40.580732, lng: -74.152826 }; const map = new Map(document.getElementById("map"), { zoom: 14, center: position, mapId: "b98e588c46685dd7", mapTypeControl: false, }); // Dataset ID for NYC park data. const datasetId = "6fe13aa9-b900-45e7-b636-3236672c3f4f"; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = setStyle; // Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement("div"); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv); } function createAttribution(map) { const attributionLabel = document.createElement("div"); // Define CSS styles. attributionLabel.style.backgroundColor = "#fff"; attributionLabel.style.opacity = "0.7"; attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif"; attributionLabel.style.fontSize = "10px"; attributionLabel.style.padding = "2px"; attributionLabel.style.margin = "2px"; attributionLabel.textContent = "Data source: NYC Open Data"; return attributionLabel; } initMap();
Çoklu çizgi veri stili örneği
Bu örnekte, çok çizgili geometriye dayalı veri özelliklerine stil eklemek için bir yaklaşım gösterilmektedir.
Veri kümesi hakkında
Bu örnekte kullanılan veri kümesi, Seattle bölgesindeki köprüleri göstermektedir. Aşağıdaki veri kümesi GeoJSON dosyasından yapılan alıntı, temsili bir özellik girişini göstermektedir.
{ "type": "Feature", "properties": { "OBJECTID": 1, "COMPTYPE": 66, "COMPKEY": 515774, "HANSEGKEY": 489781, "UNITID": "BRG-935", "UNITTYPE": " ", "BRGUNITID": "BRG-935", "UNITDESC_BRG": "YALE AVE BR REV LANE OC ", "UNITDESC_SEG": "HOWELL ST ON RP BETWEEN HOWELL ST AND I5 SB ", "INSTDATE": null, "EXPDATE": null, "STATUS": " ", "STATUSDT": null, "CONDITION": " ", "CONDDT": null, "OWN": " ", "LSTVERIFY": null, "MAINTBY": " ", "ADDBY": "GARCIAA", "ADDDTTM": "2010-01-21T00:00:00Z", "MODBY": null, "MODDTTM": null, "BR_NBR": 935, "BR_CODE": " 935", "BR_TYPE": "ST", "BR_NAME": "YALE AVE BR REV LANE OC", "BR_FACILITIES": "YALE AVE-SR 5 ON RAMP", "BR_FEATURES": "SR 5 REV LANE", "BR_RATING": 0, "BR_INSET": 1, "BR_GEO": "DT", "BR_OWNER": "DOT", "BR_OWNER_NAME": "State of Washington", "GEOBASID": 0, "XGEOBASID": 0, "GISSEGKEY": 489781, "EARTHQUAKE_RESPONSE_TEAM": " ", "SHAPE_Length": 220.11891836147655 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.329201929090928, 47.616910448708538 ], [ -122.329206483407461, 47.616976719821004 ], [ -122.32921802149356, 47.617042137515213 ], [ -122.329236413912909, 47.617105967923777 ], [ -122.329261454336034, 47.617167494985758 ], [ -122.329292861855023, 47.617226028479571 ], [ -122.329330284134699, 47.617280911766009 ], [ -122.329373301365223, 47.617331529154569 ], [ -122.329421430971635, 47.617377312810319 ], [ -122.329474133027375, 47.617417749124023 ], [ -122.32953081631139, 47.617452384473893 ] ] } },
Çoklu çizgi veri özelliklerine stil ekleme
Aşağıdaki snippet, aynı stili doğrudan tüm veri özelliklerine uygular. Mantık gerekmediğinden bu durumda özellik stili işlevi kullanılmaz.
TypeScript
// Apply style to all features. datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features. datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
Örnek kaynak kodunun tamamını inceleyin
TypeScript
let map; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const position = {lat: 47.59, lng: -122.31}; const map = new Map(document.getElementById('map') as HTMLElement, { zoom: 14, center: position, mapId: 'b98e588c46685dd7', mapTypeControl: false, }); // Dataset ID for Seattle Bridges const datasetId = '3d0bd5fb-3f42-47fe-b50f-81c0932cd533'; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); // Apply style to all features. datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, }; // Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement('div'); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv); } // Create a custom control to hold attribution text. function createAttribution(map) { const attributionLabel = document.createElement('div'); // Define CSS styles. attributionLabel.style.backgroundColor = '#fff'; attributionLabel.style.opacity = '0.7'; attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif'; attributionLabel.style.fontSize = '10px'; attributionLabel.style.padding = '2px'; attributionLabel.style.margin = '2px'; attributionLabel.textContent = 'Data source: Seattle GeoData'; return attributionLabel; } initMap();
JavaScript
let map; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const position = { lat: 47.59, lng: -122.31 }; const map = new Map(document.getElementById("map"), { zoom: 14, center: position, mapId: "b98e588c46685dd7", mapTypeControl: false, }); // Dataset ID for Seattle Bridges const datasetId = "3d0bd5fb-3f42-47fe-b50f-81c0932cd533"; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); // Apply style to all features. datasetLayer.style = { strokeColor: "green", strokeWeight: 4 }; // Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement("div"); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv); } // Create a custom control to hold attribution text. function createAttribution(map) { const attributionLabel = document.createElement("div"); // Define CSS styles. attributionLabel.style.backgroundColor = "#fff"; attributionLabel.style.opacity = "0.7"; attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif"; attributionLabel.style.fontSize = "10px"; attributionLabel.style.padding = "2px"; attributionLabel.style.margin = "2px"; attributionLabel.textContent = "Data source: Seattle GeoData"; return attributionLabel; } initMap();