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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。