再利用可能なシェイプオブジェクトを作成する方法はありますか？

Question

私はLeafletJSを使用してカスタムラボレイアウトマップを作成していますが、エリアが使用されているかどうかを示すためにいくつかの矩形レイヤーを配置する予定です。現在、私は各形状を定義するために座標を使った実用的なテストケースを持っていますが、呼び出すことができ、それ自体の中心にある単一の座標を与えられる標準サイズの形状オブジェクトを作成する方法はありますか？

私の角度制御器の現在のコードは役立ちます。

function showMap() { 
    var map = L.map('mapid', { 
     crs: L.CRS.Simple, 
     maxZoom: 4, 
     attributionControl: false 
    }).setView([0, 0], 1), 
    southWest = map.unproject([0, 4096], map.getMaxZoom()), 
    northEast = map.unproject([4096, 0], map.getMaxZoom()), 
    bounds = L.latLngBounds(southWest, northEast); 

    L.tileLayer('images/4231/{z}/{x}/{y}.png', { 
    minZoom: 1, 
    maxZoom: 4, 
    center: [0, 0], 
    noWrap: true, 
    bounds: bounds 
    }).addTo(map); 

    var testBench = [{ 
    number: "1A1", 
    coord1: "-48.6", 
    coord2: "6", 
    coord3: "-81.4", 
    coord4: "71", 
    inUse: true 
    }, { 
    number: "1A2", 
    coord1: "-48.5", 
    coord2: "71", 
    coord3: "-81", 
    coord4: "137", 
    inUse: false 
    }, { 
    number: "1A3", 
    coord1: "-48.5", 
    coord2: "137", 
    coord3: "-81", 
    coord4: "202", 
    inUse: true 
    }]; 

    angular.forEach(testBench, function(item, index) { 
    var location = [ 
     [item.coord1, item.coord2], 
     [item.coord3, item.coord4] 
     ], 
     color; 
    switch (item.inUse) { 
     case true: 
     color = "red" 
     break; 
     case false: 
     color = "green" 
     break; 
    } 
    L.rectangle(location, { 
     color: color, 
     weight: 1 
    }).bindPopup("Bench Number is: " + item.number).addTo(map); 
    }) 
    map.setMaxBounds(bounds); 
} 

結局ベンチ情報DBからではなく、変数引っ張られることになり、ベンチの何百もあるだろうので、私はできるだけ位置決めレイアウトを合理化するために探しています。

Answer 1

私は、呼び出すことができ、自分自身を中心にすることができる標準サイズの形状オブジェクトを作成する方法がありますか？

リーフレットには、

リーフレットベクターの特徴、またはL.Path（L.PolylinesおよびL.Polygons）は、セントロイドとセントロイドへの一連のオフセットではなく、その座標によって定義されます。

単純なFactory design patternを実装して、中心点のみを与える規則的な形状のフィーチャを作成することもできます。