Skip to main content

Openlayers Tutorial - Membuat Peta Pertama


Tulisan ini dibuat pada tanggal 26 Februari 2019.


1.1       Inisialisasi


Install node (https://nodejs.org/).

Buat folder baru (contoh : new-project)
kemudian jalankan
npm init
dan jawab beberapa pertanyaan yang diajukan.

Maka hasilnya adalah sebuah file package.json dengan isi sbb:
{
  "name": "new-project",
  "version": "1.0.0",
  "description": "tes development openlayers",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "sujana",
  "license": "ISC"
}

1.2       install module openlayers


npm install ol
maka hasilnya akan terbentuk file package-lock.json dan folder-folder dependency yang terdaftar pada file tersebut
secara default module openlayers yang diinstall adalah versi terakhir dirilis (saat ini versi 5.3.1).
Kemudian aplikasi kita akan dikemas (bundle) menggunakan Parcel (https://parceljs.org/).  Oleh karena itu kita install terlebih dahulu.
npm install --save-dev parcel-bundler

1.3       Membuat peta pertama


buat index.js
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
 
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

Catatan:
1.       pada index.js perintah pemanggilan unit dapat juga dilakukan dengan cara sebagai berikut:
import 'ol/ol.css';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

2.       center : [0, 0]
Bukan menunjukkan koordinat geografis (Long, Lat), tapi menunjukkan koordinat bidang datar (x,y) dengan proyeksi mengikuti layer OSM yaitu EPSG 3857.
Sehingga untuk kota Bogor menjadi:
center: [11885983, -735116]



1.4       Tambahkan Script untuk memanggil Aplikasi

tambahkan pada  file package.json

{
  "name": "new-project",
  "version": "1.0.0",
  "description": "tes development openlayers",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "sujana",
  "license": "ISC",
  "dependencies": {
    "ol": "^5.3.1"
  },
  "devDependencies": {
    "parcel-bundler": "^1.11.0"
  },
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "parcel index.html",
  "build": "parcel build --public-url . index.html"
}
 
}

Untuk memanggil aplikasi, jalankan perintah:
npm start

Kemudian lihat pada browser http://localhost:1234

Sekian tutorial Openlayers dalam membuat peta pertama..


Labels:

Comments

Post a Comment

Popular posts from this blog

Indeks Peta RBI

Jika rekan-rekan sekalian membutuhkan index Rupa Bumi Indonesia yang dikeluarkan oleh Badan Informasi Geospasial (sebelumnya bernama BAKOSURTANAL) dalam format shapefile (shp) bisa di download di link di bawah.. File tersebut berisi index RBI dalam skala 1 : 25.000, skala 1 : 50.000 dan skala 1 : 250.000 untuk seluruh Indonesia dengan sistem proyeksi geografis WGS 1984. LINK :  INDEKS PETA RBI
Post a Comment
Read more

Sistem Penomoran Indeks Peta Rupabumi Indonesia

Menurut PP 10 Tahun 2000 disebutkan bahwa peta adalah suatu gambaran dari unsur-unsur alam dan atau buatan manusia, yang berada di atas maupun di bawah permukaan bumi yang digambarkan pada suatu bidang datar dengan skala tertentu. Salah satu peta yang dihasilkan oleh BADAN INFORMASI GEOSPASIAL adalah Peta Rupabumi Indonesia (RBI). Peta RBI yang dihasilkan oleh BADAN INFORMASI GEOSPASIAL  meliputi skala 1:1.000.000, 1:250.000, 1:100.000, 1:50.000, 1:25.000 dan 1:10.000 dimana seluruh wilayah Indonesia dibagi ke dalam grid-grid ukuran peta yang sistematis. Semua lembar peta tepat antara satu dengan lainnya, demikian pula ukurannya sama untuk setiap lembar. Ukuran lembar peta tergantung dari skala peta yang dibuat. Ukuran lembar Peta Rupabumi Indonesia mengacu pada sistem grid UTM seperti pada Tabel 1. Tabel 1. Ukuran lembar peta berdasarkan skala peta Skala Peta Ukuran Lintang (L) Ukuran Bujur (B) 1 : 1.000.000 4 ° 6 ° 1 : 500.000 2 ° 3 ° 1 : 250.000 1 ° 1 ° 30’ 1 : 10...
Post a Comment
Read more

Peta Deformasi Insar (London)

Berikut ini adalah peta data yang menarik dari deformasi tanah (penurunan, peningkatan) di pusat kota London, berdasarkan data dari 2011-2017 dan dikalibrasi ulang untuk menunjukkan perubahan tahunan rata-rata - apakah naik (biru = 2mm / tahun ke atas) atau tenggelam (red = 2mm) / tahun ke bawah). Data diperoleh dari 150 citra penginderaan jauh yang ditangkap oleh satelit TerraSAR-X dan sumber-sumber InSAR (Interferometric Synthetic Aperture Radar) lainnya. Itu diproses menggunakan di TRE ALTAMIRA di Milan, Italia, menggunakan teknik yang disebut Permanent Scatterer Interferometry. Segala macam pola menarik muncul dari peta. Yang paling jelas adalah garis merah yang membentang di tengah - terowongan Crossrail di pusat kota London. Proyek ini kemungkinan menghasilkan sedikit penurunan dalam level yang terlihat, meskipun grouting kompensasi ekstensif bertujuan untuk meminimalkan perubahan. Garis merah lainnya menunjukkan proyek ducting listrik dan proyek utilitas / infrastruktu...
Post a Comment
Read more