GeoJSONを描画する

実行結果

次の例では、地図上にGeoJSONを描画します。

ソースコードと解説

GeoJSONを描画させるには、ZDC.GeoJSONクラスを利用します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,shape.js,search.js,control.js&enc=EUC" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="geojson-1.0.js" type="text/javascript"></script>
    <title></title>
</head>
<body onload="load();" style="margin: 0">
<div id="ZMap" style="width: 750px; height: 500px; top: 0px; left: 20px; position: absolute;"></div>
<script>
    var map;

    function load() {
        map = new ZDC.Map(
                document.getElementById('ZMap'), {
                    latlon: new ZDC.LatLon(35.626552, 139.74244),
                    zoom: 9,
                    mapType: ZDC.MAPTYPE_HIGHRES_LV18
                }
        );

        /* スケールバーを表示 */
        map.addWidget(new ZDC.ScaleBar());
        /* 通常のコントロールを表示 */
        map.addWidget(new ZDC.Control());

        // httpのgetリクエストでGeoJSONデータを取得する
        $.get('sample.geojson', function (res) {
            // 文字列の場合は(Geo)JSON形式に変換する
            if (typeof res === 'string') {
                res = JSON.parse(res)
            }
            // GeoJSONオブジェクトの生成
            new ZDC.GeoJSON(map, res, {
                polylineOptions: {
                    fillColor: '#ff0000',
                    fillOpacity: 0.4
                }
            });
        });
    }

</script>
</body>
</html>