緯線と経線の追加

wijmaps ウィジェットでは、緯線と経線を地図に追加できます。経線は経度を表し、本初子午線からの距離を示します。緯線は緯度を表し、赤道からの距離を示します。緯線と経線を表示する地図を使用すると、場所の正確な位置を特定できます。

Tile ソース上にベクターレイヤを使用することで、地理座標に基づいて幾何学図形、シェイプ、ポリゴン、パスを描画できます。

ライブウィジェット
スクリプト

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijmaps"], function () { $(document).ready(function () { var vectors = getVectorsData(); var layers = [ { "type": "vector", "data": { "vectors": vectors }, "placemark": { labelVisibility: "visible" } } ]; $("#maps").wijmaps({ "source": "bingMapsAerialSource", "zoom": 1 }).wijmaps({ "layers": layers }); }); }); function getVectorsData() { var vectors = [], lbl; for (var lon = -180; lon <= 180; lon += 30) { vectors.push({ "type": "polyline", "coordinates": [lon, 85, lon, -85], "stroke": "#d3d3d3", "strokeOpacity": 0.6, "strokeWidth": "1", "strokeDashArray": "- " }); lbl = Math.abs(lon).toString() + "°"; if (lon > 0) lbl += "E"; else if (lon < 0) lbl += "W"; vectors.push({ "type": "placemark", "coordinates": [lon, 0], "name": lbl }); } for (var lat = -80; lat <= 80; lat += 20) { vectors.push({ "type": "polyline", "coordinates": [-180, lat, 180, lat], "stroke": "#d3d3d3", "strokeOpacity": 0.6, "strokeWidth": "1", "strokeDashArray": "- " }); lbl = Math.abs(lat).toString() + "°"; if (lat > 0) lbl += "N"; else if (lat < 0) lbl += "S"; vectors.push({ "type": "placemark", "coordinates": [0, lat], "name": lbl }); } return vectors; } </script> <style type="text/css"> span.wijmo-wijmaps-vectorlayer-marklabel { font-size: 9px; color: #CCCCCC; white-space: nowrap; } </style>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {
            var vectors = getVectorsData();
            var layers = [
                {
                    "type": "vector",
                    "data": {
                        "vectors": vectors
                    },
                    "placemark": {
                        labelVisibility: "visible"
                    }
                }
            ];
            $("#maps").wijmaps({
                "source": "bingMapsAerialSource",
                "zoom": 1
            }).wijmaps({
                "layers": layers
            });
        });
    });

    function getVectorsData() {
        var vectors = [], lbl;
        for (var lon = -180; lon <= 180; lon += 30) {
            vectors.push({
                "type": "polyline",
                "coordinates": [lon, 85, lon, -85],
                "stroke": "#d3d3d3",
                "strokeOpacity": 0.6,
                "strokeWidth": "1",
                "strokeDashArray": "- "
            });

            lbl = Math.abs(lon).toString() + "°";
            if (lon > 0)
                lbl += "E";
            else if (lon < 0)
                lbl += "W";

            vectors.push({
                "type": "placemark",
                "coordinates": [lon, 0],
                "name": lbl
            });
        }

        for (var lat = -80; lat <= 80; lat += 20) {
            vectors.push({
                "type": "polyline",
                "coordinates": [-180, lat, 180, lat],
                "stroke": "#d3d3d3",
                "strokeOpacity": 0.6,
                "strokeWidth": "1",
                "strokeDashArray": "- "
            });

            lbl = Math.abs(lat).toString() + "°";
            if (lat > 0)
                lbl += "N";
            else if (lat < 0)
                lbl += "S";

            vectors.push({
                "type": "placemark",
                "coordinates": [0, lat],
                "name": lbl
            });
        }
        return vectors;
    }

    </script>
    <style type="text/css">
        span.wijmo-wijmaps-vectorlayer-marklabel
        {
            font-size: 9px;
            color: #CCCCCC;
            white-space: nowrap;
        }
    </style>

関連トピック

参照