ベクターの種類

wijmaps のベクターレイヤでは、プレースマーク、ポリライン、ポリゴンを使用して、さまざまな地理座標を接続できます。

たとえば、次のスクリプトおよびマークアップでは、ポリラインとポリゴンを使用して、インド、中国、ミャンマーの 3 つの国を結びます。ライブウィジェット下部のドロップダウンから［Polyline］または［Polygon］を選択して、違いを確認してください。

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

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijmaps"], function () { $(document).ready(function () { $("#maps").wijmaps({ source: "bingMapsRoadSource", layers: [{ type: "vector" }] }); }); }); function switchDataSourceType(source) { switch (source) { case "Polyline": setFunctionDataSource(); break; case "Polygon": setObjectDataSource(); break; } } function setFunctionDataSource() { var layers = $.extend({}, $("#maps").wijmaps("option", "layers")); layers[0].data = funcDataSource; $("#maps").wijmaps({ "targetCenter": { x: 88.4, y: 22.2 }, "zoom": 3, "layers": layers }); } function setObjectDataSource() { var layers = $.extend({}, $("#maps").wijmaps("option", "layers")); layers[0].data = objectDataSource(); $("#maps").wijmaps({ "targetCenter": { x: 110.4, y: 31.2 }, "zoom": 3, "layers": layers }); } function funcDataSource() { return { "vectors": [ { "type": "polyline", "stroke": "green", strokeWidth: "3", "coordinates": [ 78.0000, 21.0000,96.0000, 22.0000, 103.0000, 35.0000] }, ] }; } function objectDataSource() { return { "vectors": [ { "type": "polygon", "stroke": "#00CCFF", strokeWidth: "3", "coordinates": [78.0000, 21.0000,96.0000, 22.0000, 103.0000, 35.0000, 78.0000, 21.0000] }, ] }; } </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {
                $("#maps").wijmaps({
                    source: "bingMapsRoadSource",
                    layers: [{
                        type: "vector"                       
                    }]
                });
            });
        });
        function switchDataSourceType(source) {
            switch (source) {
               
                case "Polyline":
                    setFunctionDataSource();
                    break;
                case "Polygon":
                    setObjectDataSource();
                    break;
            }
        }
        function setFunctionDataSource() {
            var layers = $.extend({}, $("#maps").wijmaps("option", "layers"));
            layers[0].data = funcDataSource;
            $("#maps").wijmaps({
                "targetCenter": { x: 88.4, y: 22.2 },
                "zoom": 3,
                "layers": layers
            });
        }
        function setObjectDataSource() {
            var layers = $.extend({}, $("#maps").wijmaps("option", "layers"));
            layers[0].data = objectDataSource();
            $("#maps").wijmaps({
                "targetCenter": { x: 110.4, y: 31.2 },
                "zoom": 3,
                "layers": layers
            });
        }
        function funcDataSource() {
            return {
                "vectors": [
                    {
                        "type": "polyline", "stroke": "green", strokeWidth: "3",
                        "coordinates": [ 78.0000, 21.0000,96.0000, 22.0000, 103.0000, 35.0000]
                    },
        ]
            };
        }
        function objectDataSource() {
            return {
            
             "vectors": [
                    {
                        "type": "polygon", "stroke": "#00CCFF", strokeWidth: "3",
                        "coordinates": [78.0000, 21.0000,96.0000, 22.0000, 103.0000, 35.0000, 78.0000, 21.0000]
                    },             
                ]
            };
        }
    </script>

マークアップ	コードのコピー
<div id="maps" style="width:600px; height: 400px;"></div> <select onchange="switchDataSourceType(this.value)"> <option>Polyline</option> <option>Polygon</option> </select>