下記のd3.jsの勉強記事で思い出したのですが、Leafletも位置付けからするとそりゃGeoJSONいけるよねと思って確かめてみました。

itdepends.hateblo.jp

↓

いけました。

f:id:azotar:20200502203450p:plain

もともと、OpenStreetMapなど地図の上に、レイヤーをかぶせることができるというのは（自分ではよく分かっていないものの）、事例をいくつもみていたので想像がついていた。

ただ、逆に、地図が無しの場合にどうなるんだろうと気になって試してみたところ、いままでよくわからずにお作法で記載していたような部分も不要で、この用途であればもっとコンパクトな記述になるのねということが学べました。

leafletjs.com

サンプルコード

なんちゃって愛知県とその西あたりに、南北に横切る割れ目です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <style>
        #map {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

        let hoboAichi = {
            "type": "MultiPolygon",
            "coordinates": [
                [[
                    [137.341, 34.647], [137.074, 34.662], [137.156, 34.654], [137.237, 34.693], [137.266, 34.708], [137.300, 34.693], [137.315, 34.688], [137.309, 34.700], [137.351, 34.727], [137.311, 34.803], [137.250, 34.805], [137.214, 34.815], [137.186, 34.792], [137.168, 34.787], [137.105, 34.791], [136.996, 34.816], [136.955, 34.854], [136.976, 34.893], [136.971, 34.908], [136.934, 34.874], [136.936, 34.854], [136.921, 34.828], [136.969, 34.725], [136.976, 34.701], [136.851, 34.748], [136.837, 34.875], [136.828, 34.961], [136.869, 35.008], [136.873, 35.071], [136.884, 35.088], [136.857, 35.059], [136.843, 35.041], [136.849, 35.077], [136.838, 35.030], [136.809, 35.049], [136.780, 35.033], [136.769, 35.021], [136.677, 35.128], [136.677, 35.241], [136.864, 35.372], [136.991, 35.424], [137.047, 35.336], [137.067, 35.308], [137.102, 35.301], [137.185, 35.253], [137.345, 35.272], [137.408, 35.234], [137.520, 35.273], [137.570, 35.282], [137.576, 35.220], [137.655, 35.228], [137.759, 35.221], [137.823, 35.211], [137.823, 35.158], [137.802, 35.130], [137.778, 35.099], [137.704, 34.972], [137.639, 34.892], [137.549, 34.843], [137.496, 34.786], [137.483, 34.673], [137.340, 34.647]
                ]]]
        }

        let myLine = [{
            "type": "LineString",
            "coordinates": [[136, 35], [136.5, 35.6]]
        }]

        var map = L.map('map').setView([35, 136.86], 8)

        let myLayer = L.geoJSON(hoboAichi).addTo(map)
        myLayer.addData(myLine)



    </script>
</body>
</html>