1.openlayers加载高德实时路况图层的方法;
<!DOCTYPE html>
<html>
<head>
<title>Draw Shapes</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<style>
#map {
height: 100%;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript" src="./build/ol.js"></script>
<script>
/**
* 获取时间戳
* @return {number}
*/
function getLongTime() {
let nowDate = new Date();
let year = nowDate.getFullYear();
let month = nowDate.getMonth() + 1;
let today = nowDate.getDate();
let hours = nowDate.getHours();
let minutes = nowDate.getMinutes();
let seconds = nowDate.getSeconds();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (today >= 1 && today <= 9) {
today = "0" + today;
}
let currentdate = year + "-" + month + "-" + today + " " + hours + ":" + minutes + ":" + seconds;
let longTime = new Date(currentdate.replace(new RegExp("-", "gm"), "/")).getTime();
return longTime;
}
var map = new ol.Map({
view: new ol.View({
center: [114.095939, 22.548943],
projection: 'EPSG:4326',
zoom: 14
}),
target: 'map'
});
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}'
})
});
map.addLayer(gaodeMapLayer);
/**
* 加载路况图层
*/
let nana = new ol.layer.Tile();
nana.setSource(new ol.source.XYZ({
url: 'http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x={x}&y={y}&z={z}&&t=' + getLongTime()
}));
function setSource() {
nana.setSource(new ol.source.XYZ({
url: 'http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x={x}&y={y}&z={z}&&t=' + getLongTime()
}));
}
//每6秒刷新一次
setInterval("setSource()", 6000);
map.addLayer(nana);
</script>
</body>
</html>
2.arcgis js 3.x 加载高德实时路况图层的方法;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>加载高德实时路况</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://localhost/arcgis/library/3.27/3.27/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://localhost/arcgis/library/3.27/3.27/esri/css/esri.css" />
<script src="http://localhost/arcgis/library/3.27/3.27/init.js"></script>
</head>
<body>
<div id="viewDiv"></div>
<script>
require(["esri/map",
"esri/layers/WebTiledLayer",
"esri/SpatialReference",
"esri/layers/ArcGISTiledMapServiceLayer",
], function (Map, WebTiledLayer, SpatialReference, ArcGISTiledMapServiceLayer) {
var baselayer = new ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer");
var map = new Map("viewDiv", {
center: [114.095939, 22.548943],
zoom: 14
});
/**
* 获取时间戳
* @return {number}
*/
function getLongTime() {
let nowDate = new Date();
let year = nowDate.getFullYear();
let month = nowDate.getMonth() + 1;
let today = nowDate.getDate();
let hours = nowDate.getHours();
let minutes = nowDate.getMinutes();
let seconds = nowDate.getSeconds();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (today >= 1 && today <= 9) {
today = "0" + today;
}
let currentdate = year + "-" + month + "-" + today + " " + hours + ":" + minutes + ":" + seconds;
let longTime = new Date(currentdate.replace(new RegExp("-", "gm"), "/")).getTime();
return longTime;
}
var trafficlayer = WebTiledLayer('http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x=${col}&y=${row}&z=${level}&&t=' + getLongTime());
//每6秒刷新一次
trafficlayer.setRefreshInterval(0.1);
map.addLayers([baselayer, trafficlayer]);
});
</script>
</body>
</html>