版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yy284872497/article/details/86544447
本篇主要介绍利用ArcGIS API for Javascript 4版本的最新版本4.10加载天地图的矢量地图、影像地图和地形图,以加载矢量地图为例,我们通过扩展BaseTileLayer
来自定义矢量地图图层TiandiMapLayer
模块。
1、示例运行效果:
【矢量地图】
【影像地图】
【地形图】
2、申请秘钥
从2019年开始,天地图访问需要申请账户秘钥,在【控制台】—【应用管理】中新建一个应用,此时就会生成对应的秘钥。
3、扩展类BaseTileLayer——定义TiandiMapLayer、TiandiAnnoLayer
参考官方文档说明,我们主要设置三部分:请求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: null
},
getTileUrl: function(level, row, col) {
var url = "http://t"+col % 8 +".tianditu.gov.cn/DataServer?T=vec_w&tk=申请的秘钥&x="+col+"&y="+row+"&l="+level;
return url;
},
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));
}
});
}
)
矢量中文标注的图层代码如下:
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: null
},
getTileUrl: function(level, row, col) {
var url = "http://t"+col % 8 +".tianditu.gov.cn/DataServer?T=cva_w&tk=申请的秘钥&x="+col+"&y="+row+"&l="+level;
return url;
},
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));
}
});
}
)
4、加载TiandiMapLayer、TiandiAnnoLayer模块并显示图层
在加载我们自定义的模块之前,需要先配置路径。【TiandiMapLayer.js
、TiandiAnnoLayer.js
存储在src文件夹下】
var dojoConfig = {
parseOnLoad: true,
packages: [{
name: "src",
location: location.pathname.replace(/\/[^/]+$/, "")+"/src"
}]
};
然后加载模块,并添加到map
:
require([
"esri/Map",
"src/TiandiMapLayer",
"src/TiandiAnnoLayer",
"esri/views/SceneView",
"dojo/domReady!"
], function (Map,TiandiMapLayer,TiandiAnnoLayer,SceneView) {
//新建TiandiMapLayer
var TiandiMapLayer = new TiandiMapLayer();
//新建标注图层
var TiandiAnnoLayer = new TiandiAnnoLayer();
var map = new Map({
layers: [TiandiMapLayer,TiandiAnnoLayer]
});
var view = new SceneView({
container: "view",
map: map,
center: [104.9, 35.7],
zoom: 4
});
});
5、源码下载
源码链接:ArcGIS API for JavaScript4.10之加载天地图
源码包括矢量地图(加标注)、影像图(加标注)、地形图(加标注)自定义文件(src/*.js)和图层加载显示文件(.html),ArcGIS API for JavaScript使用的是当前最新版本【4.10】。