توضیحات و دانلود

نقشه های حفاری با استفاده از Google Geomap در ASP.Net (قسمت دوم )
0 0
نقشه های حفاری با استفاده از Google Geomap در ASP.Net (قسمت دوم )

در مقاله قبلی  توضیح دادیم که چگونه از API Google Geomap در ASP.Net برای ایجاد نقشه های فلش تعاملی استفاده کنیم. در اینجا  توضیح خواهیم داد که چگونه می توان نقشه های حفاری را با استفاده از API Geomap Google و jQuery در ASP.Net ایجاد کرد.

این مقاله ادامه بخش اول است، بنابراین اگر شما خواننده جدید هستید، لطفا مقاله قبلی را مطالعه کنید .

 زوم کردن

در حال حاضر زمانی که کاربر روی یک کشور کلیک می کند، با ارائه آمار دقیق برای هر شهر، به اطلاعات دقیق تر برای آن کشور بزرگتر می شود

برای نمایش داده های شهر، یک شی انتقال داده یا کلاس Property به نام شهرهای ایجاد میکنیم .

C #

public class Cities

{

    string _City;

    int _Popularity;

    public string City

    {

        get

        {

            return _City;

        }

        set

        {

            _City = value;

        }

    }

 

    public int Popularity

    {

        get

        {

            return _Popularity;

        }

        set

        {

            _Popularity = value;

        }

    }

}

VB.Net

Public Class Cities

    Private _City As String

    Private _Popularity As Integer

    Public Property City() As String

        Get

            Return _City

        End Get

        Set(ByVal value As String)

            _City = value

        End Set

    End Property

 

    Public Property Popularity() As Integer

        Get

            Return _Popularity

        End Get

        Set(ByVal value As Integer)

            _Popularity = value

        End Set

    End Property

End Class

همچنین ما باید یک روش وب دیگر ایجاد کنیم که درخواست jQuery را هنگامی که کاربر روی هر کشور کلیک می کند، ایجاد می کند بنابراین  یک روش دیگر به نام GetCities ایجاد میکنیم .

C #

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

[WebMethod]

public static List<Cities> GetCities(string CountryCode)

{

    List<Cities> cities = new List<Cities>();

 

    cities.Add(new Cities());

    cities[0].City = "Mumbai";

    cities[0].Popularity = 900;

   

    cities.Add(new Cities());

    cities[1].City = "Delhi";

    cities[1].Popularity = 800;

 

    cities.Add(new Cities());

    cities[2].City = "Kolkata";

    cities[2].Popularity = 750;

 

    cities.Add(new Cities());

    cities[3].City = "Chennai";

    cities[3].Popularity = 700;

 

    return cities;

}

VB.Net 

<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _

<WebMethod()> _

Public Shared Function GetCities(ByVal CountryCode As String) As List(Of Cities)

   Dim cities As New List(Of Cities)()

 

   cities.Add(New Cities())

   cities(0).City = "Mumbai"

   cities(0).Popularity = 900

 

   cities.Add(New Cities())

   cities(1).City = "Delhi"

   cities(1).Popularity = 800

 

   cities.Add(New Cities())

   cities(2).City = "Kolkata"

   cities(2).Popularity = 750

 

   cities.Add(New Cities())

   cities(3).City = "Chennai"

   cities(3).Popularity = 700

 

   Return cities

End Function

همانطور که می توانید در بالای تابع مشاهده کنید، تابع یک CountryCode پارامتر را می پذیرد که به روش متداول ارتباط جی کوئری AJAX منتقل می شود که بعدا در این مقاله مورد بحث قرار می گیرد. بر اساس کد کشور،در این روش لیست شهرها را باز می کند.

نقشه جهان را طراحی کنید

<script type='text/javascript'>

    google.load('visualization', '1', {'packages': ['geomap']});

    google.setOnLoadCallback(OnLoad);

    function OnLoad() {

        $.ajax({

            type: "POST",

            url: "CS.aspx/CreateWorldMap",

            data: '{}',

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: DrawWorldMap

        });

    }

</script>

 روش OnLoad به عنوان نام نشان می دهد که زمانی بسته visualization گوگل در مرورگر سرویس گیرنده بارگذاری می شود، فراخوانی کند. به سادگی طرف سرور روش CreateWorldMap را فراخوانی می کند و در موفقیت ارتباط AJAX DrawWorldMap اجرا می شود.

درکد زیر عمل DrawWorldMap کاربر همانند مقاله قبلی است اما با دو تفاوت :

<script type='text/javascript'>

var countryCode;

function DrawWorldMap(response) {

 

    var data = new google.visualization.DataTable();

    data.addRows(response.d.length);

    data.addColumn('string', 'Country');

    data.addColumn('number', 'Popularity');

    for (var i = 0; i < response.d.length; i++) {

        data.setValue(i, 0, response.d[i].Country);

        data.setValue(i, 1, response.d[i].Popularity);

    }

    var options = {};

    options['dataMode'] = 'regions';

 

    var container = document.getElementById('map_canvas');

    var geomap = new google.visualization.GeoMap(container);

    geomap.draw(data, options);

 

    google.visualization.events.addListener(

    geomap, 'regionClick', function(e) {

        countryCode = e['region'];

        DrillDown();

    });

}

</script>

اولین چیزی که متغیر countryCode  اعلام می کند این است که کد کشور را که کاربر روی آن کلیک می کند , ذخیره می کند. دومین رویداد regionClick است که به نقشه جهانی متصل است که کد کشور را هنگامی که نقشه توسط یک کاربر کلیک می شود، نشان می دهد. همانطور که متوجه شدید،ازتابع به نام DrillDown که در زیر توضیح داده شده است، ارتباط می گیرم

<script type='text/javascript'>

    function DrillDown() {

      $.ajax({

          type: "POST",

          url: "CS.aspx/GetCities",

          data: '{CountryCode: "' + countryCode + '"}',

          contentType: "application/json; charset=utf-8",

          dataType: "json",

          success: CreateCountryMap

       });

    }

</script>

تابع فوق به سادگی یک ارتباط AJAX را به صفحه وب می کشد و روش GetCities را فراخوانی می کند و پارامتر countryCode را می گیرد و زمانی که کاربر بر روی هر بخش از نقشه کلیک می کند، مقداردهی می شود. همانطور که متوجه می شوید، عملکرد CreateCountryMap زمانی فراخوانی می شود که ارتباط AJAX موفق باشد. در روش زیر شرح داده شده است :

<script type='text/javascript'>

    function CreateCountryMap(response) {

      var data = new google.visualization.DataTable();

      data.addColumn('string', 'City');

      data.addColumn('number', 'Popularity');

      data.addRows(response.d.length);

      for (var i = 0; i < response.d.length; i++) {

          data.setValue(i, 0, "'" + response.d[i].City + "'");

          data.setValue(i, 1, response.d[i].Popularity);

      }

      var options = {};

      options['region'] = countryCode;

      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors

      options['dataMode'] = 'markers';

      options['showZoomOut'] = true;

 

      var container = document.getElementById('map_canvas');

      var geomap = new google.visualization.GeoMap(container);

      geomap.draw(data, options);

      google.visualization.events.addListener(

      geomap, 'zoomOut', function(e) {

      OnLoad();

      });

    }

</script>

روش CreateCountryMap به راحتی از طریق JSON Array شهرها را فرا می گیرد و Visual Visualization Datatable را به تصویر می کشد و در نهایت نقشه جهان را روی Canvas یعنی DIV   با شناسه map_canvasنشان میدهد . در رویداد Zoom Out  دوباره درخواست روش OnLoad را می دهیم تا کاربر بتواند دوباره به نقشه جهان بازگردد.

 تصاویرزیر را ببینید :

نقشه جهان


نقشه کشوری DrillDown با امکانات زوم کردن

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :