ساعت پشتیبانی: 8 الی 16 روزهای کاری (گفتگوی آنلاین)
نوشتن یک نظر

اوپن لایر (OpenLayers)

OpenLayers، کتابخانه JavaScript قدرتمند متن باز است که برای نمایش نقشه ها در صفحات Web مورد استفاده قرار می گیرد. کتابخانه OpenLayers، در نسخه‏ های ۱، ۲، ۳ و ۴ ارایه شده است.

نمایش نقشه پارسی جو با استفاده از اوپن لایر بسیار ساده است. با توجه به ورژن اوپن لایر مورد نظر، راهنمای آن را در ادامه مطالعه نمایید.

نحوه نمایش نقشه پارسی جو با استفاده از openlayers 4.x

نمایش نقشه پارسی جو با استفاده از OpenLayers بسیار ساده است.  در ادامه نحوه انتشار نقشه پارسی جو با استفاده از OpenLayers شرح داده شده است.

گام اول: آماده سازی صفحه:

برای استفاده از Openlayer ابتدا باید فایل Style و JavaScript کتابخانه را در تگ head ارجاع داد:

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

سپس یک div با یک Id مشخص را به تگ body اضافه می‌کنیم. div مورد نظر باید از ارتفاع مشخصی برخوردار باشد که به سادگی به صورت زیر تعریف میگردد:

<div id="map" class="map" style="width: 100%; height: 700px;"></div>

پس از انجام مقدمات اکنون می‌توان یک نقشه را با تنظیمات دلخواه در div تعریف شده نمایش داد.

گام دوم: فراخوانی نقشه:

به وسیله کد زیر که در تگ script قرار می گیرد نقشه را فراخوانی می کنیم

      // Declare a Tile layer with a parsijoomap source
	  var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.XYZ({
              attributions: 'Parsijoo Map',
			    url: 'https://developers.parsijoo.ir/web-service/v1/map/?type=tile&x={x}&y={y}&z={z}&apikey=627973149c2041b184e31259821d1306'
			})
          })
        ],
		// Create a View, set it center (latitude and longitude) and zoom level
        view: new ol.View({
		  center: ol.proj.fromLonLat([51.39215,35.70135]),
          zoom: 14
        })
      });

 توجه: در بخش "apikey=" به جای متن مشخص شده کلیدapi  دریافتی از پارسی جو را وارد نمایید. (راهنمای دریافت API Key)

 توجه: در صورت عدم استفاده از API Key اختصاصی خود، ممکن است نمایش نقشه در وب سایت شما با اختلال مواجه شود.


 توجه: [(center: ol.proj.fromLonLat([51.39215,35.70135 => در این بخش مختصات مرکز نمایش نقشه وارد می شود.


نتیجه نهایی به صورت زیر می باشد:

 
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      // Declare a Tile layer with a parsijoomap source
    var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.XYZ({
              attributions: 'Parsijoo Map',
          url: 'https://developers.parsijoo.ir/web-service/v1/map/?type=tile&x={x}&y={y}&z={z}&apikey=627973149c2041b184e31259821d1306'
      })
          })
        ],
    // Create a View, set it center (latitude and longitude) and zoom level
        view: new ol.View({
      center: ol.proj.fromLonLat([51.39215,35.70135]),
          zoom: 14
        })
      });
    </script>
  </body>
</html>
 

اضافه کردن مارکر

نحوه نمایش نقشه پارسی جو با استفاده از openlayers 3.x

نمایش نقشه پارسی جو با استفاده از OpenLayers بسیار ساده است.  در ادامه نحوه انتشار نقشه پارسی جو با استفاده از OpenLayers شرح داده شده است.

گام اول: آماده سازی صفحه:

برای استفاده از Openlayers ابتدا باید فایل Style و JavaScript کتابخانه را در تگ head ارجاع داد:

	<link rel="stylesheet" href="https://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.0.0/build/ol.js"></script>

سپس یک div با یک Id مشخص را به تگ body اضافه می‌کنیم. div مورد نظر باید از ارتفاع مشخصی برخوردار باشد که به سادگی به صورت زیر تعریف میگردد:

<div id="map" class="map" style="width: 100%; height: 700px;"></div>

پس از انجام مقدمات اکنون می‌توان یک نقشه را با تنظیمات دلخواه در div تعریف شده نمایش داد.

گام دوم: فراخوانی نقشه:

به وسیله کد زیر که در تگ script قرار می گیرد نقشه را فراخوانی می کنیم

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://developers.parsijoo.ir/web-service/v1/map/?type=tile&x={x}&y={y}&z={z}' +
            '&apikey=627973149c2041b184e31259821d1306'
      })
    })
  ],
  view: new ol.View({
     center: ol.proj.transform([51.39215,35.70135], 'EPSG:4326', 'EPSG:3857'),
          zoom: 12
  })
});

 توجه: در بخش "apikey=" به جای متن مشخص شده کلیدapi  دریافتی از پارسی جو را وارد نمایید. (راهنمای دریافت API Key)

 توجه: در صورت عدم استفاده از API Key اختصاصی خود، ممکن است نمایش نقشه در وب سایت شما با اختلال مواجه شود.


 توجه: (' center: ol.proj.transform([51.39215,35.70135], 'EPSG:4326', 'EPSG:3857 => در این بخش مختصات مرکز نمایش نقشه وارد می شود.


نتیجه نهایی به صورت زیر می باشد:

 
<html>
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.0.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://developers.parsijoo.ir/web-service/v1/map/?type=tile&x={x}&y={y}&z={z}' +
            '&apikey=627973149c2041b184e31259821d1306'
      })
    })
  ],
  view: new ol.View({
     center: ol.proj.transform([51.39215,35.70135], 'EPSG:4326', 'EPSG:3857'),
          zoom: 12
  })
});
    </script>
  </body>
</html>
 

اضافه کردن مارکر

محتوای آموزشی انتشار نقشه پارسی جو در openlayers 2.x در حال تکمیل می باشد.

نظری بنویسید...
ورود با
یا ارسال به عنوان یک مهمان
افراد در بحث:
Loading comment... The comment will be refreshed after 00:00.
We use cookies to improve our website. By continuing to use this website, you are giving consent to cookies being used. More details…