KML識讀與網站架設

出自六年制學程
跳轉到: 導覽搜尋

全班分成8個產出網站

  • 7組按歐洲7修路線,恩佑規畫台灣台東
  • 分工到每一位同學。
  • 以十二點鐘方向開始,順時鐘排序、劉國安第7、劉恩佑第八
  • 下週三上架設課,上下午分開上

KML識讀

取得圖資

  • Document 包全部
  • Placemark 包一個物件
    1. name
    2. styleUrl 包一個#id,此id指向另一個StyleMap標籤,此StyleMap又指向兩個同級的style標籤,這兩個style分別指示normal和highlight的情況下,真正的樣式指示,其中會包含LineStyle、PolyStyle、BalloonStyle、LabelStyle、IconStyle。分述如下:
      • LineStyle
        1. color指示色碼
        2. width粗細
      • PolyStyle
        1. color指示色碼
        2. fill不透明度
        3. outline
      • BalloonStyle
        1. 通常為 <text><![CDATA[<h3>$[name]</h3>]]></text>
      • LabelStyle
        1. scale為0或1
      • IconStyle
        1. scale放1
        2. Icon內放href
          • href內放圖照位置
    3. description
    4. 可以含 cdata(Character Data) 段落,表明其中沒有標籤,不可對其內部進行 XML 解析
    5. ExtendedData:外掛數據
      • 每組 data 都有 name 屬性及 value 標籤
    6. Polygon
      • coordinates 中標示各點:經度,緯度,高度
    7. Point
      • coordinates 中標示各點:經度,緯度,高度
    8. LineString
      • coordinates 中標示各點:經度,緯度,高度
    9. MultiGeometry,其中再包點、線、面
  • 色碼的表示法:共八碼,每兩碼一小節共四小節分別表示不透明,藍,綠,紅。
    1. 都用十六進位表示
    2. 一般我們是以R-B-G(或R-G-B)這樣的順序表示的,而在KML裡面卻是以B-G-R的順序表示的。
    3. colorMode標籤:其值有normal(正常)和 random。random 對基本 <color> 應用隨機線性縮放:
      • 指定單個顏色成分(如,值 ff0000ff 表示「紅色」),會選擇該色(紅色)的隨機顏色值,值範圍從 00(黑色)到 ff(全紅)。
      • 指定兩種或三種顏色成分,會對每種顏色成分應用隨機線性縮放,所得結果的範圍從黑色到為每種成分指定的最大值。
      • 要隨機變色,請將基本 <color> 指定為白色 (00ffffff)。
      • 不透明度跟隨 <color> 的不透明,不能隨機選擇。

參考資料

補完每位同學的國家介紹 wiki 頁

  • 建立正確的分類:歐洲國家,操作正確就會出現在「歐洲國家」分類頁中
  • 自己查資料,不要抄同學。
  • 自主命題時,每位同學至少德國、法國、瑞士各一題。
  • 本課程學分,wiki頁作業、月考、產出網站都要算分。成績及格才給學分。

在網站中嵌入地圖

一、製備地圖

  1. 將個人路線分成 3~6 段落,每個段落一張地圖。
  2. 經過國家著色。
  3. 全部路線一條長線。線條細,顏色淡。
  4. 每段落的路線另一條線。線條稍粗,顏色略深。
  5. 每個段落,將其中經過的住宿點與遊歷的景點,標示出來,並選用適當的圖示與顏色。
  6. 對每個點,取適當的名稱。
  7. 依需要,對若干點加入多張圖照。
  8. 依需要,對若干點加入「多行」說明。

二、嵌入地圖到網站

  1. 新增一個「表內頁」,路徑為「/~○○○/2019AL/index.php/☆☆☆☆☆」。
  2. 內容為:
<iframe src='https://www.google.com.tw/maps/d/embed?mid=圖碼&hl=zh-tw&z=12&ll=緯度,經度' width='寬' height='高'></iframe>

說明:

  1. 「?」之前為網址,之後為參數。
  2. 兩組參數之間用「&」隔開
  3. 一組參數中,「=」前為參數名,「=」後為參數值。
  4. mid:圖的識別碼
  5. z:zoom,縮放比例
  6. hl:host language ,伺服器語言
  7. ll:緯度,經度

三、調整 banner 中的字體

用 FTP 進網站後台,改 theme.php :

找到 <div id='xo-banner'> ,改其下的

<img … src='/drawword.php … />

  1. 勘流亭:word=全班行動學習&fontsize=46&color=1251C6&fonttype=wt034.ttf&H=60&y=7
  2. 中行書:word=全班行動學習&fontsize=46&color=1251C6&fonttype=wt071.ttf&y=6
  3. 鋼筆行楷:word=全班行動學習&fontsize=46&color=1251C6&fonttype=wthc06.ttf&y=6
  4. 粗鋼體:word=全班行動學習&fontsize=46&color=1251C6&fonttype=WCL-07.ttf&y=6
  5. 特圓:word=全班行動學習&fontsize=46&color=1251C6&fonttype=wt009.ttf&H=60&y=6