SVGとjQueryを使用した動的ジオマップ-jsチュートリアル-php.cn

次に、そのコードを使用して、以下に示すようにインラインSVGを使用してHTMLファイルをビルドできます（便利なため、コードは短縮されています）：

今、私たちのページには、このように見えるJavaScriptファイルにJSONが含まれます（繰り返しますが、略されました）：

CSSアニメーションまたはJavaScriptを使用してSVGマップをアニメーション化できます。これには、SVG要素の色、形、位置のアニメーションが含まれます。複雑なアニメーションはパフォーマンスに影響を与える可能性があるため、モバイルアプリケーションでSVGマップを使用できますか？ SVGは、AndroidとiOSの両方のWebビューでサポートされており、CordovaやReact Nativeなどのフレームワークを使用してハイブリッドモバイルアプリで使用できます。ただし、パフォーマンスは古いデバイスまたは複雑なマップで問題になる可能性があることに留意してください。

ホームページ

ウェブフロントエンド

jsチュートリアル

SVGとjQueryを使用した動的ジオマップ

尊渡假赌尊渡假赌尊渡假赌

Feb 21, 2025 pm 12:13 PM

SVGとjQueryを使用した動的ジオマップ

チャートを作成する必要がある場合、私の最初の選択肢はGoogleチャートまたは別の専用ライブラリです。しかし、時々、そこには見つからないいくつかの具体的な機能が必要です。これらの場合、SVG画像は非常に貴重であることが証明されています。

最近、データベースから取得したいくつかの値に応じて各地域の色調が異なるイタリアの地図を表示できるレポートページを作成する必要がありました。 SVGのおかげで、このタスクは非常に簡単でした

キーテイクアウト

SVG画像を使用して、データベースから取得したデータに基づいて、各領域の異なる色の色調を備えた動的ジオマップを作成できます。これは、データベースで使用されているコードに一致する一意のレベル名を持つ単一のオブジェクトとして、データを識別する単一のオブジェクトとして描画することによって達成されます。

マップをCSSやjQueryとインタラクティブにすることができ、マウスが領域を覆うときに人口価値などの特定のデータを表示できるようにします。これは、g：hoverと新しいinfo_panelクラスのCSSルールを追加して情報ボックスをスタイルすることで達成され、以前のサイクルを変更し、.data（）を追加して、Hoverに表示される情報を保存します。

すべての領域は単一のオブジェクトとして描画されており、それぞれに独自のレベルがあり、データベースで使用されるコードと一致する名前が相対データ（たとえば、Tuscanyの「TOS」）を識別します。

最後に、マップをSVGファイルとして保存する必要があります。以下に示すように、イラストレーターの「スタイル要素」に「CSSプロパティ」オプションを設定するように注意する必要があります。

SVGとjQueryを使用した動的ジオマップ

作成されたばかりのファイルを開くと、IDがイラストレーターレベルの名前と一致するGタグのセットが含まれています。

htmlファイルの構築

Gタグに含まれる各アイテムにはST0クラスがあり、ストロークと充填CSSプロパティをそれらに割り当てることができます。

SVGとjQueryを使用した動的ジオマップこれらの値を変更しようとすると、マップはすぐに変更されます。

次に、そのコードを使用して、以下に示すようにインラインSVGを使用してHTMLファイルをビルドできます（便利なため、コードは短縮されています）：

<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タグ内のスタイル属性が消去され、ドキュメントヘッド内にある新しいものに置き換えられていることがわかります。すべてのG要素は最初は明るい灰色で満たされていました。

ST0クラスは使用されなくなり（SVGコードから削除できます）、.map Gセレクターに置き換えられました。とにかく、これは必須ではありません。好みのCSSセレクターを使用できます。

2番目のステップは、マップをデータベースから取得したデータにバインドすることで構成されています。この例では、私たちの目標は、各地域の人口に従ってマップをペイントすることです。 JSONデータとJavaScriptの追加

データはJSON形式で取得され、HTMLファイル内に直接貼り付けられます（もちろん、現実の世界では、データはAJAXなどを使用して取得されます）。

今、私たちのページには、このように見えるJavaScriptファイルにJSONが含まれます（繰り返しますが、略されました）：

その後、色が選択され（この場合は＃0B68AA）、人口価値が最も高い地域に割り当てます。他の領域は、人口の割合に比例して主な色のトーンで色付けされます。

次に、JavaScriptを追加できます

まず、人口値が最大の地域を決定する必要があります。これは、コードの数列で実行できます。

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

ログイン後にコピー

母集団値を含む一時的な配列が構築されたら、Math.maxメソッドを使用できます。

その後、すべての地域のアイテムを循環し、計算に従って透明性の割合を適用できます

人口 /最大値

（jQueryの少しの助けを借りて）：

これが結果です：

<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との双方向性の追加

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

ログイン後にコピー

いくつかのインタラクティブ性によってマップを改善することができます。マウスが領域に配置されているときに、人口価値を示したいです。

最初に、g：Hoverと新しいinfo_panelクラスのCSSルールを追加して、情報ボックスをスタイリングします。

.map g：Hoverの重要な修飾子は、塗りつぶしルールの

特異性 SVGとjQueryを使用した動的ジオマップを改善するために必要です。

それから、以前のサイクルを変更する必要があります。.data（）を追加して、ホバーに表示される情報を保存する必要があります。

最後に、マウスオーバーエフェクトを追加することでスクリプトを完成させることができます：

それがどのように機能するか：

最初に、マウスオーバーを使用すると、表示する情報（領域名と母集団）を含むDIVを構築します。 divは、マウスがG要素の上にホバリングするたびに構築され、ドキュメント本体に追加されます;
カーソルがホバリングされた領域の外側にあるときに、mouseleaveはそのdivを削除します;
最後の方法であるMousemoveは、マウス座標を取得し、生成されたdivに割り当てます。

ここにCodepenの最終結果があります：

CodepenのSitePoint（@SitePoint）のペンKDHFHを参照してください SVGとjQueryを使用した動的ジオマップに関するよくある質問（FAQ）

svgマップをアニメーション化するにはどうすればよいですか？

CSSアニメーションまたはJavaScriptを使用してSVGマップをアニメーション化できます。これには、SVG要素の色、形、位置のアニメーションが含まれます。複雑なアニメーションはパフォーマンスに影響を与える可能性があるため、モバイルアプリケーションでSVGマップを使用できますか？ SVGは、AndroidとiOSの両方のWebビューでサポートされており、CordovaやReact Nativeなどのフレームワークを使用してハイブリッドモバイルアプリで使用できます。ただし、パフォーマンスは古いデバイスまたは複雑なマップで問題になる可能性があることに留意してください。

以上がSVGとjQueryを使用した動的ジオマップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1662

CakePHP チュートリアル

1418

Laravel チュートリアル

1311

PHP チュートリアル

1261

C# チュートリアル

1234

Related knowledge

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptエンジン：実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

JavaScript：Web言語の汎用性の調査 Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合） Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合） Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

SVGとjQueryを使用した動的ジオマップ

次に、そのコードを使用して、以下に示すようにインラインSVGを使用してHTMLファイルをビルドできます（便利なため、コードは短縮されています）：

今、私たちのページには、このように見えるJavaScriptファイルにJSONが含まれます（繰り返しますが、略されました）：

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック