2.arcgis api,openlayers,mapboxgl,leaflet,cesuim,高德api加载离线瓦片

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)