高德地图大批量数据(上万)画历史轨迹实现方案

发布日期:2019-03-30

转载请注明出处:https://www.cnblogs.com/Joanna-Yan/p/9896180.html 

需求:设备传回服务器的轨迹点,需要在web地图上显示。包括画坐标点覆盖物、轨迹路线图。当数据量达到一定量时,界面出现卡顿。问题出现几天前端人员都未解决。

第一反应,大量的覆盖物肯定不能直接添加在地图上。每一个地图对象或者图层能添加的覆盖物对象都是有限的,资源也是有限的。

能否通过创建多个图层去画覆盖物,同时根据地图的缩放级别来动态添加和减少覆盖物的数量。

好了,研究高德地图api。

1.首先找到一个海量点展示组建PointSimplifier。可以在地图上展示数量为十万以内的点并且性能表现较好,这点正好符合我们的需求。

它实际上是由海量点组成的一个地图图层,这点符合前面我们说的解决思路。

2.找到一个轨迹展示组建PathSimplifier 。同理上。

既然两个组建都可以支持大量数据,并且自动创建图层,那么我们完全可以把PointSimplifier和PathSimplifier通过图层叠加起来使用,分别实现我们的画点和画轨迹的需求。

先看效果图:

模拟上万点,地图随意缩放、移动不会出现卡顿问题。性能表现良好。

简单示例代码如下,自行根据需要优化:

<!-- 重点:getRenderOptions --><!doctype html><html lang="zh-CN"><head> <!-- 原始地址://webapi.amap.com/ui/1.0/ui/misc/PointSimplifier/examples/animation.html --> <base href="//webapi.amap.com/ui/1.0/ui/misc/PointSimplifier/examples/" /> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0 user-scalable=no width=device-width"> <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=您申请的key值"></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" { zoom: 4 }) //just some colors var colors = [ "#3366cc" "#dc3912" "#ff9900" "#109618" "#990099" "#0099c6" "#dd4477" "#66aa00" "#b82e2e" "#316395" "#994499" "#22aa99" "#aaaa11" "#6633cc" "#e67300" "#8b0707" "#651067" "#329262" "#5574a6" "#3b3eac" ] AMapUI.load(["ui/misc/PointSimplifier" "lib/$"] function(PointSimplifier $) { if (!PointSimplifier.supportCanvas) { alert("当前环境不支持 Canvas!") return } var pointSimplifierIns = new PointSimplifier({ zIndex: 115 autoSetFitView: false map: map //所属的地图实例 getPosition: function(item) { if (!item) { return null } var parts = item.split("") return [parseFloat(parts[0]) parseFloat(parts[1])] } getHoverTitle: function(dataItem idx) { return "序号: " + idx } //使用GroupStyleRender renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender renderOptions: { //点的样式 pointStyle: { fillStyle: "red" width: 5 height: 5 } getGroupId: function(item idx) { var parts = item.split("") //按纬度区间分组 return Math.abs(Math.round(parseFloat(parts[1]) / 3)) } groupStyleOptions: function(gid) { return { pointStyle: { fillStyle: colors[gid % colors.length] } } } } }) $("<div id="loadingTip">加载数据,请稍候...</div>").appendTo(document.body) $.get("https://a.amap.com/amap-ui/static/data/10w.txt" function(csv) { var data = csv.split("") pointSimplifierIns.setData(data) $("#loadingTip").remove() //startAnim() })//画线===================================================== 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: 100 //绘制路线节点,如不需要可设置为-1 } }) window.pathSimplifierIns = pathSimplifierIns2 //设置数据,模拟路线数据 pathSimplifierIns2.setData([{ name: "路线0" path: [ [113.86469122.942327][120.41261836.382612][113.37064322.938827][113.00118123.120518][112.98503723.15046][113.89020522.798043][110.36189920.026695][113.68228834.618975][121.43452931.215641][109.48870718.309754][120.68250228.011099][120.6855630.912366][126.68712345.787618][120.4850630.053066][103.97072430.397931][117.27007337.96162][117.21216431.831641][120.25621831.882242][121.41110131.059407][113.33658633.729581][104.13795330.784276][114.14151623.159282][120.49968330.042305][120.48724232.180365][108.9468634.362975][121.29989531.105064][112.87329522.920901][114.16432922.644532][113.37391623.086728][120.28295430.196059][113.25015923.075847][121.14544531.193621][116.67593339.986343][120.89642231.472813][120.7599731.734934][118.78260732.00381][118.31474132.26999][105.26872923.732875][111.72331134.771838][119.53712626.200017][119.95328737.165859][113.83012323.00734][100.7019125.408898][119.27379526.060002][121.37342731.188567][116.46675239.951042][119.27639633.761172][114.2071622.777829][115.69029125.098436][126.11833845.11481][117.66832630.683932][16.36632439.781077][106.56310129.583974][120.37799831.578216][112.5095237.899569][116.61193523.66941][121.0714531.10094][103.78734430.940037][116.16104831.977315][112.91122323.164952][113.9079522.473978][121.94633539.403784][120.4400431.561242][120.17254536.009391][117.357131.859773][126.60985445.722514][113.44823322.652566][120.53169932.402873][102.91187725.091979][118.91431332.013572][114.84264728.133165][126.59776245.739299][114.87607233.773379][106.54099929.520217][119.43718832.440656][114.03305722.733424][119.34248126.050688][104.04112930.598338][113.93155522.607629][119.91769332.484184][113.07220327.813351][118.37112435.082682][116.51248939.822105][120.92636831.320681][113.71441427.200748][120.35523831.557524][118.17806539.817421][101.77520936.614975][120.63915131.637379][114.49940434.646022][120.95262532.001205][118.08751624.474988][113.84796822.595779][104.63895230.1253][119.63227732.022715][116.49223739.991802][114.3007822.715682][112.89890332.04371][112.51210723.065747][114.10401822.626803][107.10674225.849819][119.96966430.26186][113.35985722.519652][119.53001339.935889][117.37744738.403876][77.25460739.050215][126.66051445.781893][117.08560836.652113][120.77598631.520694][120.29280830.299244][120.04017528.899236][114.39791723.545706][113.8351523.093211][120.27393330.236666][113.11307422.753023][121.62244331.152955][118.1653130.720869][116.41709339.96918][121.43580531.216004][113.79945322.724031][120.68349131.169335][123.26417541.768478][119.88178931.884114][120.62612830.822477][115.32642222.964796][115.82636133.812392][125.25452343.829852][106.56179726.579832][112.4415234.662344][117.28576634.806079][120.29673831.525176][111.03576621.535775][118.58141237.642646][115.70172824.066784][113.36029722.962038][104.06144730.67089][121.20855631.421659][121.12346531.134162][121.46002928.655284][104.03951930.719365][121.44441928.345353][116.62566239.619879][121.30063531.140721][108.2020428.004321][116.08444628.336149][113.60651334.807402][113.01248123.02401][120.21382230.112851][121.38453928.411516][120.72763727.798264][114.55630433.470221][116.45276139.951122][115.85375828.661246][119.55536339.932751][113.97857622.526649][120.22711130.347169][107.38065330.314754][113.37715731.797137][109.80142939.601562][113.33400723.107744][103.98483930.68303][112.64184822.362319][104.02175730.559601][102.67219524.974215][116.72934623.366757][120.19069130.305693][121.30604437.479827][117.02354336.679076][119.8998432.866023][118.86884931.918515][125.22755143.904597][121.47337231.235574][121.65916331.155906][116.52663537.131774][112.55944134.628217][113.29441723.159512][106.74902926.5651][120.16375630.39902][116.15139139.161228][121.64099838.908202][123.39089841.771258][112.76757722.445482][113.61714834.988813][117.28765831.873351][109.13263434.586277][117.21960339.211753][118.7415237.460401][113.85993122.971467][120.20606830.208895][112.43835334.666416][117.39595236.673017][120.41579336.059608][113.31085323.349535][120.70429131.825364][115.71421537.811101][118.14388224.700477][113.61463123.163728][119.36449332.328944][119.95932736.602313][121.29419531.888728][121.62286331.294265][113.36502222.57829][121.55482429.826937][120.05419830.664807][113.99526522.732452][87.65855144.008315][116.33197639.737524][112.54159526.763181][118.59585524.870478][115.47110630.787118][119.30606726.102443][125.26548643.869571][117.19344536.928664][116.64404939.807311][114.43462322.801886][112.70258822.00886][118.02947124.49537][120.43028229.365092][111.17133337.520834][114.0431722.562925][116.65700139.89937][121.2294731.016796][113.78108934.819949][116.83430539.825053][117.08514339.039893][106.2827929.960069][113.85317122.620307][116.45639240.016161][121.15405930.039063][120.25566830.435952][121.58958331.146804][113.51890322.22175][119.22790426.089665][106.54333929.612362][102.26669924.066665][120.55486936.38975][101.76856826.326369][116.83348939.254627][116.34544239.913997][112.95580123.197491][114.01234323.073884][117.39815431.985269][121.38207131.248687][107.12509826.37983][114.49393323.192718][130.89176847.017684][116.34647340.023425][117.21234831.82965][119.38326925.691457][113.37624222.935718][117.27612931.786704][117.40431839.290364][114.42805838.024298][120.03482828.908292][113.34387923.1696][117.44280139.059195][113.11260932.98205][115.11296535.75067][121.265331.252592][116.48620539.812739][116.46343939.833746][121.56713931.132951][121.51867629.896039][116.41707540.005976][118.98383539.71738][113.33540223.021024][104.43122830.464295][110.13199527.698087][114.44338323.238174][126.68309645.744551][106.27048329.966858][113.29862640.086031][114.33659230.544379][120.45578630.482805][114.22006122.67811][103.94172630.731199][103.97415930.604171][116.45505439.957415][116.39967939.871409][112.55440422.380084][103.81823229.876423][116.2626139.929069][119.29519526.123236][119.17758834.614112][108.42843422.755072][118.08861424.475403][123.46600241.810057][116.5515240.101459][114.17952622.720042][120.18917730.19047][118.95043132.052233][119.21225436.973457][106.55120729.549722][116.48850940.010936][121.37013931.181822][118.86843832.022459][113.00033523.261914][116.26674540.173843][119.31764825.988715] ] }]) //对第一条线路(即索引 0)创建一个巡航器 var navg1 = pathSimplifierIns2.createPathNavigator(0 { loop: true //循环播放 speed: 1000000 //巡航速度,单位千米/小时 }) navg1.start() }) </script></body></html>

如果此文对您有帮助,微信打赏我一下吧~

 

1 0 9)