はじめに

Web上ではなくローカル環境で動かすことができるHTML形式の地図を紹介します。今回はGeoJSONを使ってポリゴンを落としてみます。アウトプットイメージはこんな感じです。

GeoJSONとは

GeoJSONファイルとは地理情報をもったJSON形式のファイルのことで、上例でいうとメッシュの情報になります。具体的なコードは以下の通りです。

var meshdata = {
"type": "FeatureCollection",
"name": "meshdata",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name": "めっしゅ１"}, "geometry": { "type": "Polygon", "coordinates": [[[139.25, 35.7333333333333], [139.25, 35.7416666666667], [139.2625, 35.7416666666667], [139.2625, 35.7333333333333], [139.25, 35.7333333333333]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ２"}, "geometry": { "type": "Polygon", "coordinates": [[[139.2875, 35.725], [139.2875, 35.7333333333333], [139.3, 35.7333333333333], [139.3, 35.725], [139.2875, 35.725]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ３"}, "geometry": { "type": "Polygon", "coordinates": [[[139.275, 35.7166666666667], [139.275, 35.725], [139.2875, 35.725], [139.2875, 35.7166666666667], [139.275, 35.7166666666667]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ４"}, "geometry": { "type": "Polygon", "coordinates": [[[139.225, 35.725], [139.225, 35.7333333333333], [139.2375, 35.7333333333333], [139.2375, 35.725], [139.225, 35.725]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ５"}, "geometry": { "type": "Polygon", "coordinates": [[[139.2875, 35.7166666666667], [139.2875, 35.725], [139.3, 35.725], [139.3, 35.7166666666667], [139.2875, 35.7166666666667]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ６"}, "geometry": { "type": "Polygon", "coordinates": [[[139.2875, 35.7166666666667], [139.2875, 35.725], [139.3, 35.725], [139.3, 35.7166666666667], [139.2875, 35.7166666666667]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ７"}, "geometry": { "type": "Polygon", "coordinates": [[[139.2, 35.725], [139.2, 35.7333333333333], [139.2125, 35.7333333333333], [139.2125, 35.725], [139.2, 35.725]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ８"}, "geometry": { "type": "Polygon", "coordinates": [[[139.225, 35.725], [139.225, 35.7333333333333], [139.2375, 35.7333333333333], [139.2375, 35.725], [139.225, 35.725]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ９"}, "geometry": { "type": "Polygon", "coordinates": [[[139.2375, 35.725], [139.2375, 35.7333333333333], [139.25, 35.7333333333333], [139.25, 35.725], [139.2375, 35.725]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ１０"}, "geometry": { "type": "Polygon", "coordinates": [[[139.25, 35.725], [139.25, 35.7333333333333], [139.2625, 35.7333333333333], [139.2625, 35.725], [139.25, 35.725]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ１１"}, "geometry": { "type": "Polygon", "coordinates": [[[139.2625, 35.725], [139.2625, 35.7333333333333], [139.275, 35.7333333333333], [139.275, 35.725], [139.2625, 35.725]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ１２"}, "geometry": { "type": "Polygon", "coordinates": [[[139.275, 35.725], [139.275, 35.7333333333333], [139.2875, 35.7333333333333], [139.2875, 35.725], [139.275, 35.725]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ１３"}, "geometry": { "type": "Polygon", "coordinates": [[[139.2875, 35.725], [139.2875, 35.7333333333333], [139.3, 35.7333333333333], [139.3, 35.725], [139.2875, 35.725]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ１４"}, "geometry": { "type": "Polygon", "coordinates": [[[139.2875, 35.7166666666667], [139.2875, 35.725], [139.3, 35.725], [139.3, 35.7166666666667], [139.2875, 35.7166666666667]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ１５"}, "geometry": { "type": "Polygon", "coordinates": [[[139.3125, 35.7166666666667], [139.3125, 35.725], [139.325, 35.725], [139.325, 35.7166666666667], [139.3125, 35.7166666666667]]] } },
{ "type": "Feature", "properties": { "name": "めっしゅ１６"}, "geometry": { "type": "Polygon", "coordinates": [[[139.2125, 35.725], [139.2125, 35.7333333333333], [139.225, 35.7333333333333], [139.225, 35.725], [139.2125, 35.725]]] } }
]
};

上のほうの行はヘッダ部分なので、今回説明は割愛します。

"coodinates" の部分がポリゴンの形を表す頂点になります。今回は四角形を描画してみましたが、緯度経度（＝点）の組み合わせが全部で5つあります。「なぜ四角形なのに5つの点？」と疑問がわくかもしれませんが、最初と最後の点は重複しています。これは鉛筆でなぞるイメージをもつと理解がすすみます。

例えば4点（点Ａ→点Ｂ→点Ｃ→点Ｄ）だけだと、点Ａと点Ｄの間の線が欠けてしまいます。そこで、5点（点Ａ→点Ｂ→点Ｃ→点Ｄ→点Ａ）にすることで、すべての点を通過した線を描くことができます。

サンプルコード

サンプルコードは以下の通りです。

<!DOCTYPEThtml>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script type="text/javascript" src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/leaflet-search@3.0.2/dist/leaflet-search.src.min.js"></script>
  <script src="test_mesh.geojson"></script>
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/leaflet-search@3.0.2/dist/leaflet-search.min.css">

</head>
<body>
  <div id="map" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>
</body>

<script>
  var map = L.map('map').setView([35.725, 139.3], 14);
  var map0 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
    {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"});
  var map1 = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
    {attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>"});
  var map2 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',
    {attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>"});
  var map3 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
    {attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>"});
  var map4 = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
    {attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors"});
  var baseMaps = {
    "国土地理院_標準" : map0,
    "国土地理院_淡色" : map1,
    "国土地理院_白" : map2,
    "国土地理院_航空" : map3,
    "OpenStreetMap" : map4,
  };
  L.control.layers(baseMaps).addTo(map);
  map3.addTo(map);

  var mesh =L.geoJSON(meshdata, {
    style: function(feature) {
      return {
        stroke: true,
        color: "blue",
        opacity: "0.5",
        weight: "1",
        fill: true,
        fillColor: "red",
        fillOpacity: "0.25"
      }
    },
    onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.name);
    }
  });
  mesh.addTo(map);

  new L.Control.Search({
    layer: mesh,
    propertyName: "name",
    textPlaceholder: "検索対象を入力",
    initial: false,
    zoom: 15,
    marker: false,
    position: "topright"
  }).addTo(map)

</script>
</html>

点を落とすとき（GeoJSONを活用して、HTML上で点を落とす方法｜RYO｜note）とコードは殆ど同じですので詳細は割愛します。