OpenLayer4结合高德地图API实现交通态势的获取信息

时间 2019-11-11

标签 openlayer4 openlayer 结合地图 api 实现交通态势获取信息繁體版

原文原文链接

前言：昨天申请了一个高德地图的key值，原本想用来用python爬取高德地图的交通态势信息存储到Excel表格中，可是感受还不如直接利用高德api和OL4结合一下直接展现到地图上看看效果如何，感受效果并很差，差异很大，感受有用的不是道路的经纬度坐标集合，而是对道路畅通的状态，以及描述。javascript

先看两张图：css

1、关于高德Key值得申请html

地址：https://lbs.amap.com/dev/key/appjava

交通态势API文档地址：https://lbs.amap.com/api/webservice/guide/api/trafficstatus/#rectanglepython

IP白名单的设置为本机IPjquery

2、原理web

经过ajax异步的方式请求到交通态势接口，而后经过成功回调函数，将json数据进行解析处理，地图加载的是高德地图。关于返回的道路的坐标须要特殊处理，代码中给出了解决方法。ajax

3、核心代码json

一、关于矩形的范围api

在在这里矩形的范围是地图左上角和右下角的坐标，中间用；隔开，在这里我处理成字符串

var extent = "116.351147, 39.966309; 116.357134, 39.908727";

二、ajax提交方式

var extent = "116.351147, 39.966309; 116.357134, 39.908727";
        var data = {
            key: "你的key值",//申请的key值
            output: JSON,//返回的数据形式JSON或者XML
            extensions: "all",//返回数据含有的内容
            level: [1, 2,3,4, 5, 6],//道路等级
            rectangle: extent,//查询的范围
        };
        $.ajax({
            url: "https://restapi.amap.com/v3/traffic/status/rectangle?",
            type: "post",
            data: data,
            success: function (result) {
                var data = result["trafficinfo"];
                var roads = data["roads"];
                for (var i = 0; i < roads.length; i++) {
                    //获取道路名称
                    var roadName = roads[i]["name"];
                    //获取道路状态
                    var roadStatus = roads[i]["status"];
                    //道路描述
                    var roadDirection = roads[i]["direction"];
                    //道路的坐标集合（这里polyline数组中元素每个的相似："116.351784，39.9425468"的字符串）
                    var polyline = roads[i]["polyline"].toString().split(";");
                    var polylineData = [];
                    console.log(polyline.length);
                    for (var j = 0; j < polyline.length; j++) {
                        //将字符串拆成数组
                        var realData = polyline[j].split(",");
                        var coordinate = [realData[0], realData[1]];
                        polylineData.push(coordinate);
                    }
                    //要素属性
                    var attribute = {
                        name: roadName,
                        status: roadStatus,
                        direction: roadDirection

                    };
                    //线此处注意必定要是坐标数组
                    var plygon = new ol.geom.LineString(polylineData)
                    //线要素类
                    var feature = new ol.Feature({
                        geometry: plygon,
                        attr: attribute
                    });
                    console.log(feature);
                    source.addFeature(feature);

                }


            }
        });

4、完整demo源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OL4结合高德地图实时交通态势展现</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery/jquery-3.1.1.min.js"></script>
    <style>
        #map {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        //矢量图层
        var source = new ol.source.Vector();
        var vector = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.1)'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 10,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        var extent = "116.351147, 39.966309; 116.357134, 39.908727";
        var data = {
            key: "",//申请的key值
            output: JSON,//返回的数据形式JSON或者XML
            extensions: "all",//返回数据含有的内容
            level: [1, 2,3,4, 5, 6],//道路等级
            rectangle: extent,//查询的范围
        };
        $.ajax({
            url: "https://restapi.amap.com/v3/traffic/status/rectangle?",
            type: "post",
            data: data,
            success: function (result) {
                var data = result["trafficinfo"];
                var roads = data["roads"];
                for (var i = 0; i < roads.length; i++) {
                    //获取道路名称
                    var roadName = roads[i]["name"];
                    //获取道路状态
                    var roadStatus = roads[i]["status"];
                    //道路描述
                    var roadDirection = roads[i]["direction"];
                    //道路的坐标集合（这里polyline数组中元素每个的相似："116.351784，39.9425468"的字符串）
                    var polyline = roads[i]["polyline"].toString().split(";");
                    var polylineData = [];
                    console.log(polyline.length);
                    for (var j = 0; j < polyline.length; j++) {
                        //将字符串拆成数组
                        var realData = polyline[j].split(",");
                        var coordinate = [realData[0], realData[1]];
                        polylineData.push(coordinate);
                    }
                    //要素属性
                    var attribute = {
                        name: roadName,
                        status: roadStatus,
                        direction: roadDirection

                    };
                    //线此处注意必定要是坐标数组
                    var plygon = new ol.geom.LineString(polylineData)
                    //线要素类
                    var feature = new ol.Feature({
                        geometry: plygon,
                        attr: attribute
                    });
                    console.log(feature);
                    source.addFeature(feature);

                }


            }
        });
        var gaodeMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
            })
        });

        var map = new ol.Map({
            layers: [gaodeMapLayer, vector],
            view: new ol.View({
                center: [116.46, 39.92],
                projection: 'EPSG:4326',
                zoom: 4
            }),
            target: 'map'
        });

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