이 프로젝트는 Baidu Map의 웹 버전을 오프라인으로 개발해야합니다. 다음은 자신의 개발 과정과 경험에 대한 요약입니다.
대략적인 요구 사항은 다음과 같습니다. 각 자동차에는 회사 수신기가 장착되어있어 차량의 좌표, 속도, 스티어링 및 기타 정보를 실시간으로 피드백 할 수 있으며 각 차량의 정보를 수신 한 후 차량 위치는 실시간으로 Baidu 맵에 그려집니다. 작업 지점에는 반드시 네트워크가 없으므로 오프라인 개발이 필요합니다.
이 프로세스에는 세 가지 주요 기술 지점이 있습니다.
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_v2_load.js에서 imgext를 수정하십시오
var bdmapcfg = { 'imgext':'.jpg', //The suffix of the tile picture-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2. 사용하는 타일의 디렉토리를 결정하십시오. 기본적으로 Baidumap_v2/ 타일/ 디렉토리에 있으며 다른 주소로 변경할 수도 있습니다. baidumap_offline_v2_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 함수 var map = new bmap.map ( "map_demo"); // 맵 생성 인스턴스 map.centerandzoom (new bmap.point (116.404, 39.915), 8); // 맵을 초기화하고 중심점 좌표를 설정하고 맵 레벨 //map.addControl(New bmap.maptypecontrol ()); // 맵 유형 컨트롤을 추가하여 전자 맵 만 오프라인으로 지원하고 위성/3D는 //map.setCurrentCity("Beijing ")를 지원하지 않습니다. // 맵에서 표시되는 오프라인 맵을 설정하지 않습니다. ! map.enablescrollwheelzoom (true); // 마우스 휠을 Zoom Map.addControl (new bmap.navigationControl ()); // 스케일링 버튼 </script>2. 타일 다이어그램을 얻습니다
여기에서는 다음을 참조하십시오 : http://my.oschina.net/smzd/blog/619397
물론 다음과 같은 온라인 다운로드 도구도 있습니다.
3. Baidu지도가 안전을 위해 특별한 치료를했기 때문에 수신기가 수신자가 수신 한 좌표 (WG)를 바이두 맵에 직접 배치하는 것이 편향되어 있습니다. 웹 서비스 API는 좌표 변환 API를 제공하지만 HTTP에서 제공되는 좌표 변환 인터페이스이므로 네트워크에서 분리 할 수는 없습니다. 여기서 우리는 전문 지식을 사용하여 WGS 좌표를 GCJ로 변환 한 다음 GCJ 좌표를 BD Baidu 좌표로 변환합니다. 검증 정확도는 거의 정확합니다.
공개 클래스 coorconvertutil {// pi static double pi = 3.14159265358979324; // 위성의 투영 계수는 평면 좌표 시스템에 대한 위성 좌표 투영 정적 이중 A = 6378245.0; // 타원체 정적 이중 EE = 0.0066934216296594323; // PI 변환 금액 공개 최종 정적 이중 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는 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; 새로운 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); 이중 GG_LON = Z * MATH.COS (theta); 이중 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; 더블 마술 = 수학 (radlat); 마술 = 1 -ee * 마술 * 마술; 이중 sqrtmagic = math.sqrt (마술); dlat = (dlat * 180.0) / ((a * (1 -ee)) / (magic * sqrtmagic) * pi); dlon = (dlon * 180.0) / (a / sqrtmagic * math.cos (radlat) * pi); 이중 mglat = lat + dlat; 이중 mglon = lon + dlon; double [] loc = {mglat, mglon}; 리턴 위치; } 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; Ret 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; Ret Ret; } / ** * 학위 부서 및 회전 * @param lat latitude ddmm.mmmm * @param lon longitude dddmm.mmmm * @return * / public static double [] dufen2du (문자열 lat, 문자열 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을 더 지원하기를 바랍니다.