Web GPS Template

قالب ويب-GPS

هل تخطط لإنشاء تطبيق مختلط؟ تخطط لاستخدام GPS في ذلك؟ إذًا هذا القالب مناسب لك!

الصفحات المراد تحريرها:

• marker.js -> يحمل العلامات داخل الخريطة
• nav-dialogs.js -> يحمل الأساليب المستخدمة في قالب الدرج (الشريط الجانبي)
• info.js -> يحمل الأساليب التي تستخدمها الأحداث عندما ينقر المستخدم أو يضغط على العلامة داخل الخريطة
• navigation.js -> يتحكم في مربع الحوار الذي يستخدمه التطبيق
• main.css -> تخطيط هذه الصفحة
• templates.css -> بعض خيارات التصميم (لون الخلفية) التي يشترك فيها كل من ملف Index.html وهذه الصفحة

يتم إنشاء مجلد واجهة الويب تلقائيًا بواسطة المكون الإضافي qgis2web الخاص بـ qgis. إذا قمت بإنشاء خريطة جديدة واستخدمت البرنامج المساعد qgis2web، فإن هذا القالب متوافق للغاية. على الرغم من أنني قمت ببعض التغييرات داخل qgis2web.js من أجل تلبية الوضع اليدوي (ضبط تنسيق نظام تحديد المواقع يدويًا) لذا ضع ذلك في الاعتبار عند تغيير محتوى واجهة الويب.

لا يقوم هذا القالب بالبحث أو مقارنة المواقع الإحداثية، ولكن يمكنك إنشاء موقع خاص بك. ما عليك سوى استخدام أساليب Javascript هذه للحصول على موقعك الحالي.

أساليب ومتغيرات JavaScript البارزة التي يجب استخدامها:

• Geolocation.getPosition() -> توفر هذه الطريقة موقع GPS الحالي للمستخدم
• ExternalGeoLocate() -> يقوم بتحديث موقع GPS الحالي للمستخدم
• Manualcoords -> إحداثيات GPS التي قمت بتعيينها يدويًا. قم باستدعاء هذا المتغير فقط إذا تم ضبط الوضع اليدوي على القيمة true

أعتقد أن OpenLayers (الذي جعل هذا القالب ممكنًا) لديه طريقته الخاصة لمقارنة الإحداثيات، ويمكنك استخدام ذلك أيضًا!

رموز عينة لمقارنة الإحداثيات والبحث عنها

  if ( typeof ( geolocation . getPosition ( ) ) === "undefined" && manualmode == false ) {
    return false ;
  }

  if ( manualmode ) {
    coords = manualcoords ;
  }
  else {
    coords = geolocation . getPosition ( ) ;
  }
  
  // Assume that we have a list of coordinates (objects that contain
  // x and y values). We compare each one of them using the classic
  // formula of [distance between two points]
  // (http://www.mathwarehouse.com/algebra/distance_formula/index.php) 
  // then push it to an array called selected
  for ( var i = 0 ; i < list . length ; i ++ ) {
    var icon = list [ i ] ;
    var dist = Math . sqrt ( Math . pow ( ( coords [ 0 ] - icon . x ) , 2 ) + Math . pow ( ( coords [ 1 ] - icon . y ) , 2 ) ) ;
    
    // If distance is close to the 2500m radius, then it is included
    if ( dist <= 2500 ) {
      selected . push ( icon ) ;
    }
  } 

معاينة

معاينة لهذا القالب: انقر هنا لإعادة التوجيه