Drawing Library (Polygon) dimscreen기능은 웹에서는 지원하지 않나요?

지도/로컬 API
#1

안드로이드와 ios SDK 에서 dimscreen 기능을 봤습니다.
혹시 웹에는 따로 기능이 구현안되는 것인지 궁금합니다

#2

웹에서는 해당 기능을 제공하고 있지 않습니다.

#3

@lailaa
혹시 질문 글 수정전에, 지도 위에 특정 영역만 보이고 나머지는 dimmed된것처럼 보이는 것을 여쭤본 글 맞을까요? ㅎㅎ 예시 사진과 함께 ㅎㅎ

해당 기능은 직접적으로 API로 제공하진 않습니다.

다만

<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);    

// 다각형 객체를 구성할 좌표배열입니다 - 시계반대방향
var path = [
	new kakao.maps.LatLng(38.616870, 124.615995),
	new kakao.maps.LatLng(33.190945, 124.615995),
	new kakao.maps.LatLng(33.190945, 131.872233),
	new kakao.maps.LatLng(38.616870, 131.872233)
];

var hole = [
    new kakao.maps.LatLng(33.4506262491095, 126.56997323165163),
	new kakao.maps.LatLng(33.45029422800042, 126.57042659659218),
	new kakao.maps.LatLng(33.45032339792896, 126.5710395101452),
	new kakao.maps.LatLng(33.450622037218295, 126.57136070280123),
	new kakao.maps.LatLng(33.450964416902046, 126.57129448564594),
	new kakao.maps.LatLng(33.4510527150534, 126.57075627706975)
];


// 다각형을 생성하고 지도에 표시합니다
var polygon = new kakao.maps.Polygon({
	map: map,
    path: [path, hole], // 좌표 배열의 배열로 하나의 다각형을 표시할 수 있습니다
    strokeWeight: 2,
    strokeColor: '#aaa',
    strokeOpacity: 0.8,
    fillColor: '#eee',
    fillOpacity: 0.7 
});
</script>

위 코드를
https://apis.map.kakao.com/web/sample/donut/

이 페이지의 “직접해보기” 기능을 통해 삽입해 보면, 원하시는 기능을 구현할 수 있을 것 같습니다.

폴리곤의 hole을 이용하는 것으로, dimmed 영역은 적당히 큰(대한민국을 덮을수 있는 크기나 아니면 좀 작은거) 영역으로 폴리곤을 덮고, 그 안에 hole로 원하는 영역을 뚫어내면 됩니다.

다만 성능상의 이슈가 있을 수도 있으니 한번 테스트를 해보시는게 좋을 것 같습니다.

1개의 좋아요