1

I am trying to use XYZ Esri tile source with Openlayers for a cached service in Palestine Grid Coordinate System (EPSG:28191) as in this example. However openlayers fails request incorrect tiles which are always blank. My cached ArcGIS service is https://portal.geomolg.ps/server/rest/services/AerialPhoto/AerialPhoto2019/MapServer What might be the issue here?

Here is my code:

import 'ol/ol.css';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';

var map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        attributions:
          'Tiles © <a href="https://portal.geomolg.ps/server/rest/services/' +
          'AerialPhoto/AerialPhoto2019/MapServer">ArcGIS</a>',
        url:
          'https://portal.geomolg.ps/server/rest/services/' +
          'AerialPhoto/AerialPhoto2019/MapServer/tile/{z}/{y}/{x}',
      }),
    }) ],
  view: new View({
    center: [-4839400.0, 6616800.0],
    zoom: 7,
  }),
});

With this configuration, Openlayers requests tiles that are not available like: https://portal.geomolg.ps/server/rest/services/AerialPhoto/AerialPhoto2019/MapServer/tile/6/21/23

3
  • Try ZXY order in the URL Commented Aug 26, 2020 at 20:36
  • Did not work, thanks for the input. Commented Aug 29, 2020 at 15:32
  • OK, was worth the shot though :) Commented Aug 29, 2020 at 19:27

1 Answer 1

1

Since you do not have a standard web mercator projection and tilegrid you need to set up a custom source by coping the projection and tilegrid details (origin, resolutions and extent) given in your link

import "ol/ol.css";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import XYZ from "ol/source/XYZ";
import Projection from "ol/proj/Projection";
import tileGrid from "ol/tilegrid/TileGrid";
import { getCenter } from "ol/extent";

var projection = new Projection({
  code: "EPSG:28191",
  units: "m"
});

var extent = [
  138649.32834740658,
  69334.55729794936,
  206649.25307599525,
  220465.75729794937
];

var map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new XYZ({
        attributions:
          'Tiles © <a href="https://portal.geomolg.ps/server/rest/services/' +
          'AerialPhoto/AerialPhoto2019/MapServer">ArcGIS</a>',
        url:
          "https://portal.geomolg.ps/server/rest/services/" +
          "AerialPhoto/AerialPhoto2019/MapServer/tile/{z}/{y}/{x}",
        tileGrid: new tileGrid({
          origin: [-4839400.0, 6616800.0],
          resolutions: [
            529.1677250021168,
            264.5838625010584,
            132.2919312505292,
            66.1459656252646,
            33.86673440013547,
            16.933367200067735,
            8.466683600033868,
            4.233341800016934,
            2.116670900008467,
            1.0583354500042335,
            0.5291677250021167,
            0.26458386250105836,
            0.13229193125052918,
            0.06614596562526459
          ],
          extent: extent
        }),
        projection: projection
      })
    })
  ],
  view: new View({
    center: getCenter(extent),
    zoom: 8,
    projection: projection
  })
});

https://codesandbox.io/s/ancient-silence-ie6dj?file=/main.js:0-1598

1
  • I tried it and it worked out. Many Thanks! Commented Aug 29, 2020 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.