카카오 맵 행정구역 나누기

행정구역 json 데이터를 통해 카카오 지도에 표시한다.
카카오맵 api 사용 방법 생략

패키지 설치

• 카카오맵 sdk 다운

yarn add react-kakao-maps-sdk

행정구역 json 데이터 확인

데이터 다운

{
  "type": "FeatureCollection",
  "bbox": [
    124.7893155286271, 33.172610584346295, 130.96524575425667, 38.54255349620522
  ],
  "features": [
     {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.54880989370014, 38.301950820518755],
            [128.5600921732829, 38.25735515107489],
            ....
          ]
        ]
      },
      "properties": {
        "CTPRVN_CD": "42",
        "CTP_ENG_NM": "Gangwon-do",
        "CTP_KOR_NM": "강원도"
      }
    },
    ....
  ],
}

코드

import React, { useEffect, useState } from "react";
import { Map, Polygon } from "react-kakao-maps-sdk";
import dataJson from "./SIDO_MAP_2022.json";

let globalColor = [
  "#7F5A83",
  "#2E9CCA",
  "#D90429",
  "#5A3921",
  "#89ABE3",
  "#aa9030",
  "#A3628B",
  "#6A0572",
  "#F95700",
  "#1e7d74",
  "#3A89C9",
  "#194440",
  "#D00000",
  "#FF61A6",
  "#5C2751",
  "#00798C",
  "#5ce433",
  "#FFD523",
  "#7B2C3F",
  "#ADBDFF",
];

const KakaoMap = () => {
  const [geoList, setGeoList] = useState([]);

  useEffect(() => {
    const { features } = dataJson;

    const data = [];

    for (let item of features) {
      const { geometry, properties } = item;
      const { CTP_KOR_NM } = properties;
      const { coordinates } = geometry;

      const pathList = [];
      for (let areaList of coordinates) {
        const path = [];
        for (let area of areaList) {
          path.push({
            lng: area[0],
            lat: area[1],
          });
        }
        pathList.push(path);
      }

      data.push({
        name: CTP_KOR_NM,
        path: pathList,
        isHover: false,
        key: Math.random(),
      });
    }
    setGeoList(data);
  }, []);

  return (
    <div className="w-[100vw] h-[100vh] mx-auto   rounded-md">
      <Map // 지도를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: 35.90701,
          lng: 127.570667,
        }}
        className="w-full h-full rounded-md"
        level={12} // 지도의 확대 레벨
      >
        {geoList.map((item, index) => {
          const { key, path, isHover } = item;
          const color = globalColor[index];
          return (
            <Polygon
              key={key}
              path={path}
              strokeWeight={2} // 선의 두께입니다
              strokeColor={color} // 선의 색깔입니다
              strokeOpacity={0.8} // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
              strokeStyle={"solid"} // 선의 스타일입니다
              fillColor={isHover ? color : "#ffffff"} // 채우기 색깔입니다
              fillOpacity={0.4} // 채우기 불투명도 입니다
              onMouseover={() => { // 마우스 오버시 색 변경
                setGeoList((pre) =>
                  pre.map((area) => {
                    if (area.key === key) {
                      return {
                        ...area,
                        isHover: true,
                      };
                    }
                    return area;
                  })
                );
              }}
              onMouseout={() => { // 색 다시 reset
                setGeoList((pre) =>
                  pre.map((area) => {
                    if (area.key === key) {
                      return {
                        ...area,
                        isHover: false,
                      };
                    }
                    return area;
                  })
                );
              }}
            />
          );
        })}
      </Map>
    </div>
  );
};

export default KakaoMap;

지도 생성하기
다각형에 이벤트 등록