관리 메뉴

팀드모네 IT Blog

Example of an OpenLayer marker output 본문

GIS

Example of an OpenLayer marker output

남명 팀드모네 2021. 1. 20. 10:28

Hi there!

 

This is an example of an open layer marker output

 

1. Download the marker image

marker.png
0.03MB

 

2. Source Code

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script>
      function loadOlMap(){
          var iconFeature = new ol.Feature({
              geometry : new ol.geom.Point([128.82, 36.41]),
              name : "map marker",
              population : 4000,
              rainfall : 500
          });
      
          var vectorSource = new ol.source.Vector({
              features : [ iconFeature ]
          });
      
          var vectorLayer = new ol.layer.Vector({
              source : vectorSource,
              style: new ol.style.Style({
                  image: new ol.style.Icon({
                      anchor: [0.5, 0.96],
                      scale : 0.1,
                      src: './marker.png'
                  })
              })
          });
      
          var map = new ol.Map({
              layers : [ new ol.layer.Tile({source : new ol.source.OSM()}), vectorLayer],
              target : 'map',
              view : new ol.View({
                  projection: 'EPSG:4326',
                  center : [128.82, 36.41],
                  zoom : 8
              })
          });
      }
      loadOlMap();
    </script>
  </body>
</html>

 

3. Result

0 Comments
댓글쓰기 폼