OpenLayers 3 지도 표시 기능 구현
5960 단어 OpenLayers3지도 표시
1.개발 환경 설정
OpenLayers 3 를 사용 하여 WebGIS 응용 프로그램 을 개발 하려 면 먼저 개발 환경 을 설정 해 야 합 니 다.먼저 OpenLayers 홈 페이지 에서 OpenLayers 3 의 개발 라 이브 러 리 를 가 져 와 야 합 니 다.다운로드 링크:홈 페이지열 린 후 그림 과 같이:
주의해 야 할 것 은 여기 서 두 가지 버 전 을 다운로드 하 는 것 이다.①:개발 라 이브 러 리(개발 과 디 버 깅 의 JS 라 이브 러 리 및 CSS 파일 만 포함),②:개발 라 이브 러 리,개발 라 이브 러 리 소스 코드,예시,API 등 모든 개발 자원 을 포함한다.
여기 서 나 는 첫 번 째 버 전 을 다운로드 했다.다운로드 한 후에 그림 과 같다.
2.OSM 기와 지도 표시
OpenLayers 3 API 를 기반 으로 OSM 기와 지도(즉 OpenStreeMap 의 기와 지도)를 보 여 줍 니 다.
방법
실현 사고:지도 에 대한 표 시 는 먼저 지도 용기 대상(oL.Map 류)을 만 든 다음 용기 에 그림 을 불 러 와 야 합 니 다.
실현 절차:
1.웹 페이지 를 만 드 는 데 사용 할 폴 더 를 새로 만 들 고 폴 더 에 js 폴 더 와 css 폴 더 를 새로 만 듭 니 다.먼저 앞서 다운로드 한 OpenLayers 3 의 개발 라 이브 러 리 와 스타일 파일(ol.js,ol.css)을 js 폴 더 에 복사 합 니 다.
2.폴 더 에 HTML 웹 페이지 를 새로 만 들 고 웹 페이지 의 head 태그 에 ol.js 와 ol.css 를 도입 합 니 다.
3.웹 페이지 body 에 div 를 맵 용기 로 새로 만 들 고 id 를'map'로 설정 하 며 css 설정 을 통 해 용기 의 스타일 을 설정 합 니 다.
4.코드 를 작성 하여 지도 용기 대상(ol.Map)을 만 들 고 target 매개 변 수 를 통 해 대상 용기(id 는"map"의 div)에 연결 하 며 view 매개 변 수 를 통 해 지도 보기(ol.View)를 설정 합 니 다.
구현 코드 는 다음 과 같 습 니 다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> OSM </title>
<!-- ol.css， ol.css -->
<link rel="stylesheet" href="css/ol.css" >
<script src="js/ol.js"></script>
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Map ，
var map = new ol.Map({
target: 'map', // div id
//
layers: [
//
new ol.layer.Tile({
// ， OpenStreetMap
source: new ol.source.OSM()
})
],
//
view: new ol.View({
center: [32, 113], //
zoom: 2 //
})
});
</script>
</body>
</html>1.ol.Map:지도 용기 류 는 OpenLayers 3 의 핵심 부품 으로 지 도 를 표시 하 는 데 사용 되 며,다양한 유형의 그림 층 을 불 러 올 수 있 으 며,지도 컨트롤(축척,매의 눈,지도 크기 등)과 지도 와 상호작용 하 는 기능 컨트롤 등 을 불 러 올 수 있 습 니 다.실례 화 된 지도 용기 대상 을 통 해 지 도 를 불 러 오고 target,layers,view 파 라미 터 를 설정 합 니 다.이것 은 지도 불 러 오 는 데 필수 적 인 세 가지 요소 입 니 다.
2.ol.layer.Tile:기와 그림 층 류 는 주로 기와 그림 층 을 불 러 오 는 데 사 용 됩 니 다.기와 그림 층 대상 을 예화 하여 데이터 원본(source)에 대응 하 는 기와 그림 층 을 불 러 올 수 있 습 니 다.
3.ol.source.OSM:포 장 된 OpenStreetMap 온라인 기와 서비스 데이터 의 데이터 원본 클래스 입 니 다.이 데이터 원본 대상 을 만 들 고 기와 그림 에 불 러 옵 니 다.
l.View:지도 보기 류 는 주로 지도 와 사람의 상호작용 을 제어 하 는 것 이다.예 를 들 어 확대,지도 표시 해상도 조정,회전 지도 등 이다.지도 보기 대상 을 예화 하여 지도의 중심 점(center),초기 디 스 플레이 센터(zoom)등 인 자 를 설정 합 니 다.
로드 레이 어 는 layers 매개 변 수 를 통 해 지 도 를 설정 하 는 방식 을 제외 하고 Map 도 addLayer 방법 으로 동적 로드 레이 어 대상 을 제공 합 니 다.예 를 들 어 그림 을 불 러 오 는 코드 는 다음 과 같 습 니 다.
<div id="map"></div>
<script type="text/javascript">
// Map ，
var map = new ol.Map({
target: 'map', // div id
//
layers: [],
//
view: new ol.View({
center: [32, 113], //
zoom: 2 //
})
});
// OSM
var tileLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
//
map.addLayer(tileLayer);
</script>첫 번 째 방법 은 HTML 페이지 의 body 탭 에 지 도 를 직접 불 러 오 는 것 입 니 다.이 방식 은 브 라 우 저 를 분석 할 때 순서대로 불 러 오 는 것 입 니 다.두 번 째 방법 은 html 페이지 의 head 탭 에서 자바 script 코드 를 작성 할 수 있 습 니 다.즉,OSM 지 도 를 불 러 오 는 init 함 수 를 쓰 는 것 입 니 다.그리고 웹 페이지 의 body 탭 에서 onload 방법 으로 지 도 를 불 러 오 는 init 함 수 를 호출 합 니 다.이러한 불 러 오 는 방법 은 브 라 우 저 에서 분석 할 때 먼저 자바 script 을 불 러 옵 니 다.페이지 내용 을 불 러 올 때 호출 처 에서 해당 하 는 자바 script 을 실행 하여 페이지 불 러 오 는 것 이 완료 되면 바로 지도 데 이 터 를 추가 하 는 기능 을 실현 합 니 다.
코드 는 다음 과 같 습 니 다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> OSM </title>
<!-- ol.css， ol.css -->
<link rel="stylesheet" href="css/ol.css" >
<script src="js/ol.js"></script>
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
}
</style>
<script>
function init() {
// Map ，
var map = new ol.Map({
target: 'map', // div id
//
layers: [
//
new ol.layer.Tile({
source: new ol.source.OSM() // osm
})
],
//
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenLayers 3 로 딩 상용 컨트롤 사용 방법 상세 설명지도 컨트롤 은 지도 크기 조정,전체 화면,좌표 표시 컨트롤 등 으로 우리 가 지 도 를 조작 하 는 데 편리 합 니 다.OpenLayers 3 은 지도 내 비게 이 션,비례 자,매의 눈,측정 도구 등 자주 사용 하...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
