Złożone style dla obiektów LineString z atrybutem DrawOrder

Josh Livni, zespół interfejsów API Google Geo
Grudzień 2010 r.

Cel

W tym samouczku poznasz kilka nowych elementów KML wprowadzonych w Google Earth 6.0 oraz dowiesz się, jak ich używać do tworzenia złożonej kartografii dla stylów linii. Poznasz elementy <gx:physicalWidth>, <gx:outerColor>, <gx:outerWidth> i <gx:drawOrder>.

Wprowadzenie

Przed wprowadzeniem Google Earth 6.0 możliwości definiowania złożonych stylów kartograficznych dla obiektów LineString były ograniczone. Jeśli na przykład chcesz utworzyć styl dla drogi, w którym środek LineString ma inny kolor niż krawędzie, musisz narysować 2 osobne obiekty LineString o różnych szerokościach. Nawet wtedy nie możesz zagwarantować kolejności ich rysowania.

Poniższe przykłady pokazują, jak utworzyć drogę. Po pierwsze, droga będzie miała prosty styl. Następnie dodaj chodnik. Na koniec dodaj wiadukt nad autostradą.

Droga podstawowa

Pierwszym interesującym elementem jest <gx:physicalWidth>, który umożliwia ustawienie szerokości obiektu LineString w metrach, a nie w pikselach. W przypadku naszej drogi oznacza to, że możesz ustawić jej szerokość tak, aby pasowała do obrazów bazowych niezależnie od wysokości, z jakiej użytkownik końcowy ogląda drogę. Wraz ze wzrostem wysokości droga zmniejsza się w pikselach, co powoduje, że linię LineString widać tylko po powiększeniu. Może to być przydatne, jeśli nie chcesz z daleka podkreślać małych dróg lub chcesz mieć pewność, że Twoja kartografia zawsze pasuje do zdjęć satelitarnych.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
  <name>Road Styling</name>
  <Style id="street">
    <LineStyle>
      <color>ff235523</color>
      <gx:physicalWidth>12</gx:physicalWidth>
    </LineStyle>
  </Style>
  <Placemark>
    <styleUrl>#street</styleUrl>
    <LineString>
      <coordinates>
      -122.2442883478408,37.4347536724074,0
      -122.2417741446485,37.43594997501623,0
      -122.2414951359056,37.43611878445952,0
      </coordinates>
    </LineString>
  </Placemark>
</Document>
</kml>

Zmieniając wysokość kamery w Google Earth, zwróć uwagę, jak ściśle odpowiada ona szerokości obrazu bazowego.

Dodawanie chodników

Teraz możesz dodać elementy <gx:outerColor> i <gx:outerWidth>, dodając jasną zieleń na krawędziach drogi, aby oznaczyć chodniki. Ustaw 25% całkowitej liczby pikseli drogi na jasnoszary.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
  <name>Road Styling</name>
  <Style id="street_sidewalk">
    <LineStyle>
      <color>ff235523</color>
      <gx:physicalWidth>12</gx:physicalWidth>
      <gx:outerColor>ff55ff55</gx:outerColor>
      <gx:outerWidth>0.25</gx:outerWidth>
    </LineStyle>
  </Style>
  <Placemark>
    <styleUrl>#street_sidewalk</styleUrl>
    <LineString>
      <coordinates>
      -122.2442883478408,37.4347536724074,0
      -122.2417741446485,37.43594997501623,0
      -122.2414951359056,37.43611878445952,0
      </coordinates>
    </LineString>
  </Placemark>
</Document>
</kml>

Szerokość drogi została ustawiona na 12 metrów, więc wartość 0,25 w przypadku parametru outerWidth oznacza, że 3 metry tej szerokości będą miały jaśniejszy odcień zieleni (około 1,5 metra po każdej stronie drogi).

wiadukt nad autostradą,

Masz już podstawową drogę, więc czas zająć się wiaduktem. Będzie on miał jasnopomarańczowy kolor z ciemniejszą pomarańczową linią środkową. Kluczową zmianą jest dodanie wartości <gx:drawOrder> 1 (domyślnie 0) w polu <LineSring>, aby autostrada była renderowana nad drogą. Jeśli tworzysz bardziej złożony węzeł drogowy (lub dowolną mapę, która wymaga więcej niż 2 nakładających się obiektów LineString), możesz po prostu dodać wyższą wartość do parametru <gx:drawOrder> w przypadku obiektu, który ma być renderowany na górze.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
  <name>Road Styling</name>
  <Style id="street_sidewalk">
    <LineStyle>
      <color>ff235523</color>
      <gx:physicalWidth>10</gx:physicalWidth>
      <gx:outerColor>ff55ff55</gx:outerColor>
      <gx:outerWidth>0.25</gx:outerWidth>
    </LineStyle>
  </Style>
  <Style id="highway">
    <LineStyle>
      <color>cc1447ff</color>
      <gx:physicalWidth>20</gx:physicalWidth>
      <gx:outerColor>cc1473ff</gx:outerColor>
      <gx:outerWidth>0.75</gx:outerWidth>
    </LineStyle>
  </Style>
  <Placemark>
    <styleUrl>#street_sidewalk</styleUrl>
    <LineString>
      <coordinates>
     -122.2442883478408,37.4347536724074,0
     -122.2417741446485,37.43594997501623,0
     -122.2414951359056,37.43611878445952,0
      </coordinates>
    </LineString>
  </Placemark>
  <Placemark>
    <styleUrl>#highway</styleUrl>
    <LineString>
    <gx:drawOrder>1</gx:drawOrder>
    <coordinates>
      -122.2442692500139,37.43634904345254,0
      -122.2415928723012,37.43416417520744,0
    </coordinates>
    </LineString>
  </Placemark>
</Document>
</kml>

Co dalej?

Możliwość opisania pojedynczego obiektu LineString za pomocą wielu kolorów w połączeniu z kontrolą kolejności renderowania pozwala tworzyć złożone mapy linii, które wcześniej nie były możliwe. Niezależnie od tego, czy budujesz wiadukt nad autostradą, czy tworzysz abstrakcyjny projekt artystyczny, baw się dobrze, korzystając z tych reguł stylizacji.