複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました

Transcript

1. 複数ピンをまとめて表示する Yahoo! 地図用のJavaScript ライブラリを作りました
3. Yahoo Map! の積極利用を始めた背景 Google Maps の使用制限 Google Maps がクレジットカード情報の登録が必須になり、 無料での利用が 28,000pv/ 月までと仕様が変更になった。
4. 各サービスの利用制限 1 日 50,000pv と Google と比べると 50 倍以上利用が可能 サービス 無料PV 数 API キー取得 クレジットカード番号 Yahoo! Map 50,000 pv/ 日 必須 必要無し Google Map 28,000 pv/ 月 必須 登録必須 OpenStreetMap -- 未設定 必要無し
5. ピンの数が多い時に利用する Marker Clustering 地図に複数のピンを立てることについては、どのサービスでも可能ですが Google では公式に Marker Clustering という機能が提供されています
6. 今回作成した Yahoo Map Cluster 10 (C)Yahoo Japan,(C)ZENRIN
7. 使い方 JavaScript の読み込み <script src="https://map.yahooapis.jp/js/V1/jsapi?appid=[YahooMap のAPI キー]"></script> <script src="https://map.yahooapis.jp/js/V1/jsapi?appid=[YahooMap のAPI キー]"></script> <script src="https://unpkg.com/yahoo-map-cluster@latest/bundle/ymap-cluster.js"></script> <script src="https://unpkg.com/yahoo-map-cluster@latest/bundle/ymap-cluster.js"></script>
8. 使い方 もしくはnpm でインストール $ npm install yahoo $ npm install yahoo- -map map- -cluster cluster -- --save save
9. 使い方 JavaScript の記述 var var ymap ymap = = new new Y Y. .Map Map( ("map" "map") ); ; ymap ymap. .drawMap drawMap( (new new Y Y. .LatLng LatLng( (35.66572 35.66572, , 139.73100 139.73100) ), , 15 15, , Y Y. .LayerSetId LayerSetId. .NORMAL NORMAL) ); ; var var marker marker = = new new Y Y. .Marker Marker( (new new Y Y. .LatLng LatLng( (35.66572 35.66572, , 139.73100 139.73100) )) ); ; var var marker2 marker2 = = new new Y Y. .Marker Marker( (new new Y Y. .LatLng LatLng( (35.66572 35.66572, , 139.73000 139.73000) )) ); ; var var marker3 marker3 = = new new Y Y. .Marker Marker( (new new Y Y. .LatLng LatLng( (35.665 35.665, , 139.734 139.734) )) ); ; var var marker4 marker4 = = new new Y Y. .Marker Marker( (new new Y Y. .LatLng LatLng( (35.6635 35.6635, , 139.734 139.734) )) ); ; var var marker5 marker5 = = new new Y Y. .Marker Marker( (new new Y Y. .LatLng LatLng( (35.665 35.665, , 139.731 139.731) )) ); ; var var marker6 marker6 = = new new Y Y. .Marker Marker( (new new Y Y. .LatLng LatLng( (35.6642 35.6642, , 139.733 139.733) )) ); ; var var marker7 marker7 = = new new Y Y. .Marker Marker( (new new Y Y. .LatLng LatLng( (35.6635 35.6635, , 139.7328 139.7328) )) ); ; var var marker8 marker8 = = new new Y Y. .Marker Marker( (new new Y Y. .LatLng LatLng( (35.665 35.665, , 139.7343 139.7343) )) ); ; var var marker9 marker9 = = new new Y Y. .Marker Marker( (new new Y Y. .LatLng LatLng( (35.6638 35.6638, , 139.7333 139.7333) )) ); ; var var marker10 marker10 = = new new Y Y. .Marker Marker( (new new Y Y. .LatLng LatLng( (35.6628 35.6628, , 139.7333 139.7333) )) ); ; new new YmapCluster YmapCluster( (ymap ymap, , [ [marker marker, , marker2 marker2, , marker3 marker3, , marker4 marker4, , marker5 marker5, , marker6 marker6, , marker7 marker7, , marker8 marker8, , marker9 marker9, , marker10 marker10] ]) ); ;
10. 使い方 オプションの紹介 Yahoo! Map Cluster にはその他いくつかのオプションが用意されています。 オプション名 デフォルト値 説明 gridSize 60(px) クラスターの半径。この半径に含まれるピンが 同じクラスターにカテゴライズされます。 minClusterSize 2 クラスターの中のpin の最小の数。ピンが集まっ ていてもこの数以下だとクラスタリングされな い。 imagePath ./images/cluster/ クラスター画像に使用するアセットのパス injectStyle .ymap-cluster-label, .ymap-cluster-icon などクラ スターに関するクラスに対してスタイルを記述 するための関数 getClusterSize クラスターの中のピン数に応じてクラスターの 色を変更するための関数
11. アルゴリズムの解説
12. アルゴリズムの解説
13. アルゴリズムの解説 近くのクラスターの検索方法 ただの2 点間の距離ではなく地球が丸いことを考慮 2 点間のlat, lng から距離を算出（km ） R は地球の半径 6731km a a = = sin² sin²( (Δφ Δφ/ /2 2) ) + + cos φ cos φ1 1 * * cos φ cos φ2 2 * * sin² sin²( (Δλ Δλ/ /2 2) ) c c = = 2 2 * * atan2 atan2( ( √a √a, , √ √( (1 1−a −a) ) ) ) d d = = R R * * c c
14. ぜひスターお願いします！
15. ありがとうございました！