Wijmo UI for the Web
仮想レイヤ
Wijmo ユーザーガイド > ウィジェット > Maps > 主な機能 > 仮想レイヤ

wijmaps の仮想レイヤを使用すると、地図上に要素を表示して、仮想化、および非同期のデータロードをサポートできます。仮想レイヤに表示可能な要素数に制限はありませんが、要素数が多すぎると、一度にすべてを表示できません。

地図上の空間の分割方法は、Slice オプションを使用して定義します。地図の個々のスライスは、その分割区間の最小ズームレベルを定義します。スライスの最大ズームレベルは、次のスライスの最小ズームレイヤとなります。最後のスライスの場合、このスライスの最大ズームレベルは、地図自体の最大ズームレベルとなります。また、各スライスは、緯線および経線によるグリッドで分割されます。

たとえば、次のスクリプトは、仮想レイヤを使用して工場、オフィス、店舗を表示する方法を示します。初期状態では、すべての工場およびオフィスが地図上に表示されています。レベル 10 まで拡大すると、すべての店舗が地図上に表示されます。

スクリプト
コードのコピー 
<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#maps").wijmaps({
            center: { x: 121.4, y: 31.2 },
            zoom: 3,
            targetZoom: 3
        });
                
        showVirtualLayer();
    });
    var factoriesDataBase,
        minStoreZoom = 10,
        storeSlices = Math.floor(Math.pow(2, minStoreZoom));

    function showVirtualLayer() {
        $.ajax({
            url: "../Resources/factories.json",
            success: function (result) {
                factoriesDataBase = result;
                    
                $("#maps").wijmaps("option", {
                    layers: [
                        {
                            type: "virtual",
                            slices: [
                                {                                     latitudeSlices: 1,                                                                         longitudeSlices: 1, zoom: 0 }
                            ],
                            request: requestFactories
                        },
                        {
                            type: "virtual",
                            slices: [
                                {                                     latitudeSlices: 1,                                                                         longitudeSlices: 1, zoom: 0 }
                            ],

                            request: requestOffices
                        }
                        ,
                        {
                            type: "virtual",
                            slices: [
                                {                                     latitudeSlices: 1,                                                                         longitudeSlices: 1, zoom: 0 },
                                {                                     latitudeSlices: storeSlices, longitudeSlices: storeSlices, zoom: minStoreZoom }
                            ],
                            request: requestStores
                        }]
                }).off(".layer");
            },
            dataType: "json"
        });
    }

    // virtual layer for factories
    function requestFactories(paper, zoom, maxZoom, lowerLeft, upperRight) {
        var result = { items: [] },
            factories = factoriesDataBase.factories,
            len = factories.length;
        for (var i = 0; i < len; i++) {
            var factory = factories[i];
            if (factory.longitude <= lowerLeft.x ||
                factory.longitude > upperRight.x ||
                factory.latitude <= lowerLeft.y ||
                factory.latitude > upperRight.y) {
                continue;
            }

            var item = {
                location: { x: factory.longitude, y: factory.latitude },
                size: { width: 60, height: 60 }, pinpoint: { x: 30, y: 30 }
            };

            paper.setStart();
            var img = paper.image("../images/livewidgets/factory.png", 0, 0, 60, 60);
            $(img.node).wijtooltip({ content: factory.name, position: { my: "leftcenter", at: "right+30px top+30px" } });
                
            var set = paper.setFinish();
            set.data("name", factory.name);
            item.elements = set;

            result.items.push(item);
        }

        return result;

    }

    // virtual layer for offices
    function requestOffices(paper, zoom, maxZoom, lowerLeft, upperRight) {
        var result = { items: [] },
            offices = factoriesDataBase.offices,
            len = offices.length;
            
        for (var i = 0; i < len; i++) {
            var office = offices[i];

            var item = {
                location: { x: office.longitude, y: office.latitude },
                size: { width: 60, height: 60 }, pinpoint: { x: 30, y: 30 }
            };

            paper.setStart();
            var img = paper.image("../images/livewidgets/office.png", 0, 0, 60, 60);
            $(img.node).wijtooltip({ content: office.name, position: { my: "left center", at: "right+30px top+30px"} });
                
            paper.circle(50, 10, 10).attr("fill", "#222222");
            paper.text(50, 10, office.stores).attr("fill", "white");
            var set = paper.setFinish();
            item.elements = set;
                
            result.items.push(item);
        }

        return result;
    }

    // virtual layer for stores
    function requestStores(paper, minZoom, maxZoom, lowerLeft, upperRight) {
        if (minZoom < minStoreZoom)
            return null;

        var result = { items: [] },
            stores = factoriesDataBase.stores,
            len = stores.length;

        for (var i = 0; i < len; i++) {
            var store = stores[i];
            if (store.longitude <= lowerLeft.x ||
                store.longitude > upperRight.x ||
                store.latitude <= lowerLeft.y ||
                store.latitude > upperRight.y) {
                continue;
            }

            var item = {
                location: { x: store.longitude, y: store.latitude },
                size: { width: 60, height: 60 }, pinpoint: { x: 30, y: 30 }
            };

            paper.setStart();
            var img = paper.image("../images/livewidgets/store.png", 0, 0, 60, 60);
            $(img.node).wijtooltip({ content: store.name, position: { my: "left center", at: "right+30px top+30px" } });

            var set = paper.setFinish();
            item.elements = set;

            result.items.push(item);
        }

        return result;
    }
 </script>

関連トピック

参照

wijmaps メソッド

 

 

Copyright © GrapeCity inc. All rights reserved.