日本列島を囲む境界ボックス四隅の緯度経度を求める

いまちょっと弄っているライブラリを使う関係で、日本列島がすっぽり収まるBOXの四隅の座標(緯度経度)が必要になりました。ググればどっかに載っているかな？　と思っていたのですが、意外と見つからない。

「それっぽいサンプルがあった！」と喜び勇んでみてみると、四隅ではなく左上と右下の座標しか出してくれなくてがっかり。

しかも、よく見たら自分がずいぶん前にjsdo.itで作成していたものでした。
もう、ほんとなんか残念 orz
とりあえず、大体のところが分かれば良いので、D3.jsで座標を出力してみました。

サンプル

d3.json("../../_geodata/japan_kanji.geojson", function(json){
    d3draw(json);
});

function d3draw(geojson) {
    
    var projection = d3.geo
        .mercator()     //投影法の指定
        .scale(1000)    //スケール（ズーム）の指定
        .translate([400 , 300]) //表示位置調整
        .center([139.0032936, 36.3219088]); //中心の座標を指定

    var path = d3.geo.path().projection(projection);　//パスジェネレーター
    
    
    var svg = d3.select('svg');
    var mg  = svg.append('g');
    var bg  = svg.append('g');
    
    //地形の描画
    var land = mg.append('path')
        .attr({
            "d": path(geojson),
            "stroke": "white",
            "fill": "#ccc"
        });


    //境界情報の取得
    var drawBounds = function(d){
            var b = path.bounds(d);
            return "M" + b[0] + "H" + b[1][0] + "V" + b[1][1] + "H" + b[0][0] + "Z";
        }

    //境界BOXの描画
    var b = path.bounds(geojson); 
    var bounds = bg.append('path')
        .attr({
            "d":  function(){  return "M" + b[0] + "H" + b[1][0] + "V" + b[1][1] + "H" + b[0][0] + "Z";} ,
            "stroke": "red",
            "fill": "#ccc",
            "fill-opacity": 0
        })

        
    //コーナーのpixcel座標データ  
    var corner = [
        {x:b[0][0], y:b[0][1]},
        {x:b[1][0], y:b[1][1]},
        {x:b[0][0], y:b[1][1]},
        {x:b[1][0], y:b[0][1]},
    ]
    
    svg.selectAll("circle")
        .data(corner)
        .enter()
        .append("circle")
        .attr({
            cx:function(d){ return d.x },
            cy:function(d){ return d.y },
            r:10
        })
        .append("title")
        .text(function(d){
             return projection.invert([d.x, d.y]); //pixcel座標→緯度経度に変換
        });

}

d3.json("../../_geodata/japan_kanji.geojson", function(json){

d3draw(json);

});

function d3draw(geojson) {

var projection = d3.geo

.mercator() //投影法の指定

.scale(1000) //スケール（ズーム）の指定

.translate([400 , 300]) //表示位置調整

.center([139.0032936, 36.3219088]); //中心の座標を指定

var path = d3.geo.path().projection(projection);　//パスジェネレーター

var svg = d3.select('svg');

var mg = svg.append('g');

var bg = svg.append('g');

//地形の描画

var land = mg.append('path')

.attr({

"d": path(geojson),

"stroke": "white",

"fill": "#ccc"

});

//境界情報の取得

var drawBounds = function(d){

var b = path.bounds(d);

return "M" + b[0] + "H" + b[1][0] + "V" + b[1][1] + "H" + b[0][0] + "Z";

}

//境界BOXの描画

var b = path.bounds(geojson);

var bounds = bg.append('path')

.attr({

"d": function(){ return "M" + b[0] + "H" + b[1][0] + "V" + b[1][1] + "H" + b[0][0] + "Z";} ,

"stroke": "red",

"fill": "#ccc",

"fill-opacity": 0

})

//コーナーのpixcel座標データ

var corner = [

{x:b[0][0], y:b[0][1]},

{x:b[1][0], y:b[1][1]},

{x:b[0][0], y:b[1][1]},

{x:b[1][0], y:b[0][1]},

]

svg.selectAll("circle")

.data(corner)

.enter()

.append("circle")

.attr({

cx:function(d){ return d.x },

cy:function(d){ return d.y },

r:10

})

.append("title")

.text(function(d){

return projection.invert([d.x, d.y]); //pixcel座標→緯度経度に変換

});

}

四隅のサークルにマウスオーバーすると緯度経度が表示されます。
コピペしたいときは、Chromeの「要素を検証」からどうぞ(雑)

座標コピペ

日本列島を囲む境界ボックス四隅の緯度経度を求める

サンプル

高崎版も作ってみた

投稿者: shimizu