El proyecto requiere que la versión web del mapa de Baidu se desarrolle fuera de línea. Aquí hay un resumen de su propio proceso y experiencia de desarrollo.
El requisito aproximado es: cada automóvil está equipado con un receptor de la compañía, que retroalimentará las coordenadas del vehículo, la velocidad, la dirección y otra información en tiempo real, y después de recibir la información de cada vehículo, la ubicación del vehículo se dibuja en el mapa de Baidu en tiempo real. Los puntos de trabajo no necesariamente tienen redes, por lo que se requiere desarrollo fuera de línea.
Hay tres puntos técnicos principales en este proceso:
1. Cómo obtener API fuera de línea
2. Cómo obtener diagramas de baldosas fuera de línea
3. Cómo convertir las coordenadas de WGS a las coordenadas del mapa de Baidu cuando fuera de línea
Proceso de resolución de problemas:
1. Dado que Baidu Maps no admite mapas fuera de línea, necesitamos encontrar una manera de cambiar el código en línea a código fuera de línea.
Aquí puede consultar: http://my.oschina.net/smzd/blog/548538
He compilado una copia aquí, y también escribí una demostración fuera de línea de acuerdo con la demostración de ejemplo. Por supuesto, fuera de línea no puede ser tan perfecto como en línea, después de todo, algunas funciones aún son inutilizables. (Esta versión se basa en Baidu Maps API v2.0)
Cómo usar:
1. Determine el sufijo de imagen del mosaico que usa, como .png, .jpg. Modificar imgext en baidumap_offline_v2_load.js
var bdmapcfg = { 'imgext':'.jpg', //The suffix of the tile picture-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2. Determine el directorio del mosaico que usa. Por defecto, está en el directorio Baidumap_V2/ Tiles/, y también puede cambiarlo a otra dirección. Modificar Tiles_Dir en Baidumap_offline_V2_Load.js
3. Consulte el código de demostración para escribir, los puntos clave son los siguientes:
1) Simplemente cargue el archivo de carga
<script type = "text/javaScript" src = "baidumapv2/baidumap_offline_v2_load.js"> </script>
2) Cargue el archivo CSS (no parece necesario)
<link rel = "stylesheet" type = "text/css" href = "../../ baiduumapv2/css/baidu_map_v2.css"/>
3) Defina un contenedor para colocar el mapa y usar CSS para controlar la altura y el ancho
<div id = "map_demo"> </div>
4) Escribir código JS
<script type = "text/javaScript"> // Baidu map API Función var map = new bmap.map ("map_demo"); // Crear instancia de mapa map.centerandzoom (nuevo bmap.point (116.404, 39.915), 8); // Inicializa el mapa, establece las coordenadas del punto central y el nivel del mapa //map.addcontrol(new bmap.mapTypeControl ()); // Agregar control de tipo de mapa para solo admitir mapas electrónicos fuera de línea, y el satélite/3D no admite //map.setCurrentCity("beijing "); // ¡Establecer mapas fuera de línea que se muestran por el mapa no admiten! ! MAP.ENABLECROLLWHHEELZOOM (verdadero); // Abra la rueda del mouse a zoom map.AddControl (nueva bmap.navigationControl ()); // Botón de escala </script>2. Obtenga el diagrama de baldosas
Aquí puede consultar: http://my.oschina.net/smzd/blog/619397
Por supuesto, también hay herramientas de descarga en línea, como: descarga de mapas electrónicas de todo ronda
3. Está sesgado colocar directamente las coordenadas (WG) recibidas por el receptor en el mapa de Baidu, porque el mapa de Baidu ha realizado tratamientos especiales por seguridad. Su API de servicio web proporciona una API de conversión de coordenadas, pero es una interfaz de conversión de coordenadas proporcionada en HTTP, por lo que aún no se puede separar de la red. Aquí, utilizamos algunos conocimientos profesionales para convertir las coordenadas de WGS en GCJ, y luego para convertir las coordenadas de GCJ en coordenadas BD Baidu. La precisión de verificación es casi precisa.
clase pública coorconvertutil {// pi estático doble pi = 3.14159265358979324; // Factor de proyección de la proyección de coordenadas de elipsoide satelital al sistema de coordenadas del plano Doble A = 6378245.0; // Excentricidad de elipsoide Doble estático EE = 0.00669342162296594323; // Cantidad de conversión PI Pública Final Double X_PI = 3.14159265358979324 * 3000.0 /180.0; public static double [] wgs2bd (doble lat, doble lon) {doble [] wgs2gcj = wgs2gcj (lat, lon); double [] gcj2bd = gcj2bd (wgs2gcj [0], wgs2gcj [1]); return gcj2bd; } / ** * GCJ coordina las coordenadas de Baidu * @param lat * @param lon * @return * / public static double [] gcj2bd (doble lat, doble lon) {doble x = lon, y = lat; doble z = math.sqrt (x * x + y * y) + 0.00002 * math.sin (y * x_pi); doble theta = math.atan2 (y, x) + 0.000003 * Math.cos (x * x_pi); doble bd_lon = z * math.cos (theta) + 0.0065; doble bd_lat = z * math.sin (theta) + 0.006; devolver nuevo doble [] {bd_lat, bd_lon}; } public static static double [] bd2gcj (doble lat, doble lon) {doble x = lon - 0.0065, y = lat - 0.006; doble z = math.sqrt (x * x + y * y) - 0.00002 * math.sin (y * x_pi); doble theta = Math.atan2 (y, x) - 0.000003 * Math.cos (x * x_pi); doble gg_lon = z * math.cos (theta); doble gg_lat = z * math.sin (theta); devolver nuevo doble [] {gg_lat, gg_lon}; } / ** * WGS coordina las coordenadas GCJ * @param lat * @param lon * @return * / public static double [] wgs2gcj (doble lat, doble lon) {double dlat = transformlat (lon - 105.0, lat - 35.0); doble dlon = transformlon (lon - 105.0, lat - 35.0); doble radlat = lat / 180.0 * pi; doble magia = math.sin (Radlat); Magic = 1 - Ee * Magic * Magic; doble sqrtmagic = math.sqrt (magia); dlat = (dlat * 180.0) / ((a * (1 - ee)) / (mágico * sqrtmagic) * pi); dlon = (dlon * 180.0) / (a / sqrtmagic * math.cos (radlat) * pi); doble mglat = lat + dlat; doble mglon = lon + dlon; double [] loc = {mglat, mglon}; regresar loc; } Transformlat doble estático privado (doble lat, doble 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; regresar ret; } Transformlón doble estático privado (doble lat, doble lon) {doble 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; regresar ret; } / ** * División de grado y rotación * @param lat latitude ddmm.mmmm * @param lon longitude dddmm.mmmm * @return * / public static double [] duFen2du (string lat, string lon) {double LatD = double.parsedOlc (lat.substring (0, 2)); doble latm = double.parsedOuble (lat.substring (2)); doble latnew = latd+latm/60; double lond = double.parsedOuble (lon.substring (0, 3)); doble lonm = double.parsedOuble (lon.substring (3)); Double Lonnew = Lond+Lonm/60; devolver nuevo doble [] {Latnew, Lonnew}; }}Finalmente, mire la captura de pantalla del efecto del proyecto:
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.