Cesiumの地図上のマウスイベント処理で、ひたすら3次メッシュを表示する

#目的
基本的な操作である、マウス操作によるイベント処理について実装します。

## 最終成果物の外観
![fig1.png](https://qiita-image-store.s3.amazonaws.com/0/53918/71670a42-1154-7fb4-f1db-4a4d0b0ef7ea.png)


マウスカーソル付近に、緯度経度とメッシュコードが表示されます。
クリックすると、コンソールログに緯度経度とメッシュコードが出力されます。

## 公開先
　http://jsdo.it/tkama/QHvx

エラー表示がなされる場合が在りますが、実行ボタンを押下して頂ければ動作します。。。


# 地図上にマウスイベントリスナーの設置
Cesiumのチュートリアルにマウスやキーボードのイベントリスナーの設置についての記載があります。
[Custom Camera mouse/keyboard events](https://cesiumjs.org/tutorials/Camera-Tutorial/#custom-camera-mousekeyboard-events)

サンプルコードも公開されています。
https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html&label=Showcases


## マウスの移動イベント発生時の座標取得
マウスカーソルの位置を取得し、地球上にカーソルがあるか、ある場合はその緯度経度を取得する処理です。


```js
/*
* マウス移動のイベントリスナーを設置
*/
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(
    function(movement) {
        var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
        //マウスが地球上にあることを判定
        if (cartesian) {
            //位置情報を管理するオブジェクトcartographicを取得
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            //緯度経度を小数点5桁で取得
            var lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
            var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);


        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE
);
``` 

## 左クリックのイベント発生時の座標取得

チュートリアルにあるように、イベントをMOUSE_MOVEからLEFT_DOWNにイベント種別を切り替える事で実現可能であると思いましたが、エラーが出てしまい座標の取得が出来ませんでした。

下記のサイトに、Canvasに対してクリックイベントのリスナーを設置する方法で動きました。
http://www.phpmind.com/blog/2015/11/cesiumjs-how-to-get-longitude-and-latitude-on-click/

```js
/*
 * Click event 
 */
viewer.canvas.addEventListener('click',
    function(e) {
        var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY);
        var ellipsoid = viewer.scene.globe.ellipsoid;
        var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
        if (cartesian) {
            //位置情報を管理するオブジェクトcartographicを取得
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            //緯度経度を小数点5桁で取得
            var lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
            var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
            
        }
    }, false
);
```

## 緯度経度から3次メッシュを計算する関数
メッシュコードの基本的な仕様を元に、変換関数を作成しました。

```js
/**
 *  3次メッシュを算出する関数
 * @param  <Number>  lon (required) 経度 122度以上154度未満
 * @param  <Number>  lat (required) 緯度 20度以上46度未満
 * @return <Number>
 **/
function lonlat2jmesh(lon, lat) {

    if (lat >= 20 && lat < 46 && lon >= 122 && lon < 154) {

        var p = Math.floor(lat * 60 / 40);
        var a = (lat * 60) % 40;
        var q = Math.floor(a / 5);
        var b = a % 5;
        var r = Math.floor(b * 60 / 30);

        var u = Math.floor(lon - 100);
        var f = lon - 100 - u;
        var v = Math.floor((f * 3600) / (7 * 60 + 30));
        var g = (f * 3600) % (7 * 60 + 30);
        var w = Math.floor(g / 45);

        var jmesh = p + "" + u + "" + q + "" + v + "" + r + "" + w;
        return jmesh;
    } else {
        return null;
    }
}
```
マウスの移動、左クリックのイベント発生時に、緯度経度を取得し、3次メッシュの値を求めることで、目的を達成することが出来ました。