OpenLayersを使って平面直角座標系で表示する

はじめに

一般的にWebGISでは、世界中のどの地域でもシームレスに利用できる便利さから、グーグルや国土地理院の採用しているWebメルカトル（EPSG:3857）が採用されるケースが多いが、図形の誤差が大きいといったデメリットがある。

一方、自治体で保有している図形データは、狭い範囲ではあるが、図形データの誤差が少ないことから平面直角座標系（EPSG:2443～2461）が採用されることが多い、そのため、自治体の保有している図形データを、より正確にWebGISを表現するには、平面直角座標系で表示することが望ましい。

そこで、今回は、平面直角座標系のデータをOpenLayersで表示してみた。

処理概要は以下の通り

・proj4jsの導入
・平面直角座標系の定義
・各レイヤの設定

proj4jsの導入

下記のサイトに移動し、最新のライブラリのURLをダウンロードする。
https://cdnjs.com/libraries/proj4js

適当な位置に、proj4.jsを置き、読み込む。

    <head>
    <script type="text/javascript" src="/OpenLayersSample/proj4js/2.8.0/proj4.js"></script>
    </head>

<head>

</head>

平面直角座標系の定義

proj4jsのデフォルト値では、平面直角座標系のコードが定義されていないので、プログラムの最初に、使用する平面直角座標系の定義を設定する。

//平面直角座標系の定義
proj4.defs([["EPSG:2447", "+proj=tmerc +lat_0=36 +lon_0=134.3333333333333 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"]]);
ol.proj.proj4.register(proj4);

//平面直角座標系の定義

proj4.defs([["EPSG:2447", "+proj=tmerc +lat_0=36 +lon_0=134.3333333333333 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"]]);

ol.proj.proj4.register(proj4);

各レイヤの設定

各レイヤに平面直角座標系のコードを設定する。

var vector2 = new ol.layer.Vector({
    name: "p_tokei_build",
    maxResolution: 1,
    source: new ol.source.Vector({
        projection: 'EPSG:2447',
        format: new ol.format.GeoJSON(),
        url: '/OpenLayersSample/proj4js/json/p_tokei_build.geojson',
    }),
    style:new ol.style.Style({
        fill: new ol.style.Fill({ color: "#FFFFFF"}),
        stroke: new ol.style.Stroke({ color: "#c0c0c0", width: 1 }),
    })
});
var vector3 = new ol.layer.Vector({
    name: "l_kankyo",
    maxResolution: 1,
    source: new ol.source.Vector({
        projection: 'EPSG:2447',
        format: new ol.format.GeoJSON(),
        url: '/OpenLayersSample/proj4js/json/l_kankyo.geojson',
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({ color: "#FF0000", width: 2 }),
    })
});
var baseLayer1 = new ol.layer.Tile({
        name: "bl_std",
        type: 'base',
        minResolution: 1,
        source: new ol.source.XYZ({
            url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
        })
    });
var baseLayer2 = new ol.layer.Tile({
        name: "bl_pale",
        type: 'base',
        maxResolution: 1,
        source: new ol.source.XYZ({
            url: 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
        })
    });
var map = new ol.Map
    ({
        target: 'map',
        view: new ol.View
        ({    zoom: 14,
            projection: 'EPSG:2447',
            center: [50275, -141957]
        }),
        layers: 
        [   baseLayer1,
            baseLayer2,
            vector2,
            vector3
        ]
    });