當(dāng)我需要?jiǎng)?chuàng)建圖表時(shí)，我的首選是Google圖表或另一個(gè)專(zhuān)用庫(kù)。但是，有時(shí)候，我需要一些我在那里找不到的特定功能。在這些情況下，SVG圖像被證明非常有價(jià)值。
最近，我必須構(gòu)建一個(gè)報(bào)告頁(yè)面，該頁(yè)面能夠顯示一張意大利的地圖，其中每個(gè)區(qū)域根據(jù)從數(shù)據(jù)庫(kù)中檢索的某些值具有不同的顏色音調(diào)。多虧了SVG，這項(xiàng)任務(wù)非常容易。
>
鑰匙要點(diǎn)
根據(jù)從數(shù)據(jù)庫(kù)中檢索到的數(shù)據(jù)，可以使用
SVG圖像來(lái)創(chuàng)建每個(gè)區(qū)域的動(dòng)態(tài)地理圖。這是通過(guò)將每個(gè)區(qū)域繪制為具有唯一級(jí)別名稱(chēng)的單個(gè)對(duì)象來(lái)實(shí)現(xiàn)的，該對(duì)象與數(shù)據(jù)庫(kù)中使用的代碼識(shí)別其數(shù)據(jù)。
>可以使地圖與CSS和jQuery進(jìn)行交互，從而允許其顯示特定的數(shù)據(jù)，例如人群值，當(dāng)鼠標(biāo)徘徊在區(qū)域上時(shí)。這是通過(guò)添加G：Hover和新的Info_panel類(lèi)的CSS規(guī)則來(lái)實(shí)現(xiàn)的，以樣式的信息框，然后對(duì)上一個(gè)循環(huán)修改，將.data（）添加為存儲(chǔ)將在Hover上顯示的信息。- >
可以使
SVG地圖響應(yīng)響應(yīng)，與其他JavaScript庫(kù)一起使用，用于數(shù)據(jù)可視化，甚至是動(dòng)畫(huà)。它們也可以自定義和優(yōu)化以進(jìn)行性能。但是，創(chuàng)建自定義地圖需要對(duì)SVG和地理數(shù)據(jù)有很好的了解，并且復(fù)雜的動(dòng)畫(huà)會(huì)影響性能。
-
在Illustrator中創(chuàng)建SVG地圖-
首先，我畫(huà)了一張意大利的地圖，上面寫(xiě)著插圖畫(huà)家：
>每個(gè)區(qū)域都被繪制為一個(gè)對(duì)象，并且每個(gè)區(qū)域都有自己的級(jí)別，其名稱(chēng)與數(shù)據(jù)庫(kù)中使用的代碼匹配以識(shí)別其相對(duì)數(shù)據(jù)（例如：托斯卡納的“ TOS”）。
最后，必須將地圖保存為SVG文件。您必須注意將“ CSS屬性”選項(xiàng)設(shè)置為Illustrator中的“樣式元素”，如下所示：
>打開(kāi)剛剛創(chuàng)建的文件，您會(huì)看到它包含一組g標(biāo)簽，其ID與Illustrator級(jí)別的名稱(chēng)匹配。
構(gòu)建我們的html文件
g標(biāo)簽中包含的每個(gè)項(xiàng)目都有一個(gè)ST0類(lèi)，因此可以將中風(fēng)和填充CSS屬性分配給它們：>
如果您嘗試更改這些值，則地圖將立即更改：>
現(xiàn)在，我們可以使用該代碼使用Inline SVG構(gòu)建HTML文件，如下所示（為方便起見(jiàn)，縮短了代碼）：>
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span> <span><span><span><title</span>></span>Map Sample<span><span></title</span>></span>
</span> <span><span><span><style</span> type<span>="text/css"</span> media<span>="all"</span>></span><span>
</span></span><span><span> <span><span>.map svg</span> {
</span></span></span><span><span> <span>height: auto;
</span></span></span><span><span> <span>width: 350px;
</span></span></span><span><span> <span>}
</span></span></span><span><span> <span><span>.map g</span> {
</span></span></span><span><span> <span>fill: #ccc;
</span></span></span><span><span> <span>stroke: #333;
</span></span></span><span><span> <span>stroke-width: 1;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span> <span><span><span><div</span> class<span>="map"</span>></span>
</span> <span><span><span><svg</span> version<span>="1.1"</span> id<span>="Livello_1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span> <span>xmlns:xlink</span><span>="https://www.w3.org/1999/xlink"</span> x<span>="0px"</span> y<span>="0px"</span> viewBox<span>="0 -21.6 761 919"</span> <span>style<span>="<span>enable-background:new 0 -21.6 761 919;</span>"</span></span> <span>xml:space</span><span>="preserve"</span>></span>
</span> <span><span><span><g</span> id<span>="sar"</span>></span>
</span> <span><span><span><polygon</span> class<span>="st0"</span> points<span>="193,463 ... "</span>/></span>
</span> <span><span><span></g</span>></span>
</span>
<span><!-- etc ... -->
</span>
<span><span><span></svg</span>></span>
</span> <span><span><span></div</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
>您可以看到SVG標(biāo)簽內(nèi)部的樣式屬性已被刪除，并用位于文檔頭部?jī)?nèi)部的新樣式替換。所有G元素最初都充滿(mǎn)了淺灰色。
>不再使用ST0類(lèi)（您可以從SVG代碼中刪除它），并且已被.map G Selector替換。無(wú)論如何，這不是強(qiáng)制性的，您可以使用您喜歡的CSS選擇器。
第二步包括將我們的地圖與從數(shù)據(jù)庫(kù)中檢索的一些數(shù)據(jù)結(jié)合。在此示例中，我們的目標(biāo)是根據(jù)每個(gè)地區(qū)的人口繪制地圖。
添加JSON數(shù)據(jù)和JavaScript
>數(shù)據(jù)以JSON格式檢索，并直接粘貼在我們的HTML文件中（當(dāng)然，在現(xiàn)實(shí)世界中，將使用AJAX或類(lèi)似的數(shù)據(jù)檢索數(shù)據(jù)）。
>
現(xiàn)在，我們的頁(yè)面將在我們的JavaScript文件中包含JSON，該文件看起來(lái)像這樣（再次，縮寫(xiě)）：
在那之后，選擇了一種顏色（在這種情況下為＃0b68AA），然后將其分配給人口最高價(jià)值的區(qū)域。其他區(qū)域?qū)⒁灾饕伾纳{(diào)與人口百分比成比例。
接下來(lái)，我們可以添加一些JavaScript。
首先，我們必須確定最大種群價(jià)值的區(qū)域。這可以使用幾行代碼來(lái)完成。
>
<span>var regions=[
</span> <span>{
</span> <span>"region_name": "Lombardia",
</span> <span>"region_code": "lom",
</span> <span>"population": 9794525
</span> <span>},
</span> <span>{
</span> <span>"region_name": "Campania",
</span> <span>"region_code": "cam",
</span> <span>"population": 5769750
</span> <span>},
</span>
<span>// etc ...
</span>
<span>];</span>>一旦構(gòu)建了包含總體值的臨時(shí)數(shù)組，我們就可以使用Math.max方法：>
然后，我們可以根據(jù)計(jì)算
>人口 /最大值（在jQuery的一點(diǎn)幫助下），將透明度的百分比應(yīng)用于它們：>
這是結(jié)果：
<span>var temp_array= regions.map( function( item ) {
</span> <span>return item.population;
</span><span>});
</span>
<span>var highest_value = Math.max.apply( Math, temp_array );</span>
添加與CSS和JQuery 的交互性
可以通過(guò)一些交互性來(lái)改進(jìn)地圖。我們希望它在鼠標(biāo)位于區(qū)域上放置時(shí)顯示人口價(jià)值。
>
<span>$(function() {
</span> <span>for(i=0; i < regions.length; i++) {
</span> <span>$('#'+ regions[i].region_code).css({'fill': 'rgba(11, 104, 170,'
</span> <span>+ regions[i].population/highest_value
</span> <span>+ ')'});
</span> <span>}
</span><span>});</span>首先，我們?yōu)镚：Hover和一個(gè)新的Info_panel類(lèi)添加了CSS規(guī)則，以設(shè)計(jì)我們的信息框：
上的信息
>最后，我們可以通過(guò)添加一些鼠標(biāo)效果來(lái)完成腳本：>
它的工作原理：
- 首先，使用鼠標(biāo)，我們構(gòu)建了一個(gè)DIV，其中包含要顯示的信息（區(qū)域名稱(chēng)和人口）。每當(dāng)鼠標(biāo)懸停在G元素上并將其附加到文檔主體時(shí)，DIV是構(gòu)建的；
當(dāng)光標(biāo)在盤(pán)旋區(qū)域外時(shí)， mouseleave刪除了div；
最后的方法，莫斯莫夫，檢索鼠標(biāo)坐標(biāo)并將其分配給生成的divs。
-
這是codepen的最終結(jié)果：-
請(qǐng)參閱codepen上的sitepoint（@sitepoint）的筆kdhfh。
在帶有SVG和jQuery
的動(dòng)態(tài)地理地圖上的常見(jiàn)問(wèn)題（常見(jiàn)問(wèn)題解答）
>如何使我的SVG映射響應(yīng)？
使您的SVG映射響應(yīng)能力涉及將SVG的寬度和高度設(shè)置為100％，并確保正確設(shè)置了ViewBox屬性。 ViewBox屬性允許您指定地圖的某個(gè)區(qū)域可見(jiàn)，并且在縮放或向下擴(kuò)展時(shí)將保留縱橫比。您還可以使用媒體查詢(xún)根據(jù)屏幕大小來(lái)調(diào)整地圖的大小和位置。
我可以與其他JavaScript庫(kù)一起使用SVG地圖，除了jQuery？
??是的，SVG地圖可以與其他JavaScript庫(kù)一起使用，例如D3.JS，Raphael和Snap.svg。這些庫(kù)為創(chuàng)建和操縱SVG圖形提供了其他功能。但是，實(shí)現(xiàn)可能與jQuery不同，因此您需要參考各自的庫(kù)的文檔。
>>如何將交互性添加到我的svg地圖？
>您可以將交互性添加到您的使用JavaScript或jQuery的SVG地圖。這可以包括工具提示，縮放，平移和可點(diǎn)擊區(qū)域之類(lèi)的功能。例如，您可以使用'MouseOver'和'MeorsOut'事件顯示工具提示，以及“單擊”事件以使區(qū)域可單擊。>
>如何使用SVG映射進(jìn)行數(shù)據(jù)可視化？ ??> SVG地圖可用于通過(guò)基于數(shù)據(jù)值的著色區(qū)域來(lái)可視化數(shù)據(jù)，這是一種稱(chēng)為Choropleth映射的技術(shù)。您可以使用JavaScript將數(shù)據(jù)綁定到您的SVG元素并應(yīng)用顏色尺度。諸如d3.js之類(lèi)的庫(kù)提供了用于創(chuàng)建唱片映射的內(nèi)置功能。>>如何創(chuàng)建自定義SVG映射？
>創(chuàng)建自定義SVG地圖涉及使用諸如vector圖形軟件繪制映射Adobe Illustrator或Inkscape，然后將其導(dǎo)出為SVG文件。然后，您可以使用JavaScript或jQuery來(lái)操縱SVG元素并添加交互性。請(qǐng)記住，創(chuàng)建自定義地圖需要很好地了解SVG和地理數(shù)據(jù)。>為什么我的SVG地圖區(qū)域無(wú)法正確顯示？
如果您的SVG地圖區(qū)域未正確顯示，則可能是由于幾個(gè)原因。 SVG文件可能無(wú)法正確格式化，或者在JavaScript代碼中可能會(huì)出現(xiàn)錯(cuò)誤。檢查控制臺(tái)中是否有任何錯(cuò)誤消息，并確保您的SVG文件有效。我可以在所有瀏覽器中使用SVG地圖嗎？
野生動(dòng)物園和邊緣。但是，舊版本的Internet Explorer（IE8及以下）不支持SVG。如果您需要支持這些瀏覽器，則可以使用諸如Rapha?l之類(lèi)的多填充或?qū)VG轉(zhuǎn)換為其他格式。性能地圖可能涉及幾種技術(shù)。其中包括最大程度地減少SVG文件的大小，使用CSS進(jìn)行樣式而不是內(nèi)聯(lián)屬性以及有效地使用JavaScript。您還可以使用SVGO之類(lèi)的工具來(lái)優(yōu)化SVG文件。
如何使我的SVG映射動(dòng)畫(huà)？
>您可以使用CSS動(dòng)畫(huà)或JavaScript對(duì)SVG映射進(jìn)行動(dòng)畫(huà)動(dòng)畫(huà)。這可以包括對(duì)SVG元素的顏色，形狀和位置進(jìn)行動(dòng)畫(huà)動(dòng)畫(huà)。請(qǐng)記住，復(fù)雜的動(dòng)畫(huà)會(huì)影響性能，因此很少使用。 SVG在A(yíng)ndroid和iOS Web視圖中都得到了支持，并且可以使用Cordova或React Native等框架中使用。但是，請(qǐng)記住，在舊設(shè)備或復(fù)雜地圖上性能可能是一個(gè)問(wèn)題。
>以上是與SVG和JQuery的動(dòng)態(tài)地理地圖的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！