GeoJsonの機能

Wijmaps では、リモート GeoJson ファイルを使用して、地図上にシェイプを追加できます。この機能を使用すると、ローカルファイルからデータをインポートしたり、外部ドメインからデータをロードしたりできます。

GeoJson 機能を使用すると、住所や場所を追加するためのポイント、道路や境界線を表すためのラインストリング、各国や各地域の政治的な区分を示すためのポリゴン、これらのタイプのマルチパートコレクションを含めることができます。

たとえば、次のスクリプトはローカルの GeoJson 形式ファイルを使用して、地図を表示します。

Google Chrome ブラウザでは、ローカル Json ファイルのロードはサポートされません。

ライブウィジェット
スクリプト

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijmaps"], function () { $(document).ready(function () { $("#maps").wijmaps({ center: { x: 0, y: 0 }, zoom: 1, targetZoom: 1, layers: [{ type: "vector", dataType: "geoJson", data: "../Resources/countries.geo.json", placemark: { labelVisibility: "hidden" } }, { type: "vector", dataType: "geoJson", data: "../Resources/us.geo.json", placemark: { labelVisibility: "hidden" }, shapeCreated: function (e, d) { d.shape.attr("fill", "#00F").attr("fill-opacity", 0.2); } }] }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {
            $("#maps").wijmaps({
                center: { x: 0, y: 0 },
                zoom: 1,
                targetZoom: 1,
                layers: [{
                    type: "vector",
                    dataType: "geoJson",
                    data: "../Resources/countries.geo.json",
                    placemark: {
                        labelVisibility: "hidden"
                    }
                },
                        {
                            type: "vector",
                            dataType: "geoJson",
                            data: "../Resources/us.geo.json",
                            placemark: {
                                labelVisibility: "hidden"
                            },
                            shapeCreated: function 
                               (e, d) {
                                d.shape.attr("fill", "#00F").attr("fill-opacity", 0.2);
                            }

                        }]
            });

        });
    });
    </script>