डेटासेट की सुविधा लेयर में style प्रॉपर्टी को google.maps.FeatureStyleFunction पर सेट करके, डेटा सुविधाओं पर स्टाइल लागू करें. इसमें किसी लेयर की सभी सुविधाओं को एक जैसा स्टाइल देने के लिए, स्टाइल लॉजिक या google.maps.FeatureStyleOptions हो सकता है. डेटा सुविधाओं में फ़िल (रंग, अपारदर्शिता), स्ट्रोक (रंग, अपारदर्शिता, स्ट्रोक की मोटाई), और व्यास (पॉइंट) के लिए, स्टाइल लागू किए जा सकते हैं. इस पेज पर बताया गया है कि प्रोग्राम के हिसाब से, डेटासेट को कैसे ऐक्सेस किया जा सकता है और इसकी सुविधाओं को कैसे बेहतर बनाया जा सकता है. साथ ही, इस पेज पर पॉइंट, पॉलीगॉन, और पॉलीलाइन ज्यामिति के आधार पर डेटा की स्टाइल के उदाहरण दिए गए हैं.
डेटासेट के लिए डेटा-ड्रिवन स्टाइल, डेटा सेट बनाने के लिए इस्तेमाल की गई जियोस्पेशियल डेटा फ़ाइल से मिले अक्षांश और देशांतर निर्देशांक के आधार पर, डेटा सुविधाओं को रेंडर करता है.
डेटा सुविधा के एट्रिब्यूट
किसी डेटासेट का पूरा डेटा, फ़ीचर स्टाइल फ़ंक्शन से ऐक्सेस किया जा सकता है. डेटा फ़ीचर एट्रिब्यूट पाने के लिए, सबसे पहले डेटासेट की सुविधा पाएं. इस सुविधा में, डेटासेट के अंदर का पूरा डेटा होता है. इसके बाद, वह डेटा एट्रिब्यूट मिलता है जो आपको चाहिए, जैसा कि यहां दिखाया गया है:
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"];
सुविधा की स्टाइल के विकल्प
सुविधा स्टाइल के विकल्प: वे जगहें हैं जहां डेटा फ़ीचर लेयर के लिए स्टाइल तय की जाती है. उदाहरण के लिए, पॉलीगॉन के लिए फ़िल और स्ट्रोक को स्टाइल करना या पॉइंट के रंग और व्यास को. इस उदाहरण में, सुविधा की स्टाइल के विकल्प दिखाए गए हैं. इन्हें किसी सुविधा के लिए, style प्रॉपर्टी का इस्तेमाल करके सीधे तौर पर लागू किया जा सकता है:
TypeScript
// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
फ़ीचर स्टाइल फ़ंक्शन
डेटासेट की सुविधाओं की स्टाइलिंग का लॉजिक तय करने के लिए, फ़ीचर स्टाइल फ़ंक्शन का इस्तेमाल करें.
किसी सुविधा को स्टाइल देने के लिए, style प्रॉपर्टी को google.maps.FeatureStyleFunction पर सेट करें.
स्टाइल फ़ंक्शन वह जगह है जहां किसी फ़ीचर लेयर की अलग-अलग सुविधाओं को स्टाइल करने के लिए, लॉजिक तय किया जाता है. जब featureLayer.style सेट होता है, तो जिस सुविधा पर असर हुआ है उसकी
हर सुविधा पर स्टाइल फ़ंक्शन चलता है. जब आप शैली प्रॉपर्टी सेट करते हैं, तब फ़ंक्शन लागू होता है. इसे अपडेट करने के लिए, आपको स्टाइल प्रॉपर्टी को फिर से सेट
करना होगा. नीचे दिए गए उदाहरण में, फ़ीचर स्टाइल का आसान फ़ंक्शन दिखाया गया है:
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;
}
जब स्टाइल फ़ंक्शन को सुविधाओं पर लागू किया जाता है, तो उससे हमेशा एक जैसे नतीजे मिलने चाहिए. उदाहरण के लिए, अगर आपको सुविधाओं के किसी सेट को किसी भी क्रम में रंगना है, तो फ़ीचर स्टाइल फ़ंक्शन में रैंडम तरीके से कोई भी हिस्सा नहीं होना चाहिए. इससे अनचाहे नतीजे मिल सकते हैं. यह फ़ंक्शन किसी लेयर की हर सुविधा पर काम करता है, इसलिए ऑप्टिमाइज़ेशन ज़रूरी है. रेंडरिंग के समय पर असर न पड़े, इसके लिए
किसी लेयर का इस्तेमाल न होने पर, स्टाइल को null पर सेट करें.
पॉइंट डेटा स्टाइल का उदाहरण
इस उदाहरण में, स्टाइल पॉइंट की ज्यामिति पर आधारित डेटा सुविधाओं का तरीका बताया गया है.
डेटासेट के बारे में जानकारी
इस उदाहरण में इस्तेमाल किया गया डेटासेट, न्यूयॉर्क शहर के सेंट्रल पार्क में गिलहरियों पर किए गए 2018 के सर्वे का नतीजा है.
CSV डेटा फ़ाइल के इस हिस्से में, हमने देखा कि x और y कॉलम का इस्तेमाल भूगोल के लिए किया जाता है. इसमें एक LatLng कॉलम शामिल है, लेकिन इस उदाहरण में इसका इस्तेमाल नहीं किया गया है, क्योंकि भौगोलिक जगह को दो कॉलम से दिखाया जाना चाहिए. गिलहरी की जनगणना के डेटासेट में, फ़र के रंग और गिलहरियों के व्यवहार से जुड़े अलग-अलग तरह के डेटा पॉइंट शामिल हैं. इन सभी डेटा को देखने के लिए
हॉरिज़ॉन्टल रूप से स्क्रोल करें.
| X | हां | UniqueSquirrelID | हैक्टेयर | Shift | तारीख | हैक्टेयर SquirrelNumber | उम्र | PrimaryFurColor | HighlightFurColor | CombinationofPrimaryandHighlightColor | रंगीन नोट | जगह | GroundSighter मेज़रमेंट से ज़्यादा | SpecificLocation | दौड़ना | पीछा करना | क्लाइंबिंग | खाना | खोज | अन्य गतिविधियां | कुक | क्वेरी पर आधारित अपने-आप जनरेट हुई एसेट (क्यूएएस) | सिसकना | टेलफ़्लैग | टेलट्विच | उपाय | उदासीन | रन फ़्रॉम | OtherInteractions | LatLng |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| -73.9561344937861 | 40.7940823884086 | 37F-PM-1014-03 | 37 फ़ैरनहाइट | PM | 10142018 | 3 | + | false | false | false | false | false | false | false | false | false | false | false | false | false | पॉइंट (-73.9561344937861 40.7940823884086) | |||||||||
| -73.9688574691102 | 40.7837825208444 | 21B-AM-1019-04 | 21 अरब | AM | 10192018 | 4 | + | false | false | false | false | false | false | false | false | false | false | false | false | false | पॉइंट (-73.9688574691102 40.7837825208444) | |||||||||
| -73.9742811484852 | 40.775533619083 | 11B-PM-1014-08 | 11 अरब | PM | 10142018 | 8 | ग्रे | स्लेटी+ | ज़मीन से ऊपर | 10 | false | true | false | false | false | false | false | false | false | false | false | false | false | पॉइंट (-73.97428114848522 40.775533619083) | ||||||
| -73.9596413903948 | 40.7903128889029 | 32E-PM-1017-14 | 32ई | PM | 10172018 | 14 | वयस्क | ग्रे | स्लेटी+ | मुख्य के तौर पर कुछ भी नहीं चुना गया. स्लेटी रंग को हाइलाइट के तौर पर चुना गया. एक्ज़ेक्यूटिव अडजस्टमेंट किए गए. | false | false | false | true | true | false | false | false | false | false | false | false | true | पॉइंट (-73.9596413903948 40.7903128889029) | ||||||
| -73.9702676472613 | 40.7762126854894 | 13E-AM-1017-05 | 13ई | AM | 10172018 | 5 | वयस्क | ग्रे | दालचीनी | स्लेटी और दालचीनी | ज़मीन से ऊपर | पेड़ के स्टंप पर | false | false | false | false | true | false | false | false | false | false | false | false | false | पॉइंट (-73.9702676472613 40.7762126854894) | ||||
| -73.9683613516225 | 40.7725908847499 | 11H-AM-1010-03 | 11 घं॰ | AM | 10102018 | 3 | वयस्क | दालचीनी | सफ़ेद | सिनेमन+व्हाइट | false | false | false | false | true | false | false | false | false | true | false | true | false | पॉइंट (-73.9683613516225 40.7725908847499) | ||||||
| -73.9541201789795 | 40.7931811701082 | 36H-AM-1010-02 | 36 घं॰ | AM | 10102018 | 2 | वयस्क | ग्रे | स्लेटी+ | हैक्टेयर के बाहर | ग्राउंड प्लेन | FALSE | false | false | false | false | true | false | false | false | false | false | false | false | false | पॉइंट (-73.9541201789795 40.7931811701082) |
स्टाइल पॉइंट डेटा सुविधाएं
इस उदाहरण में दिए गए कोड में, CombinationofPrimaryandHighlightColor एट्रिब्यूट के आधार पर हर पॉइंट के लिए फ़िल कलर और स्ट्रोक के रंग को स्टाइल करने का आसान तरीका अपनाया गया है. इसमें हर गिलहरी के लिए, फ़र के मुख्य और दूसरे रंग को जोड़ा जाता है.
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;
}
}
उदाहरण कोड को पूरा करें
उदाहरण के तौर पर दिया गया पूरा सोर्स कोड देखें
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();
पॉलीगॉन डेटा स्टाइल का उदाहरण
इस उदाहरण में, पॉलीगॉन ज्यामिति पर आधारित डेटा सुविधाओं को बेहतर बनाने का तरीका बताया गया है.
डेटासेट के बारे में जानकारी
इस उदाहरण में इस्तेमाल किए गए डेटासेट में, न्यूयॉर्क शहर के पार्क दिखाए गए हैं. GeoJSON फ़ाइल का नीचे दिया गया हिस्सा, एक प्रतिनिधि सुविधा की एंट्री दिखाता है.
{
"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
]
]
]
]
}
},
पॉलीगॉन डेटा सुविधाओं को शैली दें
इस उदाहरण में दिया गया कोड, "अविकसित" या "पार्कवे" के typecategory से जुड़ी डेटा सुविधाओं पर खास कलर लागू करता है और बाकी सभी सुविधाओं को हरे रंग में दिखाता है.
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;
}
}
उदाहरण कोड को पूरा करें
उदाहरण के तौर पर दिया गया पूरा सोर्स कोड देखें
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();
पॉलीलाइन डेटा स्टाइल का उदाहरण
इस उदाहरण में, पॉलीलाइन ज्यामिति पर आधारित डेटा सुविधाओं को स्टाइल देने का तरीका बताया गया है.
डेटासेट के बारे में जानकारी
इस उदाहरण में इस्तेमाल किए गए डेटासेट में, सिऐटल इलाके में पुल दिखाए गए हैं. GeoJSON फ़ाइल का नीचे दिया गया हिस्सा, सुविधा के बारे में जानकारी देने वाली एंट्री दिखाता है.
{
"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
]
]
}
},
पॉलीलाइन डेटा फ़ीचर को स्टाइल करें
नीचे दिया गया स्निपेट, डेटा की सभी सुविधाओं पर सीधे तौर पर यही स्टाइल लागू करता है. किसी लॉजिक की ज़रूरत नहीं होती, इसलिए इस मामले में फ़ीचर स्टाइल फ़ंक्शन का इस्तेमाल नहीं किया जाता.
TypeScript
// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
उदाहरण के तौर पर दिया गया पूरा सोर्स कोड देखें
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();