Notice
Recent Posts
Recent Comments
Link
«   2021/04   »
일 월 화 수 목 금 토
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  
Tags more
Archives
Today
32
Total
302,264
관리 메뉴

팀드모네 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

저작자표시비영리동일조건

'GIS' 카테고리의 다른 글

CesiumJS을 사용하여 3D 건축물 세워보기  (0) 2021.03.29
CesiumJS 사용법 간단 안내  (0) 2021.03.29
Example of an OpenLayer marker output  (0) 2021.01.20
Tag
, , ,
'GIS' Related Articles more
0 Comments
댓글쓰기 폼
Prev 1 2 3 Next