ArcGIS Javascript API 加载高德在线地图扩展
2017-06-28 18:08
691 查看
利用ArcGIS JavaScript API加载高德在线地图的扩展
/** * Created by WanderGIS on 2015/7/15. */ 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 ='http://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 ='http://webst0'+(col %4+1)+'.is.autonavi.com/appmaptile?style=6&x='+ col +'&y='+ row +'&z='+ level;break;case"label": url ='http://webst0'+(col %4+1)+'.is.autonavi.com/appmaptile?style=8&x='+ col +'&y='+ row +'&z='+ level;break;default: url ='http://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;}});});
使用方法
1、 在api引入之前配置dojoConfig<script type="text/javascript"> var dojoConfig = { async: true, parseOnLoad: true, packages: [{ name: "extLayers", location: location.pathname.replace(/\/[^/]*$/, '') + '/extLayers' }] }; </script>
2、然后在代码中可以如下方式构造layer
require(["esri/map", "extLayers/gaodeLayer", "dojo/domReady!"], function (Map, gaodeLayer) { var map = new Map("map", { center: [116, 28], zoom: 5 }); var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以 //var baselayer = new gaodeLayer({layertype: "st"});//加载卫星图 //var baselayer = new gaodeLayer({layertype: "label"});//加载标注图 map.addLayer(baselayer);//添加高德地图到map容器 });
效果图
详细代码可以参见 https://github.com/wandergis/gaodeLayer
相关文章推荐
- ArcGIS JavaScript API调用Google、天地图、百度等第三方在线地图服务
- arcgis api for javascript本地部署加载地图
- ArcGIS API For Javascript之地图基本加载与显示,地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现
- arcgis api for javascript去掉加载地图时默认的logo
- ArcGis API for JavaScript学习——加载地图
- ArcGIS API for JavaScript 地图加载空白现象-ArcGIS Web 开发学习(三)
- ArcGIS API for JavaScript 加载切片地图
- 使用ArcGIS API for JavaScript 4.3 加载一个瓦片地图
- ArcGIS For JavaScript API Show map properties(显示地图信息)————(十二)
- ArcGIS API for Silverlight加载BingMap遥感地图
- ArcGIS JavaScript API开发的地图—实现Toc
- 制作百度地图离线JavaScript API加载本地瓦片地图
- ArcGIS For JavaScript API Resizable Map(可调整大小的地图)————(十)
- ArcGIS For JavaScript API Show map using layer definitions(使用层定义显示地图)————(十三)
- ArcGIS JavaScript API开发的地图—重新布局
- ArcGIS API for Silverlight 地图加载进度条类之MapProgressBar
- 解决ArcGIS API for Silverlight 加载地图的内外网访问问题
- ArcGIS For JavaScript API OpenStreetMap Layer(打开街道地图层)————(九)
- ArcGIS.Server.9.3和ArcGIS API for JavaScript实现基本的地图功能(一)
- Arcgis Server api for javascript加载天地图