Python3+HTML调用百度地图API实现在地图上绘制散点路线

发布于 2021-03-18  303 次阅读


一、需求

现要求在地图上,将车的行使路线绘制出来,目标效果:

file

xlsx表格文档中有如下构成的汽车行驶路线的总计28845个离散点数据,分别代表经度、纬度以及高程:

file

二、方案

调用百度地图API,采用JavaScript实现点的绘制与路线连接。

由于数据存在表格中,为了一次性操作,可以采用Python3脚本提取数据并以JS变量的形式存到points.js文件中,随后在设计好的HTML文件中直接引用即可。

三、实现:数据清洗

由于JS需要处理数据,如果按照每个点都绘制上去,那么28845的点将会导致绘制失败,打开html文件时会卡死。

从数据来看,很多相邻的点间隔比较小,在绘制时,不需要很邻近,故考虑进行数据抽稀:

#!/usr/bin/python3
# -*- coding:utf-8 -*-

import pandas as pd

def filterPoints():
    df = pd.read_excel('/home/ganahe/lineInMap/BLH.xlsx',usecols=[0,2])
    data = df.values

    jsWrite = open("/home/ganahe/lineInMap/points.js","w")
    jsWrite.write("points = [\n")
    index = 0
    for k in data:
        index += 1
        if index == 800: #抽稀间隔点数
            index = 1
            line = "{lng:"+str(k[0])+",lat:"+str(k[1])+"},\n"
            jsWrite.write(line)

    jsWrite.write("]")
    jsWrite.close()

    # print(data)

filterPoints()

四、Html引用

首先引入JS文件:

<script type="text/javascript" src="points.js"></script> 

定义变量并载入:

var pointArr = window.points;

整体的Html文件如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>运输轨迹图</title>  
<script type="text/javascript" src="points.js"></script>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>  
</head>  
<body>  
<div  style="width:1000px;height:800px;border:1px solid gray" id="container"></div>

<script type="text/javascript">  
    window.onload = function(){
        var map = new BMap.Map("container");  
        map.centerAndZoom(new BMap.Point(108.847098,34.553311), 19);  
        map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件  
        map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件  
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件  

        map.clearOverlays();                        //清除地图上所有的覆盖物  
        var driving = new BMap.DrivingRoute(map);    //创建驾车实例  
        // 坐标点数据
        var pointArr = window.points;
        //
        /*var pointArr = [
        {lng:118.7958434,lat:31.98880252},
{lng:118.7999011,lat:32.04517433},
{lng:118.7962759,lat:32.08450168},
{lng:118.8114084,lat:32.08822034},
{lng:118.8476128,lat:32.13822598},
{lng:118.7151426,lat:32.27371358},
{lng:118.4695699,lat:32.34644115},
{lng:118.277985,lat:32.50486343},
{lng:118.1224537,lat:32.69912597},
{lng:117.9439387,lat:32.84116253},
{lng:117.9419215,lat:32.93688069},
{lng:117.9419216,lat:32.9368807},
{lng:117.9367164,lat:32.9686174},
{lng:117.8730799,lat:33.17694576},
{lng:117.7782471,lat:33.39321562},
{lng:117.7051263,lat:33.61481938},
{lng:117.6492545,lat:33.84381769},
{lng:117.6320296,lat:34.06949664},
{lng:117.3785864,lat:34.15523506},
{lng:117.3036565,lat:34.35773124},
{lng:117.4193576,lat:34.5566761},
{lng:117.3045248,lat:34.73416},
{lng:117.2272851,lat:34.93081806},
{lng:117.185369,lat:35.13276931},
{lng:117.079532,lat:35.32238995},
{lng:117.0422927,lat:35.53571325},
{lng:116.9785052,lat:35.54896034},
{lng:116.9815611,lat:35.58026634}];*/
        // 生成坐标点
        var trackPoint = [];
        for (var i = 0, j = pointArr.length; i < j; i++) {
            trackPoint.push(new BMap.Point(pointArr[i].lng, pointArr[i].lat));
        }

        for (var i = 0; i < trackPoint.length; i++) {
            if(i != trackPoint.length -1 ){
                driving.search(trackPoint[i], trackPoint[i+1]);
            }
        }
        driving.setSearchCompleteCallback(function(){  
            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例,获得一系列点的数组  

            var polyline = new BMap.Polyline(pts);       
            map.addOverlay(polyline);  

            // 画图标、想要展示的起点终点途经点
            for (var i = 0; i < trackPoint.length; i++) {
                var lab;
                if(i == 0){
                    lab = new BMap.Label("起点",{position:trackPoint[i]});
                }else if(i == trackPoint.length - 1){
                    lab = new BMap.Label("终点",{position:trackPoint[i]});
                }else{
                    /* lab = new BMap.Label("途径点",{position:trackPoint[i]}) */
                }
                var marker = new BMap.Marker(trackPoint[i])
                map.addOverlay(marker);
                map.addOverlay(lab);
            }
            map.setViewport(trackPoint);  
        });  
    }
</script>  

</body>  
</html>  
</body>
</html>

五、结果及参考文献

最终的效果如下:

file

由于API版本问题,地图加载比较卡。

更多地图应用,请访问本站:在线地图服务Map

参考文献:
[1]在地图上绘制路线图