إيماجيمابستر:تقديم أنماط "مختلفة" لفئات مختلفة من المناطق

Question

هل من الممكن أن نمط مناطق مختلفة في أنماط مختلفة في إيماجيمابستر?على سبيل المثال:عندما يكون لدي خطة منزل يمكن للمستخدم النقر غرف مختلفة:غرف المعيشة, النوم غرف, حمام غرف,....يجب تقديم أي غرفة معيشة مختارة باللون الأحمر ، ويجب اختيار أي غرفة نوم مختارة باللون الأزرق ...شكرا كورت

Answer 1

لا توجد طريقة مضمنة الآن لإنشاء ملف تعريف ينطبق على مجموعة من المجالات المستقلة, ولكن يمكنك القيام بذلك بنفسك بقليل من العمل.إليك مثال عملي:

http://jsfiddle.net/jamietre/RyScW/

أولا إعداد الإحالة المرجعية:

var profiles = [
{ 
    areas: "ME,VT,CT,NH,RI,DE,MA",
    options: {
        fillColor: '0000ff'   
    }
},
{
    areas: "UT,CO,AZ,NM",
    options: {
        fillColor: '00ff00'   
    }
}
];

بعد ذلك ، قم بتعيين ملفات التعريف إلى كائن جديد لتسهيل الوصول إليها باستخدام "مفتاح الخريطة" لكل منطقة:

var optionsXref = {};

$.each(profiles,function(i,e) {
    var areas = e.areas.split(',');

    $.each(areas,function(j,key) {
        optionsXref[key]=e.options;
    });        
});

يؤدي هذا إلى تحويل البنية البسيطة التي أنشأتها للتو إلى كائن يشبه هذا:

{ "ME": { reference to first option group },
  "VT": { reference to first option group },
  ... 
  "UT": { reference to 2nd option group },
  ..
}

أخيرا ، اعترض "النقرات" وحدد المنطقة يدويا باستخدام الخيارات المحددة:

image.mapster({
    mapKey: 'data-state',
    onClick: function(e) {
        if (e.selected) {

            // the 4th parameter is the options that area mapped to that area.

            image.mapster('set',true,e.key, optionsXref[e.key]);       
            return false;
        }            
    }
});

ال return false يسبب إيماجيمابستر لإلغاء معالجة النقر الخاصة بها.هذا كل شيء.

أيضا من أجل الاكتمال - يمكنك فقط القيام بذلك بالطريقة القديمة وتعيين الخيارات لكل منطقة:

الطريقة المباشرة للقيام بذلك هي عن طريق إضافة معلومات محددة إلى كل منطقة مقدما ، على سبيل المثال.

$('img').mapster({
    areas: [{ 
        mapKey: 'living-room-1',
        fillColor: 'ff0000'
    },
    {
        mapKey: 'living-room-2',
        fillColor: 'ff0000'
    }, ...
    ]
);

من الواضح أن هذا سيكون الكثير من البيانات إذا كان لديك العديد من المجالات ، مع الكثير من التكرار.انها أكثر كفاءة وأقل بكثير الترميز للقيام بذلك بطريقة أخرى.