Select to view content in your preferred language

Possible to use OpenLayers in JS API (not other way around)

4618
12
Jump to solution
10-04-2012 08:37 AM
JeffPace
MVP Alum
I know there are lots of examples of how to use ESRI resources in OpenLayers, i want to do the opposite.  Is there anyway to get a OpenLayer to display in a ESRI JS API application?

a sample would be really really useful.  Thank you.
0 Kudos
12 Replies
NianweiLiu
Frequent Contributor
Attached sample should be what you are looking for. However to make it generically usable you need consider basemap coordinate system, cache scheme switch and other WMS specific issues. Basically

getTileUrl: function(level, row, col) {                   var url = '';                   var lv = this.tileInfo.lodsByLevel[level];                   if (lv) {                     var xmin = (col) * this.tileInfo.width * lv.resolution + this.tileInfo.origin.x;                     var ymin = this.tileInfo.origin.y - (row + 1) * this.tileInfo.height * lv.resolution;                     var xmax = (col + 1) * this.tileInfo.width * lv.resolution + this.tileInfo.origin.x;                     var ymax = this.tileInfo.origin.y - (row) * this.tileInfo.height * lv.resolution;                     url = this.url +                     '?SERVICE=WMS&REQUEST=GetMap&TRANSPARENT=true&FORMAT=image/png&VERSION=1.3.0' +                     '&LAYERS=' + this.layers + '&BBOX=' + xmin + "," + ymin + "," + xmax + "," + ymax +                     '&CRS=EPSG:' + this.tileInfo.spatialReference.wkid +                     '&WIDTH=' + this.tileInfo.width + '&HEIGHT=' + this.tileInfo.height +'&STYLES=';                   }                   return url;                 }


Full code in attachment.
0 Kudos
JeffPace
MVP Alum
Attached sample should be what you are looking for. However to make it generically usable you need consider basemap coordinate system, cache scheme switch and other WMS specific issues. Basically

getTileUrl: function(level, row, col) {
                  var url = '';
                  var lv = this.tileInfo.lodsByLevel[level];
                  if (lv) {
                    var xmin = (col) * this.tileInfo.width * lv.resolution + this.tileInfo.origin.x;
                    var ymin = this.tileInfo.origin.y - (row + 1) * this.tileInfo.height * lv.resolution;
                    var xmax = (col + 1) * this.tileInfo.width * lv.resolution + this.tileInfo.origin.x;
                    var ymax = this.tileInfo.origin.y - (row) * this.tileInfo.height * lv.resolution;
                    url = this.url +
                    '?SERVICE=WMS&REQUEST=GetMap&TRANSPARENT=true&FORMAT=image/png&VERSION=1.3.0' +
                    '&LAYERS=' + this.layers + '&BBOX=' + xmin + "," + ymin + "," + xmax + "," + ymax +
                    '&CRS=EPSG:' + this.tileInfo.spatialReference.wkid +
                    '&WIDTH=' + this.tileInfo.width + '&HEIGHT=' + this.tileInfo.height +'&STYLES=';
                  }
                  return url;
                }


Full code in attachment.



nliu to the rescue! thank you.
0 Kudos
JeffPace
MVP Alum
This worked perfect!!! had to change "CRS" to "SRS" depending on the wms version, but it really speed up performance.  Thank you.
0 Kudos