Le projet nécessite que la version Web de la carte Baidu soit développée hors ligne. Voici un résumé de votre propre processus de développement et de votre expérience.
L'exigence approximative est: chaque voiture est équipée d'un récepteur de l'entreprise, qui fera une rétroaction aux coordonnées du véhicule, à la vitesse, à la direction et à d'autres informations en temps réel, et après avoir reçu les informations de chaque véhicule, l'emplacement du véhicule est dessiné sur la carte Baidu en temps réel. Les points de travail n'ont pas nécessairement des réseaux, donc un développement hors ligne est requis.
Il y a trois principaux points techniques dans ce processus:
1. Comment obtenir une API hors ligne
2. Comment obtenir des diagrammes de carreaux hors ligne
3. Comment convertir les coordonnées WGS en coordonnées de la carte Baidu lorsqu'il est hors ligne
Processus de résolution des problèmes:
1. Étant donné que Baidu Maps ne prend pas en charge les cartes hors ligne, nous devons trouver un moyen de modifier le code en ligne en code hors ligne.
Ici, vous pouvez vous référer à: http://my.oschina.net/smzd/blog/548538
J'ai compilé une copie ici, et j'ai également écrit une démo hors ligne selon la démo d'exemple. Bien sûr, hors ligne ne peut être aussi parfait qu'en ligne, après tout, certaines fonctions sont toujours inutilisables. (Cette version est basée sur l'API Baidu Maps V2.0)
Comment utiliser:
1. Déterminez le suffixe d'image de la tuile que vous utilisez, comme .png, .jpg. Modifier imgext dans baiduMap_offline_v2_load.js
var bdmapcfg = {'imgext': '. jpg', // le suffixe de l'image des carreaux ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2. Déterminez le répertoire de la tuile que vous utilisez. Par défaut, il se trouve dans le répertoire BaiduMap_V2 / Tiles, et vous pouvez également le modifier en une autre adresse. Modifier les tiles_dir dans baidumap_offline_v2_load.js
3. Reportez-vous à Demo pour écrire du code, les points clés sont les suivants:
1) Chargez simplement le fichier de chargement
<script type = "text / javascript" src = "baidumapv2 / baidumap_offline_v2_load.js"> </ script>
2) Chargez le fichier CSS (il ne semble pas nécessaire)
<link rel = "Stylesheet" type = "text / css" href = "../../ baiduumapv2 / css / baidu_map_v2.css" />
3) Définissez un conteneur pour placer la carte et utiliser CSS pour contrôler la hauteur et la largeur
<div id = "map_demo"> </ div>
4) Écrivez le code JS
<script type = "text / javascript"> // baidu map api function var map = new bmap.map ("map_demo"); // Créer une instance de carte map.CenterandZoom (new BMAP.point (116.404, 39.915), 8); // Initialisez la carte, définissez les coordonnées du point central et le niveau de carte //map.addControl(New BMAP.MAPTYPECONTROL ()); // ajouter le contrôle du type de carte pour prendre en charge uniquement les cartes électroniques hors ligne, et Satellite / 3D ne prend pas en charge //map.setCurrentCity("beijing "); // Définir les cartes hors ligne affichées par la carte ne prennent pas en charge! ! map.enablesCrollWeelZoom (true); // Ouvrez la roue de la souris à Zoom Map.AddControl (new BMAP.NavigationControl ()); // Bouton de mise à l'échelle </cript>2. Obtenez le diagramme des carreaux
Ici, vous pouvez vous référer à: http://my.oschina.net/smzd/blog/619397
Bien sûr, il existe également des outils de téléchargement en ligne, tels que: téléchargeur de carte électronique polyvalente
3. Il est biaisé de placer directement les coordonnées (WGS) reçues par le récepteur dans la carte Baidu, car la carte Baidu a fait des traitements spéciaux pour la sécurité. Son API de service Web fournit une API de conversion de coordonnées, mais il s'agit d'une interface de conversion de coordonnées fournie dans HTTP, de sorte qu'elle ne peut toujours pas être séparée du réseau. Ici, nous utilisons des connaissances professionnelles pour convertir les coordonnées WGS en GCJ, puis pour convertir les coordonnées GCJ en coordonnées BD Baidu. La précision de vérification est presque précise.
classe publique CoorConvertUtil {// Pi Double Pi statique = 3.14159265358979324; // Facteur de projection de la projection des coordonnées des ellipsoïdes satellites au système de coordonnées planes statique double a = 6378245.0; // Excentricité de l'ellipsoïde Double EE statique = 0,00669342162296594323; // Pi Montant de conversion public final statique 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]); retour gcj2bd; } / ** * GCJ Coordonnées aux coordonnées de Baidu * @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; return 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); return new double [] {gg_lat, gg_lon}; } / ** * Les coordonnées WGS vers GCJ coordonnent * @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); Magic = 1 - EE * Magic * Magic; double sqrtmagic = math.sqrt (magie); 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 * lon + 0,1 * lat * lon + 0,2 * 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 (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; return ret; } private static double transformlon (double lat, double lon) {double ret = 300,0 + lat + 2.0 * lon + 0,1 * lat * lat + 0,1 * lat * 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; return ret; } / ** * Division de diplôme et rotation * @param lat latitude ddmm.mmmm * @param lon longitude 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; return new double [] {LatNew, Lonnew}; }}Enfin, regardez la capture d'écran de l'effet du projet:
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.