Arcgis js for javascript调用百度，高德实时路况服务

最新推荐文章于 2023-08-23 17:13:43 发布

Lucky@czj

最新推荐文章于 2023-08-23 17:13:43 发布

阅读量1k

点赞数

分类专栏： GIS 文章标签： Arcgis js 百度实时路况图层控制加载百度高德底图

本文链接：https://blog.csdn.net/czj_com/article/details/93498828

版权

GIS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一.离线部署Arcgis js for javascript

按照如下路径存放。

二.在VScode里按照如下目录结构创建demo ，放入框框里的文件就可以了

三.安装Live Server插件到VScode

四.写BDVecLayer.js

define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/TileInfo"],
    function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
        return declare(TiledMapServiceLayer, {
            // 构造函数
            constructor: function (properties) {
                this.spatialReference = new SpatialReference({
                    wkid:102113
                });

                // 图层提供的起始显示范围以及整个图层的地理范围
                this.fullExtent = new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
                this.initialExtent = new Extent(5916776.8, 1877209.3, 19242502.6, 7620381.8, this.spatialReference);
                // 图层提供的切片信息
                this.tileInfo = new TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "compressionQuality": 0,
                    "origin": {
                        "x": -20037508.3427892,
                        "y": 20037508.3427892
                    },
                    "spatialReference": {
                        "wkid": 102113
                    },
                    "lods": [
                        { "level": 0, "resolution": 156543.033928, "scale": 591657527.591555 },
                        { "level": 1, "resolution": 78271.5169639999, "scale": 295828763.795777 },
                        { "level": 2, "resolution": 39135.7584820001, "scale": 147914381.897889 },
                        { "level": 3, "resolution": 19567.8792409999, "scale": 73957190.948944 },
                        { "level": 4, "resolution": 9783.93962049996, "scale": 36978595.474472 },
                        { "level": 5, "resolution": 4891.96981024998, "scale": 18489297.737236 },
                        { "level": 6, "resolution": 2445.98490512499, "scale": 9244648.868618 },
                        { "level": 7, "resolution": 1222.99245256249, "scale": 4622324.434309 },
                        { "level": 8, "resolution": 611.49622628138, "scale": 2311162.217155 },
                        { "level": 9, "resolution": 305.748113140558, "scale": 1155581.108577 },
                        { "level": 10, "resolution": 152.874056570411, "scale": 577790.554289 },
                        { "level": 11, "resolution": 76.4370282850732, "scale": 288895.277144 },
                        { "level": 12, "resolution": 38.2185141425366, "scale": 144447.638572 },
                        { "level": 13, "resolution": 19.1092570712683, "scale": 72223.819286 },
                        { "level": 14, "resolution": 9.55462853563415, "scale": 36111.909643 },
                        { "level": 15, "resolution": 4.77731426794937, "scale": 18055.954822 },
                        { "level": 16, "resolution": 2.38865713397468, "scale": 9027.977411 },
                        { "level": 17, "resolution": 1.19432856685505, "scale": 4513.988705 },
                        { "level": 18, "resolution": 0.597164283559817, "scale": 2256.994353 },
                        { "level": 19, "resolution": 0.298582141647617, "scale": 1128.497176 }
                    ]
                });

                // 设置图层的loaded属性，并触发onLoad事件
                this.loaded = true;
                this.onLoad(this);
            },

            getTileUrl: function (level, row, col) {
                var zoom = level - 1;
                var offsetX = Math.pow(2, zoom);
                var offsetY = offsetX - 1;
                var numX = col - offsetX;
                var numY = (-row) + offsetY;
                zoom = level + 1;
                var num = (col + row) % 8 + 1;
                var url =  "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+zoom+"&styles=pl&scaler=1&udt=20180505";
                return url;
            }
        });
    }
)

五.road.js

define(["dojo/_base/declare", "esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/layers/TileInfo", "esri/layers/TiledMapServiceLayer"], 
	function (declare, Extent, SpatialReference, Point, TileInfo, TiledMapServiceLayer) {
		return declare( TiledMapServiceLayer, {
			// 构造函数 
			constructor: function (args) {
				// 这里使用坐标系为投影坐标系WGS_1984_Web_Mercator_Auxiliary_Sphere（wkid: 3857）
				this.spatialReference = new SpatialReference({
					wkid: 3857
				});
				// 图层提供的起始显示范围和整个图层的地理范围
				this.fullExtent = new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
				this.initialExtent = this.fullExtent;
				this.tileInfo = new TileInfo({
					"cols": 256,
					"rows": 256,
					"compressionQuality": 0,
					"origin": new Point(-20037508.342787, 20037508.342787, this.spatialReference),
					"spatialReference": this.spatialReference,
					"lods": [
						{"level": 0, "resolution": 156543.033928, "scale": 591657527.591555},
						{"level": 1, "resolution": 78271.5169639999, "scale": 295828763.795777}, 
						{"level": 2, "resolution": 39135.7584820001, "scale": 147914381.897889},
						{"level": 3, "resolution": 19567.8792409999, "scale": 73957190.948944}, 
						{"level": 4, "resolution": 9783.93962049996, "scale": 36978595.474472},
						{"level": 5, "resolution": 4891.96981024998, "scale": 18489297.737236},
						{"level": 6, "resolution": 2445.98490512499, "scale": 9244648.868618},
						{"level": 7, "resolution": 1222.99245256249, "scale": 4622324.434309},
						{"level": 8, "resolution": 611.49622628138, "scale": 2311162.217155},
						{"level": 9, "resolution": 305.748113140558, "scale": 1155581.108577},
						{"level": 10, "resolution": 152.874056570411, "scale": 577790.554289},
						{"level": 11, "resolution": 76.4370282850732, "scale": 288895.277144},
						{"level": 12, "resolution": 38.2185141425366, "scale": 144447.638572},
						{"level": 13, "resolution": 19.1092570712683, "scale": 72223.819286},
						{"level": 14, "resolution": 9.55462853563415, "scale": 36111.909643},
						{"level": 15, "resolution": 4.77731426794937, "scale": 18055.954822},
						{"level": 16, "resolution": 2.38865713397468, "scale": 9027.977411},
						{"level": 17, "resolution": 1.19432856685505, "scale": 4513.988705},
						{"level": 18, "resolution": 0.597164283559817, "scale": 2256.994353},
						{"level": 19, "resolution": 0.298582141647617, "scale": 1128.497176}
					]
				});
				// 设置图层的loaded属性，并触发onLoad事件 
				this.loaded = true;
				this.onLoad(this);
			},
			getTileUrl: function (level, row, col) {
                //获取当前时间
        var nowDate = new Date();
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1;
        var today = nowDate.getDate();
        var hours = nowDate.getHours();
        var minutes = nowDate.getMinutes();
        var seconds = nowDate.getSeconds();

        if (month >= 1 && month<= 9) {
            month = "0" + month;
        }
        if (today >= 1 && today <= 9) {
            today = "0" + today;
        }
        var currentdate = year + "-" + month + "-" + today + " " + hours + ":" + minutes + ":" + seconds;
        var longTime = new Date(currentdate.replace(new RegExp("-", "gm"), "/")).getTime();
                return url = "http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x="+col+"&y="+row+"&z="+level+"&&t="+longTime+"";
               
			}
		});
	});

七.baidu路况.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图</title>

    <link href="http://localhost/arcgis_js_api/library/3.28/dijit/themes/tundra/tundra.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.28/esri/css/esri.css">
    <link href="CSS/zui-theme-blue.css" rel="stylesheet"/>
    <link href="CSS/zui.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="CSS/index.css">

    <script type="text/javascript">

        var dojoConfig = {
        async: true
        };
            var apiUrl = "http://localhost/arcgis_js_api/library/3.28/";
            dojoConfig.baseUrl = apiUrl + 'dojo';
            dojoConfig.packages = [{
                    name: 'extend',
                    location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/extend"
                }];
            
    </script>
    <script type="text/javascript" src="JS/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.28/init.js"></script>
    <script type="text/javascript" SRC="JS/index.js"></script>
    <script>
     window.onload=function showTime(){
        function timeAdd0(str) {
        if(str.length<=1){
        str='0'+str;
        }
        return str
    }         
    setInterval(function() {
    var myDate = new Date();
            var h =  myDate.getHours().toString();       //获取当前小时数(0-23)
            var m = myDate.getMinutes().toString();     //获取当前分钟数(0-59)              
            var updateTime = document.getElementById("updateTime");
            h=timeAdd0(h);
            m=timeAdd0(m);
            var time = h +":" +m; 
            updateTime.innerHTML = "更新时间" +":"+"&nbsp"+ time;  
   }, 1000);
 };
    
    </script>

</head>
<body class="tundra">
<!--地图容器-->
<div id="mapDiv"></div>
<!--地图控制-->

<!--地图切换-->
<!-- <div class="base-map">
    <div id="vec" class="base-map-switch base-map-switch-active" onclick="showMap('vec')">地图</div>
    <div id="img" class="base-map-switch base-map-switch-center" onclick="showMap('img')">影像</div>
    <div id="ter" class="base-map-switch" onclick="showMap('ter')">地形</div>
</div> -->

<!--实时路况信息面板-->
<div class="lk-info">
    <span style="font-size:13px; font-family:'微软雅黑';font-weight:bold;">实时路况</span>    
    <span style="background-color: #D95757;color:white;border-radius:2px;margin-left: 50px;">拥挤</span>
    <span style="background-color: #F2AE00;color:white;border-radius:2px;">缓行</span>
    <span style="background-color: #91C985;color:white;border-radius:2px;">畅通</span>
    <p id="updateTime" style="color:#BEBEBE"></p>
</div>
<!--地图资源-->

<!--编辑图层的名称显示-->

</body>
</html>

八.baidu路况.html中引入的index.js内容如下

/**
 * Created by Administrator on 2019/6/20.
 */
var map, showMap, clusterLayer, navToobar;
require(["esri/map",
    "esri/sniff",
    "dojo/keys",
    "dojo/request",
    "esri/SnappingManager",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ArcGISImageServiceLayer",
    "esri/layers/FeatureLayer",
    "esri/layers/ImageParameters",
    "esri/layers/RasterFunction",
    "esri/tasks/QueryTask",
    "esri/tasks/query",
    "esri/tasks/Geoprocessor",
    "esri/tasks/IdentifyTask",
    "esri/tasks/IdentifyParameters",
    "esri/tasks/ImageServiceIdentifyTask",
    "esri/tasks/ImageServiceIdentifyParameters",
    "esri/layers/WMSLayer",
    "esri/toolbars/navigation",
    "esri/toolbars/draw",
    "esri/dijit/OverviewMap",
    "esri/dijit/Scalebar",
    "dojo/i18n!esri/nls/jsapi",
    "esri/dijit/PopupTemplate",
    "esri/layers/GraphicsLayer",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/PictureMarkerSymbol",
    "esri/graphic",
    "esri/toolbars/edit",
    "dojo/_base/event",
    "esri/Color",
    "esri/geometry/jsonUtils",
    "esri/SpatialReference",
    "esri/layers/MapImageLayer",
    "esri/layers/MapImage",
    "esri/layers/TableDataSource",
    "esri/layers/LayerDataSource",
    "esri/layers/DynamicLayerInfo",
    "esri/layers/RasterDataSource",
    "esri/layers/LayerDrawingOptions",
    "esri/geometry/Polyline",
    "esri/geometry/Point",
    "esri/geometry/Multipoint",
    "esri/geometry/geometryEngine",
    "esri/geometry/Extent",
    "esri/geometry/webMercatorUtils",
    "esri/geometry/ScreenPoint",
    "esri/symbols/CartographicLineSymbol",
    "esri/renderers/ClassBreaksRenderer",
    "esri/renderers/SimpleRenderer",
    "esri/renderers/HeatmapRenderer",
    "esri/InfoTemplate",
    "esri/config",
    "esri/request",
    "dojo/parser",
    "extend/TDTTilesLayer",
    "extend/road",
    "extend/GoogleMapLayer",
    "extend/BDVecLayer",
    "dojo/domReady!"], function (Map,
        has,
        keys,
        request,
        SnappingManager,
        ArcGISTiledMapServiceLayer,
        ArcGISDynamicMapServiceLayer,
        ArcGISImageServiceLayer,
        FeatureLayer,
        ImageParameters,
        RasterFunction,
        QueryTask,
        Query,
        Geoprocessor,
        IdentifyTask,
        IdentifyParameters,
        ImageServiceIdentifyTask,
        ImageServiceIdentifyParameters,
        WMSLayer,
        Navigation,
        Draw,
        OverviewMap,
        Scalebar,
        bundle,
        PopupTemplate,
        GraphicsLayer,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        SimpleFillSymbol,
        PictureMarkerSymbol,
        Graphic,
        Edit,
        event,
        Color,
        geometryJsonUtils,
        SpatialReference,
        MapImageLayer,
        MapImage,
        TableDataSource,
        LayerDataSource,
        DynamicLayerInfo,
        RasterDataSource,
        LayerDrawingOptions,
        Polyline,
        Point,
        Multipoint,
        geometryEngine,
        Extent,
        webMercatorUtils,
        ScreenPoint,
        CartographicLineSymbol,
        ClassBreaksRenderer,
        SimpleRenderer,
        HeatmapRenderer,
        InfoTemplate,
        esriConfig,
        esriRequest,
        parser,
        TDTTilesLayer,
        road,
        GoogleMapLayer,
        BDVecLayer) {
        parser.parse();


        var layer = new road();
            map = new Map("mapDiv", {
             logo: false,
             center: [107.9, 34.7],
             zoom: 4
        });
       var vecMap = new BDVecLayer();
     
       map.addLayer(vecMap);
       map.addLayer(layer);


    });

九.index.css内容如下

html, body, #mapDiv,#modal {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    font-family: "微软雅黑";
}
/*等待图片*/
#modal{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    background: #000000;
    opacity: 0.6;
    display: none;
}
#modal .modal-wait{
    position: absolute;
    top: 40%;
    left: 45%;
    background: url(../images/loading.gif) no-repeat;
    width: 124px;
    height: 124px;
    color: #fff;
    padding: 56px 41px;
    font-weight: bold;
}
/*顶部工具栏*/
.map-nav{
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 30%;
    z-index: 99;
    border: 1px solid #96AED1;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #868686;
    padding: 5px;
    background: rgba(255,255,255,0.5);
}
/*地图切换*/
.base-map{
    position: absolute;
    right: 15pt;
    top:15pt;
    background: #f0f0f0;
    border: #96aed1 1px solid;
    width: auto;
    height: auto;
    z-index: 99;
    font:normal 11px "宋体",Arial;
    color:#868686;
}
/*地图切换*/
.lk-info{
    display:block;  
    top: 45px;    
    right: 3px;             /*举例右边3像素*/
    position:fixed;    
    background: none repeat scroll 0 0 blue;
    border: 1px solid #ffffff;
    padding-bottom: 3px;
    width: 200px;
    height: 50px;    
    background-color:#ffffff;
    border:1px solid #ff33ff;
}
.gdlk-info{
    display:block;  
    top: 45px;    
    right: 3px;             /*举例右边3像素*/
    position:fixed;    
    background: none repeat scroll 0 0 blue;
    border: 1px solid #ffffff;
    padding-bottom: 3px;
    width: 340px;
    height: 70px;    
    background-color:#ffffff;
    border:1px solid #ff33ff;
}
.base-map-switch{
    padding: 4px 8px;
    float: left;
}
.base-map-switch-active{
    background:#e6edf1;
    font-weight: bold;
    color: #4d4d4d;
}
.base-map-switch:hover{
    cursor: pointer;
}
.base-map-switch-center{
    border: 1px #96aed1 solid;
    border-top:none;
    border-bottom:none;
}
/*左边工具栏*/
.map-resource{
    position: absolute;
    top: 100px;
    left: 15px;
    z-index: 99;
    border: 1px solid #96AED1;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #868686;
    background:  rgba(255,255,255,0.5);
    /*text-align: center;*/
     padding-right:0px;
     padding-left:0px;
}
.map-resource-content{
    margin-left:3px;
}
/*.map-resource button{*/
    /*width: 90px;*/
    /*margin:3px 5px;*/
/*}*/
.box-title{
    background: #96AED1;
    color: #FFFFFF;
    font-size: 12px;
    text-align: left;
    font-weight: bold;
    padding: 5px 10px;
}
/*查询控制面板*/
.ftch-query{
    position: absolute;
    top: 70px;
    right: 20px;
    z-index: 99;
    border: 1px solid #96AED1;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #868686;
    background: #FFFFFF;
    text-align: center;
    display: none;
}
.ftch-query .box-close{
    float: right;
    width:16px;
    height: 16px;
    margin: 5px 1px;
    cursor: pointer;
    color: #ffffff;
}
/*.ftch-query label{
	margin:3px 5px;

}
.ftch-query ul{
	list-style: none;
	width: 200px;
}
.ftch-query ul li{
	padding: 5px 8px;
    border-bottom: 1px dashed #CCCCCC;
    margin-left: -30px;
    text-align: left;
    width: 244px;
}
.ftch-query ul li.active,li:hover{
	background: #9DD5E7;
	cursor: pointer;
}
.ftch-query .page-ctrl p a{
	margin-left: 10px;
}
.ftch-query .page-ctrl p a:hover{
	cursor: pointer;
	text-decoration: underline;
}
.ftch-query button{
	margin:3px 5px;
}*/
/*查询结果*/
.timer-box {
    /*width: 200px;
    height: 250px;*/
    border: 1px solid #CCCCCC;
    box-shadow: 1px 1px 1px #bbbbbb;
}

.timer-box ul {
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
    padding:0;
    margin: 1px 0px;
}

.timer-box ul li {
    border-bottom: 1px dashed #dddddd;
    padding: 3px 0px;
    margin-left: -40px;
    text-align: center;
}
.timer-box ul li:hover {
    cursor:pointer;
}
.timer-box ul li.active {
    background: #DDDDDD;
}

.timer-box div.ctrl-button {
    text-align: center;
    margin: 10px 0px 4px 0px;
}

Lucky@czj

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Arcgis js for javascript调用百度，高德实时路况服务

一.离线部署Arcgis js for javascript按照如下路径存放。二.在VScode里按照如下目录结构创建demo，放入框框里的文件就可以了三.安装Live Server插件到VScode四.写BDVecLayer.jsdefine(["dojo/_base/declare", "esri/layers/TiledMapServiceLaye...
复制链接

扫一扫