Áp dụng kiểu cho các đối tượng dữ liệu bằng cách đặt thuộc tính style trên lớp tính năng tập dữ liệu vào google.maps.FeatureStyleFunction (có thể chứa logic định kiểu hoặc google.maps.FeatureStyleOptions) để tạo kiểu thống nhất cho tất cả các tính năng cho một lớp. Bạn có thể áp dụng kiểu cho các tính năng dữ liệu về màu nền (màu sắc, độ mờ), nét vẽ (màu sắc, độ mờ, độ đậm nét vẽ) và đường kính (điểm). Trang này cho biết cách truy cập một tập dữ liệu và tạo kiểu cho các tính năng của tập dữ liệu đó theo phương thức lập trình, đồng thời trình bày các ví dụ định kiểu cho các đối tượng dữ liệu dựa trên các hình học điểm, đa giác và hình nhiều đường.
Định kiểu theo hướng dữ liệu cho các tập dữ liệu sẽ kết xuất các tính năng dữ liệu dựa trên vĩ độ và kinh độ được cung cấp trong tệp dữ liệu không gian địa lý dùng để tạo tập dữ liệu.
Thuộc tính của đối tượng dữ liệu
Bạn có thể truy cập tất cả dữ liệu trong một tập dữ liệu trong hàm kiểu tính năng. Để xem các thuộc tính của đối tượng dữ liệu, trước tiên hãy lấy tính năng tập dữ liệu. Tính năng này chứa tất cả dữ liệu trong tập dữ liệu, sau đó nhận thuộc tính dữ liệu cụ thể mà bạn muốn, như minh hoạ dưới đây:
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"];
Tùy chọn kiểu tính năng
Tuỳ chọn kiểu đối tượng là nơi bạn xác định kiểu cho lớp đối tượng dữ liệu, ví dụ: tạo kiểu cho màu nền và nét vẽ cho đa giác hoặc màu và đường kính của điểm. Ví dụ sau đây cho thấy các kiểu cho tính năng, có thể áp dụng trực tiếp bằng cách sử dụng thuộc tính style cho một tính năng:
TypeScript
// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
Hàm kiểu đối tượng
Sử dụng hàm kiểu tính năng để xác định logic cho các tính năng của tập dữ liệu tạo kiểu.
Để tạo kiểu cho một đối tượng, hãy đặt thuộc tính style thành google.maps.FeatureStyleFunction.
Hàm kiểu là nơi bạn xác định logic để tạo kiểu cho các tính năng riêng lẻ trên một lớp tính năng. Khi bạn đặt featureLayer.style, hàm định kiểu sẽ được chạy trên mọi đối tượng trong lớp tính năng bị ảnh hưởng. Hàm này được áp dụng tại thời điểm bạn đặt thuộc tính kiểu. Để cập nhật thuộc tính này, bạn phải thiết lập lại thuộc tính kiểu. Ví dụ sau đây cho thấy một hàm kiểu đối tượng đơn giản:
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;
}
Hàm kiểu phải luôn trả về kết quả nhất quán khi được áp dụng thay vì các đối tượng. Ví dụ: nếu bạn muốn tô màu ngẫu nhiên một nhóm tính năng, phần ngẫu nhiên không nên diễn ra trong hàm kiểu tính năng, vì việc đó sẽ gây ra kết quả không mong muốn. Vì hàm này chạy trên mọi tính năng trong một lớp, nên việc tối ưu hoá là rất quan trọng. Để tránh ảnh hưởng đến thời gian kết xuất, hãy đặt kiểu thành null khi một lớp không còn được sử dụng nữa.
Ví dụ về định kiểu dữ liệu điểm
Ví dụ này cho thấy một cách tiếp cận các tính năng dữ liệu dựa trên hình học điểm.
Giới thiệu về tập dữ liệu
Tập dữ liệu được dùng trong ví dụ này là kết quả của một cuộc khảo sát về sóc năm 2018 tại Công viên Trung tâm, Thành phố New York.
Trong phần trích dẫn sau đây từ tệp dữ liệu CSV, chúng ta thấy rằng các cột x và y
được dùng cho vị trí địa lý; một cột LatLng được bao gồm nhưng không được sử dụng trong ví dụ này
vì vị trí địa lý phải được thể hiện bằng 2 cột. Tập dữ liệu điều tra dân số của sóc chứa nhiều điểm dữ liệu hữu ích liên quan đến màu lông quan sát được và hành vi của sóc (hãy nhớ cuộn theo chiều ngang để xem tất cả).
| X | Y | UniqueSquirrelID | Hecta | Shift | Ngày | Số hectare Squirrel | Tuổi | PrimaryFurColor | HighlightFurColor | CombinationofPrimaryandHighlightColor | Màu ghi chú | Vị trí | Đo lường trên không gian ngắm cảnh | SpecificLocation | Chạy | Đuổi theo | Leo núi | Ăn | Hái lượm | Hoạt động khác | Tiếng Kuks | Quaas | Tiếng rên rỉ | Cờ đuôi | Ống uốn cong đuôi dài | Phương pháp | Trung lập | Điểm khởi hành | OtherInteractions | LatLng |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| -73,9561344937861 | 40,7940823884086 | 37F-PM-1014-03 | 37°C | CH | 10142018 | 3 | + | false | false | false | false | false | false | false | false | false | false | false | false | false | ĐIỂM (-73.9561344937861 40.7940823884086) | |||||||||
| -73,9688574691102 | 40,7837825208444 | 21B-AM-1019-04 | 21 TỶ | SA | 10192018 | 4 | + | false | false | false | false | false | false | false | false | false | false | false | false | false | ĐIỂM (-73.9688574691102 40.7837825208444) | |||||||||
| -73,9742811484852 | 40,775533619083 | 11B-PM-1014-08 | 11 TỶ | CH | 10142018 | 8 | Xám | Xám+ | Trên mặt đất | 10 | false | đúng | false | false | false | false | false | false | false | false | false | false | false | ĐIỂM (-73.97428114848522 40.775533619083) | ||||||
| -73,9596413903948 | 40,7903128889029 | 32E-PM-1017-14 | 32E | CH | 10172018 | 14 | Người lớn | Xám | Xám+ | Chưa có mục nào được chọn làm danh sách Chính. Đã chọn màu xám làm Điểm nổi bật. Đã thực hiện các điều chỉnh về mặt thực thi. | false | false | false | đúng | đúng | false | false | false | false | false | false | false | đúng | ĐIỂM (-73.9596413903948 40.7903128889029) | ||||||
| -73,9702676472613 | 40,7762126854894 | 13E-AM-1017-05 | 13E | SA | 10172018 | 5 | Người lớn | Xám | Cây quế | Xám+Quế | Trên mặt đất | trên gốc cây | false | false | false | false | đúng | false | false | false | false | false | false | false | false | ĐIỂM (-73.9702676472613 40.7762126854894) | ||||
| -73,9683613516225 | 40,7725908847499 | 11H-AM-1010-03 | 11 giờ | SA | 10102018 | 3 | Người lớn | Cây quế | Trắng | Quế+Trắng | false | false | false | false | đúng | false | false | false | false | đúng | false | đúng | false | ĐIỂM (-73.9683613516225 40.7725908847499) | ||||||
| -73,9541201789795 | 40,7931811701082 | 36H-AM-1010-02 | 36 giờ | SA | 10102018 | 2 | Người lớn | Xám | Xám+ | ngay bên ngoài ha | Máy bay mặt đất | FALSE | false | false | false | false | đúng | false | false | false | false | false | false | false | false | ĐIỂM (-73.9541201789795 40.7931811701082) |
Tạo kiểu cho các đối tượng dữ liệu điểm
Mã trong ví dụ này sử dụng phương pháp đơn giản để định kiểu cho màu nền và màu nét vẽ cho từng điểm dựa trên thuộc tính CombinationofPrimaryandHighlightColor. Thuộc tính này kết hợp màu lông chính và màu phụ cho mỗi con sóc.
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;
}
}
Đoạn mã mẫu hoàn chỉnh
Xem mã nguồn mẫu hoàn chỉnh
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();
Ví dụ về định kiểu dữ liệu cho đa giác
Ví dụ này cho thấy một phương pháp định kiểu các tính năng dữ liệu dựa trên hình học đa giác.
Giới thiệu về tập dữ liệu
Tập dữ liệu được sử dụng trong ví dụ này mô tả các công viên ở Thành phố New York. Phần trích dẫn sau đây từ tệp GeoJSON của tập dữ liệu cho thấy một mục nhập của tính năng đại diện.
{
"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
]
]
]
]
}
},
Tạo kiểu cho các đối tượng dữ liệu đa giác
Mã trong ví dụ này áp dụng màu đặc biệt cho các tính năng dữ liệu liên kết với typecategory là "Chưa phát triển" hoặc "Đỗ xe" và màu sắc của tất cả các tính năng khác là màu xanh lục.
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;
}
}
Đoạn mã mẫu hoàn chỉnh
Xem mã nguồn mẫu hoàn chỉnh
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();
Ví dụ về định kiểu dữ liệu nhiều đường
Ví dụ này cho thấy một phương pháp tạo kiểu cho các tính năng dữ liệu dựa trên hình nhiều đường.
Giới thiệu về tập dữ liệu
Tập dữ liệu được sử dụng trong ví dụ này cho thấy những cây cầu trong khu vực Seattle. Phần trích dẫn sau đây từ tệp GeoJSON của tập dữ liệu cho thấy một mục nhập tính năng đại diện.
{
"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
]
]
}
},
Tạo kiểu cho các đối tượng dữ liệu hình nhiều đường
Đoạn mã sau đây áp dụng cùng một kiểu cho trực tiếp cho tất cả các đối tượng dữ liệu. Vì không cần logic nên hàm kiểu tính năng không được dùng trong trường hợp này.
TypeScript
// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
Xem mã nguồn mẫu hoàn chỉnh
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();