OL-Cesium - Source Map from services.arcgisonline.com

user_10881132 0
Viewed 249

I have a simple 2d map in open layer (5.2.0) that is comming from this url: https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer. When I switch to ol-cesium, the map is not display anymore, I only see a black circle (the earth). Here is the code:

It works fine with OpenStreetMap, the problem is when i try to use the map from arcgisonline.com

<!doctype html>
<html lang="en">
<head>
<style>
.map {
 height: 400px;
 width: 400px;
}
</style>
<link type="text/css" rel="stylesheet" href="/csiaps/webjars/openlayers/5.2.0/ol.css" />
<link type="text/css" rel="stylesheet" href="/csiaps/js/olcesium/olcs.css" />
<script type="text/javascript" src="/csiaps/webjars/openlayers/5.2.0/ol.js"></script>
<script type="text/javascript" src="/csiaps/js/cesium/Build/CesiumUnminified/Cesium.js"></script>
<script type="text/javascript" src="/csiaps/js/olcesium/olcesium.js"></script>

<script>
 var ol3d = null;
 var baseLayerGroup;



 function createArcGISCacheLayer(name, url, layerInfoParam) {

  name = 'NatGeo_World_Map';
  url = 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer';
  layerInfoParam = <NEVER MIND, not include for this post>;

  var wrapDateLineOption = true;

  var layer = new ol.layer.Image({
   visible : true,
   source : new ol.source.ImageArcGISRest({
    url : url,
    params : {
     "layerInfo" : layerInfoParam,
     "wrapDateLine" : wrapDateLineOption
    }
   })
  });

  layer.set('title', name);

  return layer;
 }
</script>

</head>
<body>
 <h2>My Map</h2>
 <div id="map" class="map"></div>
 <script type="text/javascript">
  var layer = createArcGISCacheLayer(null, null, null);

  var map = new ol.Map({
   target : 'map',
   layers : [ layer ],
   view : new ol.View({
    center : ol.proj.fromLonLat([ 37.41, 8.82 ]),
    zoom : 4
   })
  });

  function showHideMap() {
   if (!ol3d || !ol3d.getEnabled()){
    ol3d = new olcs.OLCesium({
     map : map,
    });
   }

   ol3d.setEnabled(!ol3d.getEnabled());
  }
 </script>

 <a href="javascript:showHideMap();">3d</a>

</body>
</html>

I expect the ol-celium to format the already loaded 2d maps in 3d and show them instead of a black map

cesiumjs openlayers javascript
1 Answers

It's a tile layer

var layer = new ol.layer.Tile({
  source:  new ol.source.TileArcGISRest({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer'
  })
});

Since it's EPSG:3857 and uses a standard grid it will also work set as an XYZ source and will be quicker to open (note the x and y are reversed compared with most XYZ sources)

var layer = new ol.layer.Tile({
  source:  new ol.source.XYZ({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}'
  })
});
user_101182700
Related