DrawOrder की मदद से LineString के लिए कॉम्प्लेक्स स्टाइलिंग

जोश लिव्नी, Google Geo APIs टीम
दिसंबर, 2010

मकसद

इस ट्यूटोरियल में, Google Earth 6.0 में जोड़े गए कुछ नए KML एलिमेंट के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि इनका इस्तेमाल करके, अपनी LineStyles के लिए जटिल कार्टोग्राफ़ी कैसे बनाई जा सकती है. आपको <gx:physicalWidth>, <gx:outerColor>, <gx:outerWidth>, और <gx:drawOrder> के बारे में जानकारी मिलेगी.

परिचय

Google Earth 6.0 के रिलीज़ होने से पहले, LineString के लिए जटिल कार्टोग्राफ़िक स्टाइल तय करने की सुविधा सीमित थी. उदाहरण के लिए, अगर आपको किसी सड़क के लिए ऐसी स्टाइल बनानी है जिसमें LineString के बीच का रंग किनारों से अलग हो, तो आपको अलग-अलग चौड़ाई वाली दो LineString बनानी होंगी. इसके बाद भी, यह पक्का नहीं किया जा सकता कि वे किस क्रम में दिखेंगी.

यहां सड़क बनाने का तरीका बताया गया है. सबसे पहले, सड़क का स्टाइल सामान्य होगा. इसके बाद, आपको सड़क के किनारे का पैदल रास्ता जोड़ना होगा. आखिर में, आपको हाइवे का ओवरपास जोड़ना होगा.

सामान्य सड़क

इसमें सबसे अहम एलिमेंट <gx:physicalWidth> है. इसकी मदद से, LineString की चौड़ाई को पिक्सल के बजाय मीटर में सेट किया जा सकता है. सड़क के उदाहरण में, इसका मतलब है कि सड़क की चौड़ाई को, नीचे दी गई इमेज से मैच करने के लिए सेट किया जा सकता है. इससे कोई फ़र्क़ नहीं पड़ता कि उपयोगकर्ता सड़क को किस ऊंचाई से देखता है. ऊंचाई बढ़ने पर, सड़क के पिक्सल कम हो जाते हैं. इससे ऐसा इफ़ेक्ट दिखता है कि ज़ूम इन करने पर ही LineString दिखती है. अगर आपको दूर से छोटी सड़कों पर ज़ोर नहीं देना है या आपको यह पक्का करना है कि आपकी कार्टोग्राफ़ी हमेशा सैटलाइट इमेज से मेल खाती हो, तो यह तरीका आपके काम का हो सकता है.

<?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>

Google Earth में कैमरे की ऊंचाई बदलते समय, ध्यान दें कि यह हर समय, नीचे मौजूद इमेज की चौड़ाई से कैसे मेल खाती है.

साइडवॉक जोड़ने की सुविधा

अब <gx:outerColor> और <gx:outerWidth> एलिमेंट जोड़े जा सकते हैं. इसके लिए, सड़क के किनारों पर हल्के हरे रंग का इस्तेमाल करें, ताकि यह पता चल सके कि ये फ़ुटपाथ हैं. सड़क के कुल पिक्सल का 25% हिस्सा हल्के भूरे रंग का सेट करें.

<?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>

सड़क की चौड़ाई 12 मीटर तय की गई थी. इसलिए, outerWidth के लिए .25 की वैल्यू का मतलब है कि सड़क की चौड़ाई का 3 मीटर हिस्सा हल्के हरे रंग का होगा. यह सड़क के दोनों ओर करीब 1.5 मीटर होगा.

हाइवे का ओवरपास

अब आपके पास एक सामान्य सड़क है. अब हाइवे के ऊपर बने पुल को बनाने का समय है. इसे हल्के नारंगी रंग से रंगा जाएगा. साथ ही, इसमें गहरे नारंगी रंग की मीडियन लाइन होगी. यहां मुख्य बात यह है कि <LineSring> में <gx:drawOrder> की वैल्यू 1 (डिफ़ॉल्ट वैल्यू 0 होती है) शामिल करें, ताकि यह पक्का किया जा सके कि हाइवे को सड़क के ऊपर रेंडर किया जाएगा. अगर आपको ज़्यादा मुश्किल हाइवे इंटरचेंज (या कोई भी ऐसी कार्टोग्राफ़ी जिसमें दो से ज़्यादा ओवरलैप होने वाली LineString की ज़रूरत हो) बनानी है, तो आपको बस <gx:drawOrder> के लिए ज़्यादा वैल्यू जोड़नी होगी. ऐसा उस लाइन के लिए करें जिसे आपको सबसे ऊपर रेंडर करना है.

<?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>

आगे क्या करना है?

एक ही LineString को कई रंगों में दिखाने की सुविधा के साथ-साथ रेंडरिंग के क्रम को कंट्रोल करने की सुविधा मिलती है. इससे आपको जटिल लाइन कार्टोग्राफ़ी बनाने में मदद मिलती है. ऐसा पहले मुमकिन नहीं था. चाहे आपको हाइवे पर ओवरपास बनाना हो या कोई ऐब्स्ट्रैक्ट आर्ट प्रोजेक्ट, स्टाइलिंग के इन नियमों का इस्तेमाल करके मज़ेदार चीज़ें बनाएं!