archive-gh-me/offline-editor-js
1
0
Fork 0
mirror of https://github.com/Esri/offline-editor-js.git synced 2025-12-15 15:20:05 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #224 from andygup/detect_png

Browse Source 
Add addt'l tpk image type detection
This commit is contained in:
Andy 2014-08-15 12:15:19 -06:00
commit bf0702f2bc
3 changed files with 72 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
doc/howtousetpklibrary.md
View File

@ -3,7 +3,7 @@ How to use the TPKLayer library
## `TPKLayer` Library
The `TPKLayer` Library allows you to display at TPK file as a map.
The `TPKLayer` Library allows you to display at TPK file as a map.
**Step 1** Unzip the TPK file. This creates an array of Entry objects. Depending on your operating system you may have to rename the TPK file to .zip so that it becomes a recognized MIME type for the html input element.
@ -84,6 +84,15 @@ When you need to delete all tiles from the existing data use the following patte
})
```
**Can I use the TPKLayer with a tiled basemap?**
Yes for ArcGIS API for JavaScript v3.x and ONLY if the TPKs Levels of Detail (LODs) match the tiled map services LODs exactly.
The basemap (base tiled layer) defines the LODs that the map can display. Any other operational tiled layers on the map will not display if they don’t match the basemap’s LODs. Esri.Map doesn’t union LODs of all tiled layers on the map.
For more information on creating TPKs go [here](http://resources.arcgis.com/en/help/main/10.1/index.html#//006600000457000000).
**Additional Considerations**
There are a few things to keep in mind when working with TPK files and JavaScript.

69
lib/tpk/TPKLayer.js
View File

@ -11,8 +11,9 @@
define([
"dojo/_base/declare","esri/geometry/Extent","dojo/query","esri/SpatialReference",
"esri/layers/TileInfo","esri/layers/TiledMapServiceLayer","tiles/TilesStore","tiles/tilingScheme",
"tpk/zip","tpk/xml2json","tpk/autoCenterMap","dojo/Evented"],
function(declare,Extent,query,SpatialReference,TileInfo,TiledMapServiceLayer,TilesStore,TilingScheme,zip,X2JS,autoCenter,Evented){
"tpk/zip","tpk/xml2json","tpk/autoCenterMap","dojo/Deferred","dojo/promise/all","dojo/Evented"],
function(declare,Extent,query,SpatialReference,TileInfo,TiledMapServiceLayer,TilesStore,
TilingScheme,zip,X2JS,autoCenter,Deferred,all,Evented){
return declare("esri.TPKLayer",[TiledMapServiceLayer,Evented],{
//
@ -62,7 +63,7 @@ define([
this._fileEntriesLength = files.length;
this.emit(this.PROGRESS_EVENT,this.PROGRESS_START);
this._parseInMemFiles(files,function (buffer){
this._parseInMemFiles(files,function (){
//Parse conf.xml and conf.cdi to get the required setup info
this._parseConfCdi(function(initExtent){
this.initialExtent = (this.fullExtent = initExtent);
@ -107,9 +108,21 @@ define([
case "JPEG":
imgURL = "data:image/jpg;base64," + result;
break;
case "PNG":
imgURL = "data:image/png;base64," + result;
break;
case "PNG8":
imgURL = "data:image/png;base64," + result;
break;
case "PNG24":
imgURL = "data:image/png;base64," + result;
break;
case "PNG32":
imgURL = "data:image/png;base64," + result;
break;
default:
imgURL = "data:image/jpg;base64," + result;
}
img.style.borderColor = "blue";
}
@ -220,12 +233,16 @@ define([
* @private
*/
_parseInMemFiles: function(files,callback){
var inMemTilesLength = this._fileEntriesLength;
this._zeroLengthFileCounter = 0;
var promises = [];
for(var i=0;i < inMemTilesLength;i++){
var deferred = new Deferred();
var name = files[i].filename.toLocaleUpperCase();
var index = name.indexOf("_ALLLAYERS",0);
if(index != -1){
this.TILE_PATH = name.slice(0,index);
@ -235,13 +252,33 @@ define([
var indexCDI = name.indexOf("CONF.CDI",0);
var indexXML = name.indexOf("CONF.XML",0);
var indexBUNDLE = name.indexOf("BUNDLE",0);
var indexBUNDLX = name.indexOf("BUNDLX",0);
if(indexCDI != -1 || indexXML != -1){
this._unzipConfFiles(files,i,callback);
this._unzipConfFiles(files,i,deferred,function(/* deferred */ d, /* token */ t){ console.log("CONF FILE")
d.resolve(t);
return d.promise;
});
}
else if(indexBUNDLE != -1 || indexBUNDLX != -1){
this._unzipTileFiles(files,i,deferred,function(/* deferred */ d, /* token */ t){
d.resolve(t);
return d.promise;
});
}
else{
this._unzipTileFiles(files,i,callback);
deferred.resolve(i);
}
promises.push(deferred);
}
all(promises).then( function(results)
{
callback && callback(results);
});
return promises;
},
/**
@ -267,14 +304,14 @@ define([
* @param callback
* @private
*/
_unzipConfFiles: function(files,token,callback){
_unzipConfFiles: function(files,token,deferred,callback){
files[token].getData(new zip.TextWriter(token),function(data){
this._inMemTilesIndex.push("blank");
var name = files[data.token].filename.toLocaleUpperCase();
this._inMemTilesObject[name]= data.string;
var size = this.ObjectSize(this._inMemTilesObject);
if(size == this._fileEntriesLength - this._zeroLengthFileCounter - 1){
callback(this._inMemTilesObject);
if(size > 0){
callback(deferred,data.token);
}
}.bind(this));
},
@ -286,14 +323,14 @@ define([
* @param callback
* @private
*/
_unzipTileFiles: function(files,token,callback){
_unzipTileFiles: function(files,token,deferred,callback){
var that = this;
files[token].getData(new zip.BlobWriter(token),function(data){
if(data.size != 0){
var reader = new FileReader();
reader.token = data.token;
reader.onerror = function (event) {
console.error(new Error("_unzipTileFiles Error: " + event.target.error.code).stack);
console.error("_unzipTileFiles Error: " + event.target.error.message);
that.emit(that.PARSING_ERROR, {msg: "Error parsing file: ", err: event.target.error});
}
reader.addEventListener("loadend", function (evt) {
@ -302,8 +339,8 @@ define([
var name = files[this.token].filename.toLocaleUpperCase();
that._inMemTilesObject[name]= this.result;
var size = that.ObjectSize(that._inMemTilesObject);
if(size == that._fileEntriesLength - that._zeroLengthFileCounter - 1){
callback(that._inMemTilesObject);
if(size > 0){
callback(deferred,data.token);
}
}
});
@ -318,8 +355,6 @@ define([
* @private
*/
_parseConfCdi: function(callback){
var that = this._self;
var m_conf_i = this._inMemTilesObject[this.TILE_PATH + "CONF.CDI"];
var x2js = new X2JS();
@ -330,9 +365,10 @@ define([
var ymin = parseFloat(envelopeInfo.YMin);
var xmax = parseFloat(envelopeInfo.XMax);
var ymax = parseFloat(envelopeInfo.YMax);
var sr = parseInt(envelopeInfo.SpatialReference.WKID);
var initExtent = new Extent(
xmin,ymin,xmax,ymax
xmin,ymin,xmax,ymax, new SpatialReference({wkid:sr})
);
callback(initExtent);
@ -398,10 +434,11 @@ define([
this.store.retrieve(url, function(success, offlineTile){
if( success )
{
console.log("Tile found in indexedDB: " + url)
console.log("Tile found in storage: " + url)
callback(offlineTile.img,tileId,url);
}
else {
console.log("Tile is not in storage: " + url)
var snappedRow = Math.floor(row / 128) * 128;
var snappedCol = Math.floor(col / 128) * 128;

10
samples/tpk-layer.html
View File

@ -192,7 +192,15 @@
xhrRequest.responseType = "blob";
xhrRequest.onprogress = function(evt){
loading.style.visibility = "visible";
var percent = (parseFloat(evt.loaded / evt.totalSize) * 100).toFixed(0);
var percent = 0;
if(evt && evt.totalSize){
percent = (parseFloat(evt.loaded / evt.totalSize) * 100).toFixed(0);
}
else if(evt && evt.total){
percent = (parseFloat(evt.loaded / evt.total) * 100).toFixed(0);
}
getFileBtn.innerHTML = "Get file via url " + percent + "%";
console.log("Begin downloading remote tpk file...")
}