تجسم: نقشه جغرافیایی

  1. بررسی اجمالی
  2. مثال ها
  3. بارگذاری
  4. فرمت داده
  5. گزینه های پیکربندی
  6. مواد و روش ها
  7. مناسبت ها
  8. سیاست داده
  9. یادداشت

بررسی اجمالی

نقشه جغرافیایی نقشه ای از یک کشور، قاره یا نقشه منطقه است که رنگ ها و مقادیر به مناطق خاصی اختصاص داده شده است. مقادیر به صورت مقیاس رنگی نمایش داده می شوند و می توانید متن شناور اختیاری را برای مناطق مشخص کنید. نقشه با استفاده از یک فلش پلیر تعبیه شده در مرورگر ارائه می شود. توجه داشته باشید که نقشه قابل پیمایش یا کشیدن نیست، اما می‌توان آن را به گونه‌ای پیکربندی کرد که امکان بزرگ‌نمایی را فراهم کند.

مثال ها

ما در اینجا دو مثال داریم: یکی که از سبک نمایش مناطق استفاده می کند و دیگری که از سبک نمایش نشانگرها استفاده می کند.

نمونه مناطق

سبک مناطق کل مناطق (معمولاً کشورها) را با رنگ‌های مربوط به مقادیری که اختصاص می‌دهید پر می‌کند. با اختصاص options['dataMode'] = 'regions' در کد خود، سبک مناطق را مشخص کنید.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', { 'packages':['geomap'], // Note: you will need to get a mapsApiKey for your project. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; options['dataMode'] = 'regions'; var container = document.getElementById('regions_div'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); }; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', { 'packages':['geomap'], // Note: you will need to get a mapsApiKey for your project. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; options['dataMode'] = 'regions'; var container = document.getElementById('regions_div'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); };
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

نمونه نشانگرها

سبک "نشانگرها" دایره ای را با اندازه و رنگی برای نشان دادن یک مقدار، در مناطقی که شما مشخص کرده اید نشان می دهد. 

<html>
<head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script type='text/javascript'>
   google.charts.load('current', {'packages': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

بارگذاری

نام بسته google.charts.load "geomap" است

  google.charts.load('current', {'packages': ['geomap']});

نام کلاس تجسم google.visualization.GeoMap است

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

فرمت داده

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

  • قالب 1: مکان های طول و عرض جغرافیایی. این فرمت فقط زمانی کار می کند که گزینه dataMode 'نشانگرها' باشد. اگر از این فرمت استفاده می شود، نیازی به گنجاندن جاوا اسکریپت نقشه گوگل ندارید. مکان در دو ستون به اضافه دو ستون اختیاری وارد می شود:
    1. [ شماره، مورد نیاز ] عرض جغرافیایی. اعداد مثبت شمال و اعداد منفی جنوبی هستند.
    2. [ تعداد، مورد نیاز ] طول جغرافیایی. اعداد مثبت شرقی و اعداد منفی غربی هستند.
    3. [ شماره، اختیاری ] یک مقدار عددی که وقتی کاربر روی این منطقه قرار می گیرد نمایش داده می شود. در صورت استفاده از ستون 4، این ستون مورد نیاز است.
    4. [ رشته، اختیاری ] متن رشته اضافی نمایش داده می شود زمانی که کاربر روی این منطقه قرار می گیرد.
  • قالب 2: آدرس، نام کشور، مکان نام منطقه، یا کدهای منطقه شهری ایالات متحده. این فرمت با گزینه dataMode که روی "نشانگرها" یا "منطقه ها" تنظیم شده است کار می کند. مکان در یک ستون به اضافه دو ستون اختیاری وارد می شود:
    1. [ رشته، مورد نیاز ] مکان نقشه. فرمت های زیر پذیرفته می شود:
      • یک آدرس خاص (به عنوان مثال، "خیابان پنسیلوانیا 1600").
      • نام کشور به عنوان رشته (مثلاً "England")، یا کد ISO-3166 با حروف بزرگ یا معادل متن انگلیسی آن (به عنوان مثال، "GB" یا "United Kingdom").
      • نام کد منطقه ای ISO-3166-2 با حروف بزرگ یا متن انگلیسی معادل آن (به عنوان مثال، "US-NJ" یا "New Jersey"). توجه : مناطق را فقط زمانی می توان مشخص کرد که گزینه dataMode روی 'regions' تنظیم شده باشد.
      • یک کد منطقه شهری اینها کدهای سه رقمی مترو هستند که برای تعیین مناطق مختلف استفاده می شوند. کدهای ایالات متحده فقط پشتیبانی می شوند. توجه داشته باشید که اینها با کدهای منطقه تلفن یکسان نیستند .
    2. [ شماره، اختیاری ] یک مقدار عددی که وقتی کاربر روی این منطقه قرار می گیرد نمایش داده می شود. اگر از ستون 3 استفاده می شود، این ستون مورد نیاز است.
    3. [ رشته، اختیاری ] متن رشته اضافی نمایش داده می شود زمانی که کاربر روی این منطقه قرار می گیرد.

توجه: یک نقشه می تواند حداکثر 400 ورودی را نمایش دهد. اگر DataTable یا DataView شما بیش از 400 ردیف داشته باشد، فقط 400 ردیف اول نشان داده می شود. سریع ترین حالت ها dataMode='regions' با مکان های مشخص شده به عنوان کدهای ISO، و dataMode='markers' با نهادهای lat/long هستند. کندترین حالت dataMode='markers' با آدرس رشته ای است.

مهم: DataTable شما باید شامل هر ستون اختیاری قبل از هر ستونی باشد که می خواهید استفاده کنید. بنابراین، برای مثال، اگر می‌خواهید یک جدول lat/long مشخص کنید و فقط می‌خواهید از ستون‌های 1، 2 و 4 استفاده کنید، DataTable شما همچنان باید ستون 3 را تعریف کند (البته نیازی به اضافه کردن هیچ مقداری به آن نیست). :

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

گزینه های پیکربندی

نام تایپ کنید پیش فرض شرح
region رشته "جهان"

منطقه ای که باید روی نقشه نمایش داده شود. (مناطق اطراف نیز نمایش داده خواهند شد.) می تواند کد کشور (با فرمت ISO-3166 بزرگ) یا یکی از رشته های زیر باشد:

  • world - (کل جهان)
  • us_metro - (ایالات متحده، مناطق مترو)
  • 005 - (آمریکای جنوبی)
  • 013 - (آمریکای مرکزی)
  • 021 - (آمریکای شمالی)
  • 002 - (تمام آفریقا)
  • 017 - (آفریقای مرکزی)
  • 015 - (شمال آفریقا)
  • 018 - (آفریقای جنوبی)
  • 030 - (آسیای شرقی)
  • 034 - (آسیای جنوبی)
  • 035 - (منطقه آسیا/اقیانوس آرام)
  • 009 - (اقیانوسیه)
  • 145 - (خاورمیانه)
  • 143 - (آسیای مرکزی)
  • 151 - (آسیای شمالی)
  • 154 - (شمال اروپا)
  • 155 - (اروپا غربی)
  • 039 - (اروپا جنوبی)

Geomap رفتار پیمایش یا کشیدن را فعال نمی کند و فقط رفتار زوم محدودی را انجام می دهد. با تنظیم ویژگی showZoomOut می توان یک کوچک نمایی اولیه را فعال کرد.

dataMode رشته "مناطق"

نحوه نمایش مقادیر روی نقشه دو مقدار پشتیبانی می شود:

  • regions - کل منطقه را با رنگ مناسب رنگ می کند. این گزینه را نمی توان با آدرس های طول و عرض جغرافیایی استفاده کرد. به مثال مناطق مراجعه کنید.
  • markers - یک نقطه را روی یک منطقه نشان می دهد که رنگ و اندازه آن مقدار را نشان می دهد. به مثال نشانگرها مراجعه کنید.
width رشته '556px' عرض تجسم اگر هیچ واحدی داده نشود، واحد پیش فرض پیکسل است.
height رشته '347px' ارتفاع تجسم اگر هیچ واحدی داده نشود، واحد پیش فرض پیکسل است.
colors آرایه ای از اعداد RGB با فرمت 0xRRGGBB [0xE0FFD4، 0xA5EF63، 0x50AA00، 0x267114] گرادیان رنگ برای تخصیص به مقادیر در تجسم. شما باید حداقل دو مقدار داشته باشید. گرادیان شامل تمام مقادیر شما، به اضافه مقادیر واسطه محاسبه شده، با روشن ترین رنگ به عنوان کوچکترین مقدار و تیره ترین رنگ به عنوان بالاترین می شود.
showLegend بولی درست است، واقعی اگر درست است، یک افسانه برای نقشه نمایش دهید.
showZoomOut بولی نادرست اگر درست است، دکمه ای با برچسب مشخص شده توسط ویژگی zoomOutLabel نمایش دهید. توجه داشته باشید که این دکمه با کلیک کردن هیچ کاری انجام نمی دهد ، به جز پرتاب رویداد zoomOut . برای مدیریت بزرگنمایی، این رویداد را بگیرید و گزینه region را تغییر دهید. فقط زمانی می توانید showZoomOut را مشخص کنید که گزینه region کوچکتر از نمای جهان باشد. یکی از راه های فعال کردن بزرگنمایی رفتار گوش دادن به رویداد regionClick ، تغییر ویژگی region به منطقه مناسب و بارگذاری مجدد نقشه است.
zoomOutLabel رشته 'کوچک نمایی' برچسب برای دکمه بزرگنمایی.

مواد و روش ها

روش نوع برگشت شرح
draw(data, options) هیچ یک نقشه را ترسیم می کند. می تواند قبل از انجام ترسیم برگردد (رویداد drawingDone() را ببینید).
getSelection() آرایه ای از عناصر انتخاب پیاده سازی استاندارد getSelection() . عناصر انتخاب شده ردیف هستند. این روش فقط زمانی کار می کند که گزینه dataMode 'regions' باشد. شما فقط می توانید منطقه ای را با مقدار اختصاص داده شده انتخاب کنید.
setSelection( selection ) هیچ یک اجرای استاندارد setSelection() . یک انتخاب را به عنوان یک انتخاب ردیف در نظر می گیرد و از چندین انتخاب ردیف پشتیبانی می کند. فقط مناطق با مقادیر اختصاص داده شده را می توان انتخاب کرد.

مناسبت ها

نام شرح خواص
error هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد فعال می شود. شناسه، پیام
select

زمانی فعال می شود که کاربر روی منطقه ای با مقدار اختصاص داده شده کلیک کند. برای اطلاع از آنچه انتخاب شده است، getSelection() را فراخوانی کنید. فقط زمانی در دسترس است که گزینه dataMode روی 'regions' تنظیم شده باشد.

توجه : به دلیل محدودیت‌های خاص، اگر به صفحه مرورگر خود به‌عنوان فایل (مثلاً "file://") به جای سرور (مثلاً "http://www") دسترسی داشته باشید، رویداد select پرتاب نمی‌شود. ).

 هیچ یک
regionClick

هنگامی که روی منطقه ای کلیک می شود، تماس گرفته می شود. هم برای "regions" و هم برای dataMode "markers" کار می کند. با این حال، در حالت نشانگر، این برای کشور خاصی که در گزینه "منطقه" اختصاص داده شده است (اگر کشور خاصی در لیست قرار گرفته بود) پرتاب نمی شود.

توجه : به دلیل محدودیت‌های خاص، اگر به صفحه در مرورگر خود به‌عنوان فایل (مثلاً "file://") به جای سرور (مثلاً "http://www") دسترسی داشته باشید، رویداد regionClick پرتاب نمی‌شود. ).

 یک شی با یک ویژگی منفرد، region ، که رشته ای در قالب ISO-3166 است که منطقه کلیک شده را توصیف می کند.
zoomOut

هنگامی که دکمه کوچک نمایی کلیک شود، فراخوانی می شود. برای مدیریت بزرگنمایی، این رویداد را بگیرید و گزینه region را تغییر دهید.

توجه : به دلیل محدودیت‌های خاص، اگر به صفحه در مرورگر خود به‌عنوان فایل (مثلاً "file://") به جای سرور (مثلاً "http://www") دسترسی داشته باشید، رویداد zoomOut پرتاب نمی‌شود. ).

 هیچ یک
drawingDone زمانی که نقشه جغرافیایی طراحی شد، فراخوانی می شود. هیچ یک

سیاست داده

مکان ها توسط نقشه های گوگل کدگذاری جغرافیایی می شوند. هر داده ای که نیاز به کدگذاری جغرافیایی نداشته باشد به هیچ سروری ارسال نمی شود. لطفاً برای اطلاعات بیشتر در مورد خط‌مشی داده‌های آن‌ها ، شرایط خدمات Google Maps را ببینید.

یادداشت

به دلیل تنظیمات امنیتی Flash، این (و همه تجسم‌های مبتنی بر Flash) ممکن است هنگام دسترسی از یک مکان فایل در مرورگر (مثلاً file:///c:/webhost/myhost/myviz.html) به‌درستی کار نکند. یک URL سرور وب (به عنوان مثال، http://www.myhost.com/myviz.html). این معمولاً فقط یک مشکل آزمایشی است. همانطور که در وب سایت Macromedia توضیح داده شده است، می توانید بر این مشکل غلبه کنید.