このプロジェクトでは、BaiduマップのWebバージョンをオフラインで開発する必要があります。ここにあなた自身の開発プロセスと経験の要約があります。
おおよその要件は次のとおりです。各車には会社のレシーバーが装備されており、車両の座標、速度、ステアリング、その他の情報にリアルタイムでフィードバックされ、各車両の情報を受け取った後、車両の場所はバイドゥマップにリアルタイムで描画されます。作業ポイントには必ずしもネットワークがあるわけではないため、オフライン開発が必要です。
このプロセスには、3つの主要な技術的ポイントがあります。
1.オフラインAPIを取得する方法
2。オフラインのタイル図を取得する方法
3.オフラインのときにWGS座標をBaiduマップ座標に変換する方法
問題解決プロセス:
1. Baiduマップはオフラインマップをサポートしていないため、オンラインコードをオフラインコードに変更する方法を見つける必要があります。
ここで参照できます:http://my.oschina.net/smzd/blog/548538
ここにコピーをまとめました。また、デモの例に従ってオフラインデモも書きました。もちろん、オフラインはオンラインほど完璧ではありませんが、結局のところ、一部の機能はまだ使用できません。 (このバージョンはBaidu Maps API v2.0に基づいています)
使い方:
1. .png、.jpgなど、使用するタイルの画像接尾辞を決定します。 baidumap_offline_vv2_load.jsのimgextを変更します
var bdmapcfg = { 'imgext':'.jpg', //The suffix of the tile picture-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2。使用するタイルのディレクトリを決定します。デフォルトでは、baidumap_v2/ tiles/ directoryにあり、別のアドレスに変更することもできます。 baidumap_offline_vv2_load.jsでtiles_dirを変更します
3。コードを書き込むためにデモを参照してください。キーポイントは次のとおりです。
1)ロードファイルをロードするだけです
<script type = "text/javascript" src = "baidumapv2/baidumap_offline_v2_load.js"> </script>
2)CSSファイルをロードする(必要ではないと思われる)
<link rel = "styleSheet" type = "text/css" href = "../../ baiduumapv2/css/baidu_map_v2.css"/>
3)マップを配置するためのコンテナを定義し、CSSを使用して高さと幅を制御します
<div id = "map_demo"> </div>
4)JSコードを書きます
<script type = "text/javascript"> // baidu map api function var map = new bmap.map( "map_demo"); // Map Instance Map.Centerandzoom(新しいbmap.point(116.404、39.915)、8)を作成します。 //マップを初期化し、中心点座標とマップレベルを設定します//map.addcontrol(new bmap.maptypecontrol()); //マップタイプコントロールを追加して電子マップのみをオフラインでサポートすると、Satellite/3Dは//map.setCurrentCity(Beijing ")をサポートしません。 //マップによって表示されるオフラインマップの設定はサポートしません! ! map.enablescrollwheelzoom(true); //マウスホイールを開き、map.addcontrol(new bmap.navigationcontrol()); //スケーリングボタン</script>
2。タイル図を取得します
ここで参照できます:http://my.oschina.net/smzd/blog/619397
もちろん、以下などのオンラインでダウンロードツールもあります。
3. Baidu Mapが安全のために特別な治療を行ったため、受信機が受信した座標(WGS)をBaiduマップに直接配置することは偏見があります。そのWeb Service APIは座標変換APIを提供しますが、HTTPで提供される座標変換インターフェイスであるため、ネットワークから分離することはできません。ここでは、いくつかの専門知識を使用して、WGS座標をGCJに変換し、GCJ座標をBD Baidu座標に変換します。検証の精度はほぼ正確です。
パブリッククラスCoorConvertutil {// pi static double pi = 3.14159265358979324; //平面座標系への衛星楕円体座標投影の投影係数static double a = 6378245.0; //楕円体の静的二重EE = 0.00669342162296594323; // PI変換量public final final static double x_pi = 3.14159265358979324 * 3000.0 /180.0; public static double [] wgs2bd(double lat、double lon){double [] wgs2gcj = wgs2gcj(lat、lon); double [] gcj2bd = gcj2bd(wgs2gcj [0]、wgs2gcj [1]); gcj2bdを返します。 } / ** * gcj座標への座標 * @param lat * @param lon * @return * / public static double [] gcj2bd(double lat、double lon){double x = lon、y = lat; double z = math.sqrt(x * x + y * y) + 0.00002 * math.sin(y * x_pi); double theta = math.atan2(y、x) + 0.000003 * math.cos(x * x_pi); double bd_lon = z * math.cos(theta) + 0.0065; double bd_lat = z * math.sin(theta) + 0.006; new double [] {bd_lat、bd_lon}を返します。 } public static double [] bd2gcj(double lat、double lon){double x = lon -0.0065、y = lat -0.006; double z = math.sqrt(x * x + y * y)-0.00002 * math.sin(y * x_pi); double theta = math.atan2(y、x)-0.000003 * math.cos(x * x_pi); double gg_lon = z * math.cos(theta); double gg_lat = z * math.sin(theta);新しいdouble [] {gg_lat、gg_lon}を返します。 } / ** * wgs gcj座標への座標 * @param lat * @param lon * @return * / public static double [] wgs2gcj(double lat、double lon){double dlat = transformlat(lon -105.0、lat -35.0); double dlon = transformlon(lon -105.0、lat -35.0); double radlat = lat / 180.0 * pi; double magic = math.sin(radlat);魔法= 1 -ee *魔法 *魔法。 double sqrtmagic = math.sqrt(magic); dlat =(dlat * 180.0) /((a *(1 -ee)) /(magic * sqrtmagic) * pi); dlon =(dlon * 180.0) /(a / sqrtmagic * math.cos(radlat) * pi); double mglat = lat + dlat; double mglon = lon + dlon; double [] loc = {mglat、mglon}; return loc; } private static double transformlat(double lat、double lon){double ret = -100.0 + 2.0 * lat + 3.0 * lon + 0.2 * lon + 0.1 * lat * lon + 0.2 * math.sqrt(lat)); ret + =(20.0 * math.sin(6.0 * lat * pi) + 20.0 * math.sin(2.0 * lat * pi)) * 2.0 / 3.0; ret + =(20.0 * math.sin(lon * pi) + 40.0 * math.sin(lon / 3.0 * pi)) * 2.0 / 3.0; ret + =(160.0 * math.sin(lon / 12.0 * pi) + 320 * math.sin(lon * pi / 30.0)) * 2.0 / 3.0; Retを返します。 } private static double transformlon(double lat、double lon){double ret = 300.0 + lat + 2.0 * lon + 0.1 * lat + 0.1 * lon + 0.1 * math.sqrt(math.abs(lat)); ret + =(20.0 * math.sin(6.0 * lat * pi) + 20.0 * math.sin(2.0 * lat * pi)) * 2.0 / 3.0; ret + =(20.0 * math.sin(lat * pi) + 40.0 * math.sin(lat / 3.0 * pi)) * 2.0 / 3.0; ret + =(150.0 * math.sin(lat / 12.0 * pi) + 300.0 * math.sin(lat / 30.0 * pi)) * 2.0 / 3.0; Retを返します。 } / ** *学位区分とローテーション * @param lat latitude ddmm.mmmm * @param lon lon dddmm.mmmm * @return * / public static double [] dufen2du(string lat、string lon){double latd = double.parsedouble(lat.substring(0、2)); double latm = double.parsedouble(lat.substring(2)); double latnew = latd+latm/60; double lond = double.parsedouble(lon.substring(0、3)); double lonm = double.parsedouble(lon.substring(3)); double lonnew = lond+lonm/60;新しいdouble [] {latnew、lonnew}を返します。 }}最後に、プロジェクト効果のスクリーンショットをご覧ください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。