WebGIS入門

new-tech

WebGISを使えば、ブラウザで地理情報を共有・活用できます。

WebGIS入門【ブラウザで地図を表示する技術】

この記事では、WebGISの基礎知識と構築方法を解説します。

WebGISとは

概要

WebGISは、Webブラウザで動作する地理情報システムです。

【特徴】
・インストール不要
・どこからでもアクセス可能
・データの共有が容易
・マルチデバイス対応

デスクトップGISとの違い

項目 デスクトップGIS WebGIS
動作環境 PC ブラウザ
インストール 必要 不要
機能 高機能 表示・閲覧中心
共有 ファイル共有 URL共有
コスト ソフト費用 開発費用

主な用途

用途

  • 地図情報の公開
  • 現場データの共有
  • 位置情報の可視化
  • 業務システムへの組み込み

主要なWebGIS技術

JavaScriptライブラリ

ライブラリ 特徴 用途
Leaflet 軽量・シンプル 一般的な地図表示
OpenLayers 高機能 複雑なGIS機能
Mapbox GL JS 美しい地図 デザイン重視
Google Maps API 豊富な機能 Google連携

比較

Leaflet

  • 最も軽量
  • 学習コストが低い
  • プラグインが豊富
  • 初心者におすすめ

OpenLayers

  • 高機能
  • OGC標準対応
  • WMS/WFS対応
  • 専門的な用途向け

Mapbox GL JS

  • ベクタータイル対応
  • 美しいデザイン
  • 3D表示可能
  • 商用利用に制限あり

Leafletによる地図表示

基本構成

html
<!DOCTYPE html>
<html>
<head>
    <title>WebGIS Sample</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // 地図を初期化
        var map = L.map('map').setView([35.6812, 139.7671], 13);

        // OpenStreetMapタイルを追加
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
    </script>
</body>
</html>

地図の初期設定

javascript
// 地図を作成
var map = L.map('map', {
    center: [35.6812, 139.7671],  // 中心座標
    zoom: 13,                      // ズームレベル
    minZoom: 5,                    // 最小ズーム
    maxZoom: 18                    // 最大ズーム
});

ズームコントロール

javascript
// デフォルトのズームコントロールを無効化
var map = L.map('map', {
    zoomControl: false
});

// カスタム位置に配置
L.control.zoom({
    position: 'bottomright'
}).addTo(map);

地理院タイルの活用

標準地図

javascript
// 地理院タイル（標準地図）
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
    maxZoom: 18
}).addTo(map);

航空写真

javascript
// 地理院タイル（航空写真）
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
    attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
    maxZoom: 18
}).addTo(map);

レイヤー切り替え

javascript
// ベースマップを定義
var baseMaps = {
    "標準地図": L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'),
    "航空写真": L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg'),
    "淡色地図": L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png')
};

// デフォルトのレイヤーを追加
baseMaps["標準地図"].addTo(map);

// レイヤーコントロールを追加
L.control.layers(baseMaps).addTo(map);

マーカーとポップアップ

基本的なマーカー

javascript
// マーカーを追加
var marker = L.marker([35.6812, 139.7671]).addTo(map);

// ポップアップを追加
marker.bindPopup("<b>東京駅</b><br>JR東日本の駅");

カスタムアイコン

javascript
// カスタムアイコンを定義
var customIcon = L.icon({
    iconUrl: 'marker-icon.png',
    iconSize: [32, 32],
    iconAnchor: [16, 32],
    popupAnchor: [0, -32]
});

// カスタムアイコンでマーカーを追加
L.marker([35.6812, 139.7671], {icon: customIcon}).addTo(map);

複数マーカー

javascript
// マーカーデータ
var locations = [
    {name: "東京駅", lat: 35.6812, lng: 139.7671},
    {name: "新宿駅", lat: 35.6896, lng: 139.7006},
    {name: "渋谷駅", lat: 35.6580, lng: 139.7016}
];

// マーカーを追加
locations.forEach(function(loc) {
    L.marker([loc.lat, loc.lng])
        .bindPopup(loc.name)
        .addTo(map);
});

マーカークラスタリング

html
<!-- プラグインを読み込み -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>

<script>
    // クラスターグループを作成
    var markers = L.markerClusterGroup();

    // マーカーを追加
    locations.forEach(function(loc) {
        markers.addLayer(L.marker([loc.lat, loc.lng]));
    });

    // マップに追加
    map.addLayer(markers);
</script>

GeoJSONデータの表示

基本的な表示

javascript
// GeoJSONデータ
var geojsonData = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {"name": "ポイント1"},
            "geometry": {
                "type": "Point",
                "coordinates": [139.7671, 35.6812]
            }
        }
    ]
};

// 地図に追加
L.geoJSON(geojsonData).addTo(map);

スタイル設定

javascript
// ポリゴンのスタイル
function style(feature) {
    return {
        fillColor: '#3388ff',
        weight: 2,
        opacity: 1,
        color: 'white',
        fillOpacity: 0.7
    };
}

// スタイルを適用
L.geoJSON(geojsonData, {style: style}).addTo(map);

ポップアップ

javascript
// 各フィーチャーにポップアップを追加
L.geoJSON(geojsonData, {
    onEachFeature: function(feature, layer) {
        if (feature.properties && feature.properties.name) {
            layer.bindPopup(feature.properties.name);
        }
    }
}).addTo(map);

外部ファイルの読み込み

javascript
// fetchでGeoJSONを読み込み
fetch('data.geojson')
    .then(response => response.json())
    .then(data => {
        L.geoJSON(data, {
            onEachFeature: function(feature, layer) {
                layer.bindPopup(feature.properties.name);
            }
        }).addTo(map);
    });

実践的な活用例

現場位置マップ

html
<!DOCTYPE html>
<html>
<head>
    <title>現場位置マップ</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { width: 100%; height: 100vh; }
        .site-popup { min-width: 200px; }
        .site-popup h3 { margin: 0 0 10px 0; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([35.6812, 139.7671], 12);

        L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
            attribution: '国土地理院'
        }).addTo(map);

        // 現場データ
        var sites = [
            {
                name: "A工事現場",
                lat: 35.69, lng: 139.75,
                status: "進行中",
                manager: "山田"
            },
            {
                name: "B工事現場",
                lat: 35.67, lng: 139.78,
                status: "完了",
                manager: "佐藤"
            }
        ];

        // マーカーを追加
        sites.forEach(function(site) {
            var popupContent = `
                <div class="site-popup">
                    <h3>${site.name}</h3>
                    <p>状態: ${site.status}</p>
                    <p>担当: ${site.manager}</p>
                </div>
            `;

            L.marker([site.lat, site.lng])
                .bindPopup(popupContent)
                .addTo(map);
        });
    </script>
</body>
</html>

施設検索機能

javascript
// 検索機能
function searchSite(keyword) {
    var results = sites.filter(function(site) {
        return site.name.includes(keyword);
    });

    if (results.length > 0) {
        var site = results[0];
        map.setView([site.lat, site.lng], 15);
    }
}

// 検索ボタン
document.getElementById('searchBtn').addEventListener('click', function() {
    var keyword = document.getElementById('searchInput').value;
    searchSite(keyword);
});

まとめ

WebGISの特徴

特徴

  • ブラウザで動作
  • インストール不要
  • 情報共有が容易
  • マルチデバイス対応

導入ステップ

4ステップ

  • Leafletを読み込み
  • 地図コンテナを作成
  • タイルレイヤーを追加
  • マーカー等を追加

活用シーン

活用例

  • 現場位置の共有
  • 施設マップの公開
  • データの可視化
  • 業務システム連携

関連記事

QGISからWebマップ出力
地理院タイルの活用
GISソフト比較

お問い合わせ

WebGIS構築についてのご相談は、お気軽にお問い合わせください。

  • WebGIS開発相談
  • 地図システム構築
  • カスタマイズ開発

お問い合わせはこちら

最終更新: 2025年1月