728x90
https://www.safemap.go.kr/dvct/openAPI.do
오픈API 소개 < 오픈API : 생활안전지도
www.safemap.go.kr
위사이트에서 API키 발급
범죄주의구간(전체) 이것을 사용할 예정
mapBox에서 뿌려주기 위에선 위 예시에서 살짝 수정이 필요
VsCode로 복붙 후 확인
주의할점은
mapboxgl.accessToken = "맵 box에서 받은 내 토큰값"
apikey: '행정안전역에서 받은 내 apiKey값',
으로 넣어주자
JSP
<!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',
serverUrl: '<c:url value="/web/getImage.do" />',
layername: 'A2SM_CRMNLHSPOT_TOT',
styles: 'A2SM_CrmnlHspot_Tot_Tot'
};
// 4. WMS 이미지 URL 생성 함수
function getWmsImageUrl(bbox, width, height) { //범죄주의 (전체)
return `\${param.serverUrl}?` +
`&bbox=\${bbox}&width=\${width}&height=\${height}`;
}
// 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>
Java
@RequestMapping(value = "/web/getImage.do", method = RequestMethod.GET)
public void getImage(
@RequestParam("bbox") String bbox,
@RequestParam("width") String width,
@RequestParam("height") String height,
HttpServletResponse response
) throws Exception {
StringBuilder sb = new StringBuilder("https://www.safemap.go.kr/openapi2/IF_0087_WMS");
sb.append("?");
sb.append(URLEncoder.encode("serviceKey", "UTF-8")).append("=").append("6Y4REHQJ-6Y4R-6Y4R-6Y4R-6Y4REHQJQU");
sb.append("&").append(URLEncoder.encode("service", "UTF-8")).append("=").append(URLEncoder.encode("WMS", "UTF-8"));
sb.append("&").append(URLEncoder.encode("version", "UTF-8")).append("=").append(URLEncoder.encode("1.1.1", "UTF-8"));
sb.append("&").append(URLEncoder.encode("request", "UTF-8")).append("=").append(URLEncoder.encode("GetMap", "UTF-8"));
sb.append("&").append(URLEncoder.encode("srs", "UTF-8")).append("=").append(URLEncoder.encode("EPSG:4326", "UTF-8"));
sb.append("&").append(URLEncoder.encode("bbox", "UTF-8")).append("=").append(URLEncoder.encode(bbox, "UTF-8"));
sb.append("&").append(URLEncoder.encode("width", "UTF-8")).append("=").append(URLEncoder.encode(width, "UTF-8"));
sb.append("&").append(URLEncoder.encode("height", "UTF-8")).append("=").append(URLEncoder.encode(height, "UTF-8"));
sb.append("&").append(URLEncoder.encode("format", "UTF-8")).append("=").append(URLEncoder.encode("image/png", "UTF-8"));
sb.append("&").append(URLEncoder.encode("transparent", "UTF-8")).append("=").append(URLEncoder.encode("TRUE", "UTF-8"));
sb.append("&").append(URLEncoder.encode("layers", "UTF-8")).append("=").append(URLEncoder.encode("A2SM_CRMNLHSPOT_TOT", "UTF-8"));
sb.append("&").append(URLEncoder.encode("styles", "UTF-8")).append("=").append(URLEncoder.encode("A2SM_CrmnlHspot_Tot_Tot", "UTF-8"));
URL url = new URL(sb.toString());
HttpURLConnection con = (HttpURLConnection) url.openConnection();
con.setRequestMethod("GET");
con.setRequestProperty("User-Agent", "Mozilla/5.0");
response.setContentType("image/png");
try (InputStream is = con.getInputStream()) {
StreamUtils.copy(is, response.getOutputStream());
response.getOutputStream().flush();
} catch (Exception e) {
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
}
}
결과 잘 된다.
빨간색 부분이 위험지역이고 총 10단계로 구분된다.
'API사용' 카테고리의 다른 글
| [Mapbox] 등시선API 기초 예시 (6) | 2025.04.25 |
|---|---|
| [Mapbox] 길찾기 API 기본 사용법 예시 (0) | 2025.04.17 |
| [Mapbox] 맵 박스 지도 위성사진으로 교체하기 (0) | 2025.03.14 |
| [Mapbox] 맵 박스 눈/비 내리는 효과 예제 (0) | 2025.03.13 |
| [Mapbox] 맵 박스 3D 건물 세우기 예제 (0) | 2025.03.13 |
