openlayers以及arcgis js 加载高德实时路况图层的方法；

最新推荐文章于 2024-06-15 10:26:32 发布

L.傲骨雄风

最新推荐文章于 2024-06-15 10:26:32 发布

阅读量1.7k

点赞数 3

分类专栏： arcgis-js openlayer

本文链接：https://blog.csdn.net/xlp789/article/details/108466557

版权

arcgis-js 同时被 2 个专栏收录

42 篇文章 4 订阅

订阅专栏

openlayer

16 篇文章 2 订阅

订阅专栏

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>

L.傲骨雄风

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
openlayers以及arcgis js 加载高德实时路况图层的方法；

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 {
复制链接

扫一扫

专栏目录