Примените стиль к объектам данных, задав для свойства style
векторного слоя набора данных значение google.maps.FeatureStyleFunction
, которое может содержать логику стиля, или google.maps.FeatureStyleOptions
, чтобы единообразно стилизовать все объекты слоя. Вы можете применить стили к объектам данных для заливки (цвет, непрозрачность), обводки (цвет, непрозрачность, толщина обводки) и диаметра (точки). На этой странице показано, как программно получить доступ к набору данных и стилизовать его объекты, а также рассматриваются примеры стилизации для объектов данных на основе точечной, полигональной и полилинейной геометрии.
Стилизация наборов данных на основе данных отображает объекты данных на основе предоставленных координат широты и долготы из файла геопространственных данных, использованного для создания набора данных.
Атрибуты объектов данных
Доступ ко всем данным в наборе данных можно получить с помощью функции стиля объекта. Чтобы получить атрибуты объекта данных, сначала получите объект набора данных, который содержит все данные в наборе данных, а затем получите конкретный атрибут данных, который вам нужен, как показано здесь:
Машинопись
// 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
объекта:
Машинопись
// 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
, функция стиля применяется к каждому объекту в затронутом векторном слое. Функция применяется в момент установки свойства стиля. Чтобы обновить его, необходимо снова установить свойство стиля. В следующем примере показана простая функция стиля объекта:
Машинопись
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
, но он не используется в этом примере, поскольку географическое положение должно быть представлено двумя столбцами. Набор данных переписи белок содержит большое количество различных данных, касающихся наблюдаемого цвета меха и поведения белок (обязательно прокрутите по горизонтали, чтобы увидеть все это).
Х | Да | УникальныйSquirrelID | Га | Сдвиг | Дата | Гектар БелкаНомер | Возраст | ОсновнойМехЦвет | ВыделениеМехЦвет | Комбинация основного и основного цвета | Цветовые ноты | Расположение | Измерение над землей | Конкретное местоположение | Бег | Погоня | Восхождение | Еда | Собирательство | Другие виды деятельности | Кукс | Кваас | стоны | Хвостовые флаги | Хвостовые переключатели | Подходы | Безразличный | Бежит из | Другие взаимодействия | ШиротаДлительность |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-73.9561344937861 | 40.7940823884086 | 37Ф-ПМ-1014-03 | 37F | ПМ | 10142018 | 3 | + | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ТОЧКА (-73.9561344937861 40.7940823884086) | |||||||||
-73.9688574691102 | 40.7837825208444 | 21Б-АМ-1019-04 | 21Б | ЯВЛЯЮСЬ | 10192018 | 4 | + | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ТОЧКА (-73.9688574691102 40.7837825208444) | |||||||||
-73.9742811484852 | 40.775533619083 | 11Б-ПМ-1014-08 | 11Б | ПМ | 10142018 | 8 | Серый | Серый+ | Над землей | 10 | ЛОЖЬ | истинный | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ТОЧКА (-73.97428114848522 40.775533619083) | ||||||
-73.9596413903948 | 40.7903128889029 | 32Э-ПМ-1017-14 | 32Е | ПМ | 10172018 | 14 | Взрослый | Серый | Серый+ | Ничего не выбрано в качестве основного. Серый выбран в качестве основных моментов. Внесены исполнительные коррективы. | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | истинный | истинный | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | истинный | ТОЧКА (-73.9596413903948 40.7903128889029) | ||||||
-73.9702676472613 | 40.7762126854894 | 13Э-АМ-1017-05 | 13Е | ЯВЛЯЮСЬ | 10172018 | 5 | Взрослый | Серый | Корица | Серый+Корица | Над землей | на пне | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | истинный | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ТОЧКА (-73,9702676472613 40,7762126854894) | ||||
-73.9683613516225 | 40.7725908847499 | 11H-AM-1010-03 | 11ч. | ЯВЛЯЮСЬ | 10102018 | 3 | Взрослый | Корица | Белый | Корица+Белый | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | истинный | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | истинный | ЛОЖЬ | истинный | ЛОЖЬ | ТОЧКА (-73,9683613516225 40,7725908847499) | ||||||
-73.9541201789795 | 40.7931811701082 | 36H-AM-1010-02 | 36 ч. | ЯВЛЯЮСЬ | 10102018 | 2 | Взрослый | Серый | Серый+ | недалеко от гектара | Земляной самолет | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | истинный | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ЛОЖЬ | ТОЧКА (-73.9541201789795 40.7931811701082) |
Функции данных точек стиля
В коде в этом примере используется простой подход к стилизации цвета заливки и цвета обводки для каждой точки на основе атрибута CombinationofPrimaryandHighlightColor
, который объединяет первичный и вторичный цвета меха для каждой белки.
Машинопись
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; } }
Полный пример кода
См. полный исходный код примера
Машинопись
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();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #legend, #dataset, #counter { background-color: #e5e5e5; width: 15em; margin-top: 2em; margin-left: 1em; border-radius: 8px; font-family: Roboto; overflow: hidden; } #dataset select { border-radius: 0; padding: 0.1em; border: 1px solid black; width: auto; margin: 0.5em 1em; } .title { padding: 0.5em 1em; font-weight: bold; font-size: 1.5em; margin-bottom: 0.5em; background-color: rgb(66, 133, 244); color: white; width: 100%; } .button { font-size: 1.2em; margin: 1em; background-color: rgb(66, 133, 244); color: white; padding: 0.5em; border-radius: 8px; } #legend #container { margin: 0.5em 1em; display: flex; } #legend div .box { display: flex; width: 2em; height: 2em; border-radius: 50%; border: 3px solid; } #legend div .legend { display: flex; padding: 0.5em; }
HTML
<html> <head> <title>Style a point data feature</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </html>
Попробуйте образец
Пример оформления данных многоугольника
В этом примере показан подход к стилизации объектов данных на основе геометрии полигона.
О наборе данных
Набор данных, используемый в этом примере, изображает парки Нью-Йорка . В следующем отрывке из файла набора данных 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
«Незастроенный» или «Паркуэй», и окрашивает все остальные объекты в зеленый цвет.
Машинопись
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; } }
Полный пример кода
См. полный исходный код примера
Машинопись
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();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Style a polygon data feature with more detail</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </html>
Попробуйте образец
Пример оформления данных полилинии
В этом примере показан подход к стилизации объектов данных на основе геометрии полилиний.
О наборе данных
Набор данных, используемый в этом примере, показывает мосты в районе Сиэтла . В следующем отрывке из файла набора данных 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 ] ] } },
Стилизовать объекты данных полилинии
В следующем фрагменте один и тот же стиль применяется непосредственно ко всем объектам данных. Поскольку никакой логики не требуется, функция стиля объекта в этом случае не используется.
Машинопись
// Apply style to all features. datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features. datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
См. полный исходный код примера
Машинопись
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();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Style a polyline data feature</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </html>