Setting up everything to use openlayers

8752 단어 mappingopenlayersWebGISGISGIS

이제부터는 바로 전 포스팅 마지막에 언급했듯이 html, css, js를 각각 분리해서 관리할 것이다.

Section 6: Introduction to Openlayers

Setting up everything to use openlayers

파일들을 쪼개보자.
여기로 들어가서 라이브러리들을 다운받은 후, assets 라는 폴더를 만들어 이 안에 다운 받은 ol폴더를 넣었다.
다운 받은 경로로 index.html에서 경로도 잡았다.

위 그림은 이번 포스팅에서 다루는 파일들 경로들이다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Importing openlayers library-->
    <link rel="stylesheet" href="./assets/ol/ol.css" type="text/css">
    <script src="./assets/ol/ol.js"></script>

    <!-- Custom style file-->
    <link rel="stylesheet" href="./style.css" type="text/css">
    <title>Open layers basic</title>
</head>
<body>
    <h1> OpenLayers map</h1>
    <div id="mymap" class="map"></div>

    <script src="./main.js"></script>

</body>
</html>

main.js

// Define a view
var view = new ol.View({
    center: ol.proj.fromLonLat([37.41, 8.82]), //Coordinates of center
    zoom: 14 //zoom level of map
});

// Define basemap
// OSB - OpenStreetMap
var OSMBaseMap = new ol.layer.Tile({
    source: new ol.source.OSM()
});

// Define array of layers
var layerArray = [OSMBaseMap];

// Define our map
var map = new ol.Map({
    target:'mymap',
    layers: layerArray,
    view: view
});

style.css

.map {
    height: 600px;
    width: 100%;
  }

사실 메모장으로 코딩할 것이 아니라면 파일을 쪼개서 관리하는 것이 훨씬 낫다.

또 참고로 main.js 에서 마지막 부분에 map을 구성하는 부분이 target(source), layers, view로 구성된 것을 볼 수 있다.

또한 layers의 경우에도 layer가 많아지면 복잡해지기 때문에, 변수로 담았다.

사실 코드만 보고 별도로 언급없이 공부하는 것이 젤 좋긴하다.
openlayer.org에 접속하여서 ol.view 와 ol.source.osm을 검색해서 소스를 참고하자!

아 그리고 오탈자 조심하자.
나는 main.js파트에서 layers를 layer로 쳐서 지도가 안나와서 한 1시간 정도 해맨거 같다.
이렇게 간단한 것인데 시간을 버리네

C언어:2일차 (1차원 배열~
☀️ 알고리즘:: 퀵 정렬(Quicksort)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage