OpenLayer4结合高德地图API实现交通态势的获取信息
前言：昨天申请了一个高德地图的key值，本来想用来用python爬取高德地图的交通态势信息存储到Excel表格中，但是感觉还不如直接利用高德api和OL4结合一下直接展示到地图上看看效果如何，感觉效果并不好，差别很大 ，感觉有用的不是道路的经纬度坐标集合，而是对道路畅通的状态，以及描述。
先看两张图：
一、关于高德Key值得申请
地址：https://lbs.amap.com/dev/key/app
交通态势API文档地址：https://lbs.amap.com/api/webservice/guide/api/trafficstatus/#rectangle
IP白名单的设置为本机IP
二、原理
通过ajax异步的方式请求到交通态势接口，然后通过成功回调函数，将json数据进行解析处理，地图加载的是高德地图。关于返回的道路的坐标需要特殊处理，代码中给出了解决方法。
三、核心代码
1、关于矩形的范围
在在这里矩形的范围是地图左上角和右下角的坐标，中间用；隔开，在这里我处理成字符串
var extent = "116.351147, 39.966309; 116.357134, 39.908727";2、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);
}
}
});四、完整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>
