矢量地图带注记:https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
矢量地图不带注记:http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}&scl=1<ype=3
影像不带注记:http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
道路带注记:http://webst0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8
道路不带注记:http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8<ype=11
矢量带注记http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}
getTileUrl()、fetchTile()。getTileUrl()
主要是根据请求级别、行列号生成url;fetchTile()
主要是发送动态的url请求并得到返回的地图切片,也可以根据需求进行合并图像
require([
“esri/Map”,
“esri/views/MapView”,
“esri/layers/VectorTileLayer”,
“esri/config”,
“esri/layers/BaseTileLayer”,
“esri/request”,
“esri/Color”
], function(Map, MapView, VectorTileLayer, esriConfig,BaseTileLayer,esriRequest,Color) {
var TintLayer = BaseTileLayer.createSubclass({
properties: {
urlTemplate: null,
tint: {
value: null,
type: Color
}
},
// generate the tile url for a given level, row and column
getTileUrl: 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 LayerView
var 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 response
var image = response.data;
var width = this.tileInfo.size[0];
var height = this.tileInfo.size[0];
// create a canvas with 2D rendering context
var 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));
}
});
// Add stamen url to the list of servers known to support CORS specification.
esriConfig.request.corsEnabledServers.push("webst01.is.autonavi.com");
var digitallTileLayer = new TintLayer({
urlTemplate: 'http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
tint: new Color("#004FBB"),
title: "高德影像注记"
});
var stamenTileLayer = new TintLayer({
urlTemplate: "http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
tint: new Color("#004FBB"),
title: "高德影像地图"
});
var stamenTileLayer1 = new TintLayer({
urlTemplate: "http://webst01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
tint: new Color("#004FBB"),
title: "高德电子地图"
});
let map = new Map({
layers: [stamenTileLayer,digitallTileLayer,stamenTileLayer1]
});
let view = new MapView({
container:'mymap',
map:map,
center:[116.3972282409668,39.90960456049752],
zoom:12
});
// 图层控制控件
var layerList = new LayerList({
view: view,
});
view.ui.add(layerList, "top-right")
});
ps:https://blog.csdn.net/u013869554/article/details/107635450 https://blog.csdn.net/zhengjie0722/article/details/81780860