재사용 가능한 모양 개체를 만드는 방법이 있습니까?

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

거기에 자체적으로 센터에 단일 좌표를 호출하고 피드 할 수있는 표준 크기의 모양 개체를 만들 수있는 방법은 무엇입니까?

리플릿에는 no.

리플릿 벡터 지형도 또는 L.Paths (L.Polylines 및 L.Polygons)는 중점 및 그 중심에 대한 일련의 오프셋이 아닌 좌표로 정의됩니다.

Factory design pattern을 구현하여 중심점 만 제공하는 규칙적인 모양을 만들 수도 있습니다.