OpenLayer 3

Openlayer merupakan salah satu library javascript opensource yang dikhususkan untuk membaca web service standar OGC dan lainnya. Selain Openlayer masih ada pilihan lainnya. Kita mencoba terlebih dahulu membuka mapproxy kita menggunakan openlayer 3. Pertama yang harus kita lakukan adalah mengunduh library openlayer 3 atau kita bisa saja memanggilnya langsung di script html yang kita buat. Kita akan menggunakan xyz resource dari Openlayer 3 yang akan membuka WMTS Restfull dari mapproxy kita yang sudah kita lakukan instalasi sebelumnya. Contoh dari penggunaan openlayer 3 XYZ adalah sebagai berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>XYZ</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.19.0/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/v3.19.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: 'http://192.168.1.253:8080/wmts/agm/webmercator/{z}/{x}/{y}.png'
            })
          })
        ],
        view: new ol.View({
          center: ol.proj.transform([118.015776, -2.6000285], 'EPSG:4326', 'EPSG:3857'),
          zoom: 5
        })
      });
    </script>
  </body>
</html>

results matching ""

    No results matching ""