Stylowe funkcje danych

Wybierz platformę: Android iOS JavaScript

Zastosuj styl do cech danych, ustawiając właściwość style w warstwie cech zbioru danych na google.maps.FeatureStyleFunction, która może zawierać elementy logiczne stylu, lub google.maps.FeatureStyleOptions, aby ujednolicić styl wszystkich cech 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 uzyskać dostęp do zbioru danych za pomocą programowania i nadawać styl jego elementom. Znajdziesz tu też przykłady stylizacji elementów danych na podstawie geometrii punktowej, wielokątnej i wielokątnoprzekątnej.

Styl oparty na danych w przypadku zbiorów danych renderuje cechy danych na podstawie podanych współrzędnych szerokości i długości geograficznej z pliku danych geoprzestrzennych użytych do utworzenia zbioru danych.

Atrybuty funkcji danych

Wszystkie dane w zbiorze danych są dostępne w ramach funkcji styl cech. Aby uzyskać atrybuty atrybutu danych, najpierw pobierz atrybut zbioru danych, który zawiera wszystkie dane w zbiorze, a potem 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

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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. Poniższy przykład przedstawia opcje stylu cech, które można zastosować bezpośrednio do obiektu za pomocą właściwości style:

TypeScript

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

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

JavaScript

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

Funkcja stylu elementu

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 stylizowania definiujesz logikę stylizowania poszczególnych cech na warstwie cech. Gdy ustawiona jest opcja featureLayer.style, funkcja stylu jest wykonywana na każdej z cech na danej warstwie cech. Funkcja jest stosowana w momencie ustawienia właściwości stylu. Aby zaktualizować styl, musisz ponownie ustawić jego właściwość. Poniższy przykład przedstawia prostą funkcję stylu cech:

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

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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 do funkcji. Jeśli na przykład chcesz losowo pokolorować zbiór obiektów, w funkcji stylu cech nie powinien on mieć miejsca, ponieważ spowodowałoby to niezamierzone zachowanie. 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 stylu danych punktu

Ten przykład pokazuje sposób określania stylu obiektów danych opartych na geometrii punktu.

Informacje o zbiorze danych

Zbiór danych użyty w tym przykładzie jest wynikiem badania wiewiórek przeprowadzonej w 2018 r. 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	Pościg	Wspinaczka	Jedzenie	Foraging	Inne aktywności	Kuks	Quaas	Moans	Flagi ogona	Tailtwitches	Podejścia	Obojętna	Runsfrom	OtherInteractions	LatLng
-73.9561344937861	40.7940823884086	37F-PM-1014-03	37F	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		PUNKT (-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	11 MLD	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. Wprowadzono korekty na poziomie kierowniczym.				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+cynamon		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		PUNKT (-73,9541201789795 40.7931811701082)

Cechy 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

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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

Uzupełnij 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

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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

Uwaga: kod JavaScript jest kompilowany ze skrótu kodu TypeScript.

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ę

JSFiddle.net Google Cloud Shell

Przykład stylizacji danych wielokąta

Ten przykład pokazuje podejście do stylizacji cech danych na podstawie geometrii wielokąta.

Informacje o zbiorze danych

Zbiór danych użyty w tym przykładzie przedstawia parki w Nowym Jorku. Poniższy fragment z pliku GeoJSON zbioru danych zawiera 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 obiektów danych powiązanych z elementem typecategory o wartości „Niezabudowany” lub „Droga parkowa”, a wszystkie pozostałe obiekty mają kolor zielony.

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

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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

Uzupełnij 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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

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

Uwaga: kod JavaScript jest kompilowany ze skrótu kodu TypeScript.

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

Zobacz próbkę

JSFiddle.net Google Cloud Shell

Przykład stylu danych linii łamanej

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 pokazuje mosty na obszarze Seattle. Poniższy fragment z pliku GeoJSON zbioru danych zawiera 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żonej

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

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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

Uwaga: JavaScript jest kompilowany na podstawie fragmentu kodu TypeScript.

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ę

JSFiddle.net Google Cloud Shell