ArcGIS API for JavaScript 4.4 版本加载谷歌地图

ArcGIS API for JavaScript 4.X 版本升级后，API发生了很大的变化。

其中就支持了WebEarth展示，主要是通过 esri/views/SceneView 实现的。

在新版本中，默认都是加载Esri自己的地图。

若想加载其他地图，可以通过扩展BaseTileLayer实现。

例如，最新版本加载谷歌地图的demo如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><title>Custom TileLayer - 4.4</title><link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css"><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><script src="https://js.arcgis.com/4.4/"></script><script>require(["esri/Map","esri/config","esri/request","esri/Color","esri/views/SceneView","esri/widgets/LayerList","esri/layers/BaseTileLayer","dojo/domReady!"], function(Map, esriConfig, esriRequest, Color,SceneView, LayerList, BaseTileLayer) {// *******************************************************// Custom tile layer class code// Create a subclass of BaseTileLayer// *******************************************************var TintLayer = BaseTileLayer.createSubclass({properties: {urlTemplate: null,tint: {value: null,type: Color}},// generate the tile url for a given level, row and columngetTileUrl: function(level, row, col) {return this.urlTemplate.replace("{z}", level).replace("{x}",col).replace("{y}", row);},// This method fetches tiles for the specified level and size.// Override this method to process the data returned from the server.fetchTile: function(level, row, col) {// call getTileUrl() method to construct the URL to tiles// for a given level, row and col provided by the LayerViewvar url = this.getTileUrl(level, row, col);// request for tiles based on the generated url// set allowImageDataAccess to true to allow// cross-domain access to create WebGL textures for 3D.return esriRequest(url, {responseType: "image",allowImageDataAccess: true}).then(function(response) {// when esri request resolves successfully// get the image from the responsevar image = response.data;var width = this.tileInfo.size[0];var height = this.tileInfo.size[0];// create a canvas with 2D rendering contextvar canvas = document.createElement("canvas");var context = canvas.getContext("2d");canvas.width = width;canvas.height = height;// Draw the blended image onto the canvas.context.drawImage(image, 0, 0, width, height);return canvas;}.bind(this));}});// *******************************************************// Start of JavaScript application// *******************************************************// Add stamen url to the list of servers known to support CORS specification.esriConfig.request.corsEnabledServers.push("http://www.google.cn/");// Create a new instance of the TintLayer and set its propertiesvar stamenTileLayer = new TintLayer({urlTemplate: "http://www.google.cn/maps/vt/lyrs=s@142&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",tint: new Color("#004FBB"),title: "Google Map"});// add the new instance of the custom tile layer the mapvar map = new Map({layers: [stamenTileLayer]});// create a new scene view and add the mapvar view = new SceneView({container: "viewDiv",map: map,center: [0, 30],zoom: 3});// create a layer list widgetvar layerList = new LayerList({view: view,});view.ui.add(layerList, "top-right");});</script>
</head><body><div id="viewDiv"></div>
</body></html>

最终展示效果如下

ArcGIS API for JavaScript 4.4 版本加载谷歌地图相关推荐

基于 GoogleMap 离线 API 源码在内网中加载卫星地图的方法
1. 概述我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法,主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线加载. 另外,也为大 ...
echarts5.3.2版本加载中国地图
echarts5.3.2版本加载中国地图效果图可下载echarts4.9版本获取地图包 npm install echarts@4.9.0 附:打包时发现echarts地图不显示,后查看china ...
使用Python加载谷歌地图并可视化
使用Python加载谷歌地图并可视化 1.库 - pyqt5- pandas- gmplot 首先放个结果图(本文使用的是gmplot,该库使用的是谷歌地图,地图仅供小型开发玩一下而已,大家可以使用百 ...
Openlayers之加载谷歌地图
1.谷歌地图瓦片构成我们用浏览器打开谷歌地图,然后按下F12键,查看网络资源中的地图瓦片,可以发现瓦片URL中变化的部分为1i.2i和3i后面的数字,经过分析可以知道1i后面的应该是瓦片的级别,2i ...
python下载谷歌地图瓦片_openLayers TMS加载谷歌地图瓦片
openLayers TMS中加载谷歌瓦片经纬坐标(LonLat) 和投影坐标系的转换 /** openLayer根据TMS加载谷歌地图瓦片 (1)先去下载加载谷歌地图瓦片,这样的软件有(水经注 ...
在线加载谷歌地图—lyrs类型解析
在线加载谷歌地图-lyrs类型解析最近在用openlayers加载在线谷歌地图的时候总结了一下lyrs之后地图类型解析 m 标准路线图 r 某种改变的路线图(路线不明显) s 影像层(卫星图) y ...
OpenLayers3加载谷歌地图
HTML关键代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
openlayers加载谷歌地图（在线demo）
最近发现可以直接访问谷歌地图了(不用梯子,不用翻墙,直接访问谷歌地图,关键是使用了gac-geo.googlecnapps.cn ),用openlayers随手写了一个,方便自己使用,感兴趣的可以访问 ...
QGIS加载谷歌地图（google map）方法
目录第一步第二步将Google提供的网络地图,包括地图和卫星影像等,作为图层加载到QGIS中,有时可辅助地学分析.QGIS已经提供了OpenStreetMap,在 "XYZ Tiles ...

ArcGIS API for JavaScript 4.4 版本加载谷歌地图

ArcGIS API for JavaScript 4.4 版本加载谷歌地图相关推荐

最新文章

热门文章