OpenLayers #007 – 外部ファイルのGeoJSON表示

外部ファイルのGeoJSONを表示するメモ。

script.js

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';

// GeoJSON読み込み
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Fill from 'ol/style/Fill';
import Circle from 'ol/style/Circle';


// 外部GeoJSONスタイル設定
const styles = {
    'Point': new Style({
        image: new Circle({
            radius: 10,
            stroke: new Stroke({
                color: 'rgba(52, 152, 219, 1.0)',
                width: 5
            }),
            fill: new Fill({
                color: 'rgba(52, 152, 219, 0.4)'
            })
        })
    }),
    'LineString': new Style({
        stroke: new Stroke({
            color: 'rgba(241, 196, 15, 0.6)',
            width: 5
        })
    }),
    'Polygon': new Style({
        stroke: new Stroke({
            color: 'rgba(255, 0, 0, 1.0)',
            width: 2
        }),
        fill: new Fill({
            color: 'rgba(255, 0, 0, 0.4)'
        })
    })
};
const styleFunction = function(feature) {
    return styles[feature.getGeometry().getType()];
};

// 外部GeoJSONソース設定
const vectorSource = new VectorSource({
    url: 'data/sample.geojson',
    format: new GeoJSON()
});

// 外部GeoJSONレイヤ設定
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: styleFunction
});


// MIERUNE MONO読み込み
const map = new Map ({
    target: 'map',
    layers: [
        new TileLayer({
            source: new XYZ({
                url: 'https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png',
                attributions: 'Maptiles by <a href="http://mierune.co.jp" target="_blank">MIERUNE</a>, under CC BY. Data by <a href="http://osm.org/copyright" target="_blank">OpenStreetMap</a> contributors, under ODbL.',
                attributionsCollapsible: false,
                tileSize: [256, 256],
                minZoom: 0,
                maxZoom: 18
            })
        }),
        // 外部GeoJSONレイヤ指定
        vectorLayer
    ],
    view: new View ({
        center: fromLonLat([139.767, 35.681]),
        zoom: 14
    })
});

data/sample.geojson

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "id": "1",
                "name": "sample1"
            },
            "geometry": {
                "type": "Point",
                "coordinates":  [139.763, 35.681]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "id": "2",
                "name": "sample2"
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [139.75278854370114, 35.66413037753069],
                    [139.76523399353027, 35.67214927327908],
                    [139.77107048034668, 35.68888176518044],
                    [139.76660728454587, 35.69703758268826]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "id": "3",
                "name": "sample3"
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [[
                    [139.76617813110352, 35.675949251235025],
                    [139.77188587188718, 35.67410157813001],
                    [139.77227210998535, 35.67455478492641],
                    [139.77862358093262, 35.683757812281115],
                    [139.77343082427979, 35.68431553740134],
                    [139.77094173431396, 35.68469897115985],
                    [139.76871013641357, 35.679923346539084],
                    [139.76617813110352, 35.675949251235025]
                ]]
            }
        }
    ]
}

OpenLayersを手軽に始めるビルド環境公開しています。
openlayers-starter

• 参考文献
  OpenLayers