오버레이 SVG 패턴 적용하기
오버레이 SVG 패턴 적용하기
스타일 옵션과 shapeElement 접근을 통해 SVG 패턴을 적용하는 예제입니다.
- Namespaces
-
Classes
- Base
- naver.maps.LatLng
- naver.maps.LatLngBounds
- naver.maps.Point
- naver.maps.PointBounds
- naver.maps.Size
- KVO
- naver.maps.KVO
- naver.maps.KVOArray
- Map
- naver.maps.Map
- Tile
- naver.maps.CanvasTile
- naver.maps.ImageTile
- naver.maps.Tile
- MapType
- naver.maps.CanvasMapType
- naver.maps.ImageMapType
- naver.maps.MapTypeRegistry
- preset
- naver.maps.NaverMapTypeOptions
- naver.maps.NaverStyleMapTypeOptions
- Control
- naver.maps.CustomControl
- Naver Controls
- naver.maps.LogoControl
- naver.maps.MapDataControl
- naver.maps.MapTypeControl
- naver.maps.ScaleControl
- naver.maps.ZoomControl
- Layer
- naver.maps.Layer
- Naver Layers
- naver.maps.BicycleLayer
- naver.maps.CadastralLayer
- naver.maps.LabelLayer
- naver.maps.StreetLayer
- naver.maps.TrafficLayer
- Data Layer
- naver.maps.Data
- naver.maps.Feature
- naver.maps.Geometry
- Overlay
- naver.maps.OverlayView
- Naver Overlays
- naver.maps.Circle
- naver.maps.Ellipse
- naver.maps.GroundOverlay
- naver.maps.InfoWindow
- naver.maps.Marker
- naver.maps.Polygon
- naver.maps.Polyline
- naver.maps.Rectangle
- Submodule: drawing
- naver.maps.drawing.DrawingManager
- Submodule: panorama
- naver.maps.AroundControl
- naver.maps.FlightSpot
- naver.maps.Panorama
- Submodule: visualization
- naver.maps.visualization.DotMap
- naver.maps.visualization.HeatMap
- naver.maps.visualization.WeightedLocation
- Interfaces
-
Statics
- Event
- naver.maps.Event
- Projection
- naver.maps.EPSG3857
- naver.maps.UTMK
- naver.maps.UTMK_NAVER
- Submodule: geocoder
- naver.maps.Service
- naver.maps.TransCoord
- Extended Projection
- naver.maps.EPSG3857Coord
- naver.maps.TM128
- naver.maps.TM128Coord
- naver.maps.UTMK_NAVERCoord
- naver.maps.UTMKCoord
- Submodule: visualization
- naver.maps.visualization.SpectrumStyle
-
Types
- any
- array
- ArrayOfBounds
- ArrayOfBoundsLiteral
- ArrayOfCoords
- ArrayOfCoordsLiteral
- boolean
- Bounds
- BoundsLiteral
- Coord
- CoordLiteral
- DOMEvent
- DOMEventListener
- DrawingOverlay
- FitBoundsOptions
- function
- GeoJSON
- GPX
- HTMLElement
- ImageData
- isDefaultMapType
- KeyboardEvent
- KML
- KVOArrayOfCoords
- LatLngBoundsLiteral
- LatLngBoundsObjectLiteral
- LatLngLiteral
- LatLngObjectLiteral
- LayerRegistry
- limitMaxBounds
- limitMinZoom
- MapEventListener
- MapType
- margin
- null
- number
- object
- OVERLAY_TYPE_ORDER_IN_HOUSE
- padding
- PointArrayLiteral
- PointBoundsArrayLiteral
- PointBoundsLiteral
- PointBoundsObjectLiteral
- PointerEvent
- PointLiteral
- PointObjectLiteral
- SizeArrayLiteral
- SizeLiteral
- SizeObjectLiteral
- string
- TransitionOptions
- Modules
-
Tutorials
- 개요
- NAVER 지도 API v3 특징
- 축약형 표현
- KVO 디자인
- 서브 모듈 시스템
- 시작하기
- 클라이언트 아이디 발급
- Hello, World
- TypeScript 사용
- 지도
- 언어 설정하기
- 지도 생성 및 기본 동작
- 지도 유형
- 지도 투영과 좌표 체계
- 이벤트
- DOM 이벤트
- KVO 상태 변경 알림
- UI 이벤트
- 컨트롤
- 지도 컨트롤
- 사용자 정의 컨트롤
- 데이터 표시
- 레이어
- 데이터 레이어
- 데이터 시각화
- 오버레이
- 오버레이 개요
- 마커
- 정보 창
- 도형
- 지상 오버레이
- 사용자 정의 오버레이
- 파노라마
- 파노라마 생성 및 기본 동작
- 좌표-주소-변환
- Geocoder를 활용한 주소와 좌표 검색 API 호출하기
- Geocoder를 활용한 좌표 변환
- 그리기 도구
- 그리기 도구 생성 및 기본 동작
- 마이그레이션
- 마이그레이션: v4에서 v5로 전환하기
- 신규 타일 지도
- 신규 맵 타일 소개
- 사용자 정의 OverlayType 설정
-
Examples
- Digest
- 예제 모아보기
- 지도
- 지도 기본 예제
- 지도 옵션 조정하기
- 지도 유형 설정하기
- 지도 좌표 경계 확인하기
- 지도 이동하기
- HTML5 Geolocation API 활용하기
- 전체 화면 지도와 미니 맵
- 지도 영역 제한하기
- 언어 설정하기
- 지도 유형
- 지도의 타일 인덱스 그리드 지도 유형
- 이미지 타일 지도 유형
- 사용자 지도 유형 만들기
- 투영법과 타일의 크기를 동적으로 변경하기
- 두 가지의 지도 유형을 함께 사용하기
- Starcraft The Hunters 지도 유형
- NAVER 그린팩토리 지도 유형
- 캔버스 타일 지도 유형
- 프로젝션
- 좌표를 픽셀로 변환하기
- 타일 INDEX 확인하기
- 이벤트
- 이벤트 기본 예제
- KVO 이벤트
- 오버레이의 이벤트
- 컨트롤
- 지도 컨트롤 추가/제거하기
- 지도 컨트롤 스타일 설정하기
- 지도 컨트롤 위치 설정하기
- 사용자 정의 컨트롤 만들기
- 레이어
- 네이버 자전거 레이어 표시하기
- 사용자 정의 OverlayType 설정하기
- 네이버 지적도 레이어 표시하기
- 네이버 실시간 교통상황 레이어 표시하기
- 네이버 거리뷰 레이어 표시하기
- 네이버 라벨 레이어 표시하기
- 사용자 정의 레이어 만들기
- 데이터 레이어
- GeoJSON 데이터 레이어 표시하기
- 행정구역 GeoJSON 데이터 레이어 표시하기
- KML 데이터 레이어 표시하기
- GPX 데이터 레이어 표시하기
- 데이터 레이어 autoStyle 활용
- 데이터 레이어 SVG 패턴 적용하기
- 시각화
- 열지도 시각화하기
- 점지도 시각화하기
- 열지도 스펙트럼 변경하기
- 열지도 가중치 사용하기
- 점지도 가중치 사용하기
- 오버레이
- 사용자 정의 오버레이 표시하기
- 마커
- 마커 표시하기
- 이미지 아이콘 사용하기
- 스프라이트 이미지 아이콘 사용하기
- HTML 아이콘 사용하기
- 심벌 아이콘 사용하기
- 이미지 아이콘 레티나 대응하기
- 스프라이트 이미지 아이콘 레티나 대응하기
- 클릭한 지점으로 마커 옮기기
- 애니메이션 마커 표시하기
- 마커 클러스터화하기
- 겹침 마커 처리하기
- 마커 인터랙션 영역 설정하기
- 보이는 지도 영역의 마커만 표시하기
- 다수의 마커에 이벤트 핸들러 사용하기
- 정보 창
- 정보 창 표시하기
- 정보 창 옵션 사용하기
- 도형
- 사각형, 원, 타원 그리기
- 폴리곤, 폴리라인 그리기
- 구멍 난 폴리곤 그리기
- 폴리곤 옵션 사용하기
- 폴리라인 옵션 사용하기
- 오버레이 SVG 패턴 적용하기
- 폴리라인에 화살표 표시하기
- 클릭한 지점 폴리곤 연결하기
- 클릭한 지점 폴리라인 연결하기
- 멀티 폴리라인 성능 테스트
- 폴리라인, 폴리곤의 거리/면적 재기
- 지상 오버레이
- 지상 오버레이 표시하기
- 파노라마
- 파노라마 기본 예제
- 파노라마 크기 변경하기
- 파노라마 이벤트 처리하기
- 파노라마 마커 표시하기
- 파노라마 요약 정보 레이어 표시하기
- 파노라마 줌 컨트롤 표시하기
- 거리/항공뷰 전환하기
- 지도에 항공뷰 아이콘 표시하기
- 지도와 파노라마 연동하기
- 좌표-주소-변환
- 좌표계 변환하기
- 주소와 좌표 검색 API 사용하기
- 그리기 도구
- 그리기 도구 기본 예제
- 그리기 도구 옵션 활용하기
- 오버레이 데이터 추출 및 복원하기