ホ−ム » 基本サンプル » クリックした地点の市区町村を塗る

クリックした地点の市区町村を塗る

実行結果

次の例ではクリックした地点の市区町村が塗られます。

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to ./apisample/search/draw_area.html

ソースコードと解説

市区町村を塗るには、ZDC.Search.getAddrPolygon()を利用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script src="http://test.api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,search.js,shape.js,geo.js&enc=SJIS&force=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

var map,
    widgets = [];

function loadMap() {

    map = new ZDC.Map(document.getElementById('ZMap'), {
        latlon : new ZDC.LatLon(35.6778614, 139.7703167),
        zoom : 4
    });

    /* 地図をクリックしたときの動作 */
    ZDC.addListener(map, ZDC.MAP_CLICK, getClickLatLon);
};

/* クリックした場所の市区町村範囲を描画する */
function getClickLatLon() {
    var addrcd;
    var geom;
    var latlon = map.getClickLatLon();

    /* 前回描画した領域を消去 */
    refreshPolygon();

    /* 住所コードを取得 */
    ZDC.Search.getAddrByLatLon({
        latlons : new Array(latlon)
    }, function(status, addrobj) {
        if (status.code == '000') {

            /* 取得成功 */
            addrcd = addrobj[0].address.code;

            /* 住所コードを市区町村(5桁)までに変換 */
            addrcd = addrcd.slice(0, 5);

            /* 住所コードから住所ポリゴンを取得 meshlvlとaddrlvl固定 */
            ZDC.Search.getAddrPolygon({
                addrcd : addrcd,
                meshlvl : 6,
                addrlvl : 2
            }, function(status, result) {
                if (status.code == '000') {

                    /* ポリゴン取得成功 */
                    geom = result.item[0].geom;

                    /* ポリゴンを描画 */
                    drawPolygonByGeom(geom);

                } else {
                    /* ポリゴン取得失敗 */
                    alert(status.text + status.code + 'ポリゴン取得失敗');
                }
            });
        } else {
            /* 住所コード取得失敗 */
            alert(status.text + status.code + '住所コード取得失敗');
        }
    });
}

/* geomからポリゴンを取得し描画する */
function drawPolygonByGeom(geom) {

    var polylatlons = [];
    var tmplatlons = geom.coordinates;

    for (var i = 0; i < tmplatlons.length; i++) {

        if (geom.type == "Polygon") {
            for (var j = 0; j < tmplatlons[i].length; j++) {
                polylatlons.push(new ZDC.LatLon(tmplatlons[i][j][1], 
                                                tmplatlons[i][j][0]));
            }
            /* 1つ目の要素は一番外のポリゴンを表している */
            if (i == 0) {
                /* ポリゴン描画*/
                drawPolygon(polylatlons);
            } else {
                /* 領域内の穴になっている部分のポリゴン描画*/
                undrawPolygon(polylatlons);
            }
            polylatlons.length = 0;

        } else if (geom.type == "MultiPolygon") {
            for (var j = 0; j < tmplatlons[i].length; j++) {
                for (var k = 0; k < tmplatlons[i][j].length; k++) {
                    polylatlons.push(new ZDC.LatLon(tmplatlons[i][j][k][1], 
                                                    tmplatlons[i][j][k][0]));
                }

                /* 1つ目の要素は一番外のポリゴンを表している */
                if (j == 0) {
                    /* ポリゴン描画*/
                    drawPolygon(polylatlons);
                } else {
                    /* 領域内の穴になっている部分のポリゴン描画*/
                    undrawPolygon(polylatlons);
                }
                polylatlons.length = 0;
            }
        }
    }
}

/* ポリゴンを描画 */
function drawPolygon(polylatlons) {

    /* ポリゴンを描画するウィジットを作成 */
    var widget = new ZDC.Polyline(polylatlons, {
        strokeWeight : 2,
        fillColor : '#202080',
        fillOpacity : 0.5
    });

    widgets.push(widget);

    /* MAPにウィジットを追加 */
    map.addWidget(widget);

}

/* 描画領域内で穴になっている領域を描画 */
function undrawPolygon(polylatlons) {

    /* ポリゴンを描画するウィジットを作成 */
    var widget = new ZDC.Polyline(polylatlons, {
        strokeWeight : 2,
        fillColor : '#000000',
        fillOpacity : 1.0
    });

    widgets.push(widget);

    /* MAPにウィジットを追加 */
    map.addWidget(widget);
}

/* ウィジットをすべて削除 */
function refreshPolygon() {
    while (widgets.length > 0) {
        map.removeWidget(widgets.shift());
    }
}

//]]>

</script>
</head>
<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:500px; height:300px; 
    top:0px; left:20px; position:absolute;"></div>
</body>
</html>