openlayers 예제

이 간단한 예제는 자신의 미끄러운 맵을 배포하는 경우에 도움이 될 수 있습니다. 이 DHTML 스니핏은 OpenLayers 자바 스크립트 라이브러리를 가져와 OSM지도를 표시하는 데 사용합니다! 맵, 레이어 또는 컨트롤과 같은 대부분의 구성 요소는 변경 사항을 알리기 위해 이벤트를 트리거합니다. 예를 들어 마우스가 맵 위로 이동될 때마다 또는 피처가 벡터 레이어 등에 추가될 때마다 알림을 받을 수 있습니다. 이 예제에서는 WGS84 좌표를 사용하여 구형 Mercator 투영 OSM 맵에서 탐색할 수 있습니다. 좌표가 다른 투영에 있는 경우 Proj4js를 추가하여 재투영을 수행할 수 있습니다. 스타일은 적용할 채우기, 스트로크, 텍스트 및 이미지를 설정하는 속성이 있는 ol.style.Style 클래스로 표시됩니다. 다음 예제에서는 녹색 채우기 및 스트로크를 사용 하 여 스타일된 세계의 관리 제한 데이터 집합을 보여 줍니다. 최신 예제를 보려면 대신 전단지를 사용하십시오. 때로는 OpenLayers의 작동 방식을 파악하는 가장 빠른 방법은 예제와 소스 코드를 보는 것입니다. 더 많은 OpenLayers 정보를 여기에서 찾을 수 있습니다: 자신의 타일 이미지를 배포 하는 경우 (예를 들어, Mapnik), 그냥 아래 레이어 정의 사용: 이 예제는 원래 해리 우드에 의해 만들어진 (그리고이 페이지를 편집 하는 다른 사람). 하나의 레이어만 정의되고 URL 매개 변수(permalink) 등을 지원하지 않는 의도적으로 더 기본적입니다. 따라서 이러한 기능을 추가하는 것이 반드시 개선되는 것은 아닙니다.

사실, 이것을 더욱 간단하게 만들기 위한 아이디어가 있다면, 그것은 좋은 것입니다. 위의 예제에서는 스크립트 태그를 사용하여 openlayers.org 에서 원격으로 호스팅되는 OpenLayers 자바스크립트를 참조하는 방법을 보여 주기도 합니다. 이 접근 방식에는 장점과 단점이 있습니다. 대안은 OpenLayers를 다운로드하고 HTML과 함께 직접 호스팅하는 것입니다. 예제 http://svn.osgeo.org/metacrs/proj4js/trunk/lib/defs 먼저 참조, 작업할 폴더를 만듭니다. openlayers.org OpenLayers의 안정적인 릴리스를 다운로드 (참고 : 이것은 그 예가 기반으로하는 이전 버전 2에 대한 링크입니다), 압축을 풀고. `OpenLayers.js` 파일과 `테마` 디렉토리를 폴더의 베이스에 복사합니다. 그런 다음 다음 중 하나를 새 HTML 파일로 복사하여 브라우저에서 봅니다. 아래에서 전체 작업 예제를 찾을 수 있습니다. 새 파일을 만들고, 아래 내용을 복사하고 브라우저에서 열기: 선택 사항: 응용 프로그램이 Internet Explorer 또는 Android 4.x와 같은 이전 플랫폼에서 실행되도록 하는 경우 OpenLayers 전에 다른 스크립트를 포함해야 합니다. 자바 스크립트 라이브러리. 이 자습서의 목적을 위해, 여기 우리는 단순히 전체 라이브러리를 얻을 openlayers.org 웹 사이트를 가리킵니다.

프로덕션 환경에서는 응용 프로그램에 필요한 모듈만 포함하여 사용자 지정 버전의 라이브러리를 빌드합니다. 코드에서 TopoJSON 파일을 로드 하 고 스타일 속성을 통해 스타일을 조정 했습니다. 선과 다각형에 필요한 채우기 와 스트로크를 설정하고 점 피처에 사용되는 이미지(이 경우 원)를 설정했습니다. 이전 코드에서는 서버에 배치된 유효한 GeoJSON 파일을 가리키도록 url_to_file을 변경해야 합니다. 자바 스크립트 보안은 다른 도메인 / 포트 (일명)의 외부 URL에서 데이터 집합의 소싱을 방지 할 수 있습니다.