ArcGIS API for Javascript4.10加载谷歌地图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yy284872497/article/details/86511220

本篇主要介绍利用ArcGIS API for Javascript 4版本的最新版本4.10加载谷歌地图和谷歌影像，以加载谷歌地图为例，我们通过扩展BaseTileLayer来自定义谷歌地图图层GoogleMapLayer模块。

1、示例运行效果：

【谷歌地图】

【谷歌影像】

2、扩展类BaseTileLayer——定义GoogleMapLayer

参考官方文档说明，我们主要设置三部分：请求url、getTileUrl()、fetchTile()。getTileUrl()主要是根据请求级别、行列号生成url；fetchTile()主要是发送动态的url请求并得到返回的图片，同时，可以根据需求进行合并图像。相关代码如下：

define(["dojo/_base/declare", "dojo/_base/lang","esri/config","esri/layers/BaseTileLayer","esri/request"],
    function (declare,lang,esriConfig,BaseTileLayer,esriRequest) {
        return BaseTileLayer.createSubclass({
            properties: {
                urlTemplate: "http://www.google.cn/maps/vt/lyrs=m@226000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil"
            },
            getTileUrl: function(level, row, col) {
                return this.urlTemplate.replace("{z}", level).replace("{x}",
                    col).replace("{y}", row);
            },
            fetchTile: function(level, row, col) {
                var url = this.getTileUrl(level, row, col);
                return esriRequest(url, {
                    responseType: "image"
                })
				.then(function(response) {

					var image = response.data;
					var width = this.tileInfo.size[0];
					var height = this.tileInfo.size[0];

					var canvas = document.createElement("canvas");
					var context = canvas.getContext("2d");
					canvas.width = width;
					canvas.height = height;

					context.drawImage(image, 0, 0, width, height);

					return canvas;
				}.bind(this));
            }
        });
    }
)

3、加载GoogleMapLayer模块并显示图层

在加载我们自定义的模块之前，需要先配置路径。【GoogleMapLayer.js存储在src文件夹下】

var dojoConfig = {
    parseOnLoad: true,
    packages: [{
        name: "src",
        location: location.pathname.replace(/\/[^/]+$/, "")+"/src"
    }]
};

然后加载模块，并添加到map:

require([
    "esri/Map",
    "src/GoogleMapLayer",
    "esri/views/SceneView",
    "dojo/domReady!"], 
function (Map,GoogleMapLayer,SceneView) {
    //新建GoogleMapLayer
    var GoogleMapLayer = new GoogleMapLayer();

    var map = new Map({
        layers: [GoogleMapLayer]
    });

    var view = new SceneView({
        container: "view",
        map: map,
        center: [108.62, 36.32],
        zoom: 4
    });

});

4、源码下载

源码链接：ArcGIS API for JavaScript4.10之加载谷歌地图
源码包括谷歌地图、影像图（加标注）自定义文件(src/*.js)和图层加载显示文件（.html），ArcGIS API for JavaScript使用的是当前最新版本【4.10】。

3版本链接：ArcGIS API for Javascript3.23加载谷歌地图