728x90
https://www.safemap.go.kr/dvct/openAPI.do
오픈API 소개 < 오픈API : 생활안전지도
www.safemap.go.kr
위사이트에서 API키 발급
범죄주의구간(전체) 이것을 사용할 예정
mapBox에서 뿌려주기 위에선 위 예시에서 살짝 수정이 필요
VsCode로 복붙 후 확인
주의할점은
mapboxgl.accessToken = "맵 box에서 받은 내 토큰값"
apikey: '행정안전역에서 받은 내 apiKey값',
으로 넣어주자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox + 범죄주의구간 WMS (최적화)</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// 1. Mapbox 액세스 토큰 설정
mapboxgl.accessToken ='yourToken';
// 2. 지도 생성
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [126.735901, 37.348980],
zoom: 13,
projection: 'globe'
});
// 3. WMS 정보
const param = {
id: 'crime-image-layer',
sourceId: 'crime-image-source',
apikey: '행정안전역에서 받은 apiKey',
layername: 'A2SM_CRMNLHSPOT_TOT',
styles: 'A2SM_CrmnlHspot_Tot_Tot'
};
// 4. WMS 이미지 URL 생성 함수
function getWmsImageUrl(bbox, width, height) {
return `${param.serverUrl}?service=WMS&version=1.1.1&request=GetMap` +
`&apikey=${param.apikey}&layers=${param.layername}&styles=${param.styles}` +
`&bbox=${bbox}&width=${width}&height=${height}&srs=EPSG:4326&format=image/png&transparent=true`;
}
// 5. WMS 이미지 업데이트 함수
function updateWmsImageLayer() {
const bounds = map.getBounds();
const sw = bounds.getSouthWest();
const ne = bounds.getNorthEast();
const bbox = `${sw.lng},${sw.lat},${ne.lng},${ne.lat}`;
const width = map.getCanvas().width;
const height = map.getCanvas().height;
const imageUrl = getWmsImageUrl(bbox, width, height);
console.log(' WMS Image URL:', imageUrl);
const coordinates = [
[sw.lng, ne.lat], // 좌상
[ne.lng, ne.lat], // 우상
[ne.lng, sw.lat], // 우하
[sw.lng, sw.lat] // 좌하
];
if (map.getSource(param.sourceId)) {
map.getSource(param.sourceId).updateImage({
url: imageUrl,
coordinates: coordinates
});
} else {
map.addSource(param.sourceId, {
type: 'image',
url: imageUrl,
coordinates: coordinates
});
map.addLayer({
id: param.id,
type: 'raster',
source: param.sourceId,
paint: {
'raster-opacity': 1 // 필요시 조절 가능
}
});
// 6. WMS 레이어를 도로 위에 표시되도록 최상단으로 이동
const allLayers = map.getStyle().layers;
const lastLayerId = allLayers[allLayers.length - 1].id;
map.moveLayer(param.id, lastLayerId); // 최상단으로 이동
}
}
// 7. 초기 로딩 및 지도 이벤트에 따른 갱신 처리
map.on('load', () => {
updateWmsImageLayer();
map.on('moveend', updateWmsImageLayer);
map.on('zoomend', updateWmsImageLayer);
});
</script>
</body>
</html>
결과 왼쪽 아래 맵박스로 표시되어 있는데 잘 된다.
빨간색 부분이 위험지역이고 총 10단계로 구분된다.
'API사용' 카테고리의 다른 글
| [Mapbox] 한국 지적도 geoJSON파일 만들기 (0) | 2025.04.03 |
|---|---|
| [Mapbox] 맵 박스 지도 위성사진으로 교체하기 (0) | 2025.03.14 |
| [Mapbox] 맵 박스 눈/비 내리는 효과 예제 (0) | 2025.03.13 |
| [Mapbox] 맵 박스 3D 건물 세우기 예제 (0) | 2025.03.13 |
| [Mapbox] 맵 박스 기본 사용법 및 셋팅하기 (0) | 2025.03.13 |
