高德地圖上萬點軌跡實現
阿新 • • 發佈:2020-11-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高德地圖大批量資料(上萬)畫歷史軌跡實現方案</title> <style> html, body, #container { width: 100%; height: 100%; margin: 0px; } #loadingTip { position: absolute; z-index: 9999; top: 0; right: 0; padding: 3px 10px; background: red; color: #fff; font-size: 13px; } </style> </head> <body> <div id="container"> </div> <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.10&key=54a512472d8c31ba2f9c851b5236d5df'></script> <!-- UI元件庫 1.0 --> <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> <script type="text/javascript"> var map = new AMap.Map('container', { resizeEnable: true, zoom: 18, center:[120.020496763587,29.202602899862274], mapStyle:'amap://styles/dark', // zoom: 4 }); map.on('click',e=>{ console.log(e); }); let pathList={ "list1":[ [120.018225,29.203249], [120.019089,29.203277], [120.019131,29.202809], [120.018531,29.202256], [120.017715,29.202542], [120.017662,29.202954], [120.019314,29.20309], [120.018912,29.202495], [120.018037,29.201793], [120.017544,29.201868], [120.019099,29.202102], [120.017694,29.202491], [120.016814,29.202547], [120.017978,29.202214], [120.018407,29.202645], [120.018246,29.203174], ], "list2":[ [120.0215589183569,29.203178858048272], [120.022116817832,29.20295409426316], [120.02178958833218,29.20244837394471], [120.0214516299963,29.20220956070484], [120.02111367166043,29.202476469583413], [120.02156428277493,29.20274806036053], [120.02107075631619,29.20281361664718], [120.02087763726712,29.202340673925015], ], "list3":[ [120.01987587779757,29.202045668943786], [120.02044450610873,29.201521213547608], [120.01954864829776,29.201137235574073], [120.01951646178958,29.20168042350507], [120.02017628520724,29.20168042350507], [120.0209702190757,29.201029534176868], [120.01944135993722,29.20106699554525], [120.01970421642062,29.201460339086758], [120.02041231960055,29.201137235574073], ], } AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) { if (!PathSimplifier.supportCanvas) { alert('當前環境不支援 Canvas!'); return; } var pathSimplifierIns2 = new PathSimplifier({ zIndex: 100, //autoSetFitView:false, map: map, //所屬的地圖例項 getPath: function(pathData, pathIndex) { return pathData.path; }, getHoverTitle: function(pathData, pathIndex, pointIndex) { if (pointIndex >= 0) { //point return pathData.name + ',點:' + pointIndex + '/' + pathData.path.length; } return pathData.name + ',點數量' + pathData.path.length; }, renderOptions: { renderAllPointsIfNumberBelow: -1, //繪製路線節點,如不需要可設定為-1 pathLineStyle: { //路線樣式設定 lineWidth: 3, strokeStyle: '#0091FF', borderWidth: 0, // borderStyle: '#eeeeee', dirArrowStyle: false }, // startPointStyle: { //起點 // radius: 4, // fillStyle: '#109618', // lineWidth: 1, // strokeStyle: '#eeeeee', // }, // endPointStyle: { //終點 // radius: 4, // fillStyle: '#dc3912', // lineWidth: 1, // strokeStyle: '#eeeeee' // }, } }); window.pathSimplifierIns = pathSimplifierIns2; //設定資料,模擬路線資料 pathSimplifierIns2.setData([ { name: '路線1', path: pathList.list1, }, { name: '路線2', path: pathList.list2, }, { name: '路線3', path: pathList.list3, }, ]); //對第一條線路(即索引 0)建立一個巡航器 for(let i=0;i<3;i++){ let navg1 = pathSimplifierIns2.createPathNavigator(i, { // loop: true, //迴圈播放 speed: 500, //巡航速度,單位千米/小時 pathNavigatorStyle: { width: 44, height: 54, //使用圖片 content: PathSimplifier.Render.Canvas.getImageContent("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2567670815,24101428&fm=26&gp=0.jpg", onload, onerror), strokeStyle: null, fillStyle: null, //經過路徑的樣式 pathLinePassedStyle: { lineWidth: 3, strokeStyle: '#53E19F', } } }); navg1.start(); } // pathSimplifierIns2.setData([]); }); // var stmarker = new AMap.Marker({ // map: map, // position: [120.018225,29.203249], //基點位置 // icon: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605073831460&di=6187250d41f02b38753bebaa9f773a8d&imgtype=0&src=http%3A%2F%2Fac-q.static.booking.cn%2Fimages%2Fhotel%2Fmax1024x768%2F111%2F111145520.jpg", // zIndex: 10 // }); </script> </body> </html>