โครงการต้องการเวอร์ชันเว็บของ Baidu Map เพื่อพัฒนาแบบออฟไลน์ นี่คือบทสรุปของกระบวนการพัฒนาและประสบการณ์ของคุณเอง
ข้อกำหนดโดยประมาณคือ: รถแต่ละคันมีตัวรับสัญญาณ บริษัท ซึ่งจะตอบกลับพิกัดของยานพาหนะความเร็วพวงมาลัยและข้อมูลอื่น ๆ แบบเรียลไทม์และหลังจากได้รับข้อมูลของยานพาหนะแต่ละคัน คะแนนการทำงานไม่จำเป็นต้องมีเครือข่ายดังนั้นจึงจำเป็นต้องมีการพัฒนาแบบออฟไลน์
มีสามประเด็นหลักในกระบวนการนี้:
1. วิธีรับ API ออฟไลน์
2. วิธีรับไดอะแกรมไทล์ออฟไลน์
3. วิธีการแปลงพิกัด WGS เป็นพิกัดแผนที่ Baidu เมื่อออฟไลน์
กระบวนการแก้ไขปัญหา:
1. เนื่องจากแผนที่ Baidu ไม่รองรับแผนที่ออฟไลน์เราจึงต้องหาวิธีเปลี่ยนรหัสออนไลน์เป็นรหัสออฟไลน์
ที่นี่คุณสามารถอ้างถึง: http://my.oschina.net/smzd/blog/548538
ฉันได้รวบรวมสำเนาที่นี่และฉันยังเขียนตัวอย่างออฟไลน์ตามตัวอย่างตัวอย่าง แน่นอนว่าออฟไลน์ไม่สามารถสมบูรณ์แบบทางออนไลน์หลังจากทั้งหมดฟังก์ชั่นบางอย่างยังไม่สามารถใช้งานได้ (รุ่นนี้ใช้ Baidu Maps API v2.0)
วิธีใช้:
1. กำหนดคำต่อท้ายของภาพของกระเบื้องที่คุณใช้เช่น. png, .jpg แก้ไข imgext ใน baidumap_offline_v2_load.js
var bdmapcfg = {'imgext': '. jpg', // คำต่อท้ายของภาพกระเบื้อง --------------------------------------------------------------------------------------------------------------------------------------------------------------2. กำหนดไดเรกทอรีของกระเบื้องที่คุณใช้ โดยค่าเริ่มต้นมันอยู่ใน baidumap_v2/ ไดเรกทอรี/ ไดเรกทอรีและคุณยังสามารถเปลี่ยนเป็นที่อยู่อื่นได้ แก้ไข TILES_DIR ใน baidumap_offline_v2_load.js
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"); // สร้างแผนที่อินสแตนซ์แผนที่ Centerandzoom (ใหม่ bmap.point (116.404, 39.915), 8); // เริ่มต้นแผนที่ตั้งค่าพิกัดจุดกึ่งกลางและระดับแผนที่ //map.addcontrol( ใหม่ bmap.maptypecontrol ()); // เพิ่มการควบคุมประเภทแผนที่เพื่อรองรับแผนที่อิเล็กทรอนิกส์ออฟไลน์เท่านั้นและดาวเทียม/3D ไม่รองรับ //map.setcurrentcity("beijing "); // ตั้งค่าแผนที่ออฟไลน์ที่แสดงโดยแผนที่ไม่รองรับ! - map.enablescrollwheelzoom (จริง); // เปิดล้อเมาส์เพื่อ Zoom Map.addControl (ใหม่ bmap.navigationControl ()); // ปุ่มปรับขนาด </script>2. รับไดอะแกรมกระเบื้อง
ที่นี่คุณสามารถอ้างถึง: http://my.oschina.net/smzd/blog/619397
แน่นอนว่ายังมีเครื่องมือดาวน์โหลดออนไลน์เช่น: ดาวน์โหลดแผนที่อิเล็กทรอนิกส์ทุกรอบ
3. มันมีอคติที่จะวางพิกัดโดยตรง (WGS) ที่ได้รับจากตัวรับสัญญาณลงในแผนที่ Baidu เนื่องจากแผนที่ Baidu ได้ทำการรักษาพิเศษเพื่อความปลอดภัย Web Service API ให้บริการ API การแปลงพิกัด แต่เป็นอินเทอร์เฟซการแปลงพิกัดที่มีให้ใน HTTP ดังนั้นจึงยังไม่สามารถแยกออกจากเครือข่ายได้ ที่นี่เราใช้ความรู้ระดับมืออาชีพเพื่อแปลงพิกัด WGS เป็น GCJ แล้วแปลงพิกัด GCJ เป็นพิกัด BD Baidu ความแม่นยำในการตรวจสอบนั้นเกือบจะแม่นยำ
คลาสสาธารณะ coorconvertutil {// pi คงที่ double pi = 3.14159265358979324; // ปัจจัยการฉายภาพของการฉายภาพวงรีดาวเทียมพิกัดไปยังระบบพิกัดระนาบระบบคงที่ double a = 6378245.0; // eccentricity ของ ellipsoid คงที่ double ee = 0.0069342162296594323; // PI การแปลงจำนวนเงินสาธารณะสุดท้ายคงที่ double x_pi = 3.14159265358979324 * 3000.0 /180.0; สาธารณะคงที่ 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 * / สาธารณะคงที่ double [] gcj2bd (คู่ 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}; } สาธารณะคงที่สองเท่า [] bd2gcj (คู่ 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 * / สาธารณะคงที่ double [] wgs2gcj (คู่ 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 (Magic); dlat = (dlat * 180.0) / ((a * (1 - ee)) / (เวทมนตร์ * sqrtmagic) * pi); dlon = (dlon * 180.0) / (a / sqrtmagic * math.cos (radlat) * pi); double mglat = lat + dlat; double mglon = lon + dlon; double [] loc = {mglat, mglon}; กลับ loc; } private static double transformlat (สอง 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; } transformlon แบบคงที่ส่วนตัว (คู่ 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; } / ** * การแบ่งระดับและการหมุน * @param lat latitude ddmm.mmmm * @param lon longitude dddmm.mmmm * @return * / สาธารณะคงที่ 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 มากขึ้น