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

Convert Mapinfo Data to Shapefile

MapInfo has two file types: MapInfo data files. These are the files that you directly work with in MapInfo. A dataset consists of multiple files and comprises at least a *.TAB and *.DAT file, but usually a *.TAB, *.DAT, *.MAP and *.ID file. This format is also called the MapInfo TAB format. Alternatively MapInfo data can come in MapInfo Interchange Format. This is data that has been explicitly exported in MapInfo. Data in this format comes as a single *.MIF file (containing the data), or as as set of a *.MIF and a *.MID file (the first containing the data, the second symbology). This format is also called the MapInfo MIF format. On the ArcGIS side we will be happy to use Shapefiles – we can easily convert them to/from Geodatabases if required. 1. Start QGIS 2. Load your source file: Go to Layer > Add Vector Layer. Browse for your input file (TAB or MIF or Shapefile). Select the input file and load it into QGIS: 3. QGIS automatically reads TAB, MIF and Shapefiles, so it s...
Post a Comment
Read more