カスタムソース

Wijmaps では、カスタムソースオプションを使用して、地図のソースを変更できます。

デフォルトでは、wijmaps には Bing Maps^TM の航空写真が表示されます。source オプションを使用すると、このソースを道路地図またはハイブリッド地図に変更できます。customSource オプションを使用して、Google マップや Yahoo マップなどのカスタムソースを設定することもできます。

たとえば、次のスクリプトおよびマークアップは、カスタム地図ソースとして Google マップを設定します。ライブウィジェット下部のドロップダウンから［Aerial］、［Road］、［Hybrid］、または［Custom］を選択して、違いを確認してください。

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

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijmaps"], function () { $(document).ready(function () { $("#maps").wijmaps({ }); }); }); var customMapsource = { tileWidth: 256, tileHeight: 256, minZoom: 1, maxZoom: 22, getUrl: function (zoom, x, y) { var uriFormat = "http://mt{subdomain}.google.cn/vt/lyrs=r&hl=en-us&gl=cn&x={x}&y={y}&z={zoom}"; var subdomains = ["0", "1", "2", "3"]; var subdomain = subdomains[(y * Math.pow(2, zoom) + x) % subdomains.length]; return uriFormat.replace("{subdomain}", subdomain).replace("{x}", x).replace("{y}", y).replace("{zoom}", zoom); } } function switchTileSource(source) { switch (source) { case "Road": $("#maps").wijmaps({ "source": "bingMapsRoadSource" }); break; case "Aerial": $("#maps").wijmaps({ "source": "bingMapsAerialSource" }); break; case "Hybrid": $("#maps").wijmaps({ "source": "bingMapsHybridSource" }); break; case "Custom": $("#maps").wijmaps({ "source": customMapsource }); break; } } </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {
            $("#maps").wijmaps({

            });
        });
    });
    
    var customMapsource = {
        tileWidth: 256,
        tileHeight: 256,
        minZoom: 1,
        maxZoom: 22,
        getUrl: function (zoom, x, y) {
            var uriFormat = "http://mt{subdomain}.google.cn/vt/lyrs=r&hl=en-us&gl=cn&x={x}&y={y}&z={zoom}";
            var subdomains = ["0", "1", "2", "3"];
            var subdomain = subdomains[(y * Math.pow(2, zoom) + x) % subdomains.length];
            return uriFormat.replace("{subdomain}", subdomain).replace("{x}", x).replace("{y}", y).replace("{zoom}", zoom);
        }
    }

    function switchTileSource(source) {
        switch (source) {
            case "Road":
                $("#maps").wijmaps({ "source": "bingMapsRoadSource" });
                break;
            case "Aerial":
                $("#maps").wijmaps({ "source": "bingMapsAerialSource" });
                break;
            case "Hybrid":
                $("#maps").wijmaps({ "source": "bingMapsHybridSource" });
                break;
            case "Custom":
                $("#maps").wijmaps({ "source": customMapsource });
                break;
        }
    }
</script>

マークアップ	コードのコピー
<div id="maps" style="width:600px; height: 400px;"></div> <label>MapSource:</label> <select onchange="switchTileSource(this.value)"> <option>Aerial</option> <option>Road</option> <option>Hybrid</option> <option>Custom</option> </select>

マークアップ

コードのコピー

<div id="maps" style="width:600px; height: 400px;"></div>

                <label>MapSource:</label>
                 <select onchange="switchTileSource(this.value)">
                    <option>Aerial</option>
                    <option>Road</option>
                    <option>Hybrid</option>
                    <option>Custom</option>
                </select>

関連トピック

参照