[Javascript] 일본 지도를 시마무라 단위로 착색하고 싶은 사람

6891 단어 AmChartsJavaScript일본 지도

입문


일본지도, 일본지도, 일본지도, 일본지도, 일본지도, 일본지도, 일본지도...그런 생각이 드세요?
  • 괜찮은 응답 이동
  • 도도부현은 물론 시가촌 단위까지 염색하고 싶다
  • 라이센스가 너무 느려서 사업도 하고 싶다
    • 도도부현 단위의 착색은 비교적 많은 프로그램 라이브러리가 있지만 시가촌 단위로 처리할 수 있는 프로그램 라이브러리를 찾지 못했다.
    이에 따라 Amchart4의매핑 기능를 이용하여 시정촌 단위까지 착색할 수 있는 일본 지도를 만들었다.

    프레젠테이션



    Code


    할 수 있는 일


    자세한 내용은 저장소 설명를 참조하십시오.
  • 정적 JSON 파일 읽기 및 열 매핑
  • 임의의 끝점에서 데이터를 동적으로 읽고 열 매핑

    • 데이터 형식


    아래의 예에서 보듯이 "id"에서 도도부현 또는 시가촌 이름을 읽고 "value"에서 수치를 입력하는 JSON 형식을 가시화할 수 있다.
    부여"id"의 형식 일람은 여기에서 확인할 수 있다.
    또한 실제 읽은 데이터의 예는 여기 에서 확인할 수 있다.

    일전


    EX: japan_data.json 
    [
    {
        "id": "北海道",
        "value": 88
    },
        {
        "id": "青森県",
        "value": 12
    },
]

    사용 방법


    자세한 내용은 저장소 설명를 참조하십시오.

    개발용

    git clone https://github.com/older4/ammap-testing.git
npm install
npm run serve
    위에서 읽은 모델 데이터의 프레젠테이션 페이지가 시작됩니다.
  • 주소: http://localhost:8080
  • 개체 데이터: ./src/assets/mockup_data/
  • 환경 변수: .env/dev.js

    • 모든 페이지에 포함 (프로덕션)


    우선 ./.env/prd.js 에서 적당한 환경 변수를 설정한다.
    EX: .env/prd.js 
    export default {
    MODE: "dynamic_param",
    API_ENDPOINT: "http://example.com/api/",
    MAP_DATA: "http://example.com/data/mapdata/"
}
    다음은 다음과 같이 임의의 대상 페이지에 설정된 id="chartdiv"의div 요소와 dynamic_param 모드에서 사용된 ID입니다.
    EX: target.html 
    <!DOCTYPE html>
<html>
<body>
    <!-- #################### insert start ################## -->
    <div id="chartdiv" data-paramid="XXXXXXX">
    <script src="http://example.com/heatmap/index.js"></script>
    <!-- #################### insert end ################## -->
</body>
</html>

    의존/라이센스 등


    지도 기능: Amchart4

  • 개요: 도표 전체에 대한 기능 제공, 지도 기능 이번 이용
  • 라이센스: 로고가 있지만 무료거의 무제한(상용 사용 포함) 이용
    • 이 기계는 응답 응답과 이동을 지원하고 각종 편리한 방법을 마련하여 각양각색의 응용을 할 수 있다.

    지도 데이터: 지우치 성장

  • 개요: TopoJson 형식으로 일본 각지의 지도 데이터 제공
  • 라이센스: CC BY 4.0

    • 이 코드:older4/ammap-japan-choropleth

  • 개요: 상기 라이브러리 등을 활용하여 시마무라 단위로 일본 전국을 착색한 JS 코드
  • 라이센스: GPL-3.0

    • 기타


    가시화 일본 지도의 프로그램 라이브러리 총결산


    설치할 때도 다른 프로그램 라이브러리를 조사했기 때문에 총괄적으로 여기에 있다.

    Japan Map ( jQuery plugin )

  • 개요: jQuery plugin으로 일본 지도를 처리할 수 있습니다.
  • 응답: △본고장이 아니다
  • 최소단위: 도도부현
  • 라이센스: MIT

    • Jmap jQuery plugin

  • 개요: jQueryplugin은 간단한 현대 디자인의 일본 지도를 처리할 수 있다.
  • 응답: ○
  • 최소단위: 도도부현
  • 라이센스: MIT

    • Google GeoChart

  • 개요: 구글 차트의 기능 중 하나로 제공.
  • 응답: △(별도 처리 필요)
  • 최소단위: 도도부현
  • 라이센스: FREE

    • Special Thanks to Anamorphosis Networks Co., Ltd.



    Anamorphosis Networks 회사은'누구나 사용할 수 있는 AI'를 모토로 사업을 전개한다OpenPoC.고객의 청력을 바탕으로 대학과의 공동 연구 등을 통해 신기술을 개발하는 교토 벤처기업이다.
    이번 인코딩 제작과 프로그램 라이브러리 조사는 Anamorphosis Networks 회사 실습에서 진행되었고 이러한 공개 허가를 받았습니다!!정말 감사합니다.
    SVN 빠른 사용 설명서
    UITableView 행 캐시

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage