Leaflet에서 만델브로 모음 보기 (2)
4796 단어 leafletMandelbrot
지금까지의 이야기
이전 이야기
갑작스럽지만, 아무런 맥락도 없고, 만델브로 집합을 그리고 싶어졌습니다.
어차피 한다면 Google Map처럼 스크롤하거나 확대하거나…라는 것을 해보자…라는 것으로, 손을 움직여 보았습니다.
그래서, 이전의 이야기에서는, 이런 구성으로 타일 화상을 만들어 보았습니다라고 하는 곳까지 했습니다.
↓이런 느낌↓
Leaflet
에서 Leaflet 는 이런 타일 이미지를 사용해 스크롤이나 확대 축소할 수 있도록(듯이) 잘 해 주는 Javascript 라이브러리입니다.
기본적으로 지도를 표시할 때와 같은 사용법으로 갈 수 있습니다만, 국토지리원의 지리원 타일 사양 에 기재가 있도록
서경 180도, 북위 약 85.0511도의 북서단을 단점으로 하는 타일을 (0,0)으로 동방향을 X정방향, 남방향을 Y정방향으로 취합니다.
라고 하는 좌표계, 비트 맵을 렌더링 하는 경우, 좌상이 원점으로, 1 픽셀=1 좌표치, 쪽이 편리 좋기 때문에, 좌표계로서 「L.CRS.Simple()」를 지정하도록 하고 있다 합니다.
setView에서(-256/2, 256/2)로 하고 있습니다만, 이것은 초기의 중심 좌표를 화상의 중심으로 하고 있다, 라고 하는 것.
좌상이 원점으로, 위 방향과 우 방향이 플러스 방향, 위도(y) 경도(x) 방향의 순서로의 지정이므로, 이러한 지정이 되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Mandelbrot set</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('map', {
crs: L.CRS.Simple
});
mymap.setView(L.latLng(-256 / 2, 256 / 2), 0);
L.tileLayer('https://masaminh.github.io/mandelbrot/tile/grayscale/{z}/{x}/{y}.png', {
maxZoom: 6
}).addTo(mymap);
</script>
</body>
</html>
완제품
완제품은 여기 .
나름대로 즐겼습니다 (웃음)
Reference
이 문제에 관하여(Leaflet에서 만델브로 모음 보기 (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/masaminh/items/69af53c86a8f9078ff4d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
에서 Leaflet 는 이런 타일 이미지를 사용해 스크롤이나 확대 축소할 수 있도록(듯이) 잘 해 주는 Javascript 라이브러리입니다.
기본적으로 지도를 표시할 때와 같은 사용법으로 갈 수 있습니다만, 국토지리원의 지리원 타일 사양 에 기재가 있도록
서경 180도, 북위 약 85.0511도의 북서단을 단점으로 하는 타일을 (0,0)으로 동방향을 X정방향, 남방향을 Y정방향으로 취합니다.
라고 하는 좌표계, 비트 맵을 렌더링 하는 경우, 좌상이 원점으로, 1 픽셀=1 좌표치, 쪽이 편리 좋기 때문에, 좌표계로서 「L.CRS.Simple()」를 지정하도록 하고 있다 합니다.
setView에서(-256/2, 256/2)로 하고 있습니다만, 이것은 초기의 중심 좌표를 화상의 중심으로 하고 있다, 라고 하는 것.
좌상이 원점으로, 위 방향과 우 방향이 플러스 방향, 위도(y) 경도(x) 방향의 순서로의 지정이므로, 이러한 지정이 되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Mandelbrot set</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('map', {
crs: L.CRS.Simple
});
mymap.setView(L.latLng(-256 / 2, 256 / 2), 0);
L.tileLayer('https://masaminh.github.io/mandelbrot/tile/grayscale/{z}/{x}/{y}.png', {
maxZoom: 6
}).addTo(mymap);
</script>
</body>
</html>
완제품
완제품은 여기 .
나름대로 즐겼습니다 (웃음)
Reference
이 문제에 관하여(Leaflet에서 만델브로 모음 보기 (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/masaminh/items/69af53c86a8f9078ff4d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Leaflet에서 만델브로 모음 보기 (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/masaminh/items/69af53c86a8f9078ff4d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
