Yahoo!map(YOLP)の最適ズーム率設定

質問

いつもお世話になっております。Windows10の環境でYOLP(Yahoo!地図)にJavaScriptで配列を利用し複数マーカーを表示出来るようにしましたが、全マーカーを表示出来るように最適ズームレベルの自動設定は可能でしょうか。配列のマーカー位置の数を別のデータから供しているため一定数ではない条件で地図を作成しているため固定ズーム値を設定すると最適ズームを手動で行わなくてはならないので、LeafletやGoogleMapでmap.fitBounds()メソッドを使うことによって最適ズームが可能なように、YOLPでそれに変わる方法があればご教示お願いいたします。
Yahoo!スタティックマップAPIでも全マーカーを表示する方法もあるのですが、この静的表示ではピンに番号をふれてもポップアップ（吹き出し）の設定やドローやズーム等の動的作業は出来そうにありません。

回答No.2

togurin

No.1です。
解決しましたでしょうか。
私も気になって少しドキュメントを読んでみました。
考えなしに回答していてすみませんでしたが、ズームレベルは1-20までで微調整は効かず、距離指定の換算になるんですね。

実際にコードを書いていないので詳しくはわかりませんが、
確かに地図の大きさ（例えばwidth:700px; height:700px）が変わると適用できない気がします。

よって、
地図の大きさは知っている、もしくは取得できるので、
地図の大きさとズームレベルを渡すと地図の縦横の距離を返す関数は作れないでしょうか。
対応表のようなデータは必要かと思いますが、この関数内で引いて換算すれば、
大体の距離がわかるのではと推測します。
- 入力：width(px), height(px), zoomLevel
- 出力：地図の横の距離([km] or [m]), 地図の縦の距離([km] or [m])
入力はもう少し情報が必要かもしれませんが。

地図の縦横の距離がわかれば、最初に回答した方法で、中心座標とそこから一番遠い座標の距離を計算し、
その距離が、先の関数で計算した範囲におさまるズームレベルを採用して、
下記のように指定すれば良いのではないでしょうか。
--
new Y.LatLng(35.64997652994234,139.72116702175174)
ymap.setZoom(zoomLevel, true, p, true);
--
(https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/#index6-2)より抜粋、一部変更

上記を行う上で重要となるのが緯度経度で示される２点間の距離の計算かと思います。
色々方法があるようで、下記サイトの方法で十分な精度がでるのではないでしょうか。
JavaScriptのコードが載っているので参考になると思います。
https://tech-blog.s-yoshiki.com/2018/05/92/

またまた見当違いならすみませんがご参考までに。

お礼

度々回答有難うございます。
２点間の距離の計算の距離計算のサイトは、以前にmap上のマーカーから座標を取得して距離計算を算出する際に見ましたがjavascript自体が素人のためどう組み込めば分からないので諦めていました。そのため距離計算の方法として、ヒュベニの公式や国土地理院の計算式を直接使わずYahoo!地図(YOLP)APIの2点間距離APIに必要座標を入れJson形式で取得していました。今回の問題でも地図の大きさギリギリの場所の場合に自作の適合表ではセンター位置の調整を考慮していなかったため納得の行かない結果が出ることがままあり、そこでYahoo!スタティックマップAPIに１度座標データを渡しhtml形式の出力値からzoom値を取得しその値を代入して地図表示させるようにしました。まあ自分だけ使う分には、APIの回数制限には程遠いと思い・・元々自分で考えてコードを書くより他力本願のコピペで済ます事が多かったので。
正直、GoogleMapAPIの時と比べYOLPを使うハウツーサイトの数も極端に少なく検索すれば公式サイトが直ぐヒットします。Yahoo! JavaScriptマップAPIも何回も見ましたが素人故理解不能の方が多く・・なんでjavascriptで説明しておきサンプルはjqueryで書いてあるんだとか・・
この最適ズームの選択に関してはご意見等を参考にゆっくり考えてみます。本当にご丁寧なご回答有り難うございました。

回答No.1

togurin

文章を読んだだけの回答でYOLPは全然知らないので見当違いならすみません。

いろいろ調べられているようなのでそのようなメソッドはないのかもしれませんね。
ただ、表示したい複数マーカーの位置座標は取れているわけですよね？
それなら座標の平均を取って、その平均座標と一番遠いマーカーを計算すれば、平均座標を中心にどれくらいのズームレベルを設定すればよいかも計算できるのではないでしょうか。GoogleMapとかだとメソッドがあるとしても内部的にはそのような事をしている気がします。
JavaScriptというより数学的な話ですが、解決しませんかね。。。

お礼

回答ありがとうございます。
>座標の平均を取って、その平均座標と一番遠いマーカーを計算すれば、平均座標を中心にどれくらいのズームレベルを設定すればよいかも計算できるのではないでしょうか。
緯度によって経度間の距離が変わることを考慮しないで（使用環境を日本に限定しているので）現在暫定的に使っている方法は、YOLPのズーム段階の５から２０段階と表示する地図（例えばwidth:700px; height:700px）の緯度経度間隔（適当ですが地図上で測定したもの、北緯に関してはマーカーの大きさを考慮する必要あり）対応表を作り、表示マーカーの緯度経度の最大間隔求めることによってズーム値を決定しています。この方法では地図の大きさが変わると適用できない等様々な問題を含んでいるので質問に及んだわけです。