arcgis api3.x,arcgis api4.x,openlayers,mapboxgl,leaflet,cesuim,高德api加载离线瓦片
xzy可以使用arcgis server十六进制,也可使用十进制服务可使用tomcat,nginx,IIS服务发布
一、arcgis api3.x
这里以3857坐标系为例customTileLayer.js
define(["dojo/_base/declare",
"esri/layers/TiledMapServiceLayer",
"esri/SpatialReference",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/layers/TileInfo"], function (declare, TiledMapServiceLayer,SpatialReference,Extent,Point,TileInfo) {
return declare('customTileLayer', TiledMapServiceLayer, { //没定义类名,就以文件名为准 第一个参数是父类
constructor: function (args) {
this.spatialReference = new esri.SpatialReference({
wkid: 102100
});
declare.safeMixin(this, args);
this.fullExtent = new Extent(11743260.295298226,3724644.1703501306,12384107.207109822,4806106.2850203095, 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);
this.zeroPad=function(num, len, radix) {
var str = num.toString(radix || 10);
while (str.length < len) {
str = "0" + str;
}
return str;
}
},
/**
* @param level
* @param row
* @param col
* @returns {string}
*/
getTileUrl: function (level, row, col) {
console.log(level, row, col)
return "http://localhost:8090/Layers/_alllayers/" +
"L" + this.zeroPad(level, 2, 10)+ "/" +
"R" + this.zeroPad(row, 8, 16) + "/" +
"C" + this.zeroPad(col, 8, 16) + "." +
"png";
}
});
});
调用
var customTileLyr = new customTileLayer();
map.addLayer(customTileLyr);
二、arcgis api4.x
var arcgisServerTileLayer = BaseTileLayer.createSubclass({
getTileUrl: function(level, row, col) {
return "http://localhost:8090/Layers/_alllayers/" +
"L" + level.toString(10).padStart(2, '0')+ "/" +
"R" + row.toString(16).padStart(8, '0') + "/" +
"C" + col.toString(16).padStart(8, '0') + ".png"
},
});
var myTileLayer = new arcgisServerTileLayer({
tileInfo:tileInfo,
spatialReference:new SpatialReference({ wkid: 4326 }),
id: "layerid"
})
mapview.view.map.add(myTileLayer);
三、openlayers
const zeroPad=(num, len, radix)=> {
var str = num.toString(radix || 10);
while (str.length < len) {
str = "0" + str;
}
return str;
}
let player = new TileLayer({
source: new XYZ({
tileGrid: tileGrid,
crossOrigin: "Anonymous",
projection: proj.get("EPSG:4326"),
tileUrlFunction: function (tileCoord) {
var x = 'C' + zeroPad(tileCoord[1], 8, 16);
var y = 'R' + zeroPad(tileCoord[2] , 8, 16);
var z = 'L' + zeroPad(tileCoord[0], 2, 10);
return "http://localhost:8090/Layers/_alllayers/" + z + '/' + y + '/' + x + '.png';
},
}),
id: layerid,
});
window.$olMap.addLayer(player);
四、mapboxgl
使用arcgis server十六进制需更改源码
var map=new mapboxgl.Map({
container: 'map',
pitch: 0,
style: {
"version": 8,
"name": "Empty Style",
"metadata": {"maputnik:renderer": "mbgljs"},
"sprite": `http://localhost:8090/sprite/default/sprite`,
"zoom": 10.77,
"glyphs": `http://localhost:8090/fonts/{fontstack}/{range}.pbf`,
"sources": {
"layerid": {
type: 'raster',
tiles: [`http://localhost:8090/Layers/_alllayers/{zoom}/{row}/{col}.png`],
tileSize: 256,
zoomOffset: -1
}
},
"layers": [
{
id: "layerid",
type: "raster",
source: "layerid",
},
]
},
center: [108.956220,34.279541],
zoom:6
});
五、leaflet
let layer = L.tileLayer("http://localhost:8090/Layers/_alllayers" + "/{z}/{y}/{x}", {
tileSize: 256,
attribution: "",
});
map.addLayer(layer)
六、cesuim
let player = new Cesium.UrlTemplateImageryProvider({
url: "http://localhost:8090/Layers/_alllayers/{level}/{row}/{col}.png",
tilingScheme: new Cesium.GeographicTilingScheme(),
customTags: {
level: function (imageryProvider, x, y, level) {
return "L" + zeroPad(level, 2, 10);
},
row: function (imageryProvider, x, y, level) {
return "R" + zeroPad(y, 8, 16);
},
col: function (imageryProvider, x, y, level) {
return "C" + zeroPad(x, 8, 16);
},
},
});
player.id = "layerid";
viewer.scene.imageryLayers.addImageryProvider(player);
七、高德api
let googleSWLayer = new AMap.TileLayer({
getTileUrl: function(x, y, z) {
z = "L" + z.toString(10).padStart(2, '0');
x = "C" + x.toString(16).padStart(8, '0');
y = "R" + y.toString(16).padStart(8, '0');
return 'http://localhost:8090/Layers/_alllayers/' + z + '/' + y + '/' + x + '.png';
},
zIndex: 100,
opacity: .3,
})
map.add(googleSWLayer)