如何用動態地圖最好地包含微數據和SVG？

任務：製作帶有SVG的動態和樣式的地鐵地圖，例如北京地圖http://upload.wikimedia.org/wikipedia/commons/c/c5/Beijing-Subway-Plan_en.svg 如何用動態地圖最好地包含微數據和SVG？

目標：使用標準格式和小型的腳本庫和樣式表來製作公共領域的地鐵（或類似）地圖集合，方便未來的開發人員適應自己的使用。

挑戰：根據HTML風格的微數據製作類似的地圖增強型，動畫型和可調型。這些數據包括但不限於時間和地理數據。例如。車站開幕日期，每個車站的經緯度，車站之間的旅行時間等等。這些微數據將用於動畫，造型和未來的使用。

一個例子動畫會是這樣，使用SVG動畫：http://upload.wikimedia.org/wikipedia/commons/d/d0/History_of_Beijing_Subway_en.gif

什麼是連接這些微觀數據的開發者最友好的方式？

（更多背景突出，對於那些有興趣：http://www.skyscrapercity.com/showthread.php?t=1609787）

來源

2013-09-23 Jonny Axelsson

關於HTML5微數據，請參閱https://bugzilla.mozilla.org/show_bug.cgi?id=909633。 –

謝謝，我忘了一個隱含的要求，動態地圖將不得不與合理的現代瀏覽器，那些明顯支持SVG的瀏覽器一起工作。 HTML微數據不會出於這個原因，並且出於HTML和SVG。微數據是對微格式的WHATWG響應，微格式可能是解決這個問題的一種可能的解決方案。以下是關於地理數據的頁面：http://microformats.org/wiki/location-formats通常，HTML微格式使用'div'，'span'和'class'來對語義數據進行編碼，SVG具有類似的元素，如'g'濫用。 –

不幸的是，微數據屬性只對HTML元素定義，這意味着它們將不會在SVG被處理。我建議看的RDFa其目的是在多種格式，如HTML，XML和SVG工作：

來源

2013-09-23 16:36:29 scor

挑戰在於我們不僅需要對語義數據進行編碼，這個地鐵站位於這個經緯度，還是在這個日期開放。這些數據將用於動態目的，例如，地理定位可以「拉伸」到他們的實際位置或開放日期，以動態顯示網絡的時間發展。其中一些功能我們會做，其他地圖用戶可能會自己做。換句話說，要走RDFa路徑，必須有一個高效且易於使用的JavaScript API。我不知道是否有，但可以詢問RDFa社區。 –

我添加了這個問題http://stackoverflow.com/questions/19001054/javascript-api-for-animating-svg-using-rdfa-metadata –

最正確的，標準的方法是使用SVG <metadata>標籤。

http://www.w3.org/TR/SVG/metadata.html

該元數據應在RDF格式。您只需使用已存在的適當RDF模式，或創建適合您使用的自己的模式。

來源

2013-09-24 00:20:04

這將允許我們將語義信息附加到SVG元素（例如，這個站/ 'circle'在這個日期被打開了），但它本身並不能解決更大的問題：如何再次提取這些信息（例如，對於給定站，它的開幕日期是什麼）並應用它（例如，在開場白中做動畫的時間）。我問了一個額外的問題，希望它會給這個方法一些答案：http://stackoverflow.com/questions/19001054/javascript-api-for-animating-svg-using-rdfa-metadata –

這是另一種解決這個問題的方法，受到HTML微格式的啓發（將信息嵌入額外的HTML元素，通常是'div'和'span'）。主要使用'g'元素可以在SVG中實現類似的功能。

相對於RDFa它會有一些缺點。例如，在地圖製作社區之外，人們不會說特定的信息會成爲開幕日期。這意味着需要一些額外的SVG標記來嵌入這些信息。另一方面，這是一個更直接和可讀的方法。但是，它將如何應對挑戰並實現目標？

今天的地圖標記（after being cleaned up）可能是這個樣子的站（北京站在這種情況下）：

<circle id="circle452" cx="1512.523" cy="1300.289" r="5.625" class="station"/> 
<text dx="1522.5999" dy="1321.2517" xml:lang="en" class="station-name">Beijing Railway Station</text> 
<text dx="1522.9651" dy="1306.156" xml:lang="zh" class="station-name">北京站</text>

這三個站的部件上面實際上並沒有在任何方面，除了通過視覺接近。一個微格式化的地鐵站表示的首次嘗試可能是這樣的：

<g class="station"> 
    <metadata> 
     <desc class="opening-date">1971-11-7</desc> 
     <desc class="coordinates">116.41735553741455,39.90104520501837,0.0</desc> 
    </metadata> 
    <circle id="circle452" cx="1512.523" cy="1300.289" r="5.625" class="icon"/> 
    <text dx="1522.5999" dy="1321.2517" xml:lang="en" class="name">Beijing Railway Station</text> 
    <text dx="1522.9651" dy="1306.156" xml:lang="zh" class="name">北京站</text> 
</g>

這有一些相對於第一種方法爲相關元素（站符號，中英文和簡體中國名字）的優點是現在結構上與元數據相關。

對於第一次嘗試，我使用'元數據'元素和'desc'元素。這可能是也可能不是一個好的選擇。 '元數據'應該沒問題，但'desc'元素是針對人類觀衆的，而不是Javascript。無論使用SVG渲染器還是其他SVG處理器（例如SVG屏幕閱讀器），都無需找到無副作用的元素。我還不知道'desc'是否填滿了賬單。

此外，這會處理挑戰並實現目標嗎？換句話說，提取和應用這些動畫數據很容易嗎？

（結構我會承擔RDFa的解決方案看起來類似的東西，只用RDF在「說明」元素現在。）

來源

2013-09-25 12:46:53

我會推薦兩種方法之一。

兩者都涉及在HTML5中具有圖例或類似的SVG地圖引用。然後使用Microdata作爲圖例。確保通過引用頁面中的SVG：

使用在SVG id屬性，以便HTML微數據可以在使用itemprop屬性的URL片段的鏈接，#svgobject1
不太可能使用，但有趣的是允許可能的是在HTML圖例中使用itemref屬性。因爲它很混亂，我會避免這種情況。

除上述之外，另一種方法是使用itemid屬性。如果可能的話，我會爲任何Microdata項目推薦此選項。確定SVG圖例是否是項目的原始真實集合。如果是這樣，那麼包括在每個的itemscope的HTML標籤的ID屬性，然後添加的itemid與片段的URL存在本身（例如：

<div id="itemid" itemscope="" itemid="http://maps.cn/beijing.html#itemid">

）

或者創建或引用其他網頁（ s）你的或其他人的，最好是Microdata項目和一個體面的itemtype參考。

來源

2014-07-23 14:59:16 user3645993

如何用動態地圖最好地包含微數據和SVG？

回答

相關問題