nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

JeffPace1

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.

Vind meer berichten getagd met

Accepted answers

NianweiLiu

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.

tiledwmslayer.zip

All comments

derekswingley1

What do you want to do with OpenLayers?

SamLarsen

OpenLayers consumes layers from many different formats. There is no 'OpenLayers' service to be consumed by other APIs.
Some commonly used layer types in OpenLayers include OpenStreetMap, WMS, WFS, TMS, KML, GeoRSS etc..
You can find many of these layer types also in the JavaScript API:
OpenStreetMapLayer
TiledMapServiceLayer
WMSLayer
WMTSLayer
KMLLayer
GeoRSSLayer

JeffPace1

I have a WMS server I want to make tiled requests of. It is not WMTS, only WMS. OpenLayers handles this but I cant seem to figure out how to do it in the api.

Basically, i cant make level row col type requests, i need to make individual bounding box requests

   var wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
                                       "http://wms.jpl.nasa.gov/wms.cgi",
                                       {layers: "modis,global_mosaic"});

makes tiled requests, unless you set a singletile parameter, in which case it behaves as ESRI WMS

  var wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
                                       "http://wms.jpl.nasa.gov/wms.cgi",
                                       {
                                           layers: "modis,global_mosaic",
                                           transparent: true
                                       }, {
                                           opacity: 0.5,
                                           singleTile: true
                                       });

NianweiLiu

I'd try extend TiledMapServiceLayer, take the base map's tileInfo, run a few calculations to get the extent based on the row, level passed in by getTileUrl and construct the right WMS request.

Bring in openlayers seems quite a large overhead.

I have a WMS server I want to make tiled requests of. It is not WMTS, only WMS. OpenLayers handles this but I cant seem to figure out how to do it in the api.

Basically, i cant make level row col type requests, i need to make individual bounding box requests

JeffPace1

agreed. OK off to send if i can do this.

khutchins

Jeff,

Have you seen the WebTiledLayer class added to v3.2 of the api?

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/webtiledlayer.htm

Here's a sample showing how it works:
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/layers_webtiled_many.html

JeffPace1

yes i saw that, but i cant make row/col/level type requests, i need to make boundingbox width height type requests.

derekswingley1

I'm having a hard time understanding this. A bbox request is issued, but multiple images come back? Maybe OpenLayers is doing something different under the hood.

Is there a public example of OpenLayers using this service somewhere?

JeffPace1

no no sorry.

when openlayers requests a wms image, you can choose two styles set via property. If you choose "singleTile" it returns a single image, just like the esri WMS layer

if you do not set "singleTile", it sends a series of bbox/width/height requests (tile like requests), and assembles them, just like an esri tile layer. However the requests are not /level/col/row format, they are bbox/width/height format (in the url).

http://www.mymanatee.org/lizardtech/iserv/docs/samples/wms-ajax-view.html

var wms = new OpenLayers.Layer.WMS("MODIS 2002", 
    "http://MCG-AP-GISAPP01.mcgad.local/lizardtech/iserv/ows", 
    {layers: 'MODIS',
    exceptions:"application/vnd.ogc.se_xml"},
    {tileSize: new OpenLayers.Size(256, 256), buffer: 1});
  map.addLayer(wms);

NianweiLiu

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.

tiledwmslayer.zip

JeffPace1

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.

JeffPace1

This worked perfect!!! had to change "CRS" to "SRS" depending on the wms version, but it really speed up performance. Thank you.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.