Webマップv1.0ガイド - NHN Cloud 使用ガイド

Application Service > Maps > Webマップv1.0ガイド

Maps Webマップを使用するのに必要なAPIを説明します。

API共通情報

事前準備

APIを使用するにはアプリケーションキーが必要です。
アプリケーションキーは、NHN Cloud Console上部にあるURL & Appkeyメニューで確認できます。

リクエスト共通情報

URL情報

項目	URL
マップ	https://kr1-maps.api.nhncloudservice.com/maps/js/v1.0/map.js
静的(static)マップ	https://kr1-maps.api.nhncloudservice.com/maps/js/v1.0/staticMap.js

Webマップ

1. Webマップ

JavaScript基盤のNHN Cloud Maps APIを利用して、Webブラウザにマップを表示する方法を説明します。 NHN Cloud Maps APIは、THINKWARE座標を使用します。縮約してTW座標、TW X座標、TW Y座標で表示します。メソッドでオプションのパラメータは[param]と表示します。オプションのパラメータは省略できます。

※ NHN Cloud Maps APIで使用する座標は、THINKWARE専用座標にのみ使用されます。
THINKWARE座標を経緯度座標(WGS84)に変換するには、THINKMAP.tw_Wgs84()関数を利用します。反対に経緯度座標(WGS84)をTHINKWARE座標に変換するには、THINKMAP.wgs84_Tw()関数を利用します。

主要NHN Cloud Maps API案内

NHN Cloud Maps APIの詳細な使用方法は、Thinkware API Centerを参照してください。

API名	Parameter	Returns	説明
THINKMAP.initMap(map_div_name, twX, twY, level, init_cb, arrange_type, map_type)	map_div : String		マップ入れるdivタグID マップを使用するために、最初に呼び出す必要がある初期化関数です。
	twX : Number		マップ初期化TW X座標
	twY : Number		マップ初期化TW Y座標
	level : Number		マップ初期化レベル - 一般マップ：1～13 - 航空写真：1～13
	init_cb : function()		マップ初期化後に呼び出されるコールバック関数
	arrange_type : Number		マップレイヤーソート方式 1：中央ソート方式(resize効果あり) 2：全体ローディング方式(resize効果なし) 3：右上ソート方式(resize効果あり)
	map_type : String		マップタイプ設定 'i'：一般マップ 'a'：航空写真 's'：要約マップ 'm'：モバイルマップ
THINKMAP.imageMap()			マップを一般マップに切り替えます。
THINKMAP.aerialMap()			マップを航空写真に切り替えます。
THINKMAP.setAerialHybrid(active)	active: Boolean		航空周期を表示するかどうか true：マップ上に航空周期を表示 false：マップ上に航空周期を表示しないマップ上に航空写真周期を表示するかどうかを設定します。
THINKMAP.addMapListener(event_name, func_cb)	event_name : String		マップに登録するイベント名 'movestart' - マップが動き始めた時 'move' - マップが動く時 'moveend' - マップの動きが終わった時 'zoomend' - マップの拡大、縮小が終わった時 'mouseover' - マップ上にマウスを移動させた時 'mouseout' - マップの外にマウスを移動させた時 'mousemove' - マップでマウスが動く時マップにイベントを登録します。 (マップに関連したイベント、拡大/縮小、動きなど)
	func_cb : function()		マップでイベントが発生した時に呼び出されるコールバック関数 (コールバック関数にパラメータとしてMapオブジェクトが渡されます)
THINKMAP.removeMapListener(event_name)	event_name : String		マップから削除するイベント名 'movestart' - マップが動き始めた時 'move' - マップが動く時 'moveend' - マップの動きが終わった時 'zoomend' - マップ拡大、縮小が終わった時 'mouseover' - マップ上にマウスを移動させた時 'mouseout' - マップの外にマウスを移動させた時 'mousemove' - マップでマウスが動く時マップに登録したイベントを削除します。 THINKMAP.addMapListenerメソッドに登録したevent_nameに該当するすべてのコールバック関数を削除するので注意してください。
THINKMAP.createMarker(twX, twY, width, height, iconUrl, [param])	twX : Number		Markerオブジェクト位置TW X座標 Markerオブジェクトを作成します。作成したMarkerオブジェクトをマップに表示するには、THINKMAP.addMarkerメソッドでマップにMarkerオブジェクトを追加する必要があります。
	twY : Number		Markerオブジェクト位置TW Y座標
	width : Number		Markerイメージの幅
	height : Number		Markerイメージの高さ
	iconURL : String		MarkerイメージのURL
	param : String		Markerオブジェクトのユーザー変数
THINKMAP.addMarker(marker)	marker : Marker		マップに追加する対象MarkerオブジェクトマップにMarkerオブジェクトを追加します。
THINKMAP.featureDrawing(draw_type, style, func_cb)	draw_type : String		ユーザーが描写するFeatureオブジェクトタイプ 'lineDraw'：線 'polygonDraw'：多角形 'regularPolygonDraw'：形が決まっている多角形ユーザーがマップにマウスでPolyline、Polygonを直接描写できる描写モードに切り替えます。マップをクリックした時、オブジェクトの描写が始まり、マウスをダブルクリックすると描写が完了します。描写完了時、コールバック関数に描写したFeatureオブジェクトを渡します。
	style : Object		Polygon, Polylineのスタイルを指定するためのObject strokeColor：線の色 - 'red', '#fff123' strokeWidth：線の太さ - 10 strokeOpacity：線の透明度 fillColor：塗りつぶしの色 fillOpacity：塗りつぶしの透明度 strokeDashstyle：線のスタイル dot：· · · · · · dash: - - - - - - dashdot：- · - · - · - longdashdot:ㅡ·ㅡ·ㅡ solid：実線
	func_cb : function()		ユーザーがマップをダブルクリックして Featureオブジェクトの描写が完了した時に呼び出されるコールバック関数
THINKMAP.featureDrawingCancel()			マップにユーザーがマウスでPolyline、Polygonを直接描写できる描写モードを終了します。
THINKMAP.tw_Wgs84(twX, twY)	twX：Number	coord：Object 変換されたWGS84座標 - coord.curx：WGS84 X座標 - coord.cury：WGS84 Y座標	変換するTW X座標 TW座標をWGS84座標に変換します。
	twY : Number		変換するTW Y座標
THINKMAP.wgs84_Tw(wgs_lon, wgs_lat)	wgs_lon：Number	coord：Object 変換されたTW座標 - coord.curx：TW X座標 - coord.cury：TW Y座標	変換するWGS84経度座標 WGS84座標をTW座標に変換します。
	wgs_lat : Number		変換するWGS84緯度座標

NHN Cloud Maps APIの使用

// マップを使用するためのjsファイルを宣言します。
<script type="text/javascript" src="https://kr1-maps.api.nhncloudservice.com/maps/js/v1.0/map.js"></script>
<script>
    // マップを使用するための認証を進行します。
    Map.authentification("appKey");
</script>

//マップを入れるDIVを作成します。
<div id="div_map"></div>
<script type="text/javascript">

    //宣言したDIVにマップを表示します。
    THINKMAP.initMap("div_map", 165406, 500198, 12, init, 2, 'i');

    // マップinit後、コールバック関数が実行されます。
    function init(){
        alert('init!');
    }
</script>

マップモードの変更

<script type="text/javascript">
    //マップを一般マップに切り替え
    THINKMAP.imageMap();

    //マップを航空写真に切り替え
    THINKMAP.aerialMap();

    //マップ上に航空周期を表示するかどうかを設定
    THINKMAP.setAerialHybrid(active);
</script>

マップにイベントを登録

<script type="text/javascript">
    //マップにmoveイベントを登録する。
    THINKMAP.addMapListener('move', mapEvent_cb);

    //マップイベント発生時のコールバック関数
    function mapEvent_cb(map){
        console.log("event callback!");
    }
</script>

マップのイベントを削除

<script type="text/javascript">
    //マップからmoveイベントを削除する。
    THINKMAP.removeMapListener('move');
</script>

マップマーカーの追加

<script type="text/javascript">
    //マップのマーカーオブジェクトを初期化する。
    var marker = null;
    function createMarker(){
        if(!marker){
            //マーカーオブジェクトを作成する。
            marker = THINKMAP.createMarker(163670, 526934, 47, 46, '../img/img.png', 'my_marker');
            //マーカーをマップに追加する。
            THINKMAP.addMarker(marker);
            console.log('id : ' + marker._feature_id + ', param : ' + marker._param);
        }
    }
</script>

マップ描写モードに切り替え

<script type="text/javascript">
    //マップを描写モードに切り替える。
    var style = {
        strokeColor: '#fff123',
        strokeWidth: 5,
        strokeDashstyle: 'solid',       
        strokeOpacity: 0.8,
        fillColor: 'blue',
        fillopacity: 1
    };

    THINKMAP.featureDrawing("lineDraw", style, drawEvent_cb);

    function drawEvent_cb(){
        alert("描写モードに切り替え！");
    }
</script>

マップ描写モードの終了

<script type="text/javascript">
    //マップ描写モードを終了する。
    THINKMAP.featureDrawingCancel();
</script>

TW座標をWGS座標に変換

<script type="text/javascript">
    var wgs;

    // TW座標をWGS座標に変換する。
    wgs = THINKMAP.tw_Wgs84(165406, 500198);

    console.log(wgs.curx);
    console.log(wgs.cury);
</script>

WGS座標をTW座標に変換

<script type="text/javascript">
    var tw;

    // WGS座標をTW座標に変換する。
    wgs = THINKMAP.wgs84_Tw(127.28976653131843, 37.56515136725675);

    console.log(tw.curx);
    console.log(tw.cury);
</script>

2. 静的(static)マップ

NHN Cloud Maps API静的(static)マップ使用

// 静的(static)マップを使用するためのjsファイルを宣言します。
<script type="text/javascript" src="https://kr1-maps.api.nhncloudservice.com/maps/js/v1.0/staticMap.js"></script>

// マップを入れるIMGを作成します。
<img id='staticMapImg' alt="" src="">

<script>

    // 静的(static)マップを使用するための認証およびパラメータを渡します。    
    StaticMap.authentification('staticMapImg',"appkey",'x=157423&y=266836&width=970&height=300&level=10&maptype=i&mx=158323&my=266836&txt=');

</script>

名前	タイプ	必須かどうか	説明
x	Integer	必須	マップ中心のX座標
y	Integer	必須	マップ中心のY座標
mx	Integer	必須	マーカーのX座標
my	Integer	必須	マーカーのY座標
width	Integer	任意	マップの幅未入力時は基本600px
height	Integer	任意	マップの高さ未入力時は基本600px
imgurl	String	任意	マーカーイメージURL 未入力時は基本マーカーを使用
level	Integer	任意	マップレベル未入力時は基本10
maptype	String	任意	マップタイプ未入力時は基本一般マップ
label	String	任意	ラベルの内容

3. モバイルWebマップ

Android/iOS WebViewで使用できるハイブリッド型のアプリを開発する時、NHN Cloud Maps APIを利用し、JavaScript基盤のWebマップと同じAPIで使用できます。 APIの詳細は、1. Webマップを参照してください。

NHN Cloud Maps APIをMobileで使用

<!DOCTYPE html>
<html>
    <head>
        // モバイル端末に合わせてviewportを設定します。
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

        <style>
            body {
                margin: 0;
            }

            #div_map {
                position: absolute;
                width: 100%;
                height: 100%;
            }
        </style>

        // マップを使用するためのjsファイルを宣言します。
        <script type="text/javascript" src="https://kr1-maps.api.nhncloudservice.com/maps/js/v1.0/map.js"></script>
        <script>
            // マップを使用するための認証を進行します。
            Map.authentification("appKey");
        </script>
    </head>

    <body>
        //マップを入れるDIVを作成します。
        <div id="div_map"></div>
        <script type="text/javascript">

            //宣言したDIVにマップを表示します。(モバイルマップタイプの'm'を宣言します。)
            THINKMAP.initMap("div_map", 165406, 500198, 12, init, 2, 'm');

            // マップinit後、コールバック関数が実行されます。
            function init(){
                alert('init!');
            }
        </script>
    </body>

</html>