OpenLayersを利用して、鉄道などの点線を表示させる

2019/7/3 GIS, OpenLayers

OpenLayersを利用して、鉄道などの点線を表示させる。

OpenLayersのスタイル設定は、通常javascriptで設定するが、
今回は、以下のjavascriptを利用してjsonファイルで記述する。

１．スタイル設定

スタイル設定は、スタイルを定義したjsonファイルを読み込んで、

今回は任意のクラスであるFileSystemDataを利用する。
makeStyleでスタイルクラスを作成し設定する。

WebMap.js

    var source = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'Json.aspx?file=douro.json'
    });

    var style = readJson("GET", '../Content/styles/road.json');
    var layer = new ol.layer.Vector({
        name: node.text,
        source: source,
        style: makeStyle(style)
    })

    map.addLayer(layer);

var source = new ol.source.Vector({

format: new ol.format.GeoJSON(),

url: 'Json.aspx?file=douro.json'

});

var style = readJson("GET", '../Content/styles/road.json');

var layer = new ol.layer.Vector({

name: node.text,

source: source,

style: makeStyle(style)

})

map.addLayer(layer);

２．鉄道の点線

鉄道の表示は、黒色の太めの線を設定し、少し細めの白色点線を組み合わせることで実現できる
ここで、lineCapを’square’にしないと丸い点線になる。

rail.json

[{
    stroke: {
        color: [0, 0, 0, 1],
        width: 6
    },
    zIndex: 1
},
{
    stroke: {
        color: [255, 255 , 255, 1],
        width: 4,
        lineCap: 'square',
        lineDash: [20, 15]
    },
    zIndex: 2
}]

[{

stroke: {

color: [0, 0, 0, 1],

width: 6

zIndex: 1

{

stroke: {

color: [255, 255 , 255, 1],

width: 4,

lineCap: 'square',

lineDash: [20, 15]

zIndex: 2

}]

３．道路の点線

道路の点線も同様に作成する。

road.json

[{
    stroke: {
        color: [128, 128, 128, 1],
        width: 14
    },
    zIndex: 1
},
{
    stroke: {
        color: [255, 255 , 255, 1],
        width: 4,
        lineCap: 'square',
        lineDash: [2, 10]
    },
    zIndex: 2
}]