脚本宝典收集整理的这篇文章主要介绍了js实例教程-ArcGIS API for JavaScript 加载高德地图代码教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 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("gaodeLayer", TiledMapServiceLayer, {         layertyPE: "road",//图层类型         constructor: function (args) {             this.spatialReference = new SpatialReference({                 wkid: 3857             });             declare.safeMixin(this, args);             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                 }]             });              this.loaded = true;             this.onLoad(this);         },         /**          * 根据不同的layType返回不同的图层          * @param level          * @param row          * @param col          * @returns {string}          */         getTileUrl: function (level, row, col) {             VAR url = "";             switch (this.layertype) {                 case "road":                     url = 'https://webrd0' + (col % 4 + 1) + '.is.autonavi.COM/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;                     break;                 case "st":                     url = 'https://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=6&x=' + col + '&y=' + row + '&z=' + level;                     break;                 case "label":                     url = 'https://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=8&x=' + col + '&y=' + row + '&z=' + level;                     break;                 default:                     url = 'https://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;                     break;             }             return url;         }     }); });

 <!DOCTYPE htML> <html> <head>     <;meta charset="utf-8" />     <title>ArcGIS JS加载高德地图</title>     <link rel="stylesheet" type="text/css" href="https://localhost:8080/arcgis_js_api/library/3.20/3.20/diJIT/themes/tundra/tundra.css"/>     <link rel="stylesheet" type="text/css" href="https://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />     <style>         html,body{             height: 100%;         }         #map{             height: 100%;         }     </style>       <script type="text/javascript">         var dojoconfig = {             async: false, //是否异步             parseOnLoad: true,             packages: [{ //解释：require(["js/.."],function(){}) 中  js/ 即为 location的值                 name: "js", //对应require引用包里的js                 location: location.pathname.replace(///[^/]*$/, '') + '/js' //对应的路径             }]         };     </script>     <script type="text/javascript" src="https://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>        <script>         //地图控件         var map;         require(["esri/map", "js/gaodeLayer", "dojo/domReady!"], function (Map, gaodeLayer) {             map = new Map("map", {                 center: [118.15, 31.55],                 zoom: 11,                 LOGo : false, //logo                 slider : false //缩小按钮             });             // var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以             // var baselayer = new gaodeLayer({layertype: "st"});//加载卫星图             var baselayer = new gaodeLayer({layertype: "label"});//加载标注图             map.addLayer(baselayer);//添加高德地图到map容器         });       </script> </head> <body> <!-- 地图p的id设为map --> <p id="map"></p> </body> </html>

前言

加载高德作为底图

切片线划图层

gaodeLayer.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("gaodeLayer", TiledMapServiceLayer, {         layertype: "road",//图层类型         constructor: function (args) {             this.spatialReference = new SpatialReference({                 wkid: 3857             });             declare.safeMixin(this, args);             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                 }]             });              this.loaded = true;             this.onLoad(this);         },         /**          * 根据不同的layType返回不同的图层          * @param level          * @param row          * @param col          * @returns {string}          */         getTileUrl: function (level, row, col) {             var url = "";             switch (this.layertype) {                 case "road":                     url = 'https://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;                     break;                 case "st":                     url = 'https://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=6&x=' + col + '&y=' + row + '&z=' + level;                     break;                 case "label":                     url = 'https://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=8&x=' + col + '&y=' + row + '&z=' + level;                     break;                 default:                     url = 'https://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;                     break;             }             return url;         }     }); });

在首页集成

 <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title>ArcGIS JS加载高德地图</title>     <link rel="stylesheet" type="text/css" href="https://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>     <link rel="stylesheet" type="text/css" href="https://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />     <style>         html,body{             height: 100%;         }         #map{             height: 100%;         }     </style>       <script type="text/javascript">         var dojoConfig = {             async: false, //是否异步             parseOnLoad: true,             packages: [{ //解释：require(["js/.."],function(){}) 中  js/ 即为 location的值                 name: "js", //对应require引用包里的js                 location: location.pathname.replace(///[^/]*$/, '') + '/js' //对应的路径             }]         };     </script>     <script type="text/javascript" src="https://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>        <script>         //地图控件         var map;         require(["esri/map", "js/gaodeLayer", "dojo/domReady!"], function (Map, gaodeLayer) {             map = new Map("map", {                 center: [118.15, 31.55],                 zoom: 11,                 logo : false, //logo                 slider : false //缩小按钮             });             // var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以             // var baselayer = new gaodeLayer({layertype: "st"});//加载卫星图             var baselayer = new gaodeLayer({layertype: "label"});//加载标注图             map.addLayer(baselayer);//添加高德地图到map容器         });       </script> </head> <body> <!-- 地图p的id设为map --> <p id="map"></p> </body> </html>

结果：

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-ArcGIS API for JavaScript 加载高德地图代码教程全部内容，希望文章能够帮你解决js实例教程-ArcGIS API for JavaScript 加载高德地图代码教程所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。