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

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

L.傲骨雄风

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

阅读量1.8k

点赞数

分类专栏： arcgis-js

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

版权

arcgis-js 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

一、高德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引用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="..//arcgis_js_api/library/3.27/dijit/themes/nihilo/nihilo.css" rel="stylesheet" type="text/css" />
    <link href="..//arcgis_js_api/library/3.27/esri/css/esri.css" rel="stylesheet" />
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="../jquery/jquery-1.12.2.min.js"></script>
    <script src="../arcgis_js_api/library/3.27/init.js"></script>
    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            parseOnLoad: false,
            packages: [{
                name: "extLayers",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/extLayers'
            }]
        };
    </script>
</head>
<body>
    <div id="map"></div>
	<button id="vector" style="position:absolute;top:10%;right:16%;cursor:pointer">矢量</button>
	<button id="raster" style="position:absolute;top:10%;right:11%;cursor:pointer">影像</button>
    <script>
        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);
				});
                



            });
    </script>

</body>
</html>