Open Layers

نسخه جاری v6.5.0

کتابخانه Open Layers مبتنی بر JavaScript بوده و open-source است. این کتابخانه برای ارائه نقشه‌های تعاملی با تمامی اجزاء جهت توسعه، در صفحات وب استفاده می‌شود.

شروع سریع

برای شروع نیاز به داشتن توکن پارسی‌مپ و بکارگیری سرویس استایل نقشه است. در ادامه دو روش بکارگیری نقشه بر اساس افزوده شدن اسکریپت و یا ماژول شرح داده می‌شود.

CDN پارسی‌مپ

افزودن فایل‌های کتابخانه

فایل‌های JavaScript و CSS زیر را در تگ head فایل HTML اضافه کنید.

<script src="https://cdn.parsimap.ir/third-party/ol/v6.5.0/ol.js"></script>
<link
  href="https://cdn.parsimap.ir/third-party/ol/v6.5.0/ol.css"
  rel="stylesheet"
/>

افزودن نقشه به وب سایت

کد زیر را در تگ body فایل HTML قرار دهید.

<div id="map" style="width: 400px; height: 300px"></div>
<script>
  function loadStyle(style, key, callback) {
    fetch("https://api.parsimap.ir/styles/" + style + "?key=" + key)
      .then((response) => response.json())
      .then((json) => {
        const composite = json.sources.composite;
        callback(false, {
          url: composite.tiles[0],
          attributions: composite.attribution,
        });
      })
      .catch(callback(true, null));
  }

  loadStyle("parsimap-streets-v11-raster", "PMI_MAP_TOKEN", (error, source) => {
      if (!error) {
        const map = new ol.Map({
          target: "map",
          layers: [
            new ol.layer.Tile({
              source: new ol.source.XYZ(source),
            }),
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([51.41, 35.7575]),
            zoom: 8,
          }),
        });
      }
    }
  );
</script>

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

ماژول Node.js

دستورالعمل‌های زیر فرض بر این می‌گیرند که پروژه بر اساس یکی از تکنولوژی‌های یکپارچه‌سازی ماژول‌‎های JavaScript، پیکربندی شده باشد.

نصب پکیج npm

npm install ol --save

وارد کردن ماژول نقشه

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

در کدایجاد نقشه خصوصیت target در سازنده کلاس Map را برابر id المنتی که درون صفحه HTML مدنظر است، قرار دهید.

import "ol/ol.css";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import XYZ from "ol/source/XYZ";
import * as proj from "ol/proj";

function loadStyle(style, key, callback) {
  fetch("https://api.parsimap.ir/styles/" + style + "?key=" + key)
    .then((response) => response.json())
    .then((json) => {
      const composite = json.sources.composite;
      callback(false, {
        url: composite.tiles[0],
        attributions: composite.attribution,
      });
    })
    .catch(callback(true, null));
}

loadStyle("parsimap-streets-v11-raster", "PMI_MAP_TOKEN", (error, source) => {
  if (!error) {
    const map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new XYZ(source),
        }),
      ],
      view: new View({
        center: proj.fromLonLat([51.41, 35.7575]),
        zoom: 9,
      }),
    });
  }
});

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