개시하다

나는 모두가 텔레비전에서 도쿄돔의 크기를 들은 적이 있다고 생각한다.
하지만 도쿄돔을 본 적이 없는 사람에게는 이해가 되지 않는 표현이다.
그래서 도쿄돔 크기를 실감할 수 있는 지도 내용을 만들었다.

뭘 했어?

도쿄돔(대략)과 같은 크기의 다각형으로 현재 소재지를 덮는 지도 내용을 제작했다.

프레젠테이션 페이지
차등(항공사진 var.)
이 내용에서 버튼을 누르면 현재 소재지를 중심으로 다각형을 싣는 웹 지도를 만들 수 있다.
(※ 스마트폰으로 열람 권장, 컴퓨터도 가능)

도쿄 돔형의 다각형에 대해서.

도쿄돔형의 다각형 크기는 도쿄돔을 원형으로 하고 공식 사이트의 정보에 따라 계산된다.
크기 설정에 사용되는 매개 변수는 다음과 같다.

반경: 122m(※ 건축면적 기준)

최고 부분의 높이: 56.190m

어떻게

지도 그리기 라이브러리Mapbox GL JS와 지리 공간 데이터 분석 라이브러리Turf.js를 사용하여 실현한다.
그러나 현재 소재지를 취득할 때 맵boxGL JS 방법을 사용하지 않고 Geolocation API를 사용한다.

소스 코드

본고는 다음과 같은 두 가지 기능의 각본을 총결하였다.

현재 위치의 위도 경도 전달 기능을 수신

교부된 위도 경도를 중심으로 도쿄돔 다각형을 띤 지도를 생성하는 기능

참고로 내용 전체의 원본 코드는 다음 페이지에 실립니다.
https://bl.ocks.org/Hirosaji/ed4443946608237eaddcf1207b3776cb
https://gist.github.com/Hirosaji/ed4443946608237eaddcf1207b3776cb

1. 소재지의 위도 경도를 받아들이는 기능

버튼을 클릭하여 위도 경도가 2인 경우 이벤트를 클릭하여 Geolocation API를 호출합니다.함수의 스크립트입니다.

var successCallBackFunction, errorCallBackFunction;

// API option
var option = {
    enableHighAccuracy: true, // Whether to use GPS to improve accuracy
    maximumAge: 0, // To hold cache ms
    timeout: 30000 // Timeout ms
};

/**
* Processing at the end of HTML loading
*/
window.addEventListener('load', function () {

    // Check whether API is enabled/disabled
    if (!navigator.geolocation) {
        alert('Geolocation API is disabled');
        return;
    }

    // Set button to get position info from API
    document.getElementById('button_id').addEventListener('click', function () {
    //　API call
        navigator.geolocation.getCurrentPosition(successCallBackFunction, errorCallBackFunction, option);
    }, false);
}, false);

/**
* Callback func at successful getting position info
*/
successCallBackFunction = function (position) {
    var lng = position.coords.longitude;
    var lat = position.coords.latitude;
    // Pass lng & lat to creating polygon function (for 2.)
    latlng2polygon(lng, lat);
};

/**
* Callback func at faild getting position info
*/
errorCallBackFunction = function (positionError) {
    alert(positionError.code + ': ' + positionError.message);
};

참조 링크

Geolocation API에서 현재 위치를 가져와 Google 지도에 표시하는 방법 - 느슨한 세대 프로그래머의 비망록

2.획득한 위도경도를 중심으로 도쿄돔의 다각형을 띤 지도를 생성하는 기능

Truf. 위도 경도를 중심으로 하는 도쿄 돔형 다각형을 포획한다.이것은 js에서 생성되어 Mapbox 지도에 놓인 스크립트입니다.

function latlng2polygon(lng, lat) {

    mapboxgl.accessToken = 'Your token';
    var center = [lng, lat];
    var radius = 0.122;
    var precision = 0.001525;
    var epsilon = 0.0001;

    // Create new Mapbox object
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v9',
        center: center,
        zoom: 16,
        pitch: 60
    });

    /**
    * Create Tokyo Dome Polygon using Turf.js
    */
    var grid = turf.hexGrid(turf.bbox(turf.circle(center, radius)), precision);

    // Calculate parameters of each element in turf circular bbox
    var dome = turf.featureCollection(grid.features.map(function (feature) {
        var point = turf.centroid(feature);
        var distance = turf.distance(center, point);
        if (distance > radius) { return; }

        // sphere r^2 = x^2 + y^2 + z^2
        // therefore z = Math.sqrt(r^2 - x^2 - y^2)
        //             = Math.sqrt(r^2 - (x^2 + y^2))
        // but distance^2 = x^2 + y^2
        // so z = Math.sqrt(r^2 - distance^2)
        var z = Math.sqrt(Math.pow(radius, 2) - Math.pow(distance, 2));
        var normHeight = 56.190 / 122; // to normalize height
        z = isNaN(z) ? 0 : z * normHeight;

        // Adapt parameters to Tokyo dome polygon data
        return turf.feature(feature.geometry, {
            base_height: z * 1000, // adopt z / m from z / km
            height: (z * 1000) + (distance * 1000 + epsilon) * 0.1
        });
    }).filter(function (feature) { return feature; }));

    // add Tokyo Dome polygon Layer on Mapbox
    map.on('load', function () {
        map.addSource('dome', {
            type: 'geojson',
            data: dome
        });

        map.addLayer({
            id: 'dome',
            type: 'fill-extrusion',
            source: 'dome',
            paint: {
                'fill-extrusion-color': 'red',
                'fill-extrusion-base': {
                    type: 'identity',
                    property: 'base_height'
                },
                'fill-extrusion-height': {
                    type: 'identity',
                    property: 'height'
                },
                'fill-extrusion-opacity': 0.5
            }
        });
    });
};

참조 링크

Add dome in Mapbox GL JS using a hex grid and polygon extrusions - Andrew Harvey’s Block

끝말

이 기사에는 도쿄돔의 크기를 시각화한 지도 내용을 소개하고, 요점을 담은 각본을 리뷰로 첨부했다.
지도과 라이브러리는 조합에 따라 다양한 표현을 할 수 있어 즐거워요.
특히 맵boxGL JS는 3D 표현이 가능한 웹GL을 사용한 프로그램 라이브러리에서 다양한 표현을 할 수 있어 유명하다.
MapboxGL JS를 모르시는 분들은 꼭 가보세요공식 Examples.
이런 표현 방식의 넓이에 대해 나는 엔지니어라면 누구나 흥분할 것이라고 생각한다.
또 터프야.js는 지리 공간에서 수치 계산과 데이터 분석을 할 때 빠질 수 없는 프로그램 라이브러리입니다.
아직 참고 사이트가 적지만 앞으로 풍부한 웹 지도를 만들고 싶은 사람은 기억해도 손해는 없을 것이다.
이상, 여러분은 반드시 자신만의 새로운 지도를 만들어 보세요.