درس بناء خريطه جغرافيه SVG

مدهش — Sat, 07 Jan 2012 22:25:17 +0000

IE9 قد أعلن دعمه للخرائط الجغرافية وهناك طريقه رائعه لخلق خريطه قائمه علي التصورات
وهي POLYMAPS وهذا يكون في جميع المتصفحات التي تعرف SVG.

مزايا استخدام SVG لمثل هذه التصورات هي كثيرة : حجم ملف أصغر، وميزات فائقة التصور، وتجهيز أقل كثافة وأسرع حركة.
وعلاوة على ذلك، فإن هذه الأعمال على أجهزة iPhone و iPads!
هنا سنستخدم Polymaps لرسم المواقع على أساس جدول زمني سوف نتعلم :

1. كيفية الحصول على بيانات الموقع الجغرافي في ملف JSON
2. كيفية جعل خريطة العالم مع خطوط قليلة من التعليمات البرمجية
3. كيفية التفاعل مع SVG باستخدام جافا سكريبت

أولا، ينبغي أن تضع مكتبة Polymaps في ملف HTML قبل أن ندرج النص لدينا.
لذلك دعونا أن تشمل أيضا :

[html]

[/html]

نحن نستخدم العنوان (paulirish.com/2010/the-protocol-relative-url). ونحدد حاويه Polymaps الخاصة به :

[html]

var map = po.map()
.container(document.getElementById(‘map’).appendChild(po.svg(‘svg’)))
.center({lat: 51.48, lon: 0});

[/html]

الآن، يجب تحليل ملف world.json يتضمن كل بلد والمعلومات عن موقعها ككائنات. نضيفها على أنها طبقة على الخريطة :

[html] map.add(po.geoJson()
.url("world.json")
.tile(false)
.zoom(3)
.on("load", manipulatemap);

[/html]

يمكنك الحصول على اثنين من الأحداث مع طبقة الخريطة : التحميل والعرض.
، سيتم استدعاء الدالة manipulatemap مرة يتم تحميل الخريطة. وأريد أيضا للمستخدمين التكبير والتصغير :

[html] map.add(po.compass()
.pan("none"));

[/html]

والأن نقوم بتحديد درجات الألوان

[html] var feature = e.features[i];
var hue = 29;
var sat = Math.round(Math.random()*99+1);
var lit = Math.round(Math.random()*60+30);
feature.element.setAttribute("fill", ‘hsl(‘ + hue + ", " + sat + ‘%, ‘ + lit + ‘%)’);

[/html]

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

[html] tweetcontainer = po.svg(‘g’);
location = po.svg(‘circle’);
if(document.implementation.hasFeature("http://www.w3.org/Graphics/SVG/
feature/1.2/#TextFlow", "1.2")) {
tweettext = po.svg("textArea");
tweettext.setAttribute("width", 300);
tweettext.setAttribute("height", 200);
} else {
tweettext = po.svg("text");
}
location.setAttribute(‘r’, 5); // set the radius for the circle
tweetcontainer.setAttribute(‘class’, ‘tweet-container’);
tweetcontainer.appendChild(tweettext);
tweetcontainer.appendChild(location);
svg[0].appendChild(tweetcontainer);

[/html]

نحن لدينا تحليل البيانات في showtwitter (). نحن بحاجة لترجمة بيانات الموقع الجغرافي في twitter.json
ونحدد إحداثيات بكسل على الخريطة SVG. ويتم ذلك بسهولة عن طريق locationPoint () ، التي قدمتها Polymaps.

[html] var mappos = map.locationPoint({lat: tweet.location.x, lon: tweet.location.y});

[/html]

الآن، وضعنا الإحداثيات واستخدامنا دائرة الكائن mappos :

[html] location.setAttribute(‘cx’, mappos.x );
location.setAttribute(‘cy’, mappos.y);
tweettext.setAttribute("x", (+mappos.x + 10));
tweettext.setAttribute("y", (+mappos.y + 5));

[/html]

ثم نحن بحاجة لاستبدالها بـ :

[html] tweettext.firstChild && tweettext.removeChild(tweettext.firstChild); // remove
old tweet if there is one
tweettext.appendChild(document.createTextNode(tweet['tweet'])); //add the
next tweet

[/html]

أخيرا ندعو showtwitter .

[html] if(!!(document.createElementNS && document.createElementNS(‘http://
www.w3.org/2000/svg’, ‘svg’).createSVGRect)) {

} else {

}

[/html]

لمشاهدة استخدمات أكثر لـ SVG اضغط هنــــــــــــــــــــــــــــــــا

فواصل » درس،عمل،خريطه،جغرافيه،اس،في،جي،svg،برمجه،دروس،فيديو،فواصل

درس بناء خريطه جغرافيه SVG