高德API和ArcGIS JS API加载谷歌影像服务(最高级别为z=20,影像坐标为GCJ02)

Nafisa ·

更新时间:2024-11-10

· 629 次阅读

一、高德api加载谷歌地图示例：

https://lbs.amap.com/api/javascript-api/guide/layers/wms

但是不知道为什么加载的是矢量数据，我们不妨换下别的谷歌影像url改下试试


//创建自定义切片图层，指定 getTileUrl 属性
var googleLayer = new AMap.TileLayer({
   getTileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil',
   zIndex:2
});
googleLayer.setMap(map);
在线谷歌影像地址：http://api.rivermap.cn/googleDemo/index.html
F12 network我们可以看到对应的切片地址

这样就可以通过高德AP加载谷歌影像了。

var googleLayer = new AMap.TileLayer({
			zIndex:2,
			getTileUrl: function(x , y, z){			
				return  'http://mt0.google.cn/vt/lyrs=y@126&hl=zh-CN&gl=cn&src=app&x='+ x +'&y='+ y +'&z='+ z +'&s=G
				}
			});
二、ArcGIS JS API加载谷歌影像服务
1.创建一个GoogleMapLayer.js


define([
    "dojo/_base/declare",
    "esri/layers/TiledMapServiceLayer",
    "esri/geometry/Extent",
    "esri/SpatialReference",
    "esri/layers/TileInfo"
], function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
    return declare("GoogleLayer", TiledMapServiceLayer, {
        layertype: "road",//图层类型
        // 构造函数
        constructor: function (args) {
            // 这里使用坐标系为投影坐标系WGS_1984_Web_Mercator（wkid: 102113）
            this.spatialReference = new SpatialReference({
                wkid: 102113
            });
            declare.safeMixin(this, args);
            // 图层提供的起始显示范围以及整个图层的地理范围
            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.342787,
                    "y": 20037508.342787
                },
                "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 },
                    { "level": 20, "resolution": 0.1492910708238085, "scale": 564.248588 },
                ]
            });
            // 设置图层的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 = "";
            switch (this.layertype) {
                case "road":
                    url = "https://mt" + (col % 4) + ".google.cn/vt/lyrs=m@226000000&hl=zh-CN&gl=cn&x=" + col + "&y=" + row + "&z=" + level + "&s=Gali";
                    break;
                case "st":
                    url = "https://mt" + (col % 4) + ".google.cn/vt/lyrs=y@126&hl=zh-CN&gl=cn&src=app&x=" + col + "&y=" + row + "&z=" + level + "&s=G";
                    break;
                case "label":
                    url = "https://mt" + (col % 4) + ".google.cn/vt/lyrs=h@177000000&hl=zh-CN&gl=cn&x=" + col + "&y=" + row + "&z=" + level + "&s=Gali";
                    break;
                default:
                    url = "https://mt" + (col % 4) + ".google.cn/vt/lyrs=m@226000000&hl=zh-CN&gl=cn&x=" + col + "&y=" + row + "&z=" + level + "&s=Gali";
                    break;
            }
            return url;
        }
    });
    });


2.通过arcgis js api引用


    
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        var dojoConfig = {
            async: true,
            parseOnLoad: false,
            packages: [{
                name: "extLayers",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/extLayers'
            }]
        };
    
	
	
        var map;
        require([
            "esri/map",
            "extLayers/gaodeLayer",
            "extLayers/GoogleMapLayer",
            "esri/layers/ArcGISDynamicMapServiceLayer",
			"esri/geometry/Extent",
			 "esri/SpatialReference",
            "dojo/parser",
            "dojo/domReady!"],
            function (Map, gaodeLayer, GoogleMapLayer, ArcGISDynamicMapServiceLayer,Extent,SpatialReference,parser) {
                parser.parse();
                map = new Map("map", {
                    logo: false,
                    center: [122.765409, 41.516827],
					extent: new Extent(122.70782655374695,41.481157228129085,122.79760793384544,41.54586090010041,new SpatialReference({ wkid:4326 })),
                    zoom: 13
                });
                var fw_gcj02=ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/fw/MapServer");
                var gol = new GoogleMapLayer({ layertype: "st" });
                map.addLayer(gol);
                map.addLayer(fw_gcj02);
               $("#vector").on("click",function(){
			   		map.removeLayer(fw_gcj02);
					map.removeLayer(gol);
					map.addLayer(new gaodeLayer());
					map.addLayer(fw_gcj02);
				});
				$("#raster").on("click",function(){
				    map.removeLayer(fw_gcj02);
					map.removeLayer(new gaodeLayer());
					map.addLayer(gol);
					map.addLayer(fw_gcj02);
				});
            });



作者：leopold_2017
                    
 
                

                            谷歌
                            js
                            arcgis
                            api


           
    
    

            
                
                    
                
            
            
                
    
        
            需要 登录 后方可回复, 如果你还没有账号请 注册新账号
        
    
                
            
                
                    
                        相关文章

    
        
            Font Awesome 方向图标
        
        
            Winona
            2021-01-14
        
    
    
        661
    


    
        
            Foundation 提醒框
        
        
            Sally
            2021-01-16
        
    
    
        813
    


    
        
            ionic 手势事件
        
        
            Cain
            2020-05-17
        
    
    
        831
    


    
        
    
    
        
            JWT + ASP.NET MVC时间戳防止重放攻击详解
        
        
            Tallulah
            2021-06-23
        
    
    
        923
    


    
        
            js判断两个数组是否存在相同元素的四种方法
        
        
            Olive
            2023-07-20
        
    
    
        102
    


    
        
            js项目中前端如何实现无感刷新token
        
        
            Winola
            2023-07-20
        
    
    
        1938
    


    
        
            JS算法题解搜索插入位置方法示例
        
        
            Winona
            2023-07-20
        
    
    
        605
    


    
        
            js中net::ERR_FILE_NOT_FOUND报错的解决
        
        
            Vera
            2023-07-20
        
    
    
        347
    


    
        
            js中find、findIndex、indexOf的用法和区别
        
        
            Iola
            2023-07-20
        
    
    
        1102
    


    
        
            js控制台报错UncaughtTypeError:Cannotreadpropertiesofundefined(reading‘appendChild‘)的解决
        
        
            Kara
            2023-07-20
        
    
    
        382
    


    
        
            js中的柯里化与反柯里化的基础概念和用法
        
        
            Viridis
            2023-07-20
        
    
    
        1851
    


    
        
            JS算法题解旋转数组方法示例
        
        
            Dara
            2023-07-20
        
    
    
        1477
    


    
        
            js类型判断内部实现原理示例详解
        
        
            Tertia
            2023-07-20
        
    
    
        999
    


    
        
            JS中varlet声明范围区别详解
        
        
            Zada
            2023-07-20
        
    
    
        576
    


    
        
            JS实现数组内值累加常见的3个方法
        
        
            Rhea
            2023-07-20
        
    
    
        176
    


    
        
            JS实现深拷贝的4种方式介绍
        
        
            Lani
            2023-07-20
        
    
    
        366
    


    
        
            JS将字符串中指定字符全局替换的方法
        
        
            Hazel
            2023-07-20
        
    
    
        347
    


    
        
            vue 导入js中的两种方法(示例详解)
        
        
            Sue
            2023-07-20
        
    
    
        1879
    


    
        
            JS中数组合并的几种常见方法
        
        
            Antonia
            2023-07-20
        
    
    
        756
    


    
        
            js控制滚动条滚动的两种简单方法
        
        
            Zahirah
            2023-07-20
        
    
    
        518


        
    
        
            我要提问
        
    
    
        
        
    
        致谢
        
            帮助他人，成就自己。
            人生最大成功就是伸出热情而温暖的双手，尽自己所能去帮助身边的每一个人，只要无私的奉献，就会收获到美好的生活。
            1024问感谢每一位朋友的帮助和支持。
            软件开发网提供编程的基础软件技术培训教程,软件开发编程实例讲解Go,Node,HTML,CSS,Javascript,Python,Java,Ruby,C,PHP,MySQL等软件开发编程语言以及数据开发的基础知识，也提供大量的软件开发在线实例、从入门到精通就在1024问。
        
    
    
        
            
    育儿网
    微养生
    全球行
    美食街
    育儿
    菜谱大全
    海南旅游
    女性
    养狗百科
    星座