WebGISはchromeやsafariなどのWEBブラウザで閲覧等できるGISであり、QGISなどの専用のソフトを用意することなく利用することが出来ます。
そのため、データを編集等などするのではなく、主に閲覧してもらう用途で利用されます。
WEBブラウザを利用することから、javaScriptというプログラム言語を使用して実装することが一般的です。
WebGIS用のJavaScriptライブラリがあり、用意されたプログラムを組み合わせることで、高機能なWebGISを実装することが出来ます。
JavaScriptライブラリの中でも、MapLibre GL JS と Leaflet が広く使われ、情報力が多いため、本記事を作成した令和７年度の現在点は、どちらかを選ぶことになると思います。
Leafletの方がシンプルで習得しやすいと言われていますが、自由度や機能面はMapLibre GL JSの方が高いとされており、将来的にMapLibre GL JSが主流になっていくと考えられています。
そのため、本記事では、MapLibre GL JS を使用していきたいと考えています。
MapLibre GL JSは、WebGLを使用してブラウザ上でベクタータイルからインタラクティブな地図をレンダリングするTypeScriptライブラリです。(上記引用)
Leafletは、モバイルフレンドリーなインタラクティブマップを作成するための、オープンソースのJavaScriptライブラリです。(上記引用)
国土地理院でも、代表的ライブラリを使ったサンプルを紹介しておりますので、ご以下のURLをご参照ください。
また、MapLibre GL JSを使用されたWEBページを一部ご紹介します。
などのサイトでMapLibre GL JSが使用されています。
WebGISの環境を用意する
WebGISのために最低限必要な環境として、WEBサーバーが必要になります。
今回は、VsCodeとそのプラグインのLiveserverでWEBサーバー環境を用意します。
VsCodeはエディタであるため、プログラミングするために、最も使用されているエディタであるため、WEBサーバー環境を用意するだけではなく、プログラミングをする上で、必須のソフトと言えます。
まず、プログラミングをするためのエディタであるVscodeを公式ホームページからインストールします。
そして、WEBサーバー環境を作ることが出来るVsCodeのプラグインであるLiveserverをVsCodeの拡張機能からインストールします。
以上で、最低限必要な環境は用意出来ました。
MapLibreで地番データ、境界点データ、国土地理院のタイル地図の重図を作成する。
第２回目で作成したGeoJsonファイルを、MapLibre GL JSでWEBブラウザに表示します。
＜head＞タグにMapLibre GL JSのCDNのURLを記載します。
MapLibre GL JSを使用する上で必要なデータをこの記述で読み込みます。
＜body＞タグに地図を表示させる領域を記載します。
地図を表示させるために、＜div＞タグで地図を表示する箇所を作成し、その場所を特定させるためにid属性にmapを記述します。
＜script＞に、どのようなデータを、どのように表示させるかをJavaScriptというプログラム言語で記述します。
containerは、に表示する先のidであるmapを記述します。
centerには、地図の中心となる位置を記述します。
zoomには、どのレベルまでズームするかを記述します。
styleの中のsourceには、データの保管場所や形式等の情報を記述します。
ここでは、背景につかうラスタデータ、第２回目で作成したGeoJsonファイル（地番であるポリゴンデータ、点名のポイントデータ）が保存されている場所及びそのデータがどの保存形式か等を記述します。
styleの中のlayersには、sourceに記載したデータをどのように描写するかを記載します。
背景に使うラスターデータは、typeにbackground(背景)として表示するための記述します。
ポイントデータについては、typeにcircle(丸)で表示するための記述します。
また、その色をpaintで記述をします。
ポリゴンデータについては、typeにfill(塗りつぶし)で表示するための記述します。
また、その色をpaintで記述をします。
コードについては、本記事の末尾に記載していますので、ご参照ください。
WEBサーバーを起動時しWEBブラウザに表示させる
プログラミングが終わったら、LiveServerを起動します。
右下のGo Liveを起動するとサーバー環境になり、WEBブラウザでサイトが見れるようになります。
サンプルを以下のURLで見ることが出来ます。
JavaSciptで様々な機能を追加することが出来る
クリックすると情報を読み取れるなどの機能を記述することで、操作性があるWEBGISを自分でカスタマイズすることが出来ます。
サンプルを以下のURLで見ることが出来ます。
また、コードをGithubで公開しているのご自由にご参照・お使いください。
(少し編集・準備中β版)
まとめ
最後まで読んで頂きありがとうございました。
今回は、GISのハンズオン講座として３回に分けて記事を作成してきました。
土地家屋調査士業界は、ドローン測量や3Dスキャンなどの最新技術が普及されつつあります。
ただ、それを導入するためには、コストが掛かるのが足かせになっていると思います。
私自身、土地家屋調査士業務としてプラスアルファの価値を提供をしたいと考えてましたが、ドローン測量や3Dスキャンを導入するとなると、1000万円前後の投資が必要になるため、業務に取り入れることは出来ませんでした。
その中で、GIS分野については、QGISやWEBGISなどのソフトウェアはオープンソースであるため、導入コストはゼロです。
また、GNSS機械も安価に手に入れることが出来るようになってきたため、GISに必要な情報である位置・地理情報を手軽に使用できる状況が整ってきたと言えます。
また、WEBやデータベースについての技術の上に成り立っているため、学ぶ知識も普遍的なものになってます。
学んだ知識でホームページを作成することも出来、いろいろな場面で応用が利きます。
私自身、GISを学ぶことで、簡単なWEBサイトを作ることが出来るようになり、そこからWEB集客で売上を作ることが出来るようになりました。
是非、多くの実務者の方にGISについて興味を持ってもらえれば幸いです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB地図</title>
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet"/>
</head>
<body>
<div id="map" style="height: 100vh;"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
center: [139.660344139425916, 35.876171956184599],
zoom:18,
style: {
version: 8,
sources: {
background: {
type: 'raster',
tiles: [
'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
],
tileSize: 256,
maxzoom: 19,
attribution: '標準地図（国土地理院）',
},
point:{
type: 'geojson',
data: './json/point.geojson',
attribution: '座標データ'
},
polygon:{
type: 'geojson',
data: './json/polygon.geojson',
attribution: '地積データ'
},
},
layers:[
{
id: 'background',
source: 'background',
type: 'raster',
},
{
id: 'point-layer',
source: 'point',
type: 'circle',
paint: {
'circle-color': 'red',
},
},
{
id: 'polygon-layer',
source: 'polygon',
type: 'fill',
paint: {
'fill-color': '#000',
'fill-opacity': 0.2,
'fill-outline-color':'#000',
},
}
]
}
}
);
</script>
</body>
</html>point.geojson
{
"type": "FeatureCollection",
"name": "point",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::6667" } },
"features": [
{ "type": "Feature", "properties": { "CONAME": "MO186", "COY": "-15617.986", "COX": "-13737.237", "CONOTE1": "コンクリート杭", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660368199585662, 35.876057196007132 ] } },
{ "type": "Feature", "properties": { "CONAME": "MO179", "COY": "-15620.136", "COX": "-13724.501", "CONOTE1": "金属鋲", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660344139425916, 35.876171956184599 ] } },
{ "type": "Feature", "properties": { "CONAME": "MO178", "COY": "-15620.495", "COX": "-13724.526", "CONOTE1": "コンクリート杭", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660340164094691, 35.87617172512455 ] } },
{ "type": "Feature", "properties": { "CONAME": "MO181", "COY": "-15622.154", "COX": "-13713.301", "CONOTE1": "コンクリート杭", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660321571162626, 35.876272873902295 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8061", "COY": "-15623.756", "COX": "-13701.630", "CONOTE1": "コンクリート杭", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660303600701184, 35.876378043553821 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8058", "COY": "-15625.205", "COX": "-13690.960", "CONOTE1": "計算点", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660287344250634, 35.876474193244412 ] } },
{ "type": "Feature", "properties": { "CONAME": "M0557", "COY": "-15621.391", "COX": "-13691.005", "CONOTE1": "コンクリート杭", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660329584239264, 35.87647384848124 ] } },
{ "type": "Feature", "properties": { "CONAME": "M0558", "COY": "-15618.899", "COX": "-13691.036", "CONOTE1": "コンクリート杭", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660357183130287, 35.876473608809526 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8301", "COY": "-15616.941", "COX": "-13693.312", "CONOTE1": "計算点", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660378912086571, 35.876453125570158 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8303", "COY": "-15615.806", "COX": "-13700.768", "CONOTE1": "計算点", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660391627992084, 35.876385939876442 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8304", "COY": "-15615.238", "COX": "-13704.603", "CONOTE1": "計算点", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660397993570143, 35.876351382604646 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8308", "COY": "-15613.515", "COX": "-13715.862", "CONOTE1": "計算点", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660417295872037, 35.87624992838137 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8339", "COY": "-15612.469", "COX": "-13723.088", "CONOTE1": "計算点", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660429021557889, 35.876184814340853 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8340", "COY": "-15612.386", "COX": "-13723.656", "CONOTE1": "計算点", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660429951883685, 35.876179696061605 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8337", "COY": "-15612.268", "COX": "-13724.473", "CONOTE1": "計算点", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.66043127470104, 35.876172334007542 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8336", "COY": "-15611.284", "COX": "-13731.157", "CONOTE1": "計算点", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660442303117577, 35.876112104230899 ] } },
{ "type": "Feature", "properties": { "CONAME": "M0526", "COY": "-15610.726", "COX": "-13734.044", "CONOTE1": "計算点", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660448539339114, 35.876086091483813 ] } },
{ "type": "Feature", "properties": { "CONAME": "M8349", "COY": "-15612.677", "COX": "-13736.324", "CONOTE1": "コンクリート杭", "CONOTE2": null }, "geometry": { "type": "Point", "coordinates": [ 139.660426977257856, 35.876065509869335 ] } }
]
}polygon.geojson
{
"type": "FeatureCollection",
"name": "polygon",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::6667" } },
"features": [
{ "type": "Feature", "properties": { "GRNAME": "80-4", "GRNOTE1": "瀬ヶ崎", "GRNOTE2": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 139.660368199585662, 35.876057196007132 ], [ 139.660344139425916, 35.876171956184599 ], [ 139.660340164094691, 35.87617172512455 ], [ 139.660321571162626, 35.876272873902295 ], [ 139.660303600701184, 35.876378043553821 ], [ 139.660287344250634, 35.876474193244412 ], [ 139.660329584239264, 35.87647384848124 ], [ 139.660357183130287, 35.876473608809526 ], [ 139.660378912086571, 35.876453125570158 ], [ 139.660391627992084, 35.876385939876442 ], [ 139.660397993570143, 35.876351382604646 ], [ 139.660417295872037, 35.87624992838137 ], [ 139.660429021557889, 35.876184814340853 ], [ 139.660429951883685, 35.876179696061605 ], [ 139.66043127470104, 35.876172334007542 ], [ 139.660442303117577, 35.876112104230899 ], [ 139.660448539339114, 35.876086091483813 ], [ 139.660426977257856, 35.876065509869335 ], [ 139.660368199585662, 35.876057196007132 ] ] ] ] } }
]
}