arcgis以谷歌地圖為底圖
或者直接檢視本人 github 上的gooleLayer.html
js/gooleLayer
define(["dojo/_base/declare",
"esri/layers/TiledMapServiceLayer",
"esri/SpatialReference",
"esri/geometry/Extent",
"esri/layers/TileInfo",
"esri/geometry/Point",
"dojo/domReady!"],
function (declare,TiledMapServiceLayer, SpatialReference, Extent, TileInfo,Point) {
return declare("gooleLayer",TiledMapServiceLayer,{
layertype: "road",//圖層類型
constructor: function (args) {
// this._mapStyle = mapStyle;
this.spatialReference = new SpatialReference({
wkid: 3857
});
declare.safeMixin(this, args);
this.fullExtent = new esri.geometry.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"://矢量
//var timestamp=new Date().getTime();
var timestamp = Date.parse(new Date());
url = 'http://www.google.cn/maps/vt/[email protected]&hl=zh-CN&gl=cn&x='+col+'&y='+row+'&z='+level+'&s=Galil';
// url='http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x='+ col + '&y=' + row + '&z=' + level+'&t='+timestamp;
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? + col + '&y=' + row + '&z=' + level;
break;
}
return url;
}
});
});
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ArcGIS JS加載谷歌地圖</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css" target="_blank" rel="external nofollow" >
<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' //location.pathname表示目前檔案位置
}]
};
// 配制參考 https://www.cnblogs.com/mytudousi/p/6166280.html
</script>
<script type="text/javascript" src="js/init.js"></script>
<script>
//地圖控件
var map;
require(["esri/map",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/SpatialReference",
"js/gooleLayer",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/InfoTemplate",
"dojo/domReady!"],
function (Map,Extent,Point,SpatialReference,gooleLayer,Graphic,GraphicsLayer,InfoTemplate) {
var startExtent = new Extent(112.445306, 35.485907, 112.445376, 35.485997,new SpatialReference({ wkid:4326 }) );
map = new Map("map", {
basemap: "streets",
center: [116.397428, 39.90923],
zoom: 10,
logo :false, //logo
slider : true //縮小按鈕
});
var baselayer = new gooleLayer();//加載标注圖
map.addLayer(baselayer);//添加谷歌地圖到map容器
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
整體代碼參考github
以下是整個二者合二為一的代碼
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>谷歌底圖</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://211.154.196.253:4080/arcgis/4.4/esri/css/main.css" target="_blank" rel="external nofollow" >
<script src="http://211.154.196.253:4080/arcgis/4.4/init.js"></script>
<script>
var map;
require([
"esri/Map",
"esri/Ground",
"esri/views/MapView",
"esri/layers/BaseTileLayer",
"esri/layers/ElevationLayer",
"dojo/domReady!"
], function(Map, Ground, MapView, BaseTileLayer, ElevationLayer) {
var gl = initGoogleLayerClass()
var map = new Map({
basemap: "topo"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 7,
center: [115.738167,39.365399] // longitude, latitude
});
var mapBaseLayer = new gl({
urlTemplate: "http://www.google.cn/maps/vt/[email protected]&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",
title: "GoogleVectorMap"
});
map.add(mapBaseLayer, 0);
});
function initGoogleLayerClass() {
var gl = null;
require([
"esri/config",
"esri/request",
"esri/layers/BaseTileLayer"
], function (esriConfig, esriRequest, BaseTileLayer) {
gl = BaseTileLayer.createSubclass({
properties: {
urlTemplate: null
},
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",
allowImageDataAccess: true
})
.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));
}
});
//增加跨域配置
esriConfig.request.corsEnabledServers.push("http://www.google.cn/");
});
return gl;
}
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
![ArcGIS操作系列10- Arcmap 中矢量圖層面積的計算方法[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)