需求：
以arcgis js api的basetilelayer加载arcgis发布的栅格切片服务
效果图：
其中和tileinfo和lods，这样获取：
https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/?f=pjson
urltemplate：
这样获取
https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/WMTS/1.0.0/WMTSCapabilities.xml
先确保以一张为例有结果返回
https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/WMTS/tile/1.0.0/ChinaOnlineCommunity/default/default028mm/14/6730/13396.png文章来源：https://www.toymoban.com/news/detail-803128.html
文章来源地址https://www.toymoban.com/news/detail-803128.html
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>以basetilelayer加载切片服务</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgisonline.cn/4.25/esri/css/main.css"
/>
<script src="https://js.arcgisonline.cn/4.25/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/BaseTileLayer",
"esri/layers/support/TileInfo",
"esri/geometry/SpatialReference",
"esri/geometry/Extent",
"esri/config",
"esri/request",
"esri/layers/FeatureLayer",
], function (
Map,
MapView,
BaseTileLayer,
TileInfo,
SpatialReference,
Extent,
esriConfig,
esriRequest,
FeatureLayer
) {
var tileInfo = new TileInfo({
rows: 256,
cols: 256,
dpi: 96,
format: "PNG",
compressionQuality: 0,
origin: {
x: -2.0037508342787e7,
y: 2.0037508342787e7,
},
spatialReference: {
wkid: 102100,
latestWkid: 3857,
},
lods: [
{
level: 0,
resolution: 156543.03392800014,
scale: 5.91657527591555e8,
},
{
level: 1,
resolution: 78271.51696399994,
scale: 2.95828763795777e8,
},
{
level: 2,
resolution: 39135.75848200009,
scale: 1.47914381897889e8,
},
{
level: 3,
resolution: 19567.87924099992,
scale: 7.3957190948944e7,
},
{
level: 4,
resolution: 9783.93962049996,
scale: 3.6978595474472e7,
},
{
level: 5,
resolution: 4891.96981024998,
scale: 1.8489297737236e7,
},
{
level: 6,
resolution: 2445.98490512499,
scale: 9244648.868618,
},
{
level: 7,
resolution: 1222.992452562495,
scale: 4622324.434309,
},
{
level: 8,
resolution: 611.4962262813797,
scale: 2311162.217155,
},
{
level: 9,
resolution: 305.74811314055756,
scale: 1155581.108577,
},
{
level: 10,
resolution: 152.87405657041106,
scale: 577790.554289,
},
{
level: 11,
resolution: 76.43702828507324,
scale: 288895.277144,
},
{
level: 12,
resolution: 38.21851414253662,
scale: 144447.638572,
},
{
level: 13,
resolution: 19.10925707126831,
scale: 72223.819286,
},
{
level: 14,
resolution: 9.554628535634155,
scale: 36111.909643,
},
{
level: 15,
resolution: 4.77731426794937,
scale: 18055.954822,
},
{
level: 16,
resolution: 2.388657133974685,
scale: 9027.977411,
},
{
level: 17,
resolution: 1.1943285668550503,
scale: 4513.988705,
},
{
level: 18,
resolution: 0.5971642835598172,
scale: 2256.994353,
},
{
level: 19,
resolution: 0.29858214164761665,
scale: 1128.497176,
},
],
});
var tileExtent = new Extent({
xmin: -2.0037507067161843e7,
ymin: -3.0240971958386254e7,
xmax: 2.0037507067161843e7,
ymax: 3.0240971958386205e7,
spatialReference: {
wkid: 102100,
},
});
var MyCustomTileLayer = 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, options) {
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;
if (this.tint) {
context.fillStyle = this.tint.toCss();
context.fillRect(0, 0, width, height);
context.globalCompositeOperation = "difference";
}
context.drawImage(image, 0, 0, width, height);
return canvas;
}.bind(this)
);
},
});
var mylayer = new MyCustomTileLayer({
urlTemplate:
"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/WMTS/tile/1.0.0/ChinaOnlineCommunity/default/default028mm/{z}/{y}/{x}.png",
tileInfo: tileInfo,
});
var map = new Map({
spatialReference: new SpatialReference({ wkid: 3857 }),
basemap: {
baseLayers: [mylayer],
},
});
var view = new MapView({
container: "viewDiv",
map: map,
extent: tileExtent,
spatialReference: new SpatialReference({ wkid: 3857 }),
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
到了这里，关于arcgis javascript api4.x以basetilelayer方式加载arcgis发布的栅格切片服务的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
