Funkcje danych dotyczących stylu

Wybierz platformę: Android iOS JavaScript

Aby zastosować styl do cech danych, ustaw w warstwie cech zbioru danych właściwość style na google.maps.FeatureStyleFunction, która może zawierać logikę stylizacji, lub na google.maps.FeatureStyleOptions, aby nadać spójny styl wszystkim cechom w warstwie. Stylów możesz używać w przypadku atrybutów danych wypełnień (kolor, krycie), kresek (kolor, krycie, grubość kreski) i średnicy (punkty). Na tej stronie znajdziesz informacje o tym, jak programowo uzyskiwać dostęp do zbioru danych i nadawać styl jego elementom. Znajdziesz tu też przykłady stylizacji elementów danych na podstawie geometrii punktowej, wielokątnej i wielokątnoprzecinkowej.

Stylizacja zbiorów danych oparta na danych powoduje renderowanie elementów danych na podstawie podanych współrzędnych szerokości i długości geograficznej z pliku danych geoprzestrzennych użytego do utworzenia zbioru danych.

Atrybuty funkcji danych

Do wszystkich danych w zbiorze danych można uzyskać dostęp za pomocą funkcji styl cech. Aby uzyskać atrybuty atrybutu danych, najpierw pobierz atrybut zbioru danych, który zawiera wszystkie dane w zbiorze, a następnie pobierz konkretny atrybut danych, jak pokazano tutaj:

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'];
index.ts

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"];

index.js

Opcje stylów funkcji

Opcje stylizacji cech służą do definiowania stylizacji warstwy cech danych, na przykład stylizacji wypełnienia i obrysu wielokątów lub koloru i średnicy punktów. Ten przykład pokazuje opcje stylu funkcji, które można zastosować bezpośrednio za pomocą właściwości style funkcji:

TypeScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
index.ts

JavaScript

// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };

index.js

Funkcja stylizowania cech

Użyj funkcji stylizowania cech, aby zdefiniować logikę stylizowania cech zbioru danych. Aby nadać styl funkcji, ustaw właściwość style na google.maps.FeatureStyleFunction. W funkcji stylu definiujesz logikę stylizacji poszczególnych cech na warstwie cech. Gdy ustawiona jest opcja featureLayer.style, funkcja stylu jest wykonywana na każdej funkcji w dotyczącym ją zbiorze danych. Funkcja jest stosowana w momencie ustawienia właściwości stylu. Aby zaktualizować styl, musisz ponownie ustawić jego właściwość. Ten przykład pokazuje prostą funkcję stylu funkcji:

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;
}
index.ts

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;
}

index.js

Funkcja style powinna zawsze zwracać spójne wyniki, gdy jest stosowana w różnych funkcjach. Jeśli na przykład chcesz losowo zabarwić zestaw funkcji, funkcja losowania nie powinna być uwzględniona w funkcji stylu funkcji, ponieważ spowodowałoby to niezamierzone wyniki. Ta funkcja działa na wszystkich funkcjach w danym poziomie, dlatego optymalizacja jest ważna. Aby uniknąć wpływu na czas renderowania, gdy warstwa nie jest już używana, ustaw styl na null.

Przykład stylizacji danych punktowych

Ten przykład pokazuje stylowanie funkcji danych na podstawie geometrii punktu.

Informacje o zbiorze danych

Zbiór danych użyty w tym przykładzie powstał w ramach spisu wiewiórek z 2018 roku w Central Parku w Nowym Jorku. W tym fragmencie pliku danych CSV widać, że kolumny x i y służą do zapisywania danych geograficznych. Kolumna LatLng jest uwzględniona, ale nie jest używana w tym przykładzie, ponieważ pozycja geograficzna musi być reprezentowana przez 2 kolumny. Zbiór danych ze spisu wiewiórek zawiera wiele różnych punktów danych dotyczących zaobserwowanego koloru futra i zachowania wiewiórek (przewiń poziomo, aby zobaczyć wszystkie dane).

X T UniqueSquirrelID Hectare Shift Data Hektary SquirrelNumber Wiek PrimaryFurColor HighlightFurColor CombinationofPrimaryandHighlightColor Colornotes Lokalizacja Pomiar AboveGroundSighter SpecificLocation Uruchomiono Chasing Wspinaczka Jedzenie Foraging Inne aktywności Kuks Quaas Moans Flagi ogonów Tailtwitches Podejścia Obojętna Runsfrom OtherInteractions LatLng
-73.9561344937861 40.7940823884086 37F-PM-1014-03 37 F PM 10142018 3 + fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz POINT (-73.9561344937861 40.7940823884086)
-73.9688574691102 40.7837825208444 21B-AM-1019-04 21 B AM 10192018 4 + fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz POINT (-73.9688574691102 40.7837825208444)
-73.9742811484852 40.775533619083 11B-PM-1014-08 11B PM 10142018 8 Szary Szary+ Naziemny 10 fałsz prawda fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz POINT (-73.97428114848522 40.775533619083)
-73.9596413903948 40.7903128889029 32E-PM-1017-14 32E PM 10172018 14 Dorosły Szary Szary+ Nic nie zostało wybrane jako główne. Szary jako wyróżnienia. Wprowadziliśmy korekty wykonawcze. fałsz fałsz fałsz prawda prawda fałsz fałsz fałsz fałsz fałsz fałsz fałsz prawda POINT (-73.9596413903948 40.7903128889029)
-73.9702676472613 40.7762126854894 13E-AM-1017-05 13E AM 10172018 5 Dorosły Szary Cynamon Szary + Cytrynowy Naziemny na pniu drzewa fałsz fałsz fałsz fałsz prawda fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz POINT (-73.9702676472613 40.7762126854894)
-73.9683613516225 40.7725908847499 11H-AM-1010-03 11H AM 10102018 3 Dorosły Cynamon Biały Cynamon + biały fałsz fałsz fałsz fałsz prawda fałsz fałsz fałsz fałsz prawda fałsz prawda fałsz POINT (-73.9683613516225 40.7725908847499)
-73.9541201789795 40.7931811701082 36H-AM-1010-02 36 godz. AM 10102018 2 Dorosły Szary Szary+ tylko poza hektarem Ground Plane FAŁSZ fałsz fałsz fałsz fałsz prawda fałsz fałsz fałsz fałsz fałsz fałsz fałsz fałsz POINT (-73.9541201789795 40.7931811701082)

Funkcje danych punktów stylu

Kod w tym przykładzie stosuje proste podejście polegające na nadaniu koloru wypełnienia i koloru obrysu każdemu punktowi na podstawie atrybutu CombinationofPrimaryandHighlightColor, który łączy kolory futra podstawowego i dodatkowego każdej wiewiórki.

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; 
    }
}
index.ts

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;
  }
}

index.js

Pełny przykładowy kod

Pełny przykładowy kod źródłowy

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();
index.ts

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();
index.js

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;
}

style.css

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>
index.html

Wypróbuj próbkę

Przykład stylizacji danych wielokąta

Ten przykład pokazuje podejście do nadawania stylu cechom danych na podstawie geometrii wielokąta.

Informacje o zbiorze danych

Zbiór danych użyty w tym przykładzie przedstawia parki w Nowym Jorku. Ten fragment pliku GeoJSON zbioru danych przedstawia reprezentatywny wpis funkcji.

{
  "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
          ]
        ]
      ]
    ]
  }
},

Nadawanie stylu elementom danych wielokąta

Kod w tym przykładzie stosuje specjalne kolory do funkcji danych powiązanych z wartością typecategory „Nierozwinięty” lub „Droga”, a wszystkie inne funkcje są koloru zielonego.

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;
    }
}
index.ts

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;
  }
}

index.js

Pełny przykładowy kod

Pełny przykładowy kod źródłowy

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();
index.ts

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();
index.js

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;
}

style.css

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>
index.html

Wypróbuj próbkę

Przykład stylizacji danych wielokąta

Ten przykład pokazuje podejście do stylizacji elementów danych na podstawie geometrii polilinii.

Informacje o zbiorze danych

Zbiór danych użyty w tym przykładzie zawiera informacje o mostach w pobliżu Seattle. Ten fragment pliku GeoJSON zbioru danych przedstawia reprezentatywny wpis funkcji.

{
  "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
          ]
      ]
  }
},

Zmienianie stylu elementów danych linii złożonych

Poniższy fragment kodu stosuje ten sam styl bezpośrednio do wszystkich funkcji danych. Ponieważ nie jest wymagana żadna logika, w tym przypadku nie jest używana funkcja stylizowania funkcji.

TypeScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
index.ts

JavaScript

// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };

index.js

Pełny przykładowy kod źródłowy

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();
index.ts

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();
index.js

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;
}

style.css

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>
index.html

Wypróbuj próbkę